e8c2d62c6b
Instead of pre-rendering all multiselects with lots of group entries, the current groups are now displayed as simple labels. Behind the labels there is a pencil icon like for other fields. When clicking the pencil icon, the dropdown will be spawned and will open itself. Upon closing of the dropdown, the label comes back with the updated selection and the dropdown is destroyed.
642 lines
11 KiB
CSS
642 lines
11 KiB
CSS
/* 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. */
|
|
|
|
select#languageinput, select#timezone { width:15em; }
|
|
input#openid, input#webdav { width:20em; }
|
|
|
|
/* PERSONAL */
|
|
|
|
#avatar {
|
|
display: inline-block;
|
|
float: left;
|
|
width: 160px;
|
|
padding-right: 0;
|
|
}
|
|
#avatar .avatardiv {
|
|
margin-bottom: 10px;
|
|
}
|
|
#avatar .warning {
|
|
width: 100%;
|
|
}
|
|
#uploadavatarbutton,
|
|
#selectavatar,
|
|
#removeavatar {
|
|
width: 33px;
|
|
height: 33px;
|
|
}
|
|
.jcrop-holder {
|
|
z-index: 500;
|
|
}
|
|
#avatar #cropper {
|
|
float: left;
|
|
background-color: #fff;
|
|
z-index: 500;
|
|
position: relative;
|
|
}
|
|
|
|
#displaynameform,
|
|
#lostpassword,
|
|
#groups,
|
|
#passwordform {
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
padding-right: 0;
|
|
min-width: 60%;
|
|
}
|
|
#avatar,
|
|
#passwordform {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
#groups {
|
|
overflow-wrap: break-word;
|
|
max-width: 75%;
|
|
}
|
|
|
|
.clientsbox img {
|
|
height: 60px;
|
|
}
|
|
|
|
#sslCertificate tr.expired {
|
|
background-color: rgba(255, 0, 0, 0.5);
|
|
}
|
|
#sslCertificate td {
|
|
padding: 5px;
|
|
}
|
|
|
|
|
|
#displaynameerror {
|
|
display: none;
|
|
}
|
|
#displaynamechanged {
|
|
display: none;
|
|
}
|
|
input#identity {
|
|
width: 20em;
|
|
}
|
|
#displayName,
|
|
#email {
|
|
width: 17em;
|
|
}
|
|
|
|
#showWizard {
|
|
display: inline-block;
|
|
}
|
|
|
|
.msg.success {
|
|
color: #fff;
|
|
background-color: #47a447;
|
|
padding: 3px;
|
|
}
|
|
.msg.error {
|
|
color: #fff;
|
|
background-color: #d2322d;
|
|
padding: 3px;
|
|
}
|
|
|
|
table.nostyle label { margin-right: 2em; }
|
|
table.nostyle td { padding: 0.2em 0; }
|
|
|
|
#sessions table,
|
|
#apppasswords table {
|
|
width: 100%;
|
|
min-height: 50px;
|
|
padding-top: 5px;
|
|
max-width: 580px;
|
|
}
|
|
#sessions table th,
|
|
#apppasswords table th {
|
|
opacity: .5;
|
|
}
|
|
#sessions table th,
|
|
#sessions table td,
|
|
#apppasswords table th,
|
|
#apppasswords table td {
|
|
padding: 10px 10px 10px 0;
|
|
}
|
|
|
|
#sessions .token-list td,
|
|
#apppasswords .token-list td {
|
|
border-top: 1px solid #DDD;
|
|
text-overflow: ellipsis;
|
|
max-width: 200px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#sessions tr *:nth-child(2),
|
|
#apppasswords tr *:nth-child(2) {
|
|
text-align: right;
|
|
}
|
|
#sessions .token-list td a.icon-delete,
|
|
#apppasswords .token-list td a.icon-delete {
|
|
display: block;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#new-app-login-name,
|
|
#new-app-password {
|
|
width: 186px;
|
|
font-family: monospace;
|
|
background-color: lightyellow;
|
|
}
|
|
.app-password-row {
|
|
display: table-row;
|
|
}
|
|
|
|
.app-password-row .icon {
|
|
background-size: 16px 16px;
|
|
display: inline-block;
|
|
position: relative;
|
|
top: 3px;
|
|
margin-left: 5px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.app-password-label {
|
|
display: table-cell;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.social-button {
|
|
padding-left: 0;
|
|
margin-left: -10px
|
|
}
|
|
.social-button img {
|
|
padding: 10px;
|
|
}
|
|
|
|
|
|
/* USERS */
|
|
#newgroup-init a span { margin-left: 20px; }
|
|
#newgroup-init a span:before {
|
|
position: absolute; left: 12px; top:-2px;
|
|
content: '+'; font-weight: bold; font-size: 150%;
|
|
}
|
|
|
|
#newgroup-form {
|
|
height: 44px;
|
|
}
|
|
#newgroupname {
|
|
margin: 6px;
|
|
width: 95%;
|
|
padding-right: 32px;
|
|
box-sizing: border-box
|
|
}
|
|
#newgroup-form .button {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 3px;
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
|
|
.isgroup .groupname {
|
|
width: 85%;
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.isgroup.active .groupname {
|
|
width: 65%;
|
|
}
|
|
|
|
.usercount { float: left; margin: 5px; }
|
|
li.active span.utils .delete {
|
|
float: left; position: relative; opacity: 0.5;
|
|
top: -7px; left: 7px; width: 44px; height: 44px;
|
|
}
|
|
li.active .rename {
|
|
padding: 8px 14px 20px 14px;
|
|
top: 0px; position: absolute; width: 16px; height: 16px;
|
|
opacity: 0.5;
|
|
display: inline-block !important;
|
|
}
|
|
li.active span.utils .delete img { margin: 14px; }
|
|
li.active .rename { opacity: 0.5; }
|
|
li.active span.utils .delete:hover, li.active .rename:hover { opacity: 1; }
|
|
span.utils .delete, .rename { display: none; }
|
|
#app-navigation ul li.active > span.utils .delete,
|
|
#app-navigation ul li.active > span.utils .rename { display: block; }
|
|
#usersearchform {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 0;
|
|
}
|
|
#usersearchform input {
|
|
width: 150px;
|
|
}
|
|
#usersearchform label { font-weight: 700; }
|
|
|
|
/* display table at full width */
|
|
table.grid {
|
|
width: 100%;
|
|
}
|
|
|
|
table.grid th { height:2em; color:#999; }
|
|
table.grid th, table.grid td { border-bottom:1px solid #ddd; padding:0 .5em; padding-left:.8em; text-align:left; font-weight:normal; }
|
|
td.name, td.password { padding-left:.8em; }
|
|
td.password>img,td.displayName>img, td.remove>a, td.quota>img { visibility:hidden; }
|
|
td.password, td.quota, td.displayName { width:12em; cursor:pointer; }
|
|
td.password>span, td.quota>span, rd.displayName>span { margin-right: 1.2em; color: #C7C7C7; }
|
|
span.usersLastLoginTooltip { white-space: nowrap; }
|
|
|
|
/* dropdowns will be relative to this element */
|
|
#userlist {
|
|
position: relative;
|
|
}
|
|
#userlist .mailAddress,
|
|
#userlist .storageLocation,
|
|
#userlist .userBackend,
|
|
#userlist .lastLogin {
|
|
display : none;
|
|
}
|
|
|
|
/* because of accessibility the name cell is <th> - therefore we enforce the black color */
|
|
#userlist th.name {
|
|
color: #000000;
|
|
}
|
|
|
|
#userlist .mailAddress .loading-small {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-left: -26px;
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
|
|
#newuser .groups {
|
|
display: inline;
|
|
}
|
|
|
|
#newuser .groupsListContainer.hidden,
|
|
#userlist .groupsListContainer.hidden {
|
|
display: none;
|
|
}
|
|
|
|
tr:hover>td.password>span, tr:hover>td.displayName>span { margin:0; cursor:pointer; }
|
|
tr:hover>td.remove>a, tr:hover>td.password>img,tr:hover>td.displayName>img, tr:hover>td.quota>img { visibility:visible; cursor:pointer; }
|
|
td.remove {
|
|
width: 25px;
|
|
}
|
|
tr:hover>td.remove>a {
|
|
float: left;
|
|
}
|
|
|
|
div.recoveryPassword { left:50em; display:block; position:absolute; top:-1px; }
|
|
input#recoveryPassword {width:15em;}
|
|
#controls select.quota {
|
|
margin: 3px;
|
|
margin-right: 10px;
|
|
height: 37px;
|
|
}
|
|
select.quota-user { position:relative; left:0; top:0; width:10em; }
|
|
select.quota.active { background: #fff; }
|
|
|
|
input.userFilter {width: 200px;}
|
|
|
|
/* positioning fixes */
|
|
#newuser {
|
|
padding-left: 3px;
|
|
}
|
|
#newuser .multiselect {
|
|
min-width: 150px !important;
|
|
}
|
|
#newuser .multiselect,
|
|
#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 {
|
|
background-color: #FDD;
|
|
}
|
|
|
|
|
|
/* APPS */
|
|
|
|
.appinfo { margin: 1em 40px; }
|
|
#app-navigation .appwarning {
|
|
background: #fcc;
|
|
}
|
|
#app-navigation.appwarning:hover {
|
|
background: #fbb;
|
|
}
|
|
|
|
span.version {
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
color: #555;
|
|
}
|
|
|
|
#app-navigation .app-external,
|
|
.app-version {
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
|
filter: alpha(opacity=50);
|
|
opacity: .5;
|
|
}
|
|
|
|
.app-level {
|
|
margin-top: 8px;
|
|
}
|
|
.app-level span {
|
|
color: #555;
|
|
background-color: transparent;
|
|
border: 1px solid #555;
|
|
border-radius: 3px;
|
|
padding: 3px 6px;
|
|
}
|
|
.app-level .official {
|
|
border-color: #37ce02;
|
|
background-position: left center;
|
|
background-position: 5px center;
|
|
padding-left: 25px;
|
|
}
|
|
.app-level .approved {
|
|
border-color: #0082c9;
|
|
}
|
|
.app-level .experimental {
|
|
background-color: #ce3702;
|
|
border-color: #ce3702;
|
|
color: #fff;
|
|
}
|
|
.apps-experimental {
|
|
color: #ce3702;
|
|
}
|
|
|
|
.app-score {
|
|
position: relative;
|
|
top: 4px;
|
|
}
|
|
|
|
#apps-list {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
.section {
|
|
position: relative;
|
|
}
|
|
.section h2.app-name {
|
|
margin-bottom: 8px;
|
|
}
|
|
.followupsection {
|
|
display: block;
|
|
padding: 0 30px 30px 30px;
|
|
color: #555;
|
|
margin-bottom: 24px;
|
|
margin-top: -30px;
|
|
position: relative;
|
|
}
|
|
.app-image {
|
|
float: left;
|
|
padding-right: 10px;
|
|
width: 80px;
|
|
height: 80px;
|
|
opacity: 0.8;
|
|
}
|
|
.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;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
|
opacity: .5;
|
|
}
|
|
.app-description-container {
|
|
clear: both;
|
|
position: relative;
|
|
top: 7px;
|
|
}
|
|
|
|
.app-description {
|
|
clear: both;
|
|
}
|
|
.app-description pre {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
/* Transition to complete width! */
|
|
.app:hover, .app:active { max-width: inherit; }
|
|
|
|
.appslink { text-decoration: underline; }
|
|
.score { color:#666; font-weight:bold; font-size:0.8em; }
|
|
|
|
.appinfo .documentation {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
|
|
/* LOG */
|
|
#log {
|
|
white-space:normal;
|
|
margin-bottom: 14px;
|
|
}
|
|
#lessLog { display:none; }
|
|
table.grid td.date{
|
|
white-space: nowrap;
|
|
}
|
|
#log-section p {
|
|
margin-top:20px;
|
|
}
|
|
|
|
/* ADMIN */
|
|
#security-warning li {
|
|
list-style: initial;
|
|
margin: 10px 0;
|
|
}
|
|
#security-warning-state span {
|
|
padding-left: 25px;
|
|
background-position: 5px center;
|
|
margin-left: -5px;
|
|
}
|
|
|
|
#shareAPI p { padding-bottom: 0.8em; }
|
|
#shareAPI input#shareapiExpireAfterNDays {width: 25px;}
|
|
#shareAPI .indent {
|
|
padding-left: 28px;
|
|
}
|
|
#shareAPI .double-indent {
|
|
padding-left: 56px;
|
|
}
|
|
#fileSharingSettings h3 {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* correctly display help icons next to headings */
|
|
.icon-info {
|
|
padding: 11px 20px;
|
|
vertical-align: text-bottom;
|
|
}
|
|
#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;
|
|
}
|
|
.mail_settings p select:nth-child(2) {
|
|
width: 143px;
|
|
}
|
|
#mail_smtpport {
|
|
width: 40px;
|
|
}
|
|
|
|
.cronlog {
|
|
margin-left: 10px;
|
|
}
|
|
.status {
|
|
display: inline-block;
|
|
height: 16px;
|
|
width: 16px;
|
|
vertical-align: text-bottom;
|
|
}
|
|
.status.success {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
#selectGroups select {
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
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: #37ce02;
|
|
border-radius: 3px;
|
|
}
|
|
span.error {
|
|
background: #ce3702;
|
|
}
|
|
span.indeterminate {
|
|
background: #e6db00;
|
|
border-radius: 40% 0;
|
|
}
|
|
|
|
/* PASSWORD */
|
|
#passwordform .strengthify-wrapper {
|
|
position: absolute;
|
|
left: 186px;
|
|
width: 131px;
|
|
margin-top: -7px;
|
|
}
|
|
|
|
/* OPERA hack for strengthify*/
|
|
doesnotexist:-o-prefocus, .strengthify-wrapper {
|
|
left: 185px;
|
|
width: 129px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* HELP */
|
|
|
|
.help-includes {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.help-iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
#postsetupchecks .loading {
|
|
height: 50px;
|
|
background-position: left center;
|
|
}
|
|
|
|
#postsetupchecks .errors,
|
|
#postsetupchecks .warnings,
|
|
#security-warning > ul {
|
|
color: #ce3702;
|
|
}
|
|
|
|
#admin-tips li {
|
|
list-style: initial;
|
|
}
|
|
#admin-tips li a {
|
|
display: inline-block;
|
|
padding: 3px 0;
|
|
}
|
|
|
|
#selectEncryptionModules {
|
|
margin-left: 30px;
|
|
padding: 10px;
|
|
}
|
|
|
|
#encryptionModules {
|
|
padding: 10px;
|
|
}
|
|
|
|
#warning {
|
|
color: red;
|
|
}
|
|
|
|
/* SELECT */
|
|
|
|
.select2-container-multi .select2-choices .select2-search-choice {
|
|
background-color: rgba(240,240,240,.9)!important;
|
|
border-color: rgba(240,240,240,.9)!important;
|
|
box-shadow: none!important;
|
|
background-image: none!important;
|
|
}
|