mirror of
https://github.com/nextcloud/server.git
synced 2026-02-03 20:41:22 -05:00
97b536e3df
Adds a little button to the trusted domain warning, if an admin clicks on the warning he will be redirected to ownCloud and asked whether he want to trust this domain. By far not the cleanest code, or clean at all, but does the job and I don't see a reason to make a lot of changes for this little improvement.
919 lines
24 KiB
CSS
919 lines
24 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. */
|
|
|
|
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }
|
|
html, body { height:100%; }
|
|
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
|
|
body { line-height:1.5; }
|
|
table { border-collapse:separate; border-spacing:0; white-space:nowrap; }
|
|
caption, th, td { text-align:left; font-weight:normal; }
|
|
table, td, th { vertical-align:middle; }
|
|
a { border:0; color:#000; text-decoration:none;}
|
|
a, a *, input, input *, select, .button span, label { cursor:pointer; }
|
|
ul { list-style:none; }
|
|
|
|
|
|
body {
|
|
background-color: #ffffff;
|
|
font-weight: normal;
|
|
font-size: .8em;
|
|
line-height: 1.6em;
|
|
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
|
|
color: #000;
|
|
height: auto;
|
|
}
|
|
|
|
#body-login {
|
|
text-align: center;
|
|
background: #1d2d44; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #35537a 0%, #1d2d44 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#35537a), color-stop(100%,#1d2d44)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* Opera11.10+ */
|
|
background: -ms-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* IE10+ */
|
|
background: linear-gradient(top, #35537a 0%,#1d2d44 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35537a', endColorstr='#1d2d44',GradientType=0 ); /* IE6-9 */
|
|
}
|
|
|
|
|
|
|
|
#nojavascript {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
width: 100%;
|
|
text-align: center;
|
|
background-color: rgba(50,0,0,0.5);
|
|
color: white;
|
|
text-shadow: 0px 0px 5px black;
|
|
line-height: 125%;
|
|
font-size: x-large;
|
|
}
|
|
#nojavascript div {
|
|
width: 50%;
|
|
top: 40%;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -25%;
|
|
}
|
|
#nojavascript a {
|
|
color: #ccc;
|
|
text-decoration: underline;
|
|
}
|
|
#nojavascript a:hover {
|
|
color: #aaa;
|
|
}
|
|
|
|
|
|
/* INPUTS */
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="number"],
|
|
input[type="email"],
|
|
input[type="url"],
|
|
input[type="time"],
|
|
textarea,
|
|
select,
|
|
button, .button,
|
|
input[type="submit"],
|
|
input[type="button"],
|
|
#quota,
|
|
.pager li a {
|
|
width: 130px;
|
|
margin: 3px 3px 3px 0;
|
|
padding: 7px 6px 5px;
|
|
font-size: 13px;
|
|
background-color: #fff;
|
|
color: #333;
|
|
border: 1px solid #ddd;
|
|
outline: none;
|
|
border-radius: 3px;
|
|
}
|
|
input[type="hidden"] {
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="number"],
|
|
input[type="email"],
|
|
input[type="url"],
|
|
input[type="time"],
|
|
textarea {
|
|
background: #fff;
|
|
color: #555;
|
|
cursor: text;
|
|
font-family: inherit; /* use default ownCloud font instead of default textarea monospace */
|
|
}
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="number"],
|
|
input[type="email"],
|
|
input[type="url"],
|
|
input[type="time"] {
|
|
-webkit-appearance:textfield; -moz-appearance:textfield;
|
|
-webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;
|
|
}
|
|
input[type="text"]:hover, input[type="text"]:focus, input[type="text"]:active,
|
|
input[type="password"]:hover, input[type="password"]:focus, input[type="password"]:active,
|
|
input[type="number"]:hover, input[type="number"]:focus, input[type="number"]:active,
|
|
.searchbox input[type="search"]:hover, .searchbox input[type="search"]:focus, .searchbox input[type="search"]:active,
|
|
input[type="email"]:hover, input[type="email"]:focus, input[type="email"]:active,
|
|
input[type="url"]:hover, input[type="url"]:focus, input[type="url"]:active,
|
|
input[type="time"]:hover, input[type="time"]:focus, input[type="time"]:active,
|
|
textarea:hover, textarea:focus, textarea:active {
|
|
color: #333;
|
|
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1;
|
|
}
|
|
input[type="checkbox"] { margin:0; padding:0; height:auto; width:auto; }
|
|
input[type="checkbox"]:hover+label, input[type="checkbox"]:focus+label { color:#111 !important; }
|
|
input[type="time"] {
|
|
width: initial;
|
|
height: 31px;
|
|
-moz-box-sizing: border-box; box-sizing: border-box;
|
|
}
|
|
|
|
/* correctly align images inside of buttons */
|
|
input img, button img, .button img {
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
#quota {
|
|
cursor: default;
|
|
margin: 30px;
|
|
}
|
|
|
|
|
|
/* SCROLLING */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-track-piece {
|
|
background-color: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #ccc;
|
|
}
|
|
|
|
|
|
/* BUTTONS */
|
|
input[type="submit"], input[type="button"],
|
|
button, .button,
|
|
#quota, select, .pager li a {
|
|
width: auto;
|
|
min-width: 25px;
|
|
padding: 5px;
|
|
background-color: rgba(240,240,240,.9);
|
|
font-weight: bold;
|
|
color: #555;
|
|
border: 1px solid rgba(190,190,190,.9);
|
|
cursor: pointer;
|
|
}
|
|
input[type="submit"]:hover, input[type="submit"]:focus,
|
|
input[type="button"]:hover, input[type="button"]:focus,
|
|
button:hover, button:focus,
|
|
.button:hover, .button:focus,
|
|
select:hover, select:focus, select:active {
|
|
background-color:rgba(250,250,250,.9);
|
|
color:#333;
|
|
}
|
|
input[type="submit"] img, input[type="button"] img, button img, .button img { cursor:pointer; }
|
|
#header .button {
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* disabled input fields and buttons */
|
|
input:disabled, input:disabled:hover, input:disabled:focus,
|
|
button:disabled, button:disabled:hover, button:disabled:focus,
|
|
.button:disabled, .button:disabled:hover, .button:disabled:focus,
|
|
a.disabled, a.disabled:hover, a.disabled:focus,
|
|
textarea:disabled {
|
|
background-color: rgba(230,230,230,.9);
|
|
color: #999;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Primary action button, use sparingly */
|
|
.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary {
|
|
border: 1px solid #1d2d44;
|
|
background-color: #35537a;
|
|
color: #ddd;
|
|
}
|
|
.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,
|
|
.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {
|
|
border: 1px solid #1d2d44;
|
|
background-color: #304d76;
|
|
color: #fff;
|
|
}
|
|
.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active {
|
|
border: 1px solid #1d2d44;
|
|
background-color: #1d2d44;
|
|
color: #bbb;
|
|
}
|
|
|
|
/* Searchbox */
|
|
.searchbox input[type="search"] {
|
|
position: relative;
|
|
font-size: 1.2em;
|
|
padding-left: 1.5em;
|
|
background: #fff url('../img/actions/search.svg') no-repeat .5em center;
|
|
border: 0;
|
|
border-radius: 2em;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity: .7;
|
|
margin-top: 6px;
|
|
float: right;
|
|
}
|
|
|
|
input[type="submit"].enabled {
|
|
background-color: #66f866;
|
|
border: 1px solid #5e5;
|
|
}
|
|
|
|
|
|
|
|
/* CONTENT ------------------------------------------------------------------ */
|
|
#controls {
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
top: 45px;
|
|
right: 0;
|
|
left: 0;
|
|
height: 44px;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: rgba(255, 255, 255, .95);
|
|
z-index: 50;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
/* position controls for apps with app-navigation */
|
|
#app-navigation+#app-content #controls {
|
|
left: 250px;
|
|
}
|
|
.viewer-mode #app-navigation+#app-content #controls {
|
|
left: 0;
|
|
}
|
|
|
|
#controls .button,
|
|
#controls button,
|
|
#controls input[type='submit'],
|
|
#controls input[type='text'],
|
|
#controls input[type='password'],
|
|
#controls select {
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
height: 36px;
|
|
padding: 7px 10px
|
|
}
|
|
|
|
#controls .button.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#content {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
#content .hascontrols {
|
|
position: relative;
|
|
top: 45px;
|
|
}
|
|
#content-wrapper {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-x: hidden; /* prevent horizontal scrollbar */
|
|
padding-top: 45px;
|
|
-moz-box-sizing:border-box;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
#emptycontent {
|
|
font-size: 16px;
|
|
color: #888;
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 30%;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
|
|
|
|
/* Some whitespace to the top */
|
|
#body-login #header {
|
|
padding-top: 100px;
|
|
}
|
|
#body-login {
|
|
background-attachment: fixed; /* fix background gradient */
|
|
height: 100%; /* fix sticky footer */
|
|
}
|
|
|
|
/* Dark subtle label text */
|
|
#body-login p.info,
|
|
#body-login form fieldset legend,
|
|
#body-login #datadirContent label,
|
|
#body-login form fieldset .warning-info,
|
|
#body-login form input[type="checkbox"]+label {
|
|
text-align: center;
|
|
color: #ccc;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
|
filter: alpha(opacity=60);
|
|
opacity: .6;
|
|
}
|
|
|
|
#body-login .update h2 {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
#body-login .infogroup {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
#body-login p#message img {
|
|
vertical-align: middle;
|
|
padding: 5px;
|
|
}
|
|
|
|
#body-login div.buttons { text-align:center; }
|
|
#body-login p.info {
|
|
width: 22em;
|
|
margin: 0 auto;
|
|
padding-top: 20px;
|
|
}
|
|
#body-login p.info a {
|
|
font-weight: bold;
|
|
padding: 13px;
|
|
margin: -13px;
|
|
}
|
|
#body-login #submit.login { margin-right:7px; } /* quick fix for log in button not being aligned with input fields, should be properly fixed by input field width later */
|
|
|
|
#body-login form { width:22em; margin:2em auto 2em; padding:0; }
|
|
#body-login form fieldset {
|
|
margin-bottom: 20px;
|
|
text-align: left;
|
|
}
|
|
#body-login form #adminaccount { margin-bottom:15px; }
|
|
#body-login form fieldset legend, #datadirContent label {
|
|
width: 100%;
|
|
font-weight: bold;
|
|
}
|
|
#body-login #datadirContent label {
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
#body-login form #datadirField legend {
|
|
margin-bottom: 15px;
|
|
}
|
|
#body-login #showAdvanced {
|
|
padding: 13px; /* increase clickable area of Advanced dropdown */
|
|
}
|
|
#body-login #showAdvanced img {
|
|
vertical-align: bottom; /* adjust position of Advanced dropdown arrow */
|
|
margin-left: -4px;
|
|
}
|
|
|
|
/* strengthify wrapper */
|
|
#body-login .strengthify-wrapper {
|
|
display: inline-block;
|
|
position: relative;
|
|
left: 15px;
|
|
top: -21px;
|
|
width: 252px;
|
|
}
|
|
|
|
/* tipsy for the strengthify wrapper looks better with following font settings */
|
|
#body-login .tipsy-inner {
|
|
font-weight: bold;
|
|
color: #ccc;
|
|
}
|
|
|
|
/* Icons for username and password fields to better recognize them */
|
|
#adminlogin,
|
|
#adminpass,
|
|
input[name='adminpass-clone'],
|
|
#user,
|
|
#password,
|
|
input[name='password-clone'] {
|
|
width: 223px !important;
|
|
padding-left: 36px !important;
|
|
}
|
|
#adminlogin+label+img,
|
|
#adminpass-icon,
|
|
#user+label+img,
|
|
#password-icon {
|
|
position: absolute;
|
|
left: 16px;
|
|
top: 22px;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
|
filter: alpha(opacity=30);
|
|
opacity: .3;
|
|
}
|
|
#adminpass-icon, #password-icon {
|
|
top: 17px;
|
|
}
|
|
|
|
/* General new input field look */
|
|
#body-login input[type="text"],
|
|
#body-login input[type="password"],
|
|
#body-login input[type="email"],
|
|
#body-login input[type="submit"] {
|
|
border: none;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* Nicely grouping input field sets */
|
|
.grouptop,
|
|
.groupmiddle,
|
|
.groupbottom {
|
|
position: relative;
|
|
}
|
|
#body-login .grouptop input,
|
|
.grouptop input {
|
|
margin-bottom: 0;
|
|
border-bottom: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
#body-login .groupmiddle input,
|
|
.groupmiddle input {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
border-radius: 0;
|
|
box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
|
|
}
|
|
#body-login .groupbottom input,
|
|
.groupbottom input {
|
|
margin-top: 0;
|
|
border-top: 0;
|
|
border-top-right-radius: 0;
|
|
border-top-left-radius: 0;
|
|
box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
|
|
}
|
|
|
|
/* keep the labels for screen readers but hide them since we use placeholders */
|
|
label.infield {
|
|
display: none;
|
|
}
|
|
|
|
#body-login form input[type="checkbox"]+label {
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 14px;
|
|
padding-left: 28px;
|
|
margin-left: -28px;
|
|
vertical-align: middle;
|
|
}
|
|
#body-login form .errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; }
|
|
#body-login .success { background:#d7fed7; border:1px solid #0f0; width: 35%; margin: 30px auto; padding:1em; text-align: center;}
|
|
|
|
#body-login #remember_login:hover+label,
|
|
#body-login #remember_login:focus+label {
|
|
color: #fff !important;
|
|
}
|
|
|
|
#body-login #showAdvanced > img {
|
|
padding: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#body-login p.info a, #body-login #showAdvanced {
|
|
color: #ccc;
|
|
}
|
|
|
|
#body-login p.info a:hover, #body-login p.info a:focus {
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
#body-login footer .info {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Show password toggle */
|
|
#show, #dbpassword {
|
|
position: absolute;
|
|
right: 1em;
|
|
top: .8em;
|
|
float: right;
|
|
}
|
|
#show, #dbpassword, #personal-show {
|
|
display: none;
|
|
}
|
|
#show + label, #dbpassword + label {
|
|
right: 21px;
|
|
top: 15px !important;
|
|
margin: -14px !important;
|
|
padding: 14px !important;
|
|
}
|
|
#show:checked + label, #dbpassword:checked + label, #personal-show:checked + label {
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
|
|
filter: alpha(opacity=80);
|
|
opacity: .8;
|
|
}
|
|
#show + label, #dbpassword + label, #personal-show + label {
|
|
position: absolute !important;
|
|
height: 20px;
|
|
width: 24px;
|
|
background-image: url("../img/actions/toggle.png");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
|
filter: alpha(opacity=30);
|
|
opacity: .3;
|
|
}
|
|
#pass2, input[name="personal-password-clone"] {
|
|
padding: .6em 2.5em .4em .4em;
|
|
width: 8em;
|
|
}
|
|
#personal-show + label {
|
|
height: 14px;
|
|
margin-top: 14px;
|
|
margin-left: -36px;
|
|
}
|
|
#passwordbutton {
|
|
margin-left: .5em;
|
|
}
|
|
|
|
/* Database selector */
|
|
#body-login form #selectDbType { text-align:center; white-space: nowrap; }
|
|
#body-login form #selectDbType label {
|
|
position:static; margin:0 -3px 5px; padding:.4em;
|
|
font-size:12px; font-weight:bold; background:#f8f8f8; color:#888; cursor:pointer;
|
|
border: 1px solid #ddd;
|
|
}
|
|
#body-login form #selectDbType label.ui-state-hover, #body-login form #selectDbType label.ui-state-active { color:#000; background-color:#e8e8e8; }
|
|
|
|
|
|
/* Warnings and errors are the same */
|
|
#body-login .warning, #body-login .update, #body-login .error {
|
|
display: block;
|
|
padding: 10px;
|
|
background-color: rgba(0,0,0,.3);
|
|
color: #fff;
|
|
text-align: left;
|
|
border-radius: 3px;
|
|
cursor: default;
|
|
}
|
|
|
|
#body-login .update {
|
|
width: inherit;
|
|
text-align: center;
|
|
color: #ccc;
|
|
}
|
|
|
|
#body-login .v-align {
|
|
width: inherit;
|
|
}
|
|
|
|
#body-login .update img.float-spinner {
|
|
float: left;
|
|
}
|
|
|
|
#body-user .warning, #body-settings .warning {
|
|
margin-top: 8px;
|
|
padding: 5px;
|
|
background: #fdd;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.warning legend,
|
|
.warning a,
|
|
.error a {
|
|
color: #fff !important;
|
|
font-weight: bold !important;
|
|
}
|
|
.error pre {
|
|
white-space: pre-wrap;
|
|
text-align: left;
|
|
}
|
|
|
|
.error-wide {
|
|
width: 700px;
|
|
margin-left: -200px !important;
|
|
}
|
|
|
|
.error-wide .button {
|
|
color: black !important;
|
|
}
|
|
|
|
/* Fixes for log in page, TODO should be removed some time */
|
|
#body-login .update,
|
|
#body-login .error {
|
|
margin: 35px auto;
|
|
}
|
|
#body-login .warning {
|
|
margin: 0 7px 5px;
|
|
}
|
|
#body-login .warning legend {
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
filter: alpha(opacity=100);
|
|
opacity: 1;
|
|
}
|
|
#body-login a.warning {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* fixes for update page TODO should be fixed some time in a proper way */
|
|
/* this is just for an error while updating the ownCloud instance */
|
|
#body-login .updateProgress .error {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Alternative Logins */
|
|
#alternative-logins legend { margin-bottom:10px; }
|
|
#alternative-logins li { height:40px; display:inline-block; white-space:nowrap; }
|
|
|
|
/* Log in and install button */
|
|
#body-login input {
|
|
font-size: 20px;
|
|
margin: 5px;
|
|
padding: 11px 10px 9px;
|
|
}
|
|
#body-login input[type="text"],
|
|
#body-login input[type="password"] {
|
|
width: 249px;
|
|
}
|
|
#body-login input.login {
|
|
width: auto;
|
|
float: right;
|
|
}
|
|
#body-login input[type="submit"] {
|
|
padding: 10px 20px; /* larger log in and installation buttons */
|
|
}
|
|
#remember_login {
|
|
margin: 24px 5px 0 16px !important;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
/* Sticky footer */
|
|
#body-login .wrapper {
|
|
min-height: 100%;
|
|
margin: 0 auto -70px;
|
|
width: 300px;
|
|
}
|
|
#body-login footer, #body-login .push {
|
|
height: 70px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* VARIOUS REUSABLE SELECTORS */
|
|
.hidden { display:none; }
|
|
.bold { font-weight:bold; }
|
|
.center { text-align:center; }
|
|
.inlineblock { display: inline-block; }
|
|
|
|
#notification-container {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
#notification, #update-notification {
|
|
margin: 0 auto;
|
|
max-width: 60%;
|
|
z-index: 101;
|
|
background-color: #fc4;
|
|
border: 0;
|
|
padding: 1px 8px;
|
|
display: none;
|
|
position: relative;
|
|
top: 0;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
|
|
filter:alpha(opacity=90);
|
|
opacity: .9;
|
|
}
|
|
#notification span, #update-notification span {
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
tr .action:not(.permanent), .selectedActions a { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; }
|
|
tr:hover .action, tr .action.permanent, .selectedActions a { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); opacity:.5; }
|
|
tr .action { width:16px; height:16px; }
|
|
.header-action { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80); opacity:.8; }
|
|
tr:hover .action:hover, .selectedActions a:hover, .header-action:hover { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
|
|
tbody tr:hover, tr:active { background-color:#f8f8f8; }
|
|
|
|
code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", monospace; }
|
|
|
|
#quota {
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
#quota div {
|
|
padding: 0;
|
|
background-color: rgb(220,220,220);
|
|
font-weight: normal;
|
|
white-space: nowrap;
|
|
border-bottom-left-radius: 3px;
|
|
border-top-left-radius: 3px; }
|
|
#quotatext {padding:.6em 1em;}
|
|
|
|
.pager { list-style:none; float:right; display:inline; margin:.7em 13em 0 0; }
|
|
.pager li { display:inline-block; }
|
|
|
|
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { overflow:hidden; text-overflow:ellipsis; }
|
|
.separator { display:inline; border-left:1px solid #d3d3d3; border-right:1px solid #fff; height:10px; width:0px; margin:4px; }
|
|
|
|
a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;padding-top:0px;padding-bottom:2px; text-decoration:none; margin-top:5px }
|
|
|
|
.exception{color:#000;}
|
|
.exception textarea{width:95%;height:200px;background:#ffe;border:0;}
|
|
|
|
.ui-icon-circle-triangle-e{ background-image:url('../img/actions/play-next.svg'); }
|
|
.ui-icon-circle-triangle-w{ background-image:url('../img/actions/play-previous.svg'); }
|
|
.ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#fff; }
|
|
|
|
/* ---- DIALOGS ---- */
|
|
#oc-dialog-filepicker-content .dirtree {width:92%; overflow:hidden; }
|
|
#oc-dialog-filepicker-content .dirtree .home {
|
|
background-image:url('../img/places/home.svg');
|
|
background-repeat:no-repeat;
|
|
background-position: left center;
|
|
}
|
|
#oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer; }
|
|
#oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; }
|
|
#oc-dialog-filepicker-content .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;}
|
|
#oc-dialog-filepicker-content .filelist {
|
|
overflow-y:auto;
|
|
max-height: 300px;
|
|
background-color:white;
|
|
width:100%;
|
|
}
|
|
#oc-dialog-filepicker-content .filelist li {
|
|
position: relative;
|
|
}
|
|
#oc-dialog-filepicker-content .filelist .filename {
|
|
position: absolute;
|
|
top: 8px;
|
|
max-width: 60%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
#oc-dialog-filepicker-content .filelist img {
|
|
margin: 2px 1em 0 4px;
|
|
}
|
|
#oc-dialog-filepicker-content .filelist .date {
|
|
float: right;
|
|
margin-right: 10px;
|
|
margin-top: 0;
|
|
padding-top: 9px;
|
|
}
|
|
#oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;}
|
|
.ui-dialog {position:fixed !important;}
|
|
span.ui-icon {float: left; margin: 3px 7px 30px 0;}
|
|
|
|
.loading { background: url('../img/loading.gif') no-repeat center; cursor: wait; }
|
|
.loading-small { background: url('../img/loading-small.gif') no-repeat center; cursor: wait; }
|
|
.move2trash { /* decrease spinner size */
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* ---- TAGS ---- */
|
|
#tagsdialog .content {
|
|
width: 100%; height: 280px;
|
|
}
|
|
#tagsdialog .scrollarea {
|
|
overflow:auto; border:1px solid #ddd;
|
|
width: 100%; height: 240px;
|
|
}
|
|
#tagsdialog .bottombuttons {
|
|
width: 100%; height: 30px;
|
|
}
|
|
#tagsdialog .bottombuttons * { float:left;}
|
|
#tagsdialog .taglist li { background:#f8f8f8; padding:.3em .8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 500ms; -moz-transition:background-color 500ms; -o-transition:background-color 500ms; transition:background-color 500ms; }
|
|
#tagsdialog .taglist li:hover, #tagsdialog .taglist li:active { background:#eee; }
|
|
#tagsdialog .addinput { width: 90%; clear: both; }
|
|
|
|
/* ---- APP SETTINGS - LEGACY, DO NOT USE THE POPUP! ---- */
|
|
.popup {
|
|
background-color: #fff;
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 10px #aaa;
|
|
color: #333;
|
|
padding: 10px;
|
|
position: fixed !important;
|
|
z-index: 100;
|
|
}
|
|
.popup.topright { top:7em; right:1em; }
|
|
.popup.bottomleft { bottom:1em; left:33em; }
|
|
.popup .close { position:absolute; top:0.2em; right:0.2em; height:20px; width:20px; background:url('../img/actions/close.svg') no-repeat center; }
|
|
.popup h2 { font-weight:bold; font-size:1.2em; }
|
|
.arrow { border-bottom:10px solid white; border-left:10px solid transparent; border-right:10px solid transparent; display:block; height:0; position:absolute; width:0; z-index:201; }
|
|
.arrow.left { left:-13px; bottom:1.2em; -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform:rotate(270deg); -ms-transform:rotate(270deg); transform:rotate(270deg); }
|
|
.arrow.up { top:-8px; right:6px; }
|
|
.arrow.down { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); }
|
|
|
|
|
|
/* ---- BREADCRUMB ---- */
|
|
div.crumb {
|
|
float: left;
|
|
display: block;
|
|
background: url('../img/breadcrumb.svg') no-repeat right center;
|
|
height: 44px;
|
|
background-size: auto 24px;
|
|
}
|
|
div.crumb.hidden {
|
|
display: none;
|
|
}
|
|
div.crumb a,
|
|
div.crumb span {
|
|
position: relative;
|
|
top: 12px;
|
|
padding: 14px 24px 14px 17px;
|
|
color: #555;
|
|
}
|
|
div.crumb:first-child a {
|
|
position: relative;
|
|
top: 13px;
|
|
}
|
|
div.crumb.last {
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* some feedback for hover/tap on breadcrumbs */
|
|
div.crumb:hover,
|
|
div.crumb:focus,
|
|
div.crumb:active {
|
|
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
|
filter:alpha(opacity=70);
|
|
opacity:.7;
|
|
}
|
|
|
|
.appear {
|
|
opacity: 1;
|
|
transition: opacity 500ms ease 0s;
|
|
-moz-transition: opacity 500ms ease 0s;
|
|
-ms-transition: opacity 500ms ease 0s;
|
|
-o-transition: opacity 500ms ease 0s;
|
|
-webkit-transition: opacity 500ms ease 0s;
|
|
}
|
|
.appear.transparent {
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
/* public footer */
|
|
#body-public footer {
|
|
margin-top: 65px;
|
|
text-align: center;
|
|
}
|
|
|
|
#body-public footer .info {
|
|
color: #777;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
#body-public footer .info a {
|
|
color: #777;
|
|
font-weight: bold;
|
|
padding: 13px;
|
|
margin: -13px;
|
|
}
|
|
|
|
|
|
/* LEGACY FIX only - do not use fieldsets for settings */
|
|
fieldset.warning legend, fieldset.update legend {
|
|
top: 18px;
|
|
position: relative;
|
|
}
|
|
fieldset.warning legend + p, fieldset.update legend + p {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
|
|
/* for IE10 */
|
|
@-ms-viewport {
|
|
width: device-width;
|
|
}
|
|
|