diff options
Diffstat (limited to 'core/css/styles.css')
| -rw-r--r-- | core/css/styles.css | 119 |
1 files changed, 90 insertions, 29 deletions
diff --git a/core/css/styles.css b/core/css/styles.css index d82bdd2db4a..cefab2d49ff 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -16,8 +16,8 @@ body { background:#fefefe; font:normal .8em/1.6em "Lucida Grande", Arial, Verdan /* HEADERS */ -#body-user #header, #body-settings #header { position:fixed; top:0; left:0; right:0; z-index:100; height:2.5em; line-height:2.5em; padding:.5em; background:#1d2d44; -moz-box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; -webkit-box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; } -#body-login #header { margin:-2em auto 0; text-align:center; height:10em; padding:1em 0 .5em; +#body-user #header, #body-settings #header { position:fixed; top:0; left:0; right:0; z-index:100; height:45px; line-height:2.5em; background:#1d2d44; -moz-box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; -webkit-box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; } +#body-login #header { margin: -2em auto 0; text-align:center; height:10em; padding:1em 0 .5em; -moz-box-shadow:0 0 1em rgba(0, 0, 0, .5); -webkit-box-shadow:0 0 1em rgba(0, 0, 0, .5); box-shadow:0 0 1em rgba(0, 0, 0, .5); background:#1d2d44; /* Old browsers */ background:-moz-linear-gradient(top, #35537a 0%, #1d2d42 100%); /* FF3.6+ */ @@ -28,7 +28,7 @@ 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; vertical-align:middle; } +#owncloud { position:absolute; top:0; left:0; padding:6px; padding-bottom:0; } .header-right { float:right; vertical-align:middle; padding:0 0.5em; } .header-right > * { vertical-align:middle; } @@ -53,6 +53,12 @@ input[type="checkbox"]:hover+label, input[type="checkbox"]:focus+label { color:# #quota { cursor:default; } +/* SCROLLING */ +::-webkit-scrollbar { width:8px; } +::-webkit-scrollbar-track-piece { background-color:transparent; } +::-webkit-scrollbar-thumb { background:#ddd; } + + /* BUTTONS */ input[type="submit"], input[type="button"], button, .button, #quota, div.jp-progress, select, .pager li a { width:auto; padding:.4em; @@ -87,23 +93,40 @@ input[type="submit"] img, input[type="button"] img, button img, .button img { cu #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; } -.searchbox input[type="search"] { font-size:1.2em; padding:.2em .5em .2em 1.5em; background:#fff url('../img/actions/search.svg') no-repeat .5em center; border:0; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70);opacity:.7; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; } +#body-login input.login { width:auto; float:right; padding:7px 9px 6px; } +#remember_login { margin:.8em .2em 0 1em; vertical-align:text-bottom; } +.searchbox input[type="search"] { font-size:1.2em; padding:.2em .5em .2em 1.5em; background:#fff url('../img/actions/search.svg') no-repeat .5em center; border:0; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70);opacity:.7; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; margin-top:10px; float:right; } 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; } #select_all{ margin-top:.4em !important;} + /* CONTENT ------------------------------------------------------------------ */ -#controls { padding:0 0.5em; 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 { + position:fixed; + height:2.8em; width:100%; + padding:0 70px 0 0.5em; margin:0; + -moz-box-sizing:border-box; box-sizing:border-box; + -moz-box-shadow:0 -3px 7px #000; -webkit-box-shadow:0 -3px 7px #000; box-shadow:0 -3px 7px #000; + background:#f7f7f7; border-bottom:1px solid #eee; z-index:50; +} #controls .button { display:inline-block; } -#content { height: 100%; width: 100%; position: relative; } -#content-wrapper { height: 100%; width: 100%; padding-top: 3.5em; padding-left: 12.5em; box-sizing: border-box; -moz-box-sizing: border-box; position: absolute;} -#leftcontent, .leftcontent { position:fixed; top: 0; overflow:auto; width:20em; background:#f8f8f8; border-right:1px solid #ddd; box-sizing: border-box; -moz-box-sizing: border-box; height: 100%; padding-top: 6.4em } + +#content { position:relative; height:100%; width:100%; } +#content .hascontrols { position: relative; top: 2.9em; } +#content-wrapper { + position:absolute; height:100%; width:100%; padding-top:3.5em; padding-left:64px; + -moz-box-sizing:border-box; box-sizing:border-box; +} +#leftcontent, .leftcontent { + position:relative; overflow:auto; width:20em; height:100%; + background:#f8f8f8; border-right:1px solid #ddd; + -moz-box-sizing:border-box; box-sizing:border-box; +} #leftcontent li, .leftcontent li { background:#f8f8f8; padding:.5em .8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 200ms; -moz-transition:background-color 200ms; -o-transition:background-color 200ms; transition:background-color 200ms; } #leftcontent li:hover, #leftcontent li:active, #leftcontent li.active, .leftcontent li:hover, .leftcontent li:active, .leftcontent li.active { background:#eee; } #leftcontent li.active, .leftcontent li.active { font-weight:bold; } #leftcontent li:hover, .leftcontent li:hover { color:#333; background:#ddd; } #leftcontent a { height:100%; display:block; margin:0; padding:0 1em 0 0; float:left; } -#rightcontent, .rightcontent { position:fixed; top:6.4em; left:32.5em; overflow:auto } +#rightcontent, .rightcontent { position:fixed; top:6.4em; left:24.5em; overflow:auto } /* LOG IN & INSTALLATION ------------------------------------------------------------ */ @@ -124,16 +147,14 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b #login #datadirContent label { display:block; margin:0; color:#999; } #login form #datadirField legend { margin-bottom:15px; } - /* Icons for username and password fields to better recognize them */ #adminlogin, #adminpass, #user, #password { width:11.7em!important; padding-left:1.8em; } -#adminlogin+label, #adminpass+label, #user+label, #password+label { left:2.2em; } -#adminlogin+label+img, #adminpass+label+img, #user+label+img, #password+label+img { +#adminlogin+label+img, #adminpass-icon, #user+label+img, #password-icon { position:absolute; left:1.25em; top:1.65em; opacity:.3; } -#adminpass+label+img, #password+label+img { top:1.1em; } - +#adminpass-icon, #password-icon { top:1.1em; } +input[name="password-clone"] { padding-left:1.8em; width:11.7em !important; } /* Nicely grouping input field sets */ .grouptop input { @@ -151,15 +172,28 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b box-shadow:0 1px 1px #fff,0 1px 0 #ddd inset; } +/* In field labels. No, HTML placeholder does not work as well. */ #login form label { color:#666; } #login .groupmiddle label, #login .groupbottom label { top:.65em; } -/* NEEDED FOR INFIELD LABELS */ p.infield { position:relative; } label.infield { cursor:text !important; top:1.05em; left:.85em; } -#login form label.infield { position:absolute; font-size:19px; color:#aaa; white-space:nowrap; } +#login form label.infield { position:absolute; font-size:19px; color:#aaa; white-space:nowrap; padding-left:1.4em; } +#login #databaseField .infield { padding-left:0; } #login form input[type="checkbox"]+label { position:relative; margin:0; font-size:1em; text-shadow:#fff 0 1px 0; } #login form .errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; } +/* Show password toggle */ +#show { + position:absolute; right:1em; top:.8em; float:right; + display:none; +} +#show + label { + position:absolute!important; height:14px; width:24px; right:1em; top:1.25em!important; + background-image:url("../img/actions/toggle.png"); background-repeat:no-repeat; opacity:.3; +} +#show:checked + label { opacity:.8; } + +/* Database selector */ #login form #selectDbType { text-align:center; } #login form #selectDbType label { position:static; margin:0 -3px 5px; padding:.4em; @@ -169,6 +203,7 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; } } #login form #selectDbType label.ui-state-hover, #login form #selectDbType label.ui-state-active { color:#000; background-color:#e8e8e8; } +/* Warnings */ fieldset.warning { padding:8px; color:#b94a48; background-color:#f2dede; border:1px solid #eed3d7; @@ -176,16 +211,41 @@ fieldset.warning { } fieldset.warning legend { color:#b94a48 !important; } +/* Alternative Logins */ +#alternative-logins legend { margin-bottom:10px; } +#alternative-logins li { height:40px; display:inline-block; white-space:nowrap; } + /* 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; } -#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 { position:relative; z-index:100; margin-bottom:-.5em; padding:.5em 10.1em .7em 1.2em; cursor:pointer; } -#expand+span { position:absolute; z-index:99; margin:-1.7em 0 0 2.5em; font-size:1.2em; color:#666; text-shadow:#f8f8f8 0 1px 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; } -#expand:hover+span, #expand+span:hover { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; cursor:pointer; } +#navigation { + position:fixed; top:3.5em; float:left; width:64px; padding:0; z-index:75; height:100%; + background:#30343a url('../img/noise.png') repeat; border-right:1px #333 solid; + -moz-box-shadow:0 0 7px #000; -webkit-box-shadow:0 0 7px #000; box-shadow:0 0 7px #000; + overflow-x:scroll; +} +#navigation a { + display:block; padding:8px 0 4px; + text-decoration:none; font-size:10px; text-align:center; + color:#fff; text-shadow:#000 0 -1px 0; opacity:.4; + white-space:nowrap; overflow:hidden; text-overflow:ellipsis; // ellipsize long app names +} + #navigation a:hover, #navigation a:focus { opacity:.8; } + #navigation a.active { opacity:1; } + #navigation .icon { display:block; width:32px; height:32px; margin:0 16px 0; } + #navigation li:first-child a { padding-top:16px; } +#settings { float:right; margin-top:7px; color:#bbb; text-shadow:0 -1px 0 #000; } +#expand { padding:15px; cursor:pointer; font-weight:bold; } +#expand:hover, #expand:focus, #expand:active { color:#fff; } +#expand img { opacity:.7; margin-bottom:-2px; } +#expand:hover img, #expand:focus img, #expand:active img { opacity:1; } +#expanddiv { + position:absolute; right:0; top:45px; z-index:76; display:none; + background-color:#444; border-bottom-left-radius:7px; box-shadow: 0 0 20px rgb(29,45,68); +} + #expanddiv a { display:block; color:#fff; text-shadow:0 -1px 0 #000; padding:0 8px; opacity:.7; } + #expanddiv a img { margin-bottom:-3px; } + #expanddiv a:hover, #expanddiv a:focus, #expanddiv a:active { opacity:1; } + /* VARIOUS REUSABLE SELECTORS */ .hidden { display:none; } @@ -260,6 +320,7 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin .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:no-repeat right 0; padding:.75em 1.5em 0 1em; height:2.9em; } -div.crumb:first-child { padding-left:1em; } -div.crumb.last { font-weight:bold; } +div.crumb { float:left; display:block; background:url('../img/breadcrumb.svg') no-repeat right 0; padding:.75em 1.5em 0 1em; height:2.9em; } +div.crumb:first-child { padding:10px 20px 10px 5px; } +div.crumb.last { font-weight:bold; background:none; padding-right:10px; } +div.crumb a{ padding: 0.9em 0 0.7em 0; } |