diff options
author | Julius Härtl <jus@bitgrid.net> | 2020-01-16 22:18:01 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2020-01-16 22:18:01 +0300 |
commit | c9a17f3875d0c5dd0ebb2b21f996f9f47d5cad53 (patch) | |
tree | 9d0f6e7ead0ea92733b883bb9ee38f98099db9bf /apps/settings/css/settings.scss | |
parent | 011d70d882e113c27a7be6936677bac40c45e7a2 (diff) |
Fix indentation
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'apps/settings/css/settings.scss')
-rw-r--r-- | apps/settings/css/settings.scss | 2398 |
1 files changed, 1199 insertions, 1199 deletions
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss index 608bd1c3f63..bd6446ad165 100644 --- a/apps/settings/css/settings.scss +++ b/apps/settings/css/settings.scss @@ -3,1770 +3,1770 @@ See the COPYING-README file. */ input { - &#openid, &#webdav { - width: 20em; - } + &#openid, &#webdav { + width: 20em; + } } /* PERSONAL */ .clear { - clear: both; + clear: both; } /* icons for sidebar */ .nav-icon-personal-settings { - @include icon-color('personal', 'settings', $color-black); + @include icon-color('personal', 'settings', $color-black); } .nav-icon-security { - @include icon-color('toggle-filelist', 'settings', $color-black); + @include icon-color('toggle-filelist', 'settings', $color-black); } .nav-icon-clientsbox { - @include icon-color('change', 'settings', $color-black); + @include icon-color('change', 'settings', $color-black); } .nav-icon-federated-cloud { - @include icon-color('share', 'settings', $color-black); + @include icon-color('share', 'settings', $color-black); } .nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate { - @include icon-color('password', 'settings', $color-black); + @include icon-color('password', 'settings', $color-black); } #avatarform { - .avatardiv { - margin: 10px auto; - } + .avatardiv { + margin: 10px auto; + } - .warning { - width: 100%; - } + .warning { + width: 100%; + } - .jcrop-keymgr { - display: none !important; - } + .jcrop-keymgr { + display: none !important; + } } #displayavatar { - text-align: center; + text-align: center; } #uploadavatarbutton, #selectavatar, #removeavatar { - padding: 21px; + padding: 21px; } .jcrop-holder { - z-index: 500; + z-index: 500; } #cropper { - float: left; - z-index: 500; - /* float cropper above settings page to prevent unexpected flowing from dynamically sized element */ - position: fixed; - background-color: rgba(0, 0, 0, 0.2); - box-sizing: border-box; - top: 45px; - left: 0; - width: 100%; - height: calc(100% - 45px); - - .inner-container { - z-index: 2001; - /* above the top bar if needed */ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: #fff; - color: #333; - border-radius: var(--border-radius-large); - box-shadow: 0 0 10px var(--color-box-shadow); - padding: 15px; - - .jcrop-holder, - .jcrop-holder img, - img.jcrop-preview { - border-radius: var(--border-radius); - } + float: left; + z-index: 500; + /* float cropper above settings page to prevent unexpected flowing from dynamically sized element */ + position: fixed; + background-color: rgba(0, 0, 0, 0.2); + box-sizing: border-box; + top: 45px; + left: 0; + width: 100%; + height: calc(100% - 45px); + + .inner-container { + z-index: 2001; + /* above the top bar if needed */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: #fff; + color: #333; + border-radius: var(--border-radius-large); + box-shadow: 0 0 10px var(--color-box-shadow); + padding: 15px; + + .jcrop-holder, + .jcrop-holder img, + img.jcrop-preview { + border-radius: var(--border-radius); + } - .button { - margin-top: 15px; - } + .button { + margin-top: 15px; + } - .primary { - float: right; + .primary { + float: right; + } } - } } #personal-settings-avatar-container { - display: inline-grid; - grid-template-columns: 1fr; - grid-template-rows: 2fr 1fr; - vertical-align: top; + display: inline-grid; + grid-template-columns: 1fr; + grid-template-rows: 2fr 1fr; + vertical-align: top; } .profile-settings-container { - display: inline-grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr 2fr 1fr; + display: inline-grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 2fr 1fr; } .personal-show-container { - width: 100%; + width: 100%; } .personal-settings-setting-box input { - &[type='text'], &[type='email'], &[type='tel'], &[type='url'] { - width: 100%; - } + &[type='text'], &[type='email'], &[type='tel'], &[type='url'] { + width: 100%; + } } select { - &#timezone, - &#languageinput, - &#localeinput { - width: 100%; - } + &#timezone, + &#languageinput, + &#localeinput { + width: 100%; + } } #personal-settings { - display: grid; - padding: 20px; - max-width: 1500px; - grid-template-columns: 1fr 2fr 1fr; + display: grid; + padding: 20px; + max-width: 1500px; + grid-template-columns: 1fr 2fr 1fr; - .section { - padding: 10px 10px; - border: 0; + .section { + padding: 10px 10px; + border: 0; - h2 { - margin-bottom: 12px; + h2 { + margin-bottom: 12px; + } } - } - .personal-info { - margin-right: 10%; - margin-bottom: 12px; - margin-top: 12px; - } + .personal-info { + margin-right: 10%; + margin-bottom: 12px; + margin-top: 12px; + } - .personal-info[class^='icon-'], .personal-info[class*=' icon-'] { - background-position: 0px 2px; - padding-left: 30px; - opacity: 0.7; - } + .personal-info[class^='icon-'], .personal-info[class*=' icon-'] { + background-position: 0px 2px; + padding-left: 30px; + opacity: 0.7; + } } @media (min-width: 1200px) and (max-width: 1400px) { - #personal-settings { - display: grid; - grid-template-columns: 1fr 2fr; + #personal-settings { + display: grid; + grid-template-columns: 1fr 2fr; - #personal-settings-avatar-container { - grid-template-columns: 1fr; - grid-template-rows: 1fr; - } + #personal-settings-avatar-container { + grid-template-columns: 1fr; + grid-template-rows: 1fr; + } - .personal-settings-container { - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr; - } + .personal-settings-container { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + } - .profile-settings-container { - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - grid-column: 2; + .profile-settings-container { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + grid-column: 2; + } } - } } @media (max-width: 1200px) { - #personal-settings { - display: grid; - grid-template-columns: 1fr; + #personal-settings { + display: grid; + grid-template-columns: 1fr; - #personal-settings-avatar-container { - grid-template-rows: 1fr; - } + #personal-settings-avatar-container { + grid-template-rows: 1fr; + } - .personal-settings-container { - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr; - } + .personal-settings-container { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + } - .profile-settings-container { - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; + .profile-settings-container { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + } } - } } @media (max-width: 560px) { - #personal-settings { - display: grid; - grid-template-columns: 1fr; + #personal-settings { + display: grid; + grid-template-columns: 1fr; - #personal-settings-avatar-container { - grid-template-rows: 1fr; - } + #personal-settings-avatar-container { + grid-template-rows: 1fr; + } - .personal-settings-container { - grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; - } + .personal-settings-container { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; + } - .profile-settings-container { - grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr; + .profile-settings-container { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + } } - } } .personal-settings-container { - display: inline-grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr 2fr; + display: inline-grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 2fr; - &:after { - clear: both; - } + &:after { + clear: both; + } - > div { - h3 { - position: relative; - display: inline-flex; - flex-wrap: nowrap; - justify-content: flex-start; - width: 100%; + > div { + h3 { + position: relative; + display: inline-flex; + flex-wrap: nowrap; + justify-content: flex-start; + width: 100%; - > label { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } + > label { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } - > form span { - &[class^='icon-checkmark'], &[class^='icon-error'] { - position: relative; - right: 8px; - top: -28px; - pointer-events: none; - float: right; - } + > form span { + &[class^='icon-checkmark'], &[class^='icon-error'] { + position: relative; + right: 8px; + top: -28px; + pointer-events: none; + float: right; + } + } } - } - .verify { - position: relative; - left: 100%; - top: 0; - height: 0; + .verify { + position: relative; + left: 100%; + top: 0; + height: 0; - img { - padding: 12px 7px 6px; + img { + padding: 12px 7px 6px; + } } - } - .verify-action { - cursor: pointer; - } + .verify-action { + cursor: pointer; + } - input:disabled { - background-color: white; - color: black; - border: none; - opacity: 100; - } + input:disabled { + background-color: white; + color: black; + border: none; + opacity: 100; + } } #body-settings #quota { - cursor: default; - position: relative; + cursor: default; + position: relative; - progress { - height: 6px; + progress { + height: 6px; - &::-moz-progress-bar { - border-radius: 3px 0 0 3px; - } + &::-moz-progress-bar { + border-radius: 3px 0 0 3px; + } - &::-webkit-progress-value { - border-radius: 3px 0 0 3px; + &::-webkit-progress-value { + border-radius: 3px 0 0 3px; + } } - } - div { - font-weight: normal; - white-space: nowrap; - } + div { + font-weight: normal; + white-space: nowrap; + } } /* verify accounts */ /* only show pointer cursor when popup will be there */ .verification-dialog { - display: none; - right: -9px; - top: 40px; - width: 275px; + display: none; + right: -9px; + top: 40px; + width: 275px; - p { - padding: 10px; - } + p { + padding: 10px; + } - .verificationCode { - font-family: monospace; - display: block; - overflow-wrap: break-word; - } + .verificationCode { + font-family: monospace; + display: block; + overflow-wrap: break-word; + } } .federation-menu { - position: relative; - cursor: pointer; - margin-left: 10px; + position: relative; + cursor: pointer; + margin-left: 10px; - &:focus { - .icon-federation-menu { - opacity: 0.7; + &:focus { + .icon-federation-menu { + opacity: 0.7; + } } - } - - .icon-federation-menu { - padding-left: 16px; - background-size: 16px; - background-position: left center; - opacity: .3; - cursor: inherit; - .icon-triangle-s { - display: inline-block; - vertical-align: middle; - cursor: inherit; + .icon-federation-menu { + padding-left: 16px; + background-size: 16px; + background-position: left center; + opacity: .3; + cursor: inherit; + + .icon-triangle-s { + display: inline-block; + vertical-align: middle; + cursor: inherit; + } } - } - .federationScopeMenu { - top: 44px; + .federationScopeMenu { + top: 44px; - &.popovermenu { - .menuitem { - // override h3 heading font size - font-size: 12.8px; - line-height: 1.6em; + &.popovermenu { + .menuitem { + // override h3 heading font size + font-size: 12.8px; + line-height: 1.6em; - .menuitem-text-detail { - opacity: .75; - } + .menuitem-text-detail { + opacity: .75; + } - &.active { - box-shadow: inset 2px 0 var(--color-primary); + &.active { + box-shadow: inset 2px 0 var(--color-primary); - .menuitem-text { - font-weight: bold; - } + .menuitem-text { + font-weight: bold; + } + } + } } - } } - } } #groups-groups { - padding-top: 5px; + padding-top: 5px; } .clientsbox img { - height: 60px; + height: 60px; } #sslCertificate { - tr.expired { - background-color: rgba(255, 0, 0, 0.5); - } + tr.expired { + background-color: rgba(255, 0, 0, 0.5); + } - td { - padding: 5px; - } + td { + padding: 5px; + } } #displaynameerror, #displaynamechanged { - display: none; + display: none; } input#identity { - width: 20em; + width: 20em; } #showWizard { - display: inline-block; + display: inline-block; } .msg { - &.success { - color: #fff; - background-color: #47a447; - padding: 3px; - } + &.success { + color: #fff; + background-color: #47a447; + padding: 3px; + } - &.error { - color: #fff; - background-color: #d2322d; - padding: 3px; - } + &.error { + color: #fff; + background-color: #d2322d; + padding: 3px; + } } table.nostyle { - label { - margin-right: 2em; - } + label { + margin-right: 2em; + } - td { - padding: 0.2em 0; - } + td { + padding: 0.2em 0; + } } #security-password { - #passwordform { - display: flex; - flex-wrap: wrap; + #passwordform { + display: flex; + flex-wrap: wrap; - #pass1, .personal-show-container, #passwordbutton { - flex-shrink: 1; - width: 200px; - min-width: 150px; - } + #pass1, .personal-show-container, #passwordbutton { + flex-shrink: 1; + width: 200px; + min-width: 150px; + } - #pass2 { - width: 100%; - } + #pass2 { + width: 100%; + } - .password-state { - display: inline-block; - } + .password-state { + display: inline-block; + } - .strengthify-wrapper { - position: absolute; - left: 0; - width: 100%; - border-radius: 0 0 2px 2px; - margin-top: -6px; - overflow: hidden; - height: 3px; + .strengthify-wrapper { + position: absolute; + left: 0; + width: 100%; + border-radius: 0 0 2px 2px; + margin-top: -6px; + overflow: hidden; + height: 3px; + } } - } } /* Two-Factor Authentication (2FA) */ #two-factor-auth { - h3 { - margin-top: 24px; - } + h3 { + margin-top: 24px; + } - li > div { - margin-left: 20px; - } + li > div { + margin-left: 20px; + } - .two-factor-provider-settings-icon { - width: 16px; - height: 16px; - vertical-align: sub; - } + .two-factor-provider-settings-icon { + width: 16px; + height: 16px; + vertical-align: sub; + } } .social-button { - padding-left: 0 !important; - margin-left: -10px; + padding-left: 0 !important; + margin-left: -10px; - img { - padding: 10px; - } + img { + padding: 10px; + } } /* USERS */ .isgroup { - .groupname { - width: 85%; - display: block; - overflow: hidden; - text-overflow: ellipsis; - } + .groupname { + width: 85%; + display: block; + overflow: hidden; + text-overflow: ellipsis; + } - &.active .groupname { - width: 65%; - } + &.active .groupname { + width: 65%; + } } li.active { - .delete, - .rename { - display: block; - } + .delete, + .rename { + display: block; + } } .app-navigation-entry-utils { - .delete, - .rename { - display: none; - } + .delete, + .rename { + display: none; + } } #usersearchform { - position: absolute; - top: 2px; - right: 0; + position: absolute; + top: 2px; + right: 0; - input { - width: 150px; - } + input { + width: 150px; + } - label { - font-weight: bold; - } + label { + font-weight: bold; + } } /* display table at full width */ table.grid { - width: 100%; - - th { - height: 2em; - color: #999; - border-bottom: 1px solid var(--color-border); - padding: 0 .5em; - padding-left: .8em; - text-align: left; - font-weight: normal; - } - - td { - border-bottom: 1px solid var(--color-border); - padding: 0 .5em; - padding-left: .8em; - text-align: left; - font-weight: normal; - } + width: 100%; + + th { + height: 2em; + color: #999; + border-bottom: 1px solid var(--color-border); + padding: 0 .5em; + padding-left: .8em; + text-align: left; + font-weight: normal; + } + + td { + border-bottom: 1px solid var(--color-border); + padding: 0 .5em; + padding-left: .8em; + text-align: left; + font-weight: normal; + } } td, th { - &.name { - padding-left: .8em; - min-width: 5em; - max-width: 12em; - text-overflow: ellipsis; - overflow: hidden; - } + &.name { + padding-left: .8em; + min-width: 5em; + max-width: 12em; + text-overflow: ellipsis; + overflow: hidden; + } - &.password { - padding-left: .8em; + &.password { + padding-left: .8em; - > img { - visibility: hidden; + > img { + visibility: hidden; + } } - } - &.displayName > img { - visibility: hidden; - } + &.displayName > img { + visibility: hidden; + } - &.password, - &.mailAddress { - min-width: 5em; - max-width: 12em; - cursor: pointer; + &.password, + &.mailAddress { + min-width: 5em; + max-width: 12em; + cursor: pointer; - span { - width: 90%; - display: inline-block; - text-overflow: ellipsis; - overflow: hidden; + span { + width: 90%; + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + } } - } - &.mailAddress { - cursor: pointer; - } + &.mailAddress { + cursor: pointer; + } - &.password > span { - margin-right: 1.2em; - color: #C7C7C7; - } + &.password > span { + margin-right: 1.2em; + color: #C7C7C7; + } } span.usersLastLoginTooltip { - white-space: nowrap; + white-space: nowrap; } /* dropdowns will be relative to this element */ #userlist { - position: relative; + position: relative; - .storageLocation, .userBackend, .lastLogin { - display: none; - } + .storageLocation, .userBackend, .lastLogin { + display: none; + } - th.name { - color: #000; - } + th.name { + color: #000; + } - tr { - height: 50px; - } + tr { + height: 50px; + } - .mailAddress .loading-small { - width: 16px; - height: 16px; - margin-left: -26px; - position: relative; - top: 3px; - } + .mailAddress .loading-small { + width: 16px; + height: 16px; + margin-left: -26px; + position: relative; + top: 3px; + } - .groupsListContainer.hidden { - display: none; - } + .groupsListContainer.hidden { + display: none; + } - thead th, - thead tr { - z-index: 100; - background-color: var(--color-main-background); - @include position('sticky'); - // positional attribute is required for position to take affect. - top: 0; - } + thead th, + thead tr { + z-index: 100; + background-color: var(--color-main-background); + @include position('sticky'); + // positional attribute is required for position to take affect. + top: 0; + } } #newuser { - .groupsListContainer.hidden { - display: none; - } + .groupsListContainer.hidden { + display: none; + } - .multiselect { - min-width: 150px !important; - position: relative; - top: -1px; - } + .multiselect { + min-width: 150px !important; + position: relative; + top: -1px; + } - input { - &:not([type='submit']), - &:not([type='reset']) { - width: 100%; + input { + &:not([type='submit']), + &:not([type='reset']) { + width: 100%; + } } - } - .userActions { - position: sticky; - right: 60px; - z-index: 20; - } + .userActions { + position: sticky; + right: 60px; + z-index: 20; + } - .userActions input { - width: 44px; - height: 44px; + .userActions input { + width: 44px; + height: 44px; - &.icon-close { - border: none; - background-color: initial; - opacity: .5; - } + &.icon-close { + border: none; + background-color: initial; + opacity: .5; + } - &:hover { - opacity: 1; + &:hover { + opacity: 1; + } } - } } /* used to highlight a user row in red */ #userlist tr.row-warning { - background-color: #FDD; + background-color: #FDD; } /* APPS */ #app-content > svg.app-filter { - float: left; - height: 0; - width: 0; + float: left; + height: 0; + width: 0; } #app-category-app-bundles { - margin-bottom: 20px; + margin-bottom: 20px; } .appinfo { - margin: 1em 40px; + margin: 1em 40px; } #app-navigation { - /* Navigation icons */ - img { - margin-bottom: -3px; - margin-right: 6px; - width: 16px; - } + /* Navigation icons */ + img { + margin-bottom: -3px; + margin-right: 6px; + width: 16px; + } - li span.no-icon { - padding-left: 32px; - } + li span.no-icon { + padding-left: 32px; + } - ul li.active > span.utils { - .delete, .rename { - display: block; + ul li.active > span.utils { + .delete, .rename { + display: block; + } } - } - .appwarning { - background: #fcc; - } + .appwarning { + background: #fcc; + } - &.appwarning:hover { - background: #fbb; - } + &.appwarning:hover { + background: #fbb; + } - .app-external { - color: var(--color-text-maxcontrast); - } + .app-external { + color: var(--color-text-maxcontrast); + } } span.version { - margin-left: 1em; - margin-right: 1em; - color: var(--color-text-maxcontrast); + margin-left: 1em; + margin-right: 1em; + color: var(--color-text-maxcontrast); } .app-version { - color: var(--color-text-maxcontrast); + color: var(--color-text-maxcontrast); } .app-level { - margin-top: 8px; + margin-top: 8px; - span { - color: var(--color-text-maxcontrast); - background-color: transparent; - border: 1px solid var(--color-text-maxcontrast); - border-radius: var(--border-radius); - padding: 3px 6px; - } + span { + color: var(--color-text-maxcontrast); + background-color: transparent; + border: 1px solid var(--color-text-maxcontrast); + border-radius: var(--border-radius); + padding: 3px 6px; + } - a { - padding: 10px; - margin: -6px; - white-space: nowrap; - } + a { + padding: 10px; + margin: -6px; + white-space: nowrap; + } - .official { - background-position: left center; - background-position: 5px center; - padding-left: 25px; - } + .official { + background-position: left center; + background-position: 5px center; + padding-left: 25px; + } - .supported { - border-color: var(--color-success); - background-position: left center; - background-position: 5px center; - padding-left: 25px; - color: var(--color-success); - } + .supported { + border-color: var(--color-success); + background-position: left center; + background-position: 5px center; + padding-left: 25px; + color: var(--color-success); + } } .app-score { - position: relative; - top: 4px; - opacity: .5; + position: relative; + top: 4px; + opacity: .5; } .app-settings-content { - #searchresults { - display: none; - } + #searchresults { + display: none; + } } #apps-list.store { - .section { - border: 0; - } + .section { + border: 0; + } - .app-name { - display: block; - margin: 5px 0; - } + .app-name { + display: block; + margin: 5px 0; + } - .app-name, .app-image * { - cursor: pointer; - } + .app-name, .app-image * { + cursor: pointer; + } - .app-summary { - opacity: .7; - } + .app-summary { + opacity: .7; + } - .app-image-icon .icon-settings-dark { - width: 100%; - height: 150px; - background-size: 45px; - opacity: 0.5; - } + .app-image-icon .icon-settings-dark { + width: 100%; + height: 150px; + background-size: 45px; + opacity: 0.5; + } - .app-score-image { - height: 14px; - } + .app-score-image { + height: 14px; + } - .actions { - margin-top: 10px; - } + .actions { + margin-top: 10px; + } } #app-sidebar #app-details-view { - h2 { - .icon-settings-dark, - svg { - display: inline-block; - width: 16px; - height: 16px; - margin-right: 10px; - opacity: .7; - } - } - - .app-level { - clear: right; - width: 100%; + h2 { + .icon-settings-dark, + svg { + display: inline-block; + width: 16px; + height: 16px; + margin-right: 10px; + opacity: .7; + } + } - .supported, - .official { - vertical-align: top; + .app-level { + clear: right; + width: 100%; + + .supported, + .official { + vertical-align: top; + } + + .app-score-image { + float: right; + } } - .app-score-image { - float: right; + .app-author, .app-licence { + color: var(--color-text-maxcontrast); } - } - .app-author, .app-licence { - color: var(--color-text-maxcontrast); - } + .app-dependencies { + margin: 10px 0; + } - .app-dependencies { - margin: 10px 0; - } + .app-description p { + margin: 10px 0; + } - .app-description p { - margin: 10px 0; - } + .close { + position: absolute; + top: 0; + right: 0; + padding: 14px; + opacity: 0.5; + z-index: 1; + width: 44px; + height: 44px; + } - .close { - position: absolute; - top: 0; - right: 0; - padding: 14px; - opacity: 0.5; - z-index: 1; - width: 44px; - height: 44px; - } - - .actions { - display: flex; - align-items: center; + .actions { + display: flex; + align-items: center; - .app-groups { - padding: 5px; + .app-groups { + padding: 5px; + } } - } - .appslink { - text-decoration: underline; - margin-right: 5px; - } + .appslink { + text-decoration: underline; + margin-right: 5px; + } - .app-level, - .actions, - .documentation, - .app-dependencies, - .app-description { - margin: 20px 0; - } + .app-level, + .actions, + .documentation, + .app-dependencies, + .app-description { + margin: 20px 0; + } } @media only screen and (min-width: 1601px) { - .store .section { - width: 25%; - } - .with-app-sidebar .store .section { - width: 33%; - } + .store .section { + width: 25%; + } + .with-app-sidebar .store .section { + width: 33%; + } } @media only screen and (max-width: 1600px) { - .store .section { - width: 25%; - } - .with-app-sidebar .store .section { - width: 33%; - } + .store .section { + width: 25%; + } + .with-app-sidebar .store .section { + width: 33%; + } } @media only screen and (max-width: 1400px) { - .store .section { - width: 33%; - } - .with-app-sidebar .store .section { - width: 50%; - } + .store .section { + width: 33%; + } + .with-app-sidebar .store .section { + width: 50%; + } } @media only screen and (max-width: 900px) { - .store .section { - width: 50%; - } - .with-app-sidebar .store .section { - width: 100%; - } + .store .section { + width: 50%; + } + .with-app-sidebar .store .section { + width: 100%; + } } @media only screen and (max-width: $breakpoint-mobile) { - .store .section { - width: 50%; - } + .store .section { + width: 50%; + } } @media only screen and (max-width: 480px) { - .store .section { - width: 100%; - } + .store .section { + width: 100%; + } } /* hide app version and level on narrower screens */ @media only screen and (max-width: 900px) { - .apps-list.installed { - .app-version, .app-level { - display: none !important; + .apps-list.installed { + .app-version, .app-level { + display: none !important; + } } - } } @media only screen and (max-width: 500px) { - .apps-list.installed .app-groups { - display: none !important; - } + .apps-list.installed .app-groups { + display: none !important; + } } #version.section { - border-bottom: none; + border-bottom: none; } .section { - margin-bottom: 0; - /* section divider lines, none needed for last one */ - &:not(:last-child) { - border-bottom: 1px solid var(--color-border); - } + margin-bottom: 0; + /* section divider lines, none needed for last one */ + &:not(:last-child) { + border-bottom: 1px solid var(--color-border); + } - /* correctly display help icons next to headings */ - h2 { - margin-bottom: 22px; + /* correctly display help icons next to headings */ + h2 { + margin-bottom: 22px; - .icon-info { - padding: 6px 20px; - vertical-align: text-bottom; - display: inline-block; + .icon-info { + padding: 6px 20px; + vertical-align: text-bottom; + display: inline-block; + } } - } } .personal-settings-setting-box .section { - padding: 10px 30px; + padding: 10px 30px; } .followupsection { - display: block; - padding: 0 30px 30px 30px; - color: #555; + display: block; + padding: 0 30px 30px 30px; + color: #555; } .app-image { - position: relative; - height: 150px; - opacity: 1; - overflow: hidden; + position: relative; + height: 150px; + opacity: 1; + overflow: hidden; } .app-name, .app-version, .app-score, .app-level { - display: inline-block; + display: inline-block; } .app-description-toggle-show, .app-description-toggle-hide { - clear: both; - padding: 7px 0; - cursor: pointer; - opacity: .5; + clear: both; + padding: 7px 0; + cursor: pointer; + opacity: .5; } .app-description-container { - clear: both; - position: relative; - top: 7px; + clear: both; + position: relative; + top: 7px; } .app-description { - clear: both; + clear: both; } #app-category-1 { - margin-bottom: 18px; + margin-bottom: 18px; } /* capitalize 'Other' category */ #app-category-925 { - text-transform: capitalize; + text-transform: capitalize; } .app-dependencies { - color: #ce3702; + color: #ce3702; } .missing-dependencies { - list-style: initial; - list-style-type: initial; - list-style-position: inside; + list-style: initial; + list-style-type: initial; + list-style-position: inside; } .apps-list { - .section { - cursor: pointer; - } - - .app-list-move { - transition: transform 1s; - } + .section { + cursor: pointer; + } - #app-list-update-all { - margin-left: 10px; - } + .app-list-move { + transition: transform 1s; + } - .counter { - padding-left: $header-height - 10px; - margin: 10px; - } + #app-list-update-all { + margin-left: 10px; + } - &.installed { - .apps-list-container { - display: table; - width: 100%; - height: auto; + .counter { + padding-left: $header-height - 10px; + margin: 10px; } - margin-bottom: 100px; + &.installed { + .apps-list-container { + display: table; + width: 100%; + height: auto; + } - .section { - display: table-row; - padding: 0; - margin: 0; + margin-bottom: 100px; + + .section { + display: table-row; + padding: 0; + margin: 0; + + > * { + display: table-cell; + height: initial; + vertical-align: middle; + float: none; + border-bottom: 1px solid var(--color-border); + padding: 6px; + box-sizing: border-box; + } - > * { - display: table-cell; - height: initial; - vertical-align: middle; - float: none; - border-bottom: 1px solid var(--color-border); - padding: 6px; - box-sizing: border-box; - } + &.selected { + background-color: var(--color-background-dark); + } - &.selected { - background-color: var(--color-background-dark); - } + } - } + .groups-enable { + margin-top: 0; + + label { + margin-right: 3px; + } + } - .groups-enable { - margin-top: 0; + .app-image { + width: 44px; + height: auto; + text-align: right; + } - label { - margin-right: 3px; - } - } + .app-image-icon svg, + .app-image-icon .icon-settings-dark { + margin-top: 5px; + width: 20px; + height: 20px; + opacity: .5; + background-size: cover; + display: inline-block; + } + + .actions { + text-align: right; - .app-image { - width: 44px; - height: auto; - text-align: right; + .icon-loading-small { + display: inline-block; + top: 4px; + margin-right: 10px; + } + } } - .app-image-icon svg, - .app-image-icon .icon-settings-dark { - margin-top: 5px; - width: 20px; - height: 20px; - opacity: .5; - background-size: cover; - display: inline-block; + &:not(.installed) .app-image-icon svg { + position: absolute; + bottom: 43px; + /* position halfway vertically */ + width: 64px; + height: 64px; + opacity: .1; } - .actions { - text-align: right; + display: flex; + flex-wrap: wrap; + align-content: flex-start; - .icon-loading-small { - display: inline-block; - top: 4px; - margin-right: 10px; - } + &.hidden { + display: none; } - } - - &:not(.installed) .app-image-icon svg { - position: absolute; - bottom: 43px; - /* position halfway vertically */ - width: 64px; - height: 64px; - opacity: .1; - } - - display: flex; - flex-wrap: wrap; - align-content: flex-start; - - &.hidden { - display: none; - } - .section { - position: relative; - flex: 0 0 auto; + .section { + position: relative; + flex: 0 0 auto; - h2.app-name { - display: block; - margin: 8px 0; - } + h2.app-name { + display: block; + margin: 8px 0; + } - &:hover { - background-color: var(--color-background-dark); + &:hover { + background-color: var(--color-background-dark); + } } - } - .app-description { - p { - margin: 10px 0; - } + .app-description { + p { + margin: 10px 0; + } - ul { - list-style: disc; - } + ul { + list-style: disc; + } - ol { - list-style: decimal; + ol { + list-style: decimal; - ol, ul { - padding-left: 15px; - } - } + ol, ul { + padding-left: 15px; + } + } - > { - ul, ol { - margin-left: 19px; - } - } + > { + ul, ol { + margin-left: 19px; + } + } - ul { - ol, ul { - padding-left: 15px; - } + ul { + ol, ul { + padding-left: 15px; + } + } } - } - /* Bundle header */ - .apps-header { - display: table-row; - position: relative; + /* Bundle header */ + .apps-header { + display: table-row; + position: relative; - div { - display: table-cell; - height: 70px; - } + div { + display: table-cell; + height: 70px; + } - h2 { - display: table-cell; - position: absolute; - padding-left: 6px; - padding-top: 15px; + h2 { + display: table-cell; + position: absolute; + padding-left: 6px; + padding-top: 15px; - .enable { - position: relative; - top: -1px; - margin-left: 12px; - } + .enable { + position: relative; + top: -1px; + margin-left: 12px; + } - + .section { - margin-top: 50px; - } + + .section { + margin-top: 50px; + } + } } - } } #apps-list-search { - .section { - h2 { - margin-bottom: 0; + .section { + h2 { + margin-bottom: 0; + } } - } } /* LOG */ #log { - white-space: normal; - margin-bottom: 14px; + white-space: normal; + margin-bottom: 14px; } #lessLog { - display: none; + display: none; } table.grid td.date { - white-space: nowrap; + white-space: nowrap; } #log-section p { - margin-top: 20px; + margin-top: 20px; } #security-warning-state-ok, #security-warning-state-warning, #security-warning-state-failure, #security-warning-state-loading { - span { - vertical-align: middle; + span { + vertical-align: middle; - &.message { - padding: 12px; - } + &.message { + padding: 12px; + } - &.icon { - width: 32px; - height: 32px; - background-position: center center; - display: inline-block; - border-radius: 50%; - } + &.icon { + width: 32px; + height: 32px; + background-position: center center; + display: inline-block; + border-radius: 50%; + } - &.icon-checkmark-white { - background-color: var(--color-success); - } + &.icon-checkmark-white { + background-color: var(--color-success); + } - &.icon-error-white { - background-color: var(--color-warning); - } + &.icon-error-white { + background-color: var(--color-warning); + } - &.icon-close-white { - background-color: var(--color-error); + &.icon-close-white { + background-color: var(--color-error); + } } - } } #shareAPI { - p { - padding-bottom: 0.8em; - } + p { + padding-bottom: 0.8em; + } - input#shareapiExpireAfterNDays { - width: 40px; - } + input#shareapiExpireAfterNDays { + width: 40px; + } - .indent { - padding-left: 28px; - } + .indent { + padding-left: 28px; + } - .double-indent { - padding-left: 56px; - } + .double-indent { + padding-left: 56px; + } - .nocheckbox { - padding-left: 20px; - } + .nocheckbox { + padding-left: 20px; + } } #shareApiDefaultPermissionsSection label { - margin-right: 20px; + margin-right: 20px; } #fileSharingSettings h3 { - display: inline-block; + display: inline-block; } #publicShareDisclaimerText { - width: calc(100% - 23px); - /* 20 px left margin, 3 px right margin */ - max-width: 600px; - height: 150px; - margin-left: 20px; - box-sizing: border-box; + width: calc(100% - 23px); + /* 20 px left margin, 3 px right margin */ + max-width: 600px; + height: 150px; + margin-left: 20px; + box-sizing: border-box; } /* correctly display help icons next to headings */ .icon-info { - padding: 11px 20px; - vertical-align: text-bottom; - opacity: .5; + padding: 11px 20px; + vertical-align: text-bottom; + opacity: .5; } #two-factor-auth h2, #shareAPI h2, #encryptionAPI h2, #mail_general_settings h2 { - display: inline-block; + display: inline-block; } #encryptionAPI li { - list-style-type: initial; - margin-left: 20px; - padding: 5px 0; + list-style-type: initial; + margin-left: 20px; + padding: 5px 0; } .mail_settings p { - label:first-child { - display: inline-block; - width: 300px; - text-align: right; - } + label:first-child { + display: inline-block; + width: 300px; + text-align: right; + } - select:nth-child(2), - input:not([type='button']) { - width: 143px; - } + select:nth-child(2), + input:not([type='button']) { + width: 143px; + } } #mail_smtpport { - width: 40px; + width: 40px; } .cronlog { - margin-left: 10px; + margin-left: 10px; } .status { - display: inline-block; - height: 16px; - width: 16px; - vertical-align: text-bottom; + display: inline-block; + height: 16px; + width: 16px; + vertical-align: text-bottom; - &.success { - border-radius: 50%; - } + &.success { + border-radius: 50%; + } } #selectGroups select { - box-sizing: border-box; - display: inline-block; - height: 36px; - padding: 7px 10px; + box-sizing: border-box; + display: inline-block; + height: 36px; + padding: 7px 10px; } #log .log-message { - word-break: break-all; - min-width: 180px; + word-break: break-all; + min-width: 180px; } span { - &.success { - background-color: var(--color-success); - border-radius: var(--border-radius); - } + &.success { + background-color: var(--color-success); + border-radius: var(--border-radius); + } - &.error { - background-color: var(--color-error); - } + &.error { + background-color: var(--color-error); + } - &.indeterminate { - background-color: var(--color-warning); - border-radius: 40% 0; - } + &.indeterminate { + background-color: var(--color-warning); + border-radius: 40% 0; + } } /* OPERA hack for strengthify*/ doesnotexist:-o-prefocus, .strengthify-wrapper { - left: 185px; - width: 129px; + left: 185px; + width: 129px; } .trusted-domain-warning { - color: #fff; - padding: 5px; - background: #ce3702; - border-radius: 5px; - font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; + color: #fff; + padding: 5px; + background: #ce3702; + border-radius: 5px; + font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; } /* HELP */ .help-includes { - overflow: hidden !important; + overflow: hidden !important; } .help-iframe { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - border: 0; - overflow: auto; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + border: 0; + overflow: auto; } #postsetupchecks { - ul { - margin-left: 44px; - list-style: disc; + ul { + margin-left: 44px; + list-style: disc; - li { - margin: 10px 0; - } + li { + margin: 10px 0; + } - ul { - list-style: circle; + ul { + list-style: circle; + } } - } - .loading { - height: 50px; - background-position: left center; - } + .loading { + height: 50px; + background-position: left center; + } - .errors, .errors a { - color: var(--color-error); - } + .errors, .errors a { + color: var(--color-error); + } - .warnings, .warnings a { - color: var(--color-warning); - } + .warnings, .warnings a { + color: var(--color-warning); + } - .hint { - margin: 20px 0; - } + .hint { + margin: 20px 0; + } } #security-warning { - a { - text-decoration: underline; - } + a { + text-decoration: underline; + } - .extra-top-margin { - margin-top: 12px; - } + .extra-top-margin { + margin-top: 12px; + } } #admin-tips li { - list-style: initial; + list-style: initial; - a { - display: inline-block; - padding: 3px 0; - } + a { + display: inline-block; + padding: 3px 0; + } } #selectEncryptionModules { - margin-left: 30px; - padding: 10px; + margin-left: 30px; + padding: 10px; } #encryptionModules { - padding: 10px; + padding: 10px; } #warning { - color: red; + color: red; } .settings-hint { - margin-top: -12px; - margin-bottom: 12px; - opacity: .7; + margin-top: -12px; + margin-bottom: 12px; + opacity: .7; } /* USERS LIST -------------------------------------------------------------- */ #body-settings { - $grid-row-height: 60px; - $grid-col-min-width: 150px; + $grid-row-height: 60px; + $grid-col-min-width: 150px; - #app-content.user-list-grid { - display: grid; - grid-auto-columns: 1fr; - grid-auto-rows: $grid-row-height; - grid-column-gap: 20px; - - .row { - // TODO replace with css4 subgrid when available - // fallback for ie11 no grid - display: flex; - display: grid; - grid-row-start: span 1; - grid-gap: 3px; - align-items: center; - z-index: 0; - /* let's define the column until storage path, - what follows will be manually defined */ - grid-template-columns: 44px minmax($grid-col-min-width + 30px, 1fr) repeat(auto-fit, minmax($grid-col-min-width, 1fr)); - border-bottom: var(--color-border) 1px solid; - - &.disabled { - opacity: .5; - } - - /* grid col width */ - .name, - .password, - .mailAddress, - .languages, - .storageLocation, - .userBackend, - .lastLogin { - min-width: $grid-col-min-width; - display: flex; - color: var(--color-text-dark); - vertical-align: baseline; - } - - .groups, - .subadmins, - .quota { - .multiselect { - min-width: $grid-col-min-width; - color: var(--color-text-dark); - vertical-align: baseline; - } - } - - .obfuscated { - width: 400px; - opacity: .7; - } - - .userActions { - min-width: 44px; - position: sticky; - right: 40px; - z-index: 109; - } - - .subtitle { - color: var(--color-text-maxcontrast); - vertical-align: baseline; - } - - /* various */ - &#grid-header, - &#new-user { - @include position('sticky'); - align-self: normal; - background-color: var(--color-main-background); - z-index: 100; /* above multiselect */ - top: $header-height; - - &.sticky { - box-shadow: 0 -2px 10px 1px var(--color-box-shadow); - } - - /* fake input for groups validation */ - input#newgroups { - position: absolute; - opacity: 0; - width: 80% !important; - margin: 0 10%; - z-index: 0; - } - } - - // separate prop to set initial value to top: 50px - &#new-user { - height: 120px; + #app-content.user-list-grid { + display: grid; + grid-auto-columns: 1fr; + grid-auto-rows: $grid-row-height; + grid-column-gap: 20px; .row { - padding-top: 50px; - } - } - - &#grid-header { - color: var(--color-text-maxcontrast); - z-index: 60; /* above new-user */ - border-bottom-width: thin; - - #headerDisplayName, - #headerPassword, - #headerAddress, - #headerGroups, - #headerSubAdmins, - #theHeaderUserBackend, - #theHeaderLastLogin, - #headerQuota, - #theHeaderStorageLocation, - #headerLanguages { - /* Line up header text with column content for when there’s inputs */ - padding-left: 7px; - text-transform: none; - color: var(--color-text-maxcontrast); - vertical-align: baseline; - } - } - - &:hover { - input:not([type='submit']):not(:focus):not(:active) { - border-color: var(--color-border) !important; - } - - &:not(#grid-header) { - box-shadow: 5px 0 0 var(--color-primary-element) inset; - } - } - - > div, - > form { - grid-row: 1; - display: inline-flex; - color: var(--color-text-lighter); - position: relative; - - > input:not(:focus):not(:active) { - border-color: transparent; - cursor: pointer; - } - - > input:focus, > input:active { - + .icon-confirm { - display: block !important; - } - } - - /* inputs like mail, username, password */ - &:not(.userActions) > input:not([type='submit']) { - width: 100%; - min-width: 0; - } - - &.name { - word-break: break-all; - } - - &.displayName, - &.mailAddress { - > input { - text-overflow: ellipsis; - } - } + // TODO replace with css4 subgrid when available + // fallback for ie11 no grid + display: flex; + display: grid; + grid-row-start: span 1; + grid-gap: 3px; + align-items: center; + z-index: 0; + /* let's define the column until storage path, + what follows will be manually defined */ + grid-template-columns: 44px minmax($grid-col-min-width + 30px, 1fr) repeat(auto-fit, minmax($grid-col-min-width, 1fr)); + border-bottom: var(--color-border) 1px solid; + + &.disabled { + opacity: .5; + } - &.name, - &.userBackend { - /* better multi-line visual */ - line-height: 1.3em; - max-height: 100%; - overflow: hidden; - /* not supported by all browsers - so we keep the overflow hidden - as a fallback */ - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - } + /* grid col width */ + .name, + .password, + .mailAddress, + .languages, + .storageLocation, + .userBackend, + .lastLogin { + min-width: $grid-col-min-width; + display: flex; + color: var(--color-text-dark); + vertical-align: baseline; + } - &.quota { - height: 44px; - display: flex; - align-items: center; - justify-content: center; + .groups, + .subadmins, + .quota { + .multiselect { + min-width: $grid-col-min-width; + color: var(--color-text-dark); + vertical-align: baseline; + } + } - progress { - width: 100%; - margin: 0 10px; - height: 3px; - } - } + .obfuscated { + width: 400px; + opacity: .7; + } - .icon-confirm { - flex: 0 0 auto; - cursor: pointer; + .userActions { + min-width: 44px; + position: sticky; + right: 40px; + z-index: 109; + } - &:not(:active) { - display: none; - } - } + .subtitle { + color: var(--color-text-maxcontrast); + vertical-align: baseline; + } - &.avatar { - height: 32px; - width: 32px; - margin: 6px; + /* various */ + &#grid-header, + &#new-user { + @include position('sticky'); + align-self: normal; + background-color: var(--color-main-background); + z-index: 100; /* above multiselect */ + top: $header-height; + + &.sticky { + box-shadow: 0 -2px 10px 1px var(--color-box-shadow); + } + + /* fake input for groups validation */ + input#newgroups { + position: absolute; + opacity: 0; + width: 80% !important; + margin: 0 10%; + z-index: 0; + } + } - img { - display: block; - } - } + // separate prop to set initial value to top: 50px + &#new-user { + height: 120px; - &.userActions { - .action-item { - position: absolute; - } + .row { + padding-top: 50px; + } + } - #newsubmit { - width: 100%; - } + &#grid-header { + color: var(--color-text-maxcontrast); + z-index: 60; /* above new-user */ + border-bottom-width: thin; + + #headerDisplayName, + #headerPassword, + #headerAddress, + #headerGroups, + #headerSubAdmins, + #theHeaderUserBackend, + #theHeaderLastLogin, + #headerQuota, + #theHeaderStorageLocation, + #headerLanguages { + /* Line up header text with column content for when there’s inputs */ + padding-left: 7px; + text-transform: none; + color: var(--color-text-maxcontrast); + vertical-align: baseline; + } + } - .toggleUserActions { - position: relative; - display: block; - align-items: center; + &:hover { + input:not([type='submit']):not(:focus):not(:active) { + border-color: var(--color-border) !important; + } - .icon-more { - width: 44px; - height: 44px; - opacity: .5; - cursor: pointer; - margin-left: 40px; + &:not(#grid-header) { + box-shadow: 5px 0 0 var(--color-primary-element) inset; + } + } - &:hover { - opacity: .7; - } + > div, + > form { + grid-row: 1; + display: inline-flex; + color: var(--color-text-lighter); + position: relative; + + > input:not(:focus):not(:active) { + border-color: transparent; + cursor: pointer; + } + + > input:focus, > input:active { + + .icon-confirm { + display: block !important; + } + } + + /* inputs like mail, username, password */ + &:not(.userActions) > input:not([type='submit']) { + width: 100%; + min-width: 0; + } + + &.name { + word-break: break-all; + } + + &.displayName, + &.mailAddress { + > input { + text-overflow: ellipsis; + } + } + + &.name, + &.userBackend { + /* better multi-line visual */ + line-height: 1.3em; + max-height: 100%; + overflow: hidden; + /* not supported by all browsers + so we keep the overflow hidden + as a fallback */ + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + + &.quota { + height: 44px; + display: flex; + align-items: center; + justify-content: center; + + progress { + width: 100%; + margin: 0 10px; + height: 3px; + } + } + + .icon-confirm { + flex: 0 0 auto; + cursor: pointer; + + &:not(:active) { + display: none; + } + } + + &.avatar { + height: 32px; + width: 32px; + margin: 6px; + + img { + display: block; + } + } + + &.userActions { + .action-item { + position: absolute; + } + + #newsubmit { + width: 100%; + } + + .toggleUserActions { + position: relative; + display: block; + align-items: center; + + .icon-more { + width: 44px; + height: 44px; + opacity: .5; + cursor: pointer; + margin-left: 40px; + + &:hover { + opacity: .7; + } + } + } + + .feedback { + display: flex; + align-items: center; + white-space: nowrap; + transition: opacity 200ms ease-in-out; + + .icon-checkmark { + opacity: .5; + margin-right: 5px; + } + } + } + + /* Fill the grid cell */ + .multiselect.multiselect-vue { + width: 100%; + } } - } + } - .feedback { + .infinite-loading-container { display: flex; align-items: center; - white-space: nowrap; - transition: opacity 200ms ease-in-out; - - .icon-checkmark { - opacity: .5; - margin-right: 5px; - } - } + justify-content: center; + grid-row-start: span 4; } - /* Fill the grid cell */ - .multiselect.multiselect-vue { - width: 100%; + .users-list-end { + opacity: .5; + user-select: none; } - } - } - - .infinite-loading-container { - display: flex; - align-items: center; - justify-content: center; - grid-row-start: span 4; - } - - .users-list-end { - opacity: .5; - user-select: none; } - } } |