diff options
Diffstat (limited to 'settings/css/settings.scss')
| -rw-r--r-- | settings/css/settings.scss | 270 |
1 files changed, 175 insertions, 95 deletions
diff --git a/settings/css/settings.scss b/settings/css/settings.scss index 97767ce2f22..6e95d4bdc27 100644 --- a/settings/css/settings.scss +++ b/settings/css/settings.scss @@ -675,101 +675,6 @@ span.usersLastLoginTooltip { } } -tr:hover > td { - &.password > span, &.displayName > span, &.mailAddress > span { - margin: 0; - cursor: pointer; - } - &.password > img, &.displayName > img, &.mailAddress > img { - visibility: visible; - cursor: pointer; - } -} - -td.userActions { - .toggleUserActions { - width: 44px; - height: 44px; - position: relative; - .action { - display: block; - padding: 14px; - opacity: 0.5; - .icon-more { - display: inline-block; - } - &:hover, - &:focus { - opacity: 1; - } - } - } -} - -div.recoveryPassword { - left: 50em; - display: block; - position: absolute; - top: -1px; -} - -input#recoveryPassword { - width: 15em; -} - -#controls select.quota { - margin: 3px; - margin-right: 10px; - height: 37px; -} - -#userlist td.quota { - position: relative; - width: 10em; - progress.quota-user-progress { - position: absolute; - width: calc(10em + 0px); - margin-top: -7px; - z-index: 0; - margin-left: 1px; - height: 3px; - } -} - -select { - &.quota-user { - width: 10em; - height: 34px; - z-index: 50; - position: relative; - } - + progress.quota-user-progress { - position: absolute; - width: calc(10em + 0px); - margin-top: -7px; - z-index: 0; - margin-left: 1px; - height: 3px; - } -} - -input.userFilter { - width: 200px; -} - -#newusergroups + input[type='submit'] { - position: relative; - top: -1px; -} - -#headerGroups, #headerSubAdmins, #headerQuota { - padding-left: 18px; -} - -#headerAvatar { - width: 32px; -} - /* used to highlight a user row in red */ #userlist tr.row-warning { @@ -1350,3 +1255,178 @@ doesnotexist:-o-prefocus, .strengthify-wrapper { margin-top: 22px; } } + + +/* USERS LIST -------------------------------------------------------------- */ +#body-settings { + #app-navigation { + /* Hack to override the javascript orderBy */ + #usergrouplist > li { + order: 4; + &#everyone { + order:1; + } + &#admin { + order:2; + } + &#disabled { + order:3; + } + } + } + $grid-row-height: 46px; + #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 + 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; + grid-auto-columns: min-content; + border-top: $color-border 1px solid; + &.disabled { + opacity: .5; + } + .name, + .displayName, + .password { + width: 150px; + } + .mailAddress, + .groups, + .subadmins { + width: 200px; + } + .quota { + width: 150px; + } + .languages { + width: 200px; + } + .storageLocation { + width: 250px; + } + .userBackend, + .lastLogin, + .userActions { + width: 100px; + } + &#grid-header, + &#new-user { + position: sticky; + align-self: normal; + background-color: $color-main-background; + z-index: 55; /* above multiselect */ + top: 0; + &.sticky { + box-shadow: 0 -2px 10px 1px $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:0 + &#new-user { + top: $grid-row-height; + } + &#grid-header { + color: nc-lighten($color-main-text, 60%); + z-index: 60; /* above new-user */ + } + &:hover { + input:not([type='submit']):not(:focus):not(:active) { + border-color: nc-darken($color-main-background, 14%) !important; + } + } + > div, + > form { + grid-row: 1; + display: inline-flex; + align-items: center; + color: nc-lighten($color-main-text, 33%); + position: relative; + > input:not(:focus):not(:active) { + border-color: transparent; + cursor: pointer; + } + > input:focus, >input:active { + + .icon-confirm { + display: block !important; + } + } + &:not(.userActions) > input:not([type='submit']) { + width: 100%; + min-width: 0; + } + &.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 { + width: 32px; + height: 32px; + flex: 0 0 32px; + cursor: pointer; + &:not(:active) { + display: none; + } + } + &.avatar { + height: 32px; + width: 32px; + margin: 6px; + img { + display: block; + } + } + .toggleUserActions { + position: relative; + .icon-more { + width: 44px; + height: 44px; + opacity: .5; + cursor: pointer; + :hover { + opacity: .7; + } + } + } + /* 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; + } + } +} |