ccfa2dd24c
Filled username field when oc_username is set repaired. Problems with "advanced settings" button in installation wizard fixed. CSS improved - login and installation now looks more clean. Request password link removed (email feature not implemented yet). Database radio button bugs removed. It is possible to have an empty database password, now ownCloud will support this "security issue". Ignore Mac OS X ".DSstore" files. Fade in/out of login button and remember checkbox removed due to some display errors.
120 lines
11 KiB
CSS
120 lines
11 KiB
CSS
/* Copyright (c) 2011, Jan-Christoph Borchardt
|
|
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; }
|
|
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, li, label { cursor:pointer; }
|
|
ul { list-style:none; }
|
|
body { background:#fefefe; font:normal .8em/1.6em "Lucida Grande", Arial, Verdana, sans-serif; color:#000; }
|
|
|
|
|
|
/* HEADERS */
|
|
#body-user #header, #body-settings #header { position:fixed; top:0; z-index:100; width:100%; height:2.5em; padding:.5em; background:#1d2d44; -moz-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; -webkit-box-shadow:0 0 10px #000, inset 0 -2px 10px #222; box-shadow:0 0 10px #000, inset 0 -2px 10px #222; }
|
|
#body-login #header { margin: -2em auto 0; text-align:center; height:10em;
|
|
-moz-box-shadow:0 0 1em #000; -webkit-box-shadow:0 0 1em #000; box-shadow:0 0 1em #000;
|
|
background: #1d2d44; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #35537a 0%, #1d2d42 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#35537a), color-stop(100%,#1d2d42)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, #35537a 0%,#1d2d42 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, #35537a 0%,#1d2d42 100%); /* Opera11.10+ */
|
|
background: -ms-linear-gradient(top, #35537a 0%,#1d2d42 100%); /* IE10+ */
|
|
background: linear-gradient(top, #35537a 0%,#1d2d42 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35537a', endColorstr='#1d2d42',GradientType=0 ); /* IE6-9 */ }
|
|
|
|
#owncloud { float:left; }
|
|
|
|
|
|
/* INPUTS */
|
|
input[type="text"], input[type="password"] { cursor:text; }
|
|
input, select, .button, #quota, div.jp-progress, .pager li a { font-size:1em; width:10em; margin:.3em; padding:.6em .5em .4em; background:#fff; color:#333; border:1px solid #ddd; -moz-box-shadow:0 1px 1px #fff, 0 2px 0 #bbb inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; outline:none; }
|
|
input[type="text"], input[type="password"], input[type="search"] { background:#f8f8f8; color:#555; cursor:text; }
|
|
input[type="text"]:hover, input[type="text"]:focus, input[type="password"]:hover, input[type="password"]:focus, input[type="search"]:hover, input[type="search"]:focus { background:#fff; color:#333; }
|
|
|
|
input[type="submit"], input[type="button"], .button, #quota, div.jp-progress, .pager li a { width:auto; padding:.4em; border:1px solid #ddd; font-weight:bold; cursor:pointer; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
|
|
input[type="submit"]:hover, input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:focus, .button:hover { background:#fff; color:#333; }
|
|
input[type="checkbox"] { width:auto; }
|
|
#quota { cursor:default; }
|
|
|
|
#body-login input { font-size:1.5em; }
|
|
#body-login input[type="text"], #body-login input[type="password"] { width: 13em; }
|
|
#body-login input.login { width: auto; float: right; }
|
|
#remember_login { margin:.8em .2em 0 1em; }
|
|
form.searchbox input[type="search"] { position:fixed; font-size:1.2em; top:.4em; right:3em; padding:.2em .5em .2em 1.5em; background-image:url('../img/actions/search.svg'); background-repeat:no-repeat; background-position:.5em center; border:0; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; }
|
|
input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; -webkit-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; }
|
|
input[type="submit"].highlight{ background:#ffc100; border:1px solid #db0; text-shadow:#ffeedd 0 1px 0; -moz-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #ffeedd inset; -webkit-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #ffeedd inset; box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #ffeedd inset; }
|
|
|
|
|
|
/* CONTENT ------------------------------------------------------------------ */
|
|
#controls { width:100%; top:3.5em; height:2.8em; margin:0; background:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:50; -moz-box-shadow:0 -3px 7px #000; -webkit-box-shadow:0 -3px 7px #000; box-shadow:0 -3px 7px #000; }
|
|
#controls .button { display:inline-block; }
|
|
#content { margin:3.5em 0 0 12.5em; }
|
|
#leftcontent, .leftcontent { position:absolute; top:6.4em; width:20em; background:#f8f8f8; height:100%; border-right:1px solid #ddd; }
|
|
#leftcontent li, .leftcontent li { 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; }
|
|
#leftcontent li:hover, #leftcontent li:active, #leftcontent li.active, .leftcontent li:hover, .leftcontent li:active, .leftcontent li.active { background:#eee; }
|
|
#rightcontent, .rightcontent { position:absolute; top:6.4em; left:33em; }
|
|
|
|
|
|
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
|
|
#body-login { background:#ddd; }
|
|
#body-login div.buttons { text-align: center; }
|
|
#body-login p.info { width:22em; text-align: center; margin:2em auto; color:#777; text-shadow:#fff 0 1px 0; }
|
|
#body-login p.info a { font-weight:bold; color:#777; }
|
|
|
|
#login { min-height:30em; margin:2em auto 0; border-bottom:1px solid #f8f8f8; background:#eee; }
|
|
#login a#showAdvanced { color: #555; }
|
|
#login form { width:22em; margin:2em auto 2em; padding:0; }
|
|
#login form fieldset { background:0; border:0; margin-bottom:2em; padding:0; }
|
|
#login form fieldset legend { font-weight:bold; }
|
|
#login form label { position:absolute; margin:.8em .8em; font-size:1.5em; color:#666; }
|
|
#login #dbhostlabel, #login #directorylabel { display:block; margin:.95em 0 .8em -8em; }
|
|
#login form input[type="checkbox"]+label { position:relative; margin:0; font-size:1em; text-shadow:#fff 0 1px 0; }
|
|
#login form ul.errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; }
|
|
|
|
#login form #selectDbType { text-align:center; }
|
|
#login form #selectDbType label { position:static; font-size:1em; margin:0 -.3em 1em; cursor:pointer; padding:.4em; border:1px solid #ddd; font-weight:bold; background:#f8f8f8; color:#555; text-shadow:#eee 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; }
|
|
#login form #selectDbType label span { cursor:pointer; font-size:0.9em; }
|
|
#login form #selectDbType label.ui-state-hover span, #login form #selectDbType label.ui-state-active span { color:#000; }
|
|
#login form #selectDbType label.ui-state-hover, #login form #selectDbType label.ui-state-active { color: #333; background-color: #ccc; }
|
|
|
|
|
|
/* NAVIGATION ------------------------------------------------------------- */
|
|
#navigation { position:fixed; top:3.5em; float:left; width:12.5em; padding:0; z-index:75; height:100%; background:#eee; border-right: 1px #ccc solid; -moz-box-shadow: -3px 0 7px #000; -webkit-box-shadow: -3px 0 7px #000; box-shadow: -3px 0 7px #000; overflow:hidden;}
|
|
#navigation a { display:block; padding:.6em .5em .4em 2.5em; background:#eee 1em center no-repeat; border-bottom:1px solid #ddd; border-top:1px solid #fff; text-decoration:none; font-size:1.2em; color:#666; text-shadow:#f8f8f8 0 1px 0; -webkit-transition:background 300ms; -moz-transition:background 300ms; -o-transition:background 300ms; transition:background 300ms; }
|
|
#navigation a.active, #navigation a:hover, #navigation a:focus { background-color:#dbdbdb; border-top:1px solid #d4d4d4; border-bottom:1px solid #ccc; color:#333; }
|
|
#navigation a.active { background-color:#ddd; }
|
|
#navigation #settings { position:absolute; bottom:3.5em; width:100%; }
|
|
#expand { margin:0 0 .2em 1.2em; cursor:pointer; }
|
|
#expand+span { position:relative; bottom:.4em; left:.2em; font-size:1.2em; color:#666; text-shadow:#f8f8f8 0 1px 0; }
|
|
#logout { position:absolute; right:0; top:0; padding:1.2em 2em .55em 1.2em; }
|
|
|
|
|
|
/* VARIOUS REUSABLE SELECTORS */
|
|
.hidden { display:none; }
|
|
|
|
#notification { z-index:101; cursor:pointer; background-color:#fc4; border:0; padding:0 .7em .3em; display:none; position:fixed; left:50%; top:0; -moz-border-radius-bottomleft:1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em; -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius:1em; border-bottom-right-radius:1em; }
|
|
|
|
.action, .selectedActions a, #logout { opacity:.3; -webkit-transition:opacity 500ms; -moz-transition:opacity 500ms; -o-transition:opacity 500ms; transition:opacity 500ms; }
|
|
.action:hover, .selectedActions a:hover, #logout:hover { opacity:1; }
|
|
|
|
table tr { -webkit-transition:background-color 500ms; -moz-transition:background-color 500ms; -o-transition:background-color 500ms; transition:background-color 500ms; }
|
|
tbody tr:hover, tr:active { background-color:#f8f8f8; }
|
|
|
|
#body-settings .personalblock, #body-settings .helpblock { padding:.5em 1em; margin:1em; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
|
|
#body-settings .personalblock#quota { position:relative; margin-top:4.5em; padding:0; }
|
|
#body-settings #controls+.helpblock { position:relative; margin-top:7.3em; }
|
|
.personalblock > legend { margin-top:2em; }
|
|
|
|
#quota div, div.jp-play-bar, div.jp-seek-bar { padding:0; background:#e6e6e6; font-weight:normal; white-space:nowrap; -moz-border-radius-bottomleft:.4em; -webkit-border-bottom-left-radius:.4em; border-bottom-left-radius:.4em; -moz-border-radius-topleft:.4em; -webkit-border-top-left-radius:.4em; border-top-left-radius:.4em; }
|
|
#quotatext {padding: .6em 1em;}
|
|
div.jp-play-bar, div.jp-seek-bar { padding:0; }
|
|
|
|
.pager { list-style:none; float:right; display:inline; margin:.7em 12.7em 0 0; }
|
|
.pager li { display:inline-block; }
|
|
|
|
li.error { width:640px; margin:4em auto; padding:1em 1em 1em 4em; background:#ffe .8em .8em no-repeat; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
|