You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1557 lines
25 KiB
1557 lines
25 KiB
/* 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; |
|
} |
|
} |
|
}
|
|
|