From 9982f47ab5ea7eff52c9dd0275bbfb536b1e2dba Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Tue, 9 Jul 2013 18:02:51 +0200 Subject: [PATCH 01/23] initial WIP for cleaner log in page --- core/css/styles.css | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index 7d927da151c..06887dffcc5 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -20,16 +20,19 @@ body { background:#fefefe; font:normal .8em/1.6em "Helvetica Neue",Helvetica,Ari position:fixed; top:0; left:0; right:0; z-index:100; height:45px; line-height:2.5em; background:#1d2d44 url('../img/noise.png') repeat; -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%, #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 */ } + +#body-login { + text-align:center; + -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%, #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 */ +} #owncloud { position:absolute; top:0; left:0; padding:6px; padding-bottom:0; } .header-right { float:right; vertical-align:middle; padding:0.5em; } @@ -171,7 +174,7 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b #body-login p.info a { font-weight:bold; color:#777; } #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 */ -#login { min-height:30em; margin:2em auto 0; border-bottom:1px solid #f8f8f8; background:#eee; } +#login { min-height:30em; } #login form { width:22em; margin:2em auto 2em; padding:0; } #login form fieldset { margin-bottom:20px; } #login form #adminaccount { margin-bottom:5px; } From 107ace42b806a57dec816413252a7db9cde3512d Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 22 Jul 2013 11:58:26 +0200 Subject: [PATCH 02/23] rip out unneeded #login div, replace with existing body-login --- core/css/styles.css | 62 +++++++++++++++++++++------------ core/templates/layout.guest.php | 14 ++++---- 2 files changed, 47 insertions(+), 29 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index 06887dffcc5..ec13f5bffc5 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -23,7 +23,6 @@ body { background:#fefefe; font:normal .8em/1.6em "Helvetica Neue",Helvetica,Ari #body-login { text-align:center; - -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%, #1d2d44 100%); /* FF3.6+ */ background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#35537a), color-stop(100%,#1d2d44)); /* Chrome,Safari4+ */ @@ -168,23 +167,36 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b /* 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; } +#body-login p.info { + width: 22em; + text-align: center; + margin: 55px auto; + color: #030303; + text-shadow: #3d4d64 0 1px 0; +} +#body-login p.info a { + font-weight: bold; + color: #070707; +} #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 */ -#login { min-height:30em; } -#login form { width:22em; margin:2em auto 2em; padding:0; } -#login form fieldset { margin-bottom:20px; } -#login form #adminaccount { margin-bottom:5px; } -#login form fieldset legend, #datadirContent label { +#body-login { + margin-top: 100px; +} +#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:5px; } +#body-login form fieldset legend, #datadirContent label { width:100%; text-align:center; font-weight:bold; color:#999; text-shadow:0 1px 0 white; } -#login form fieldset legend a { color:#999; } -#login #datadirContent label { display:block; margin:0; color:#999; } -#login form #datadirField legend { margin-bottom:15px; } +#body-login form fieldset legend a { color:#999; } +#body-login #datadirContent label { display:block; margin:0; color:#999; } +#body-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; } @@ -213,19 +225,25 @@ input[name="adminpass-clone"] { padding-left:1.8em; width:11.7em !important; } } /* In field labels. No, HTML placeholder does not work as well. */ -#login form label { color:#666; } -#login .groupmiddle label, #login .groupbottom label { top:.65em; } +#body-login form label { color:#666; } +#body-login .groupmiddle label, #body-login .groupbottom label { top:.65em; } p.infield { position:relative; } label.infield { cursor:text !important; top:1.05em; left:.85em; } -#login form label.infield { /* labels are ellipsized when too long, keep them short */ +#body-login form label.infield { /* labels are ellipsized when too long, keep them short */ position:absolute; width:90%; padding-left:1.4em; font-size:19px; color:#aaa; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } -#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; } -#login .success { background:#d7fed7; border:1px solid #0f0; width: 35%; margin: 30px auto; padding:1em; text-align: center;} +#body-login #databaseField .infield { padding-left:0; } +#body-login form input[type="checkbox"]+label { + position: relative; + margin: 0; + font-size: 1em; + color: #030303; + text-shadow: #3d4d64 0 1px 0; +} +#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;} /* Show password toggle */ #show, #dbpassword { position:absolute; right:1em; top:.8em; float:right; } @@ -242,14 +260,14 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; } #passwordbutton { margin-left:0.5em; } /* Database selector */ -#login form #selectDbType { text-align:center; } -#login form #selectDbType label { +#body-login form #selectDbType { text-align:center; } +#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; 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.ui-state-hover, #login form #selectDbType label.ui-state-active { color:#000; background-color:#e8e8e8; } +#body-login form #selectDbType label.ui-state-hover, #body-login form #selectDbType label.ui-state-active { color:#000; background-color:#e8e8e8; } /* Warnings, for information */ .warning { diff --git a/core/templates/layout.guest.php b/core/templates/layout.guest.php index 329744e3824..23fd4569e11 100644 --- a/core/templates/layout.guest.php +++ b/core/templates/layout.guest.php @@ -35,13 +35,13 @@ -
-
- -
+
+ + +

getLongFooter()); ?> From c478234f6a0a510797e8308df1410c38093f1c7c Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 22 Jul 2013 12:01:49 +0200 Subject: [PATCH 03/23] fix general reset CSS issue which caused gradient background to cut off --- core/css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/styles.css b/core/css/styles.css index ec13f5bffc5..d0242e69eb5 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -3,7 +3,7 @@ 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%; overflow:auto; } +html, body { min-height:100%; overflow:auto; } 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; } From 14edfa52eaccc5d7e94530ecabfa775199f9ff8e Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 22 Jul 2013 12:40:28 +0200 Subject: [PATCH 04/23] input field adjustments for new full-color background on log in --- core/css/styles.css | 39 ++++++++++++++++++++++++++------- core/templates/layout.guest.php | 3 ++- 2 files changed, 33 insertions(+), 9 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index d0242e69eb5..aadda725738 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -210,18 +210,41 @@ input[name="adminpass-clone"] { padding-left:1.8em; width:11.7em !important; } /* Nicely grouping input field sets */ .grouptop input { - margin-bottom:0; - border-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; + margin-bottom: 0; + border-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } .groupmiddle input { - margin-top:0; margin-bottom:0; - border-top:0; border-bottom:0; border-radius:0; - box-shadow:0 1px 1px #fff,0 1px 0 #ddd inset; + margin-top: 0; + margin-bottom: 0; + border-top: 0; + border-bottom: 0; + border-radius: 0; + box-shadow: 0 1px 1px #fff, 0 1px 0 #ddd inset; } .groupbottom input { - margin-top:0; - border-top:0; border-top-right-radius:0; border-top-left-radius:0; - box-shadow:0 1px 1px #fff,0 1px 0 #ddd inset; + margin-top: 0; + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + box-shadow: 0 1px 1px #fff, 0 1px 0 #ddd inset; +} + +/* Adjustments for new full-color background on log in */ +#body-login .grouptop input { + -moz-box-shadow: 0 -1px 0 #3d4d65, 0 1px 0 #1d2d44 inset; + -webkit-box-shadow: 0 -1px 0 #3d4d65, 0 1px 0 #1d2d44 inset; + box-shadow: 0 -1px 0 #3d4d65, 0 1px 0 #1d2d44 inset; + border: 1px solid #3d4d64; + border-bottom: 0; +} +#body-login .groupbottom input { + -moz-box-shadow: 0 1px 0 #3d4d65, 0 1px 0 #ddd inset; + -webkit-box-shadow: 0 1px 0 #3d4d65, 0 1px 0 #ddd inset; + box-shadow: 0 1px 0 #3d4d65, 0 1px 0 #ddd inset; + border: 1px solid #3d4d64; + border-top: 0; } /* In field labels. No, HTML placeholder does not work as well. */ diff --git a/core/templates/layout.guest.php b/core/templates/layout.guest.php index 23fd4569e11..29e1debdfdb 100644 --- a/core/templates/layout.guest.php +++ b/core/templates/layout.guest.php @@ -45,6 +45,7 @@

getLongFooter()); ?> -

+

+
From fd4638c2299ce2dfbccfd3d5d4d5b0f280283ba5 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 22 Jul 2013 12:46:46 +0200 Subject: [PATCH 05/23] primary button adjustments --- core/css/styles.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index aadda725738..528d45ff9bd 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -119,12 +119,16 @@ a.disabled, a.disabled:hover, a.disabled:focus { .primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus { border:1px solid #1d2d44; background:#2d3d54; color:#fff; text-shadow:#000 0 -1px 0; - -moz-box-shadow:0 0 1px #000,0 1px 1px #5d6d84 inset; -webkit-box-shadow:0 0 1px #000,0 1px 1px #5d6d84 inset; box-shadow:0 0 1px #000,0 1px 1px #5d6d84 inset; + -moz-box-shadow: 0 0 1px #000, 0 1px 1px #4d5d74 inset; + -webkit-box-shadow: 0 0 1px #000, 0 1px 1px #4d5d74 inset; + box-shadow: 0 0 1px #000, 0 1px 1px #4d5d74 inset; } .primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active { border:1px solid #1d2d44; background:#1d2d44; color:#bbb; text-shadow:#000 0 -1px 0; - -moz-box-shadow:0 1px 1px #fff,0 1px 1px 0 rgba(0,0,0,.2) inset; -webkit-box-shadow:0 1px 1px #fff,0 1px 1px 0 rgba(0,0,0,.2) inset; box-shadow:0 1px 1px #fff,0 1px 1px 0 rgba(0,0,0,.2) inset; + -moz-box-shadow: 0 1px 1px #3d4d64, 0 1px 1px 0 rgba(0,0,0,.2) inset; + -webkit-box-shadow: 0 1px 1px #3d4d64, 0 1px 1px 0 rgba(0,0,0,.2) inset; + box-shadow: 0 1px 1px #3d4d64, 0 1px 1px 0 rgba(0,0,0,.2) inset; } From 38bfae57fe40f0572656e17af9cab624295df5ce Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 22 Jul 2013 13:16:01 +0200 Subject: [PATCH 06/23] sticky footer --- core/css/styles.css | 22 +++++++++++++++++----- core/templates/layout.guest.php | 14 +++++++++----- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index 528d45ff9bd..6c13823c444 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -3,7 +3,8 @@ 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 { min-height:100%; overflow:auto; } +html { height:100%; } +body { height:100%; background-attachment:fixed !important; } 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; } @@ -171,11 +172,14 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b /* LOG IN & INSTALLATION ------------------------------------------------------------ */ +#body-login #header { + padding-top: 100px; +} #body-login div.buttons { text-align:center; } #body-login p.info { width: 22em; text-align: center; - margin: 55px auto; + margin: 0 auto; color: #030303; text-shadow: #3d4d64 0 1px 0; } @@ -185,9 +189,6 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b } #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 { - margin-top: 100px; -} #body-login form { width:22em; margin:2em auto 2em; padding:0; } #body-login form fieldset { margin-bottom: 20px; @@ -319,6 +320,17 @@ li.update, li.error { width:640px; margin:4em auto; padding:1em 1em 1em 4em; bac #alternative-logins legend { margin-bottom:10px; } #alternative-logins li { height:40px; display:inline-block; white-space:nowrap; } +/* Sticky footer */ +#body-login .wrapper { + min-height: 100%; + margin: 0 auto -50px; +} +#body-login footer, #body-login .push { + height: 50px; +} + + + /* NAVIGATION ------------------------------------------------------------- */ #navigation { diff --git a/core/templates/layout.guest.php b/core/templates/layout.guest.php index 29e1debdfdb..f49d8ee215f 100644 --- a/core/templates/layout.guest.php +++ b/core/templates/layout.guest.php @@ -35,12 +35,16 @@ -
+
+
- + + +
+