nextcloud/apps/settings/css/settings.scss

1738 lines
26 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* 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;
}
}
// Button for 'Reasons to use Nextcloud in your organization'
.development-notice {
text-align: center;
}
.link-button {
display: inline-block;
margin: 16px;
padding: 14px 20px;
background-color: var(--color-primary);
color: #fff;
border-radius: var(--border-radius-pill);
border: 1px solid var(--color-primary);
box-shadow: 0 2px 9px var(--color-box-shadow);
&:active,
&:hover,
&:focus {
color: var(--color-primary);
background-color: var(--color-primary-text);
border-color: var(--color-primary) !important;
}
&.icon-file {
padding-left: 48px;
background-position: 24px;
}
}
@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,
&.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;
}
/* 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 {
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;
}
#app-list-update-all {
margin-left: 10px;
}
.counter {
padding-left: $header-height - 10px;
margin: 10px;
}
&.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;
}
#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: 60px;
$grid-col-min-width: 160px;
overflow-x: scroll;
min-height: 100%;
height: auto;
#app-content.user-list-grid {
display: grid;
grid-column-gap: 20px;
grid-auto-rows: minmax(60px, max-content);
.row {
// TODO replace with css4 subgrid when available
// fallback for ie11 no grid
display: flex;
display: grid;
min-height: $grid-row-height;
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) // username, displayname
minmax($grid-col-min-width, 1fr) // password
minmax($grid-col-min-width, 1fr) // email
minmax(1.5*$grid-col-min-width, 1fr) // groups
minmax(1.5*$grid-col-min-width, 1fr) // group admins
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;
doesnotexist:-o-prefocus, .strengthify-wrapper {
color: var(--color-text-dark);
vertical-align: baseline;
text-overflow: ellipsis;
}
}
&:not(.row--editable) {
&.name,
&.password,
&.displayName,
&.mailAddress,
&.userBackend,
&.languages {
overflow: hidden;
}
}
.groups,
.subadmins,
.quota {
min-width: $grid-col-min-width;
.multiselect {
width: 100%;
color: var(--color-text-dark);
vertical-align: baseline;
}
}
.obfuscated {
width: 400px;
opacity: .7;
}
.userActions {
display: flex;
justify-content: flex-end;
position: sticky;
right: 0px;
min-width: 88px;
background-color: var(--color-main-background);
}
.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;
.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 theres 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;
}
}
> form {
width: 100%;
}
> div,
> .displayName > form,
> form {
grid-row: 1;
display: inline-flex;
color: var(--color-text-lighter);
flex-grow: 1;
> 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;
flex-grow: 1;
}
}
&.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 {
display: flex;;
justify-content: left;
white-space: nowrap;
position: relative;
progress {
width: 150px;
margin-top: 35px;
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 {
display: flex;
justify-content: flex-end;
#newsubmit {
width: 100%;
}
.toggleUserActions {
position: relative;
display: flex;
align-items: center;
background-color: var(--color-main-background);
.icon-more {
width: 44px;
height: 44px;
opacity: .5;
cursor: pointer;
&:focus,
&:hover,
&:active {
opacity: .7;
background-color: var(--color-background-dark)
}
}
}
.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;
}
}
}