diff options
Diffstat (limited to 'apps/settings/css/settings.scss')
| -rw-r--r-- | apps/settings/css/settings.scss | 1557 |
1 files changed, 1557 insertions, 0 deletions
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss new file mode 100644 index 00000000000..02c85b5a34f --- /dev/null +++ b/apps/settings/css/settings.scss @@ -0,0 +1,1557 @@ +/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net + This file is licensed under the Affero General Public License version 3 or later. + See the COPYING-README file. */ + +input { + &#openid, &#webdav { + width: 20em; + } +} + +/* PERSONAL */ +.clear { + clear: both; +} + +/* icons for sidebar */ +.nav-icon-personal-settings { + @include icon-color('personal', 'settings', $color-black); +} + +.nav-icon-security { + @include icon-color('toggle-filelist', 'settings', $color-black); +} + +.nav-icon-clientsbox { + @include icon-color('change', 'settings', $color-black); +} + +.nav-icon-federated-cloud { + @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); +} + +#avatarform { + .avatardiv { + margin: 10px auto; + } + .warning { + width: 100%; + } + .jcrop-keymgr { + display: none !important; + } +} + +#displayavatar { + text-align: center; +} + +#uploadavatarbutton, #selectavatar, #removeavatar { + padding: 21px; +} + +.jcrop-holder { + 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); + } + + .button { + margin-top: 15px; + } + .primary { + float: right; + } + } +} + +#personal-settings-avatar-container { + 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; +} + +.personal-show-container { + width: 100%; +} + +.personal-settings-setting-box input { + &[type='text'], &[type='email'], &[type='tel'], &[type='url'] { + width: 100%; + } +} + +select { + &#timezone, + &#languageinput, + &#localeinput { + width: 100%; + } +} + +#personal-settings { + display: grid; + padding: 20px; + max-width: 1500px; + grid-template-columns:1fr 2fr 1fr; + .section { + padding: 10px 10px; + border: 0; + h2 { + margin-bottom: 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; + } +} + + +@media (min-width: 1200px) and (max-width: 1400px) { + #personal-settings { + display: grid; + grid-template-columns: 1fr 2fr; + #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; + } + .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-avatar-container { + grid-template-rows: 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; + } + } +} + +@media (max-width: 560px) { + #personal-settings { + display: grid; + grid-template-columns: 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; + } + .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; + &:after { + clear: both; + } + > 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; + } + } + > 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; + img { + padding: 12px 7px 6px; + } + } + .verify-action { + cursor: pointer; + } + input:disabled { + background-color: white; + color: black; + border: none; + opacity: 100; + } +} + + +#body-settings #quota { + cursor: default; + position: relative; + progress { + height: 6px; + &::-moz-progress-bar { + border-radius: 3px 0 0 3px; + } + &::-webkit-progress-value { + border-radius: 3px 0 0 3px; + } + } + 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; + p { + padding: 10px; + } + .verificationCode { + font-family: monospace; + display: block; + overflow-wrap: break-word; + } +} + +.federation-menu { + position: relative; + cursor: pointer; + margin-left: 10px; + &: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; + } + } + .federationScopeMenu { + top: 44px; + &.popovermenu { + .menuitem { + // override h3 heading font size + font-size: 12.8px; + line-height: 1.6em; + .menuitem-text-detail { + opacity: .75; + } + &.active { + box-shadow: inset 2px 0 var(--color-primary); + .menuitem-text { + font-weight: bold; + } + } + } + } + } +} + +#groups-groups { + padding-top: 5px; +} + +.clientsbox img { + height: 60px; +} + +#sslCertificate { + tr.expired { + background-color: rgba(255, 0, 0, 0.5); + } + td { + padding: 5px; + } +} + +#displaynameerror, +#displaynamechanged { + display: none; +} + +input#identity { + width: 20em; +} + +#showWizard { + display: inline-block; +} + +.msg { + &.success { + color: #fff; + background-color: #47a447; + padding: 3px; + } + &.error { + color: #fff; + background-color: #d2322d; + padding: 3px; + } +} + + + +table.nostyle { + label { + margin-right: 2em; + } + td { + padding: 0.2em 0; + } +} + +#security-password { + #passwordform { + display: flex; + flex-wrap: wrap; + #pass1, .personal-show-container, #passwordbutton { + flex-shrink: 1; + width: 200px; + min-width: 150px; + } + #pass2 { + width: 100%; + } + .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; + } + } +} + +/* Two-Factor Authentication (2FA) */ + +#two-factor-auth { + h3 { + margin-top: 24px; + } + + li > div { + margin-left: 20px; + } + + .two-factor-provider-settings-icon { + width: 16px; + height: 16px; + vertical-align: sub; + } +} + +.social-button { + padding-left: 0 !important; + margin-left: -10px; + img { + padding: 10px; + } +} + +/* USERS */ + +.isgroup { + .groupname { + width: 85%; + display: block; + overflow: hidden; + text-overflow: ellipsis; + } + &.active .groupname { + width: 65%; + } +} + +li.active { + .delete, + .rename { + display: block; + } +} + +.app-navigation-entry-utils { + .delete, + .rename { + display: none; + } +} + +#usersearchform { + position: absolute; + top: 2px; + right: 0; + input { + width: 150px; + } + 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; + } +} + +td, th { + &.name { + padding-left: .8em; + min-width: 5em; + max-width: 12em; + text-overflow: ellipsis; + overflow: hidden; + } + &.password { + padding-left: .8em; + > img { + visibility: hidden; + } + } + &.displayName > img { + visibility: hidden; + } + &.password, + &.displayName, + &.mailAddress { + min-width: 5em; + max-width: 12em; + cursor: pointer; + span { + width: 90%; + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + } + } + &.mailAddress { + cursor: pointer; + } + &.password > span { + margin-right: 1.2em; + color: #C7C7C7; + } +} + +span.usersLastLoginTooltip { + white-space: nowrap; +} + +/* dropdowns will be relative to this element */ +#userlist { + position: relative; + .storageLocation, .userBackend, .lastLogin { + display: none; + } + th.name { + color: #000; + } + tr { + height: 50px; + } + .mailAddress .loading-small { + width: 16px; + height: 16px; + margin-left: -26px; + position: relative; + top: 3px; + } + .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; + } +} + +#newuser { + .groupsListContainer.hidden { + display: none; + } + .multiselect { + min-width: 150px !important; + position: relative; + top: -1px; + } + input { + &:not([type='submit']), + &:not([type='reset']) { + width: 100%; + } + } + .userActions input { + width: 44px; + height: 44px; + &.icon-close { + border: none; + background-color: initial; + opacity: .5; + } + &:hover { + opacity: 1; + } + } +} + +/* used to highlight a user row in red */ + +#userlist tr.row-warning { + background-color: #FDD; +} + +/* APPS */ +#app-content > svg.app-filter { + float: left; + height: 0; + width: 0; +} + +#app-category-app-bundles { + margin-bottom: 20px; +} + +.appinfo { + margin: 1em 40px; +} + +#app-navigation { + /* Navigation icons */ + img { + margin-bottom: -3px; + margin-right: 6px; + width: 16px; + } + li span.no-icon { + padding-left: 32px; + } + ul li.active > span.utils { + .delete, .rename { + display: block; + } + } + .appwarning { + background: #fcc; + } + &.appwarning:hover { + background: #fbb; + } + .app-external { + color: var(--color-text-maxcontrast); + } +} + +span.version { + margin-left: 1em; + margin-right: 1em; + color: var(--color-text-maxcontrast); +} + +.app-version { + color: var(--color-text-maxcontrast); +} + +.app-level { + 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; + } + a { + padding: 10px; + margin: -6px; + white-space: nowrap; + } + .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) ; + } +} + +.app-score { + position: relative; + top: 4px; + opacity: .5; +} + +.app-settings-content { + #searchresults { + display: none; + } +} +#apps-list.store { + .section { + border: 0; + } + .app-name { + display: block; + margin: 5px 0; + } + .app-name, .app-image * { + cursor: pointer; + } + .app-summary { + opacity: .7; + } + .app-image-icon .icon-settings-dark { + width: 100%; + height: 150px; + background-size: 45px; + opacity: 0.5; + } + .app-score-image { + height: 14px; + } + .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%; + .supported, + .official { + vertical-align: top; + } + .app-score-image { + float: right; + } + } + .app-author, .app-licence { + color: var(--color-text-maxcontrast); + } + .app-dependencies { + 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; + } + .actions { + display: flex; + align-items: center; + + .app-groups{ + padding: 5px; + } + } + .appslink { + text-decoration: underline; + margin-right: 5px; + } + .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%; + } +} + +@media only screen and (max-width: 1600px) { + .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%; + } +} + +@media only screen and (max-width: 900px) { + .store .section { + width: 50%; + } + .with-app-sidebar .store .section { + width: 100%; + } +} + +@media only screen and (max-width: $breakpoint-mobile) { + .store .section { + width: 50%; + } +} + +@media only screen and (max-width: 480px) { + .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; + } + } +} + +@media only screen and (max-width: 500px) { + .apps-list.installed .app-groups { + display: none !important; + } +} + +#version.section { + 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); + } + + /* correctly display help icons next to headings */ + h2 { + margin-bottom: 22px; + .icon-info { + padding: 6px 20px; + vertical-align: text-bottom; + display: inline-block; + } + } +} + +.personal-settings-setting-box .section { + padding: 10px 30px; +} + +.followupsection { + display: block; + padding: 0 30px 30px 30px; + color: #555; +} + +.app-image { + position: relative; + height: 150px; + opacity: 1; + overflow: hidden; +} + +.app-name, .app-version, .app-score, .app-level { + display: inline-block; +} + +.app-description-toggle-show, .app-description-toggle-hide { + clear: both; + padding: 7px 0; + cursor: pointer; + opacity: .5; +} + +.app-description-container { + clear: both; + position: relative; + top: 7px; +} + +.app-description { + clear: both; +} + +#app-category-1 { + margin-bottom: 18px; +} + +/* capitalize 'Other' category */ + +#app-category-925 { + text-transform: capitalize; +} + +.app-dependencies { + color: #ce3702; +} + +.missing-dependencies { + list-style: initial; + list-style-type: initial; + list-style-position: inside; +} + +.apps-list { + .section { + cursor: pointer; + } + .app-list-move { + transition: transform 1s; + } + &.installed { + .apps-list-container { + display: table; + width: 100%; + height: auto; + } + 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; + } + &.selected { + background-color: var(--color-background-dark); + } + } + .groups-enable { + margin-top: 0; + label { + margin-right: 3px; + } + } + .app-image { + width: 44px; + height: auto; + text-align: right; + } + .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; + .icon-loading-small { + display: inline-block; + top: 4px; + margin-right: 10px; + } + } + } + &: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; + + h2.app-name { + display: block; + margin: 8px 0; + } + &:hover { + background-color: var(--color-background-dark); + } + } + .app-description { + p { + margin: 10px 0; + } + ul { + list-style: disc; + } + ol { + list-style: decimal; + ol, ul { + padding-left: 15px; + } + } + > { + ul, ol { + margin-left: 19px; + } + } + ul { + ol, ul { + padding-left: 15px; + } + } + } + /* Bundle header */ + .apps-header { + display: table-row; + position: relative; + div { + display: table-cell; + height: 70px; + } + h2 { + display: table-cell; + position: absolute; + padding-left: 6px; + padding-top: 15px; + + .enable { + position: relative; + top: -1px; + margin-left: 12px; + } + + .section { + margin-top: 50px; + } + } + } +} + +#apps-list-search { + .section { + h2 { + margin-bottom: 0; + } + } +} + +/* LOG */ +#log { + white-space: normal; + margin-bottom: 14px; +} + +#lessLog { + display: none; +} + +table.grid td.date { + white-space: nowrap; +} + +#log-section p { + margin-top: 20px; +} + +#security-warning-state-ok, +#security-warning-state-warning, +#security-warning-state-failure, +#security-warning-state-loading { + span { + vertical-align: middle; + + &.message { + padding: 12px; + } + &.icon { + width: 32px; + height: 32px; + background-position: center center; + display: inline-block; + border-radius: 50%; + } + &.icon-checkmark-white { + background-color: var(--color-success); + } + &.icon-error-white { + background-color: var(--color-warning); + } + &.icon-close-white { + background-color: var(--color-error); + } + } +} + +#shareAPI { + p { + padding-bottom: 0.8em; + } + input#shareapiExpireAfterNDays { + width: 40px; + } + .indent { + padding-left: 28px; + } + .double-indent { + padding-left: 56px; + } + .nocheckbox { + padding-left: 20px; + } +} + +#shareApiDefaultPermissionsSection label { + margin-right: 20px; +} + +#fileSharingSettings h3 { + 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; +} + +/* correctly display help icons next to headings */ + +.icon-info { + padding: 11px 20px; + vertical-align: text-bottom; + opacity: .5; +} + +#two-factor-auth h2, +#shareAPI h2, +#encryptionAPI h2, +#mail_general_settings h2 { + display: inline-block; +} + +#encryptionAPI li { + list-style-type: initial; + margin-left: 20px; + padding: 5px 0; +} + +.mail_settings p { + label:first-child { + display: inline-block; + width: 300px; + text-align: right; + } + select:nth-child(2), + input:not([type='button']) { + width: 143px; + } +} + +#mail_smtpport { + width: 40px; +} + +.cronlog { + margin-left: 10px; +} + +.status { + display: inline-block; + height: 16px; + width: 16px; + vertical-align: text-bottom; + &.success { + border-radius: 50%; + } +} + +#selectGroups select { + box-sizing: border-box; + display: inline-block; + height: 36px; + padding: 7px 10px; +} + +#log .log-message { + word-break: break-all; + min-width: 180px; +} + +span { + &.success { + background-color: var(--color-success); + border-radius: var(--border-radius); + } + &.error { + background-color: var(--color-error); + } + &.indeterminate { + background-color: var(--color-warning); + border-radius: 40% 0; + } +} + + + +/* OPERA hack for strengthify*/ +doesnotexist:-o-prefocus, .strengthify-wrapper { + left: 185px; + width: 129px; +} + +.trusted-domain-warning { + color: #fff; + padding: 5px; + background: #ce3702; + border-radius: 5px; + font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; +} + +/* HELP */ +.help-includes { + overflow: hidden !important; +} + +.help-iframe { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + border: 0; + overflow: auto; +} + +#postsetupchecks { + ul { + margin-left: 44px; + list-style: disc; + + li { + margin: 10px 0; + } + + ul { + list-style: circle; + } + } + + .loading { + height: 50px; + background-position: left center; + } + .errors, .errors a { + color: var(--color-error); + } + .warnings, .warnings a { + color: var(--color-warning); + } + + .hint { + margin: 20px 0; + } +} + +#security-warning { + a { + text-decoration: underline; + } + + .extra-top-margin { + margin-top: 12px; + } +} + +#admin-tips li { + list-style: initial; + a { + display: inline-block; + padding: 3px 0; + } +} + +#selectEncryptionModules { + margin-left: 30px; + padding: 10px; +} + +#encryptionModules { + padding: 10px; +} + +#warning { + color: red; +} + +.settings-hint { + margin-top: -12px; + margin-bottom: 12px; + opacity: .7; +} + + +/* USERS LIST -------------------------------------------------------------- */ +#body-settings { + $grid-row-height: 46px; + $grid-col-min-width: 120px; + #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; + /* 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, + .displayName, + .password, + .mailAddress, + .languages, + .storageLocation, + .userBackend, + .lastLogin { + min-width: $grid-col-min-width; + } + .groups, + .subadmins, + .quota { + .multiselect { + min-width: $grid-col-min-width; + } + } + .obfuscated { + width: 400px; + opacity: .7; + } + .userActions { + min-width: 44px; + } + + /* various */ + &#grid-header, + &#new-user { + @include position('sticky'); + align-self: normal; + background-color: var(--color-main-background); + z-index: 55; /* 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 { + top: $header-height + $grid-row-height; + } + &#grid-header { + color: var(--color-text-maxcontrast); + z-index: 60; /* above new-user */ + + #headerDisplayName, + #headerPassword, + #headerAddress, + #headerGroups, + #headerSubAdmins, + #headerQuota, + #headerLanguages { + /* Line up header text with column content for when there’s inputs */ + padding-left: 7px; + } + } + &: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; + align-items: center; + color: var(--color-text); + 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, + &.storageLocation { + /* 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 { + .multiselect--active + progress { + display: none; + } + progress { + position: absolute; + width: calc(100% - 4px); /* minus left and right */ + left: 2px; + bottom: 2px; + height: 3px; + z-index: 5; /* above multiselect */ + } + } + .icon-confirm { + flex: 0 0 auto; + cursor: pointer; + &:not(:active) { + display: none; + } + } + &.avatar { + height: 32px; + width: 32px; + margin: 6px; + img { + display: block; + } + } + &.userActions { + #newsubmit { + width: 100%; + } + .toggleUserActions { + position: relative; + .icon-more { + width: 44px; + height: 44px; + opacity: .5; + cursor: pointer; + &: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%; + } + } + } + .infinite-loading-container { + display: flex; + align-items: center; + justify-content: center; + grid-row-start: span 4; + } + .users-list-end { + opacity: .5; + user-select: none; + } + } +} |