From 67467873c25b8b1e7b51e336d48b05f567150a93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 10 Jan 2017 10:39:52 +0100 Subject: [PATCH 1/6] Removed jquery scss - Switched to setup.css - Disable scss when displaying the update page - Improved setup css - Fixed loading failure of other styles on setup & update page - Improved scss compiler with an ignore scss compilation option MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/Controller/SetupController.php | 1 + ...uery-ui-fixes.scss => jquery-ui-fixes.css} | 108 ++-- core/css/{installation.css => setup.css} | 536 ++++++++++++++---- core/css/styles.scss | 472 --------------- lib/private/Template/CSSResourceLocator.php | 17 +- lib/private/TemplateLayout.php | 27 +- 6 files changed, 509 insertions(+), 652 deletions(-) rename core/css/{jquery-ui-fixes.scss => jquery-ui-fixes.css} (54%) rename core/css/{installation.css => setup.css} (68%) diff --git a/core/Controller/SetupController.php b/core/Controller/SetupController.php index bb7c8c4969..930ec82dbb 100644 --- a/core/Controller/SetupController.php +++ b/core/Controller/SetupController.php @@ -92,6 +92,7 @@ class SetupController { \OC_Util::addVendorScript('strengthify/jquery.strengthify'); \OC_Util::addVendorStyle('strengthify/strengthify'); + \OC_Util::addStyle('setup'); \OC_Util::addScript('setup'); \OC_Template::printGuestPage('', 'installation', $parameters); } diff --git a/core/css/jquery-ui-fixes.scss b/core/css/jquery-ui-fixes.css similarity index 54% rename from core/css/jquery-ui-fixes.scss rename to core/css/jquery-ui-fixes.css index 4cf4f4cdd4..e8cf2b769b 100644 --- a/core/css/jquery-ui-fixes.scss +++ b/core/css/jquery-ui-fixes.css @@ -1,124 +1,134 @@ /* Component containers ----------------------------------*/ - .ui-widget { - font-family: 'Lucida Grande', Arial, Verdana, sans-serif; + font-family: "Lucida Grande", Arial, Verdana, sans-serif; font-size: 1em; - button { - font-family: 'Lucida Grande', Arial, Verdana, sans-serif; - } } - +.ui-widget button { + font-family: "Lucida Grande", Arial, Verdana, sans-serif; +} .ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url('images/ui-bg_highlight-soft_100_eeeeee_1x100.png') 50% top repeat-x; color: #333333; - a { - color: #333333; - } } - +.ui-widget-content a { + color: #333333; +} .ui-widget-header { border: 1px solid #0082c9; background: #0082c9; color: #ffffff; - a { - color: #ffffff; - } +} +.ui-widget-header a { + color: #ffffff; } /* Interaction states ----------------------------------*/ - -.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default { border: 1px solid #ddd; background: #f8f8f8 url('images/ui-bg_glass_100_f8f8f8_1x400.png') 50% 50% repeat-x; font-weight: bold; color: #555; } - -.ui-state-default a { +.ui-state-default a, +.ui-state-default a:link, +.ui-state-default a:visited { color: #555; - &:link, &:visited { - color: #555; - } } - -.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus { border: 1px solid #ddd; background: #ffffff url('images/ui-bg_flat_100_ffffff_40x100.png') 50% 50% repeat-x; font-weight: bold; color: #333; } - -.ui-state-hover a { +.ui-state-hover a, +.ui-state-hover a:hover, +.ui-state-hover a:link, +.ui-state-hover a:visited { color: #333; - &:hover, &:link, &:visited { - color: #333; - } } - -.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { +.ui-state-active, +.ui-widget-content .ui-state-active, +.ui-widget-header .ui-state-active { border: 1px solid #0082c9; background: #f8f8f8 url('images/ui-bg_glass_100_f8f8f8_1x400.png') 50% 50% repeat-x; font-weight: bold; color: #0082c9; } - -.ui-state-active a { +.ui-state-active a, +.ui-state-active a:link, +.ui-state-active a:visited { color: #0082c9; - &:link, &:visited { - color: #0082c9; - } } /* Interaction Cues ----------------------------------*/ - -.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { +.ui-state-highlight, +.ui-widget-content .ui-state-highlight, +.ui-widget-header .ui-state-highlight { border: 1px solid #ddd; background: #f8f8f8 url('images/ui-bg_highlight-hard_100_f8f8f8_1x100.png') 50% top repeat-x; color: #555; } - -.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { +.ui-state-highlight a, +.ui-widget-content .ui-state-highlight a, +.ui-widget-header .ui-state-highlight a { color: #555; } - -.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { +.ui-state-error, +.ui-widget-content .ui-state-error, +.ui-widget-header .ui-state-error { border: 1px solid #cd0a0a; background: #b81900 url('images/ui-bg_diagonals-thick_18_b81900_40x40.png') 50% 50% repeat; color: #ffffff; } - -.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a, .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { +.ui-state-error a, +.ui-widget-content .ui-state-error a, +.ui-widget-header .ui-state-error a { + color: #ffffff; +} +.ui-state-error-text, +.ui-widget-content .ui-state-error-text, +.ui-widget-header .ui-state-error-text { color: #ffffff; } /* Icons ----------------------------------*/ - -.ui-state-default .ui-icon, .ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-state-active .ui-icon { +.ui-state-default .ui-icon { + background-image: url('images/ui-icons_1d2d44_256x240.png'); +} +.ui-state-hover .ui-icon, +.ui-state-focus .ui-icon { + background-image: url('images/ui-icons_1d2d44_256x240.png'); +} +.ui-state-active .ui-icon { background-image: url('images/ui-icons_1d2d44_256x240.png'); } - .ui-state-highlight .ui-icon { background-image: url('images/ui-icons_ffffff_256x240.png'); } - -.ui-state-error .ui-icon, .ui-state-error-text .ui-icon { +.ui-state-error .ui-icon, +.ui-state-error-text .ui-icon { background-image: url('images/ui-icons_ffd27a_256x240.png'); } /* Misc visuals ----------------------------------*/ /* Overlays */ - .ui-widget-overlay { background: #666666 url('images/ui-bg_diagonals-thick_20_666666_40x40.png') 50% 50% repeat; opacity: .5; } - .ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; diff --git a/core/css/installation.css b/core/css/setup.css similarity index 68% rename from core/css/installation.css rename to core/css/setup.css index 69c98f1ea2..67b155999b 100644 --- a/core/css/installation.css +++ b/core/css/setup.css @@ -307,61 +307,6 @@ form #datadirField legend { margin: 0 auto; } -/* 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)'; - opacity: .8; -} - -#show + label, #dbpassword + label, #personal-show + label { - position: absolute !important; - height: 20px; - width: 24px; - background-image: url("../img/actions/toggle.svg?v=1"); - background-repeat: no-repeat; - background-position: center; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; - opacity: .3; -} - -#show + label:before, #dbpassword + label:before, #personal-show + label:before { - display: none; -} - -#pass2, input[name='personal-password-clone'] { - padding: .6em 2.5em .4em .4em; - width: 8em; -} - -#personal-show + label { - height: 14px; - margin-top: -25px; - left: 295px; - display: block; -} - -#passwordbutton { - margin-left: .5em; -} - /* LOADER */ #body-login .float-spinner { margin-top: -32px; @@ -596,11 +541,11 @@ form #datadirField legend { /* Update info */ #body-login .update { - width: inherit; - text-align: center; + width: inherit; + text-align: center; } #body-login .update h2 { - margin: 0 0 20px; + margin: 0 0 20px; } #body-login .update a { @@ -610,20 +555,20 @@ form #datadirField legend { /* INPUTS */ input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="time"], input[type="date"], 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; + 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; } #body-login input { - font-size: 20px; - margin: 5px; - padding: 11px 10px 9px; + font-size: 20px; + margin: 5px; + padding: 11px 10px 9px; } input[type="submit"], input[type="button"], button, .button { width: auto; @@ -668,47 +613,6 @@ input[type='submit'] { /* larger log in and installation buttons */ } -/* Nicely grouping input field sets */ -.grouptop, .groupmiddle, .groupbottom { - position: relative; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.grouptop input { - margin-bottom: 0 !important; - border-bottom: 0 !important; - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} - -.groupmiddle input { - margin-top: 0 !important; - margin-bottom: 0 !important; - border-top: 0 !important; - border-bottom: 0 !important; - border-radius: 0 !important; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; -} - -.groupbottom input { - margin-top: 0 !important; - border-top: 0 !important; - border-top-right-radius: 0 !important; - border-top-left-radius: 0 !important; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; -} - -.groupbottom input[type=submit] { - box-shadow: none !important; -} - -label.infield { - display: none; -} - /* Primary action button, use sparingly */ .primary { border: 1px solid #0082c9; @@ -798,5 +702,413 @@ button.primary:disabled:focus, .button.primary:disabled:focus { color: #bbb; } input, textarea, select, button { - font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; +} + + +/* LOG IN & INSTALLATION ------------------------------------------------------------ */ +/* overrides another !important statement that sets this to unreadable black */ +#datadirContent label { + width: 100%; +} + +/* Nicely grouping input field sets */ +.grouptop, .groupmiddle, .groupbottom { + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#body-login .grouptop input, .grouptop input { + margin-bottom: 0 !important; + border-bottom: 0 !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +#body-login .groupmiddle input, .groupmiddle input { + margin-top: 0 !important; + margin-bottom: 0 !important; + border-top: 0 !important; + border-bottom: 0 !important; + border-radius: 0 !important; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; +} + +#body-login .groupbottom input, .groupbottom input { + margin-top: 0 !important; + border-top: 0 !important; + border-top-right-radius: 0 !important; + border-top-left-radius: 0 !important; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; +} + +#body-login .groupbottom input[type=submit] { + box-shadow: none !important; +} + +/* keep the labels for screen readers but hide them since we use placeholders */ +label.infield { + display: none; +} + +/* 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)'; + opacity: .8; +} + +#show + label, #dbpassword + label, #personal-show + label { + position: absolute !important; + height: 20px; + width: 24px; + background-image: url("../img/actions/toggle.svg?v=1"); + background-repeat: no-repeat; + background-position: center; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; + opacity: .3; +} + +#show + label:before, #dbpassword + label:before, #personal-show + label:before { + display: none; +} + +#pass2, input[name='personal-password-clone'] { + padding: .6em 2.5em .4em .4em; + width: 8em; +} + +#personal-show + label { + height: 14px; + margin-top: -25px; + left: 295px; + display: block; +} + +#passwordbutton { + margin-left: .5em; +} + +/* Warnings and errors are the same */ +#body-user .warning, #body-settings .warning { + margin-top: 8px; + padding: 5px; + background: #fdd; + border-radius: 3px; +} + +.warning legend, .warning a { + color: #fff !important; + font-weight: 600 !important; +} + +.error a { + color: #fff !important; + font-weight: 600 !important; +} +.error a.button { + color: #555 !important; + display: inline-block; + text-align: center; +} +.error pre { + white-space: pre-wrap; + text-align: left; +} + +.error-wide { + width: 700px; + margin-left: -200px !important; +} +.error-wide .button { + color: black !important; +} + +.warning-input { + border-color: #ce3702 !important; +} + +/* Alternative Logins */ +#alternative-logins legend { + margin-bottom: 10px; +} +#alternative-logins li { + height: 40px; + display: inline-block; + white-space: nowrap; +} + +#remember_login { + margin: 18px 5px 0 16px !important; +} + +#body-login { + background-attachment: fixed; + /* fix background gradient */ + height: 100%; +} +#body-login #header { + padding-top: 100px; +} +#body-login p.info, #body-login form fieldset legend, #body-login #datadirContent label { + text-align: center; + color: #fff; +} +#body-login form fieldset .warning-info, #body-login form input[type='checkbox'] + label { + text-align: center; + color: #fff; +} +#body-login form .warning input[type='checkbox']:hover + label, #body-login form .warning input[type='checkbox']:focus + label, #body-login form .warning input[type='checkbox'] + label { + color: #fff !important; +} +#body-login .update h2 { + margin: 0 0 20px; +} +#body-login .update a { + color: #fff; + border-bottom: 1px solid #aaa; +} +#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 { + margin: 0 auto; + padding-top: 20px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +#body-login p.info a { + font-weight: 600; + padding: 13px; + margin: -13px; +} +#body-login form { + position: relative; + width: 280px; + margin: 16px auto; + padding: 0; +} +#body-login form fieldset { + margin-bottom: 20px; + text-align: left; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +#body-login form #sqliteInformation { + margin-top: -20px; + margin-bottom: 20px; +} +#body-login form #adminaccount { + margin-bottom: 15px; +} +#body-login form fieldset legend { + width: 100%; +} +#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; +} +#body-login .icon-info-white { + padding: 10px; +} +#body-login .strengthify-wrapper { + display: inline-block; + position: relative; + left: 15px; + top: -23px; + width: 250px; +} +#body-login .tipsy-inner { + font-weight: bold; + color: #ccc; +} +#body-login input[type='text'], #body-login input[type='password'], #body-login input[type='email'] { + border: none; + font-weight: 300; +} +#body-login .remember-login-container { + display: inline-block; + margin: 10px 0; + text-align: center; + width: 100%; +} +#body-login #forgot-password { + padding: 11px; + float: right; + color: #fff; +} +#body-login .wrapper { + min-height: 100%; + margin: 0 auto -70px; + width: 300px; +} +#body-login footer, #body-login .push { + height: 70px; +} +#body-login form #selectDbType { + text-align: center; + white-space: nowrap; + margin: 0; +} +#body-login form #selectDbType .info { + white-space: normal; +} +#body-login form #selectDbType label { + position: static; + margin: 0 -3px 5px; + font-size: 12px; + background: #f8f8f8; + color: #888; + cursor: pointer; + border: 1px solid #ddd; +} +#body-login form #selectDbType label span { + cursor: pointer; + padding: 10px 20px; +} +#body-login form #selectDbType label.ui-state-hover, #body-login form #selectDbType label.ui-state-active { + color: #000; + background-color: #e8e8e8; +} +#body-login .warning, #body-login .update, #body-login .error { + display: block; + padding: 10px; + background-color: rgba(0, 0, 0, 0.3); + color: #fff; + text-align: left; + border-radius: 3px; + cursor: default; +} +#body-login .update { + width: inherit; + text-align: center; +} +#body-login .update .appList { + list-style: disc; + text-align: left; + margin-left: 25px; + margin-right: 25px; +} +#body-login .v-align { + width: inherit; +} +#body-login .update img.float-spinner { + float: left; +} +#body-login form input[type='checkbox'] + label { + position: relative; + margin: 0; + padding: 14px; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +#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 #showAdvanced > img { + padding: 4px; + box-sizing: border-box; +} +#body-login p.info a, #body-login #showAdvanced { + color: #fff; +} +#body-login #remember_login:hover + label, #body-login #remember_login:focus + label { + opacity: .6; +} +#body-login #forgot-password:hover, #body-login #forgot-password:focus { + opacity: .6; +} +#body-login p.info a:hover, #body-login p.info a:focus { + opacity: .6; +} +#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: 269px; + background-position: right 16px center; +} +#body-login input[type='submit'] { + padding: 10px 20px; + /* larger log in and installation buttons */ +} +#body-login ul.error-wide { + margin-top: 35px; +} +#body-login .warning { + margin: 0 7px 5px 4px; +} +#body-login .warning legend { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; +} +#body-login a.warning { + cursor: pointer; +} +#body-login .updateProgress .error { + margin-top: 10px; + margin-bottom: 10px; } diff --git a/core/css/styles.scss b/core/css/styles.scss index affaec1434..28c3fb86c7 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -292,478 +292,6 @@ body { opacity: .4; } -/* LOG IN & INSTALLATION ------------------------------------------------------------ */ - -/* Some whitespace to the top */ - -#body-login { - #header { - padding-top: 100px; - } - background-attachment: fixed; - /* fix background gradient */ - height: 100%; - /* fix sticky footer */ - p.info, form fieldset legend, #datadirContent label { - text-align: center; - color: #fff; - } - form { - fieldset .warning-info, input[type='checkbox'] + label { - text-align: center; - color: #fff; - } - .warning input[type='checkbox'] { - &:hover + label, &:focus + label, + label { - color: #fff !important; - } - } - } - .update { - h2 { - margin: 0 0 20px; - } - a { - color: #fff; - border-bottom: 1px solid #aaa; - } - } - .infogroup { - margin-bottom: 15px; - } - p#message img { - vertical-align: middle; - padding: 5px; - } - div.buttons { - text-align: center; - } - p.info { - margin: 0 auto; - padding-top: 20px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - a { - font-weight: 600; - padding: 13px; - margin: -13px; - } - } - form { - position: relative; - width: 280px; - margin: 16px auto; - padding: 0; - fieldset { - margin-bottom: 20px; - text-align: left; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - #sqliteInformation { - margin-top: -20px; - margin-bottom: 20px; - } - #adminaccount { - margin-bottom: 15px; - } - fieldset legend { - width: 100%; - } - } -} - -/* Dark subtle label text */ - -/* overrides another !important statement that sets this to unreadable black */ - -#datadirContent label { - width: 100%; -} - -#body-login { - #datadirContent label { - display: block; - margin: 0; - } - form #datadirField legend { - margin-bottom: 15px; - } - #showAdvanced { - padding: 13px; - /* increase clickable area of Advanced dropdown */ - img { - vertical-align: bottom; - /* adjust position of Advanced dropdown arrow */ - margin-left: -4px; - } - } - .icon-info-white { - padding: 10px; - } - .strengthify-wrapper { - display: inline-block; - position: relative; - left: 15px; - top: -23px; - width: 250px; - } - .tipsy-inner { - font-weight: bold; - color: #ccc; - } - input { - &[type='text'], &[type='password'], &[type='email'] { - border: none; - font-weight: 300; - } - } -} - -/* strengthify wrapper */ - -/* tipsy for the strengthify wrapper looks better with following font settings */ - -/* General new input field look */ - -/* Nicely grouping input field sets */ - -.grouptop, .groupmiddle, .groupbottom { - position: relative; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -#body-login .grouptop input, .grouptop input { - margin-bottom: 0 !important; - border-bottom: 0 !important; - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} - -#body-login .groupmiddle input, .groupmiddle input { - margin-top: 0 !important; - margin-bottom: 0 !important; - border-top: 0 !important; - border-bottom: 0 !important; - border-radius: 0 !important; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; -} - -#body-login .groupbottom input, .groupbottom input { - margin-top: 0 !important; - border-top: 0 !important; - border-top-right-radius: 0 !important; - border-top-left-radius: 0 !important; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; -} - -#body-login .groupbottom input[type=submit] { - box-shadow: none !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; - vertical-align: middle; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - .errors { - background: #fed7d7; - border: 1px solid #f00; - list-style-indent: inside; - margin: 0 0 2em; - padding: 1em; - } - } - .success { - background: #d7fed7; - border: 1px solid #0f0; - width: 35%; - margin: 30px auto; - padding: 1em; - text-align: center; - } - #showAdvanced > img { - padding: 4px; - box-sizing: border-box; - } - p.info a, #showAdvanced { - color: #fff; - } - #remember_login { - &:hover + label, &:focus + label { - opacity: .6; - } - } - #forgot-password { - &:hover, &:focus { - opacity: .6; - } - } - p.info a { - &:hover, &:focus { - opacity: .6; - } - } -} - -/* 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)'; - opacity: .8; -} - -#show + label, #dbpassword + label, #personal-show + label { - position: absolute !important; - height: 20px; - width: 24px; - background-image: url('../img/actions/toggle.svg?v=1'); - background-repeat: no-repeat; - background-position: center; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; - opacity: .3; -} - -#show + label:before, #dbpassword + label:before, #personal-show + label:before { - display: none; -} - -#pass2, input[name='personal-password-clone'] { - padding: .6em 2.5em .4em .4em; - width: 8em; -} - -#personal-show + label { - height: 14px; - margin-top: -25px; - left: 295px; - display: block; -} - -#passwordbutton { - margin-left: .5em; -} - -/* Database selector */ - -#body-login { - form #selectDbType { - text-align: center; - white-space: nowrap; - margin: 0; - .info { - white-space: normal; - } - label { - position: static; - margin: 0 -3px 5px; - font-size: 12px; - background: #f8f8f8; - color: #888; - cursor: pointer; - border: 1px solid #ddd; - span { - cursor: pointer; - padding: 10px 20px; - } - &.ui-state-hover, &.ui-state-active { - color: #000; - background-color: #e8e8e8; - } - } - } - .warning, .update, .error { - display: block; - padding: 10px; - background-color: rgba(0, 0, 0, 0.3); - color: #fff; - text-align: left; - border-radius: 3px; - cursor: default; - } - .update { - width: inherit; - text-align: center; - .appList { - list-style: disc; - text-align: left; - margin-left: 25px; - margin-right: 25px; - } - } - .v-align { - width: inherit; - } - .update img.float-spinner { - float: left; - } -} - -/* Warnings and errors are the same */ - -#body-user .warning, #body-settings .warning { - margin-top: 8px; - padding: 5px; - background: #fdd; - border-radius: 3px; -} - -.warning { - legend, a { - color: #fff !important; - font-weight: 600 !important; - } -} - -.error { - a { - color: #fff !important; - font-weight: 600 !important; - &.button { - color: #555 !important; - display: inline-block; - text-align: center; - } - } - pre { - white-space: pre-wrap; - text-align: left; - } -} - -.error-wide { - width: 700px; - margin-left: -200px !important; - .button { - color: black !important; - } -} - -.warning-input { - border-color: #ce3702 !important; -} - -/* Fixes for log in page, TODO should be removed some time */ - -#body-login { - ul.error-wide { - margin-top: 35px; - } - .warning { - margin: 0 7px 5px 4px; - legend { - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; - opacity: 1; - } - } - a.warning { - cursor: pointer; - } - .updateProgress .error { - margin-top: 10px; - margin-bottom: 10px; - } -} - -/* 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 */ - -/* Alternative Logins */ - -#alternative-logins { - legend { - margin-bottom: 10px; - } - 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; - &[type='text'], &[type='password'] { - width: 249px; - } - &.login { - width: 269px; - background-position: right 16px center; - } - &[type='submit'] { - padding: 10px 20px; - /* larger log in and installation buttons */ - } -} - -#remember_login { - margin: 18px 5px 0 16px !important; -} - -#body-login { - .remember-login-container { - display: inline-block; - margin: 10px 0; - text-align: center; - width: 100%; - } - #forgot-password { - padding: 11px; - float: right; - color: #fff; - } - .wrapper { - min-height: 100%; - margin: 0 auto -70px; - width: 300px; - } - footer, .push { - height: 70px; - } -} - /* Sticky footer */ /* round profile photos */ diff --git a/lib/private/Template/CSSResourceLocator.php b/lib/private/Template/CSSResourceLocator.php index 351e6d1366..6af4e319e3 100644 --- a/lib/private/Template/CSSResourceLocator.php +++ b/lib/private/Template/CSSResourceLocator.php @@ -39,7 +39,7 @@ class CSSResourceLocator extends ResourceLocator { * @param array $party_map * @param SCSSCacher $scssCacher */ - public function __construct(ILogger $logger, $theme, $core_map, $party_map, SCSSCacher $scssCacher) { + public function __construct(ILogger $logger, $theme, $core_map, $party_map, $scssCacher) { $this->scssCacher = $scssCacher; parent::__construct($logger, $theme, $core_map, $party_map); @@ -85,12 +85,17 @@ class CSSResourceLocator extends ResourceLocator { */ protected function cacheAndAppendScssIfExist($root, $file, $webRoot = null) { if (is_file($root.'/'.$file)) { - if($this->scssCacher->process($root, $file)) { - $this->append($root, $this->scssCacher->getCachedSCSS('core', $file), $webRoot, false); - return true; + if($this->scssCacher !== null) { + if($this->scssCacher->process($root, $file)) { + $this->append($root, $this->scssCacher->getCachedSCSS('core', $file), $webRoot, false); + return true; + } else { + $this->logger->error('Failed to compile and/or save '.$root.'/'.$file, ['app' => 'core']); + return false; + } } else { - $this->logger->error('Failed to compile and/or save '.$root.'/'.$file, ['app' => 'core']); - return false; + $this->logger->error('Scss is disabled for '.$root.'/'.$file.', ignoring', ['app' => 'core']); + return true; } } return false; diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php index bc6a485ad4..c3197b0028 100644 --- a/lib/private/TemplateLayout.php +++ b/lib/private/TemplateLayout.php @@ -162,14 +162,11 @@ class TemplateLayout extends \OC_Template { // Add the css files and check if server is already installed to prevent // appdata initialisation before database configuration - if(\OC::$server->getSystemConfig()->getValue('installed', false)) { + // Prevent scss initialisation if an update is needed + if(\OC::$server->getSystemConfig()->getValue('installed', false) && !\OCP\Util::needUpgrade()) { $cssFiles = self::findStylesheetFiles(\OC_Util::$styles); } else { - $cssFiles = array( - [\OC::$SERVERROOT, \OC::$WEBROOT, 'core/css/global.css'], - [\OC::$SERVERROOT, \OC::$WEBROOT, 'core/css/fonts.css'], - [\OC::$SERVERROOT, \OC::$WEBROOT, 'core/css/installation.css'] - ); + $cssFiles = self::findStylesheetFiles(\OC_Util::$styles, false); } $this->assign('cssfiles', array()); $this->assign('printcssfiles', []); @@ -190,16 +187,20 @@ class TemplateLayout extends \OC_Template { * @param array $styles * @return array */ - static public function findStylesheetFiles($styles) { + static public function findStylesheetFiles($styles, $compileScss = true) { // Read the selected theme from the config file $theme = \OC_Util::getTheme(); - $SCSSCacher = new SCSSCacher( - \OC::$server->getLogger(), - \OC::$server->getAppDataDir('css'), - \OC::$server->getURLGenerator(), - \OC::$server->getSystemConfig() - ); + if($compileScss) { + $SCSSCacher = new SCSSCacher( + \OC::$server->getLogger(), + \OC::$server->getAppDataDir('css'), + \OC::$server->getURLGenerator(), + \OC::$server->getSystemConfig() + ); + } else { + $SCSSCacher = null; + } $locator = new \OC\Template\CSSResourceLocator( \OC::$server->getLogger(), From 96d355984dac01b8bd9898ea6566ab341af811aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 10 Jan 2017 11:24:06 +0100 Subject: [PATCH 2/6] Revert styles scss changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/styles.scss | 472 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 472 insertions(+) diff --git a/core/css/styles.scss b/core/css/styles.scss index 28c3fb86c7..affaec1434 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -292,6 +292,478 @@ body { opacity: .4; } +/* LOG IN & INSTALLATION ------------------------------------------------------------ */ + +/* Some whitespace to the top */ + +#body-login { + #header { + padding-top: 100px; + } + background-attachment: fixed; + /* fix background gradient */ + height: 100%; + /* fix sticky footer */ + p.info, form fieldset legend, #datadirContent label { + text-align: center; + color: #fff; + } + form { + fieldset .warning-info, input[type='checkbox'] + label { + text-align: center; + color: #fff; + } + .warning input[type='checkbox'] { + &:hover + label, &:focus + label, + label { + color: #fff !important; + } + } + } + .update { + h2 { + margin: 0 0 20px; + } + a { + color: #fff; + border-bottom: 1px solid #aaa; + } + } + .infogroup { + margin-bottom: 15px; + } + p#message img { + vertical-align: middle; + padding: 5px; + } + div.buttons { + text-align: center; + } + p.info { + margin: 0 auto; + padding-top: 20px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + a { + font-weight: 600; + padding: 13px; + margin: -13px; + } + } + form { + position: relative; + width: 280px; + margin: 16px auto; + padding: 0; + fieldset { + margin-bottom: 20px; + text-align: left; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + #sqliteInformation { + margin-top: -20px; + margin-bottom: 20px; + } + #adminaccount { + margin-bottom: 15px; + } + fieldset legend { + width: 100%; + } + } +} + +/* Dark subtle label text */ + +/* overrides another !important statement that sets this to unreadable black */ + +#datadirContent label { + width: 100%; +} + +#body-login { + #datadirContent label { + display: block; + margin: 0; + } + form #datadirField legend { + margin-bottom: 15px; + } + #showAdvanced { + padding: 13px; + /* increase clickable area of Advanced dropdown */ + img { + vertical-align: bottom; + /* adjust position of Advanced dropdown arrow */ + margin-left: -4px; + } + } + .icon-info-white { + padding: 10px; + } + .strengthify-wrapper { + display: inline-block; + position: relative; + left: 15px; + top: -23px; + width: 250px; + } + .tipsy-inner { + font-weight: bold; + color: #ccc; + } + input { + &[type='text'], &[type='password'], &[type='email'] { + border: none; + font-weight: 300; + } + } +} + +/* strengthify wrapper */ + +/* tipsy for the strengthify wrapper looks better with following font settings */ + +/* General new input field look */ + +/* Nicely grouping input field sets */ + +.grouptop, .groupmiddle, .groupbottom { + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#body-login .grouptop input, .grouptop input { + margin-bottom: 0 !important; + border-bottom: 0 !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +#body-login .groupmiddle input, .groupmiddle input { + margin-top: 0 !important; + margin-bottom: 0 !important; + border-top: 0 !important; + border-bottom: 0 !important; + border-radius: 0 !important; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; +} + +#body-login .groupbottom input, .groupbottom input { + margin-top: 0 !important; + border-top: 0 !important; + border-top-right-radius: 0 !important; + border-top-left-radius: 0 !important; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; +} + +#body-login .groupbottom input[type=submit] { + box-shadow: none !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; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + .errors { + background: #fed7d7; + border: 1px solid #f00; + list-style-indent: inside; + margin: 0 0 2em; + padding: 1em; + } + } + .success { + background: #d7fed7; + border: 1px solid #0f0; + width: 35%; + margin: 30px auto; + padding: 1em; + text-align: center; + } + #showAdvanced > img { + padding: 4px; + box-sizing: border-box; + } + p.info a, #showAdvanced { + color: #fff; + } + #remember_login { + &:hover + label, &:focus + label { + opacity: .6; + } + } + #forgot-password { + &:hover, &:focus { + opacity: .6; + } + } + p.info a { + &:hover, &:focus { + opacity: .6; + } + } +} + +/* 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)'; + opacity: .8; +} + +#show + label, #dbpassword + label, #personal-show + label { + position: absolute !important; + height: 20px; + width: 24px; + background-image: url('../img/actions/toggle.svg?v=1'); + background-repeat: no-repeat; + background-position: center; + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; + opacity: .3; +} + +#show + label:before, #dbpassword + label:before, #personal-show + label:before { + display: none; +} + +#pass2, input[name='personal-password-clone'] { + padding: .6em 2.5em .4em .4em; + width: 8em; +} + +#personal-show + label { + height: 14px; + margin-top: -25px; + left: 295px; + display: block; +} + +#passwordbutton { + margin-left: .5em; +} + +/* Database selector */ + +#body-login { + form #selectDbType { + text-align: center; + white-space: nowrap; + margin: 0; + .info { + white-space: normal; + } + label { + position: static; + margin: 0 -3px 5px; + font-size: 12px; + background: #f8f8f8; + color: #888; + cursor: pointer; + border: 1px solid #ddd; + span { + cursor: pointer; + padding: 10px 20px; + } + &.ui-state-hover, &.ui-state-active { + color: #000; + background-color: #e8e8e8; + } + } + } + .warning, .update, .error { + display: block; + padding: 10px; + background-color: rgba(0, 0, 0, 0.3); + color: #fff; + text-align: left; + border-radius: 3px; + cursor: default; + } + .update { + width: inherit; + text-align: center; + .appList { + list-style: disc; + text-align: left; + margin-left: 25px; + margin-right: 25px; + } + } + .v-align { + width: inherit; + } + .update img.float-spinner { + float: left; + } +} + +/* Warnings and errors are the same */ + +#body-user .warning, #body-settings .warning { + margin-top: 8px; + padding: 5px; + background: #fdd; + border-radius: 3px; +} + +.warning { + legend, a { + color: #fff !important; + font-weight: 600 !important; + } +} + +.error { + a { + color: #fff !important; + font-weight: 600 !important; + &.button { + color: #555 !important; + display: inline-block; + text-align: center; + } + } + pre { + white-space: pre-wrap; + text-align: left; + } +} + +.error-wide { + width: 700px; + margin-left: -200px !important; + .button { + color: black !important; + } +} + +.warning-input { + border-color: #ce3702 !important; +} + +/* Fixes for log in page, TODO should be removed some time */ + +#body-login { + ul.error-wide { + margin-top: 35px; + } + .warning { + margin: 0 7px 5px 4px; + legend { + -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; + opacity: 1; + } + } + a.warning { + cursor: pointer; + } + .updateProgress .error { + margin-top: 10px; + margin-bottom: 10px; + } +} + +/* 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 */ + +/* Alternative Logins */ + +#alternative-logins { + legend { + margin-bottom: 10px; + } + 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; + &[type='text'], &[type='password'] { + width: 249px; + } + &.login { + width: 269px; + background-position: right 16px center; + } + &[type='submit'] { + padding: 10px 20px; + /* larger log in and installation buttons */ + } +} + +#remember_login { + margin: 18px 5px 0 16px !important; +} + +#body-login { + .remember-login-container { + display: inline-block; + margin: 10px 0; + text-align: center; + width: 100%; + } + #forgot-password { + padding: 11px; + float: right; + color: #fff; + } + .wrapper { + min-height: 100%; + margin: 0 auto -70px; + width: 300px; + } + footer, .push { + height: 70px; + } +} + /* Sticky footer */ /* round profile photos */ From e4b3ba65900f4ca4d879d7aa9702ea6a8b0bfee3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 10 Jan 2017 17:44:39 +0100 Subject: [PATCH 3/6] Create unified css file and merge all needed data into this file MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/Controller/LoginController.php | 2 + core/Controller/SetupController.php | 2 +- core/css/guest.css | 576 ++++++++++++++ core/css/setup.css | 1114 --------------------------- core/css/update.css | 449 ----------- lib/base.php | 11 +- lib/private/TemplateLayout.php | 9 +- 7 files changed, 590 insertions(+), 1573 deletions(-) create mode 100644 core/css/guest.css delete mode 100644 core/css/setup.css delete mode 100644 core/css/update.css diff --git a/core/Controller/LoginController.php b/core/Controller/LoginController.php index 3c81ed5242..a2d490cb24 100644 --- a/core/Controller/LoginController.php +++ b/core/Controller/LoginController.php @@ -170,6 +170,8 @@ class LoginController extends Controller { $parameters['user_autofocus'] = true; } + \OC_Util::addStyle('guest'); + return new TemplateResponse( $this->appName, 'login', $parameters, 'guest' ); diff --git a/core/Controller/SetupController.php b/core/Controller/SetupController.php index 930ec82dbb..87508423cd 100644 --- a/core/Controller/SetupController.php +++ b/core/Controller/SetupController.php @@ -92,7 +92,7 @@ class SetupController { \OC_Util::addVendorScript('strengthify/jquery.strengthify'); \OC_Util::addVendorStyle('strengthify/strengthify'); - \OC_Util::addStyle('setup'); + \OC_Util::addStyle('guest'); \OC_Util::addScript('setup'); \OC_Template::printGuestPage('', 'installation', $parameters); } diff --git a/core/css/guest.css b/core/css/guest.css new file mode 100644 index 0000000000..be7247d27c --- /dev/null +++ b/core/css/guest.css @@ -0,0 +1,576 @@ +/* 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. */ + +/* Default and reset */ +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: 400; + font-size: .8em; + line-height: 1.6em; + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; + color: #000; + text-align: center; + background-color: #0082c9; + background-image: url('../img/background.jpg?v=1'); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; /* fix background gradient */ + height: 100%; /* fix sticky footer */ +} + +/* Various fonts settings */ +p.info a, +#showAdvanced { + color: #fff; +} +#remember_login:hover+label, +#remember_login:focus+label, +#forgot-password:hover, +#forgot-password:focus, +p.info a:hover, +p.info a:focus { + opacity: .6; +} +em { + font-style: normal; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + opacity: .5; +} + +/* heading styles */ +h2 { + font-size: 20px; + font-weight: 300; + margin-bottom: 12px; + line-height: 140%; +} +h3 { + font-size: 15px; + font-weight: 300; + margin: 12px 0; +} + +/* Global content */ +#header { + padding-top: 100px; +} +#header .logo { + background-image: url(../img/logo-icon.svg?v=1); + background-repeat: no-repeat; + background-size: 175px; + background-position: center; + width: 252px; + height: 120px; + margin: 0 auto; +} +.wrapper { + min-height: 100%; + margin: 0 auto -70px; + width: 300px; +} +.v-align { + width: inherit; +} + +/* Default FORM */ +form { + position: relative; + width: 280px; + margin: 16px auto; + padding: 0; +} +form fieldset { + margin-bottom: 20px; + text-align: left; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +form #sqliteInformation { + margin-top: -20px; + margin-bottom: 20px; +} +form #adminaccount { + margin-bottom: 15px; +} +form fieldset legend, #datadirContent label { + width: 100%; +} +#datadirContent label { + display: block; + margin: 0; +} +form #datadirField legend { + margin-bottom: 15px; +} + +/* View more button */ +#showAdvanced { + padding: 13px; /* increase clickable area of Advanced dropdown */ +} +#showAdvanced img { + vertical-align: bottom; /* adjust position of Advanced dropdown arrow */ + margin-left: -4px; +} + +/* Buttons and input */ +input, textarea, select, button { + font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; +} +input { + font-size: 20px; + margin: 5px; + padding: 11px 10px 9px; + outline: none; + border-radius: 3px; +} +input[type="submit"], +input[type="button"], +button, .button, +select { + width: auto; + min-width: 25px; + padding: 5px; + background-color: rgba(240,240,240,.9); + font-weight: 600; + color: #555; + border: 1px solid rgba(240,240,240,.9); + cursor: pointer; +} +input[type="text"], +input[type="password"], +input[type='email'] { + width: 249px; + background: #fff; + color: #555; + cursor: text; + font-family: inherit; + -webkit-appearance: textfield; + -moz-appearance: textfield; + box-sizing: content-box; + border: none; + font-weight: 300; +} +input.login { + width: 269px; + background-position: right 16px center; +} +input[type="submit"], +input.updateButton, +input.update-continue { + padding: 10px 20px; /* larger log in and installation buttons */ +} +input.primary, +button.primary { + border: 1px solid #0082c9; + background-color: #00a2e9; + color: #fff; +} + +/* Radio and Checkbox */ +input[type="checkbox"].checkbox { + position: absolute; + left:-10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} +input[type="checkbox"].checkbox + label:before { + content: ""; + display: inline-block; + + height: 20px; + width: 20px; + vertical-align: middle; + + background: url('../img/actions/checkbox.svg') left top no-repeat; +} +input[type="checkbox"].checkbox:disabled +label:before { opacity: .6; } +input[type="checkbox"].checkbox.u-left +label:before { float: left; } +input[type="checkbox"].checkbox.u-hidden + label:before { display: none; } +input[type="checkbox"].checkbox:checked + label:before { + background-image: url('../img/actions/checkbox-checked.svg'); +} +input[type="checkbox"].checkbox:indeterminate + label:before { + background-image: url('../img/actions/checkbox-mixed.svg'); +} +input[type="checkbox"].checkbox:disabled + label:before { + background-image: url('../img/actions/checkbox-disabled.svg'); +} +input[type="checkbox"].checkbox:checked:disabled + label:before { + background-image: url('../img/actions/checkbox-checked-disabled.svg'); +} +input[type="checkbox"].checkbox:indeterminate:disabled + label:before { + background-image: url('../img/actions/checkbox-mixed-disabled.svg'); +} +input[type="checkbox"].checkbox--white + label:before { + background-image: url('../img/actions/checkbox-white.svg'); +} +input[type="checkbox"].checkbox--white:checked + label:before { + background-image: url('../img/actions/checkbox-checked-white.svg'); +} +input[type="checkbox"].checkbox--white:indeterminate + label:before { + background-image: url('../img/actions/checkbox-mixed-white.svg'); +} +input[type="checkbox"].checkbox--white:disabled + label:before { + background-image: url('../img/actions/checkbox-disabled-white.svg'); +} +input[type="checkbox"].checkbox--white:checked:disabled + label:before { + background-image: url('../img/actions/checkbox-checked-disabled.svg'); +} +input[type="checkbox"].checkbox--white:indeterminate:disabled + label:before { + background-image: url('../img/actions/checkbox-mixed-disabled.svg'); +} +input[type="checkbox"].checkbox:hover+label:before, input[type="checkbox"]:focus+label:before { + color:#111 !important; +} +input[type="checkbox"]+label { + position: relative; + margin: 0; + padding: 14px; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +input[type="radio"].radio { + position: absolute; + left:-10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} +input[type="radio"].radio + label:before { + content: ""; + display: inline-block; + + height: 20px; + width: 20px; + vertical-align: middle; + + background: url('../img/actions/radio.svg') left top no-repeat; +} +input[type="radio"].radio:checked + label:before { + background-image: url('../img/actions/radio-checked.svg'); +} +input[type="radio"].radio:disabled + label:before { + background-image: url('../img/actions/radio-disabled.svg'); +} +input[type="radio"].radio:checked:disabled + label:before { + background-image: url('../img/actions/radio-checked-disabled.svg'); +} +input[type="radio"].radio--white + label:before { + background-image: url('../img/actions/radio-white.svg'); +} +input[type="radio"].radio--white:checked + label:before { + background-image: url('../img/actions/radio-checked-white.svg'); +} +input[type="radio"].radio--white:disabled + label:before { + background-image: url('../img/actions/radio-disabled.svg'); +} +input[type="radio"].radio--white:checked:disabled + label:before { + background-image: url('../img/actions/radio-checked-disabled.svg'); +} + +/* keep the labels for screen readers but hide them since we use placeholders */ +label.infield { + display: none; +} + +/* 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)"; + opacity: .8; +} +#show + label, #dbpassword + label, #personal-show + label { + position: absolute !important; + height: 20px; + width: 24px; + background-image: url('../img/actions/toggle.svg?v=1'); + background-repeat: no-repeat; + background-position: center; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; + opacity: .3; +} +#show + label:before, #dbpassword + label:before, #personal-show + label:before { + display: none; +} +#pass2, input[name="personal-password-clone"] { + padding: .6em 2.5em .4em .4em; + width: 8em; +} +#personal-show + label { + height: 14px; + margin-top: -25px; + left: 295px; + display: block; +} +#passwordbutton { + margin-left: .5em; +} + +/* Dark subtle label text */ +p.info, +form fieldset legend, +#datadirContent label, +form fieldset .warning-info, +form input[type="checkbox"]+label { + text-align: center; + color: #fff; +} +/* overrides another !important statement that sets this to unreadable black */ +form .warning input[type="checkbox"]:hover+label, +form .warning input[type="checkbox"]:focus+label, +form .warning input[type="checkbox"]+label { + color: #fff !important; +} + +/* Additional login options */ +#remember_login { + margin: 18px 5px 0 16px !important; +} +.remember-login-container { + display: inline-block; + margin: 10px 0; + text-align: center; + width: 100%; +} +#forgot-password { + padding: 11px; + float: right; + color: #fff; +} + +/* Alternative Logins */ +#alternative-logins legend { margin-bottom:10px; } +#alternative-logins li { height:40px; display:inline-block; white-space:nowrap; } + +/* 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 */ +.updateProgress .error { + margin-top: 10px; + margin-bottom: 10px; +} + +/* Database selector on install page */ +form #selectDbType { + text-align:center; + white-space: nowrap; + margin: 0; +} +form #selectDbType .info { + white-space: normal; +} +form #selectDbType label { + position: static; + margin: 0 -3px 5px; + font-size: 12px; + background:#f8f8f8; + color:#888; + cursor:pointer; + border: 1px solid #ddd; +} +form #selectDbType label span { + cursor: pointer; + padding: 10px 20px; +} +form #selectDbType label.ui-state-hover, +form #selectDbType label.ui-state-active { + color:#000; + background-color:#e8e8e8; } + +/* Nicely grouping input field sets */ +.grouptop, +.groupmiddle, +.groupbottom { + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.grouptop input { + margin-bottom: 0 !important; + border-bottom: 0 !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} +.groupmiddle input { + margin-top: 0 !important; + margin-bottom: 0 !important; + border-top: 0 !important; + border-bottom: 0 !important; + border-radius: 0 !important; + box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important; +} +.groupbottom input { + margin-top: 0 !important; + border-top: 0 !important; + border-top-right-radius: 0 !important; + border-top-left-radius: 0 !important; + box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important; +} +.groupbottom input[type=submit] { + box-shadow: none !important; +} + +/* Errors */ +/* Warnings and errors are the same */ +.warning, +.update, +.error { + display: block; + padding: 10px; + background-color: rgba(0,0,0,.3); + color: #fff; + text-align: left; + border-radius: 3px; + cursor: default; +} +.warning, { + padding: 5px; + background: #fdd; + margin: 0 7px 5px 4px; +} +.warning legend, +.warning a, +.error a { + color: #fff !important; + font-weight: 600 !important; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; +} +.error a.button { + color: #555 !important; + display: inline-block; + text-align: center; +} +.error pre { + white-space: pre-wrap; + text-align: left; +} +.error-wide { + width: 700px; + margin-left: -200px !important; + margin-top: 35px; +} +.error-wide .button { + color: black !important; +} +.warning-input { + border-color: #ce3702 !important; +} +a.warning { + cursor: pointer; +} +fieldset.warning legend, +fieldset.update legend { + top: 18px; + position: relative; +} +fieldset.warning legend + p, +fieldset.update legend + p { + margin-top: 12px; +} + +/* Various paragraph styles */ +.infogroup { + margin-bottom: 15px; +} +p.info { + margin: 0 auto; + padding-top: 20px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +/* Update */ +.update { + width: inherit; + text-align: center; +} +.update .appList { + list-style: disc; + text-align: left; + margin-left: 25px; + margin-right: 25px; +} +.update img.float-spinner { + float: left; +} +.update h2 { + margin: 0 0 20px; +} +.update a { + color: #fff; + border-bottom: 1px solid #aaa; +} +.update a.update-show-detailed { + border-bottom: inherit; +} +#update-progress-detailed { + text-align: left; +} +.update-show-detailed { + padding: 13px; + display: block; + opacity: .75; +} +#update-progress-icon { + height: 32px; + margin: 10px; + background-size: 32px; +} + +/* Icons */ +[class^="icon-"], +[class*=" icon-"] { + background-repeat: no-repeat; + background-position: center; + min-width: 16px; + min-height: 16px; +} +.icon-checkmark-white { + background-image: url(../img/actions/checkmark-white.svg?v=1); +} + +/* FOOTER */ +footer, +.push { + height: 70px; +} \ No newline at end of file diff --git a/core/css/setup.css b/core/css/setup.css deleted file mode 100644 index 67b155999b..0000000000 --- a/core/css/setup.css +++ /dev/null @@ -1,1114 +0,0 @@ -/* -* Installation css file. -* This file is used on the install page only when the database -* isn't set, preventing scss files to be stored using the AppdataController. -* It should contain every style needed to correctly display the installation template. -* -*/ - -/* Reset */ -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; - cursor: pointer; -} -a * { - cursor: pointer; -} - -input { - cursor: pointer; -} -input * { - cursor: pointer; -} - -select, .button span, label { - cursor: pointer; -} - -ul { - list-style: none; -} - -body { - background-color: #ffffff; - font-weight: 400; - font-size: .8em; - line-height: 1.6em; - font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; - color: #000; - height: auto; -} - -/* Global */ -#body-login { - text-align: center; - background-color: #0082c9; - background-image: url("../img/background.jpg?v=1"); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: cover; - background-attachment: fixed; - /* fix background gradient */ - height: 100%; - /* fix sticky footer */ -} - - -/* heading styles */ -h2 { - font-size: 20px; - font-weight: 300; - margin-bottom: 12px; - line-height: 140%; -} -h3 { - font-size: 15px; - font-weight: 300; - margin: 12px 0; -} - - -/* do not use italic typeface style, instead lighter color */ -em { - font-style: normal; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - opacity: .5; -} - -#header { - padding-top: 100px; -} - -p.info, form fieldset legend, #datadirContent label { - text-align: center; - color: #fff; -} - -form fieldset .warning-info, form input[type='checkbox'] + label { - text-align: center; - color: #fff; -} -form .warning input[type='checkbox']:hover + label, form .warning input[type='checkbox']:focus + label, form .warning input[type='checkbox'] + label { - color: #fff !important; -} - -.infogroup { - margin-bottom: 15px; -} - -p#message img { - vertical-align: middle; - padding: 5px; -} - -div.buttons { - text-align: center; -} - -p.info { - width: 22em; - margin: 0 auto; - padding-top: 20px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -p.info a { - font-weight: 600; - padding: 13px; - margin: -13px; - color: #fff; -} - -#body-login .warning, #body-login .update, #body-login .error { - display: block; - padding: 10px; - background-color: rgba(0, 0, 0, 0.3); - color: #fff; - text-align: left; - border-radius: 3px; - cursor: default; -} - -#body-login .warning { - margin: 0 7px 5px 4px; -} - -form { - position: relative; - width: 280px; - margin: 16px auto; - padding: 0; -} -form fieldset { - margin-bottom: 20px; - text-align: left; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -form #sqliteInformation { - margin-top: -20px; - margin-bottom: 20px; -} -form #adminaccount { - margin-bottom: 15px; -} -form fieldset legend { - width: 100%; -} -form fieldset.warning legend, form fieldset.update legend { - top: 18px; - position: relative; -} -form fieldset.warning legend + p, form fieldset.update legend + p { - margin-top: 12px; -} -form input[type='checkbox'] + label { - position: relative; - margin: 0; - padding: 14px; - vertical-align: middle; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -form .errors { - background: #fed7d7; - border: 1px solid #f00; - list-style-indent: inside; - margin: 0 0 2em; - padding: 1em; -} -form .success { - background: #d7fed7; - border: 1px solid #0f0; - width: 35%; - margin: 30px auto; - padding: 1em; - text-align: center; -} -form #showAdvanced > img { - padding: 4px; - box-sizing: border-box; -} -form p.info a, form #showAdvanced { - color: #fff; -} -form #remember_login:hover + label, form #remember_login:focus + label { - opacity: .6; -} -form #forgot-password:hover, form #forgot-password:focus { - opacity: .6; -} -form p.info a:hover, form p.info a:focus { - opacity: .6; -} -form footer .info { - white-space: nowrap; -} - -#datadirContent label { - display: block; - width: 100%; - margin: 0; -} - -form #datadirField legend { - margin-bottom: 15px; -} - -#showAdvanced { - padding: 13px; - /* increase clickable area of Advanced dropdown */ -} -#showAdvanced img { - vertical-align: bottom; - /* adjust position of Advanced dropdown arrow */ - margin-left: -4px; -} - -.icon-info-white { - padding: 10px; -} - -.float-spinner { - height: 32px; - display: none; -} - -.strengthify-wrapper { - display: inline-block; - position: relative; - left: 15px; - top: -23px; - width: 250px; -} - -.tipsy-inner { - font-weight: bold; - color: #ccc; -} - - -/* LOGO */ -#header .logo { - background-image: url(../img/logo-icon.svg?v=1); - background-repeat: no-repeat; - background-size: 175px; - background-position: center; - width: 252px; - height: 120px; - margin: 0 auto; -} - -/* LOADER */ -#body-login .float-spinner { - margin-top: -32px; - padding-top: 32px; -} - -[class^='icon-'], [class*=' icon-'] { - background-repeat: no-repeat; - background-position: center; - min-width: 16px; - min-height: 16px; -} - -.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark { - position: relative; -} - -.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { - z-index: 2; - content: ''; - height: 32px; - width: 32px; - margin: -17px 0 0 -17px; - position: absolute; - top: 50%; - left: 50%; - border-radius: 100%; - -webkit-animation: rotate .8s infinite linear; - animation: rotate .8s infinite linear; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { - border: 2px solid rgba(150, 150, 150, 0.5); - border-top-color: #646464; -} - -.icon-loading-dark:after, .icon-loading-small-dark:after { - border: 2px solid rgba(187, 187, 187, 0.5); - border-top-color: #bbb; -} - -.icon-loading-small:after, .icon-loading-small-dark:after { - height: 16px; - width: 16px; - margin: -9px 0 0 -9px; -} - -.icon-info-white { - background-image: url(../img/actions/info-white.svg?v=1); -} - -@-webkit-keyframes rotate { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes rotate { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -/*! - * Bootstrap v3.3.5 (http://getbootstrap.com) - * Copyright 2011-2015 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - */ -.tooltip { - position: absolute; - z-index: 1070; - display: block; - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-style: normal; - font-weight: normal; - letter-spacing: normal; - line-break: auto; - line-height: 1.42857143; - text-align: left; - text-align: start; - text-decoration: none; - text-shadow: none; - text-transform: none; - white-space: normal; - word-break: normal; - word-spacing: normal; - word-wrap: normal; - font-size: 12px; - opacity: 0; - filter: alpha(opacity=0); -} -.tooltip.in { - opacity: 0.9; - filter: alpha(opacity=90); -} -.tooltip.top { - margin-top: -3px; - padding: 5px 0; -} -.tooltip.right { - margin-left: 3px; - padding: 0 5px; -} -.tooltip.bottom { - margin-top: 3px; - padding: 5px 0; -} -.tooltip.left { - margin-left: -3px; - padding: 0 5px; -} - -.tooltip-inner { - max-width: 350px; - padding: 3px 8px; - color: #ffffff; - text-align: center; - background-color: #000000; - border-radius: 4px; -} - -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.tooltip.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; -} -.tooltip.top-left .tooltip-arrow { - bottom: 0; - right: 5px; - margin-bottom: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; -} -.tooltip.top-right .tooltip-arrow { - bottom: 0; - left: 5px; - margin-bottom: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; -} -.tooltip.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-width: 5px 5px 5px 0; - border-right-color: #000000; -} -.tooltip.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-width: 5px 0 5px 5px; - border-left-color: #000000; -} -.tooltip.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; -} -.tooltip.bottom-left .tooltip-arrow { - top: 0; - right: 5px; - margin-top: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; -} -.tooltip.bottom-right .tooltip-arrow { - top: 0; - left: 5px; - margin-top: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; -} - -/* SCROLLING */ -::-webkit-scrollbar { - width: 5px; -} - -::-webkit-scrollbar-track-piece { - background-color: transparent; -} - -::-webkit-scrollbar-thumb { - background: #ddd; - border-radius: 3px; -} -.error-wide { - width: 700px; - margin-left: -200px !important; -} - -/* Config write issue */ -#body-login .v-align { - width: inherit; -} -#body-login .wrapper { - min-height: 100%; - margin: 0 auto -70px; - width: 300px; -} -.warning legend, .warning a, .error a { - color: #fff !important; - font-weight: 600 !important; -} -#body-login ul.error-wide { - margin-top: 35px; -} - -/* Update info */ -#body-login .update { - width: inherit; - text-align: center; -} -#body-login .update h2 { - margin: 0 0 20px; -} - -#body-login .update a { - color: #fff; - border-bottom: 1px solid #aaa; -} - -/* INPUTS */ -input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="time"], input[type="date"], 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; -} -#body-login input { - font-size: 20px; - margin: 5px; - padding: 11px 10px 9px; -} -input[type="submit"], input[type="button"], button, .button { - width: auto; - min-width: 25px; - padding: 5px; - background-color: rgba(240, 240, 240, 0.9); - font-weight: 600; - color: #555; - border: 1px solid rgba(240, 240, 240, 0.9); - cursor: pointer; -} - -input { - font-size: 20px; - margin: 5px; - padding: 11px 10px 9px; -} -input[type='text'], input[type='password'], input[type='email'] { - font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; - border: none; - font-weight: 300; - font-size: 20px; - margin: 5px; - padding: 11px 10px 9px; - -webkit-appearance: textfield; - -moz-appearance: textfield; - box-sizing: content-box; - background: #fff; - color: #555; - cursor: text; - font-family: inherit; - outline: none; - border-radius: 3px; - width: 249px; -} -input.login { - width: 269px; - background-position: right 16px center; -} -input[type='submit'] { - padding: 10px 20px; - /* larger log in and installation buttons */ -} - -/* Primary action button, use sparingly */ -.primary { - border: 1px solid #0082c9; - background-color: #00a2e9; - color: #fff; -} - -input[type='submit'].primary, input[type='button'].primary { - border: 1px solid #0082c9; - background-color: #00a2e9; - color: #fff; -} - -button.primary, .button.primary { - border: 1px solid #0082c9; - background-color: #00a2e9; - color: #fff; -} - -.primary:hover { - background-color: #0092d9; - color: #fff; -} - -input[type='submit'].primary:hover, input[type='button'].primary:hover { - background-color: #0092d9; - color: #fff; -} - -button.primary:hover, .button.primary:hover, .primary:focus { - background-color: #0092d9; - color: #fff; -} - -input[type='submit'].primary:focus, input[type='button'].primary:focus { - background-color: #0092d9; - color: #fff; -} - -button.primary:focus, .button.primary:focus { - background-color: #0092d9; - color: #fff; -} - -.primary:active { - background-color: #00a2e9; - color: #bbb; -} - -input[type='submit'].primary:active, input[type='button'].primary:active { - background-color: #00a2e9; - color: #bbb; -} - -button.primary:active, .button.primary:active, .primary:disabled { - background-color: #00a2e9; - color: #bbb; -} - -input[type='submit'].primary:disabled, input[type='button'].primary:disabled { - background-color: #00a2e9; - color: #bbb; -} - -button.primary:disabled, .button.primary:disabled, .primary:disabled:hover { - background-color: #00a2e9; - color: #bbb; -} - -input[type='submit'].primary:disabled:hover, input[type='button'].primary:disabled:hover { - background-color: #00a2e9; - color: #bbb; -} - -button.primary:disabled:hover, .button.primary:disabled:hover, .primary:disabled:focus { - background-color: #00a2e9; - color: #bbb; -} - -input[type='submit'].primary:disabled:focus, input[type='button'].primary:disabled:focus { - background-color: #00a2e9; - color: #bbb; -} - -button.primary:disabled:focus, .button.primary:disabled:focus { - background-color: #00a2e9; - color: #bbb; -} -input, textarea, select, button { - font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; -} - - -/* LOG IN & INSTALLATION ------------------------------------------------------------ */ -/* overrides another !important statement that sets this to unreadable black */ -#datadirContent label { - width: 100%; -} - -/* Nicely grouping input field sets */ -.grouptop, .groupmiddle, .groupbottom { - position: relative; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -#body-login .grouptop input, .grouptop input { - margin-bottom: 0 !important; - border-bottom: 0 !important; - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} - -#body-login .groupmiddle input, .groupmiddle input { - margin-top: 0 !important; - margin-bottom: 0 !important; - border-top: 0 !important; - border-bottom: 0 !important; - border-radius: 0 !important; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; -} - -#body-login .groupbottom input, .groupbottom input { - margin-top: 0 !important; - border-top: 0 !important; - border-top-right-radius: 0 !important; - border-top-left-radius: 0 !important; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset !important; -} - -#body-login .groupbottom input[type=submit] { - box-shadow: none !important; -} - -/* keep the labels for screen readers but hide them since we use placeholders */ -label.infield { - display: none; -} - -/* 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)'; - opacity: .8; -} - -#show + label, #dbpassword + label, #personal-show + label { - position: absolute !important; - height: 20px; - width: 24px; - background-image: url("../img/actions/toggle.svg?v=1"); - background-repeat: no-repeat; - background-position: center; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; - opacity: .3; -} - -#show + label:before, #dbpassword + label:before, #personal-show + label:before { - display: none; -} - -#pass2, input[name='personal-password-clone'] { - padding: .6em 2.5em .4em .4em; - width: 8em; -} - -#personal-show + label { - height: 14px; - margin-top: -25px; - left: 295px; - display: block; -} - -#passwordbutton { - margin-left: .5em; -} - -/* Warnings and errors are the same */ -#body-user .warning, #body-settings .warning { - margin-top: 8px; - padding: 5px; - background: #fdd; - border-radius: 3px; -} - -.warning legend, .warning a { - color: #fff !important; - font-weight: 600 !important; -} - -.error a { - color: #fff !important; - font-weight: 600 !important; -} -.error a.button { - color: #555 !important; - display: inline-block; - text-align: center; -} -.error pre { - white-space: pre-wrap; - text-align: left; -} - -.error-wide { - width: 700px; - margin-left: -200px !important; -} -.error-wide .button { - color: black !important; -} - -.warning-input { - border-color: #ce3702 !important; -} - -/* Alternative Logins */ -#alternative-logins legend { - margin-bottom: 10px; -} -#alternative-logins li { - height: 40px; - display: inline-block; - white-space: nowrap; -} - -#remember_login { - margin: 18px 5px 0 16px !important; -} - -#body-login { - background-attachment: fixed; - /* fix background gradient */ - height: 100%; -} -#body-login #header { - padding-top: 100px; -} -#body-login p.info, #body-login form fieldset legend, #body-login #datadirContent label { - text-align: center; - color: #fff; -} -#body-login form fieldset .warning-info, #body-login form input[type='checkbox'] + label { - text-align: center; - color: #fff; -} -#body-login form .warning input[type='checkbox']:hover + label, #body-login form .warning input[type='checkbox']:focus + label, #body-login form .warning input[type='checkbox'] + label { - color: #fff !important; -} -#body-login .update h2 { - margin: 0 0 20px; -} -#body-login .update a { - color: #fff; - border-bottom: 1px solid #aaa; -} -#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 { - margin: 0 auto; - padding-top: 20px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -#body-login p.info a { - font-weight: 600; - padding: 13px; - margin: -13px; -} -#body-login form { - position: relative; - width: 280px; - margin: 16px auto; - padding: 0; -} -#body-login form fieldset { - margin-bottom: 20px; - text-align: left; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -#body-login form #sqliteInformation { - margin-top: -20px; - margin-bottom: 20px; -} -#body-login form #adminaccount { - margin-bottom: 15px; -} -#body-login form fieldset legend { - width: 100%; -} -#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; -} -#body-login .icon-info-white { - padding: 10px; -} -#body-login .strengthify-wrapper { - display: inline-block; - position: relative; - left: 15px; - top: -23px; - width: 250px; -} -#body-login .tipsy-inner { - font-weight: bold; - color: #ccc; -} -#body-login input[type='text'], #body-login input[type='password'], #body-login input[type='email'] { - border: none; - font-weight: 300; -} -#body-login .remember-login-container { - display: inline-block; - margin: 10px 0; - text-align: center; - width: 100%; -} -#body-login #forgot-password { - padding: 11px; - float: right; - color: #fff; -} -#body-login .wrapper { - min-height: 100%; - margin: 0 auto -70px; - width: 300px; -} -#body-login footer, #body-login .push { - height: 70px; -} -#body-login form #selectDbType { - text-align: center; - white-space: nowrap; - margin: 0; -} -#body-login form #selectDbType .info { - white-space: normal; -} -#body-login form #selectDbType label { - position: static; - margin: 0 -3px 5px; - font-size: 12px; - background: #f8f8f8; - color: #888; - cursor: pointer; - border: 1px solid #ddd; -} -#body-login form #selectDbType label span { - cursor: pointer; - padding: 10px 20px; -} -#body-login form #selectDbType label.ui-state-hover, #body-login form #selectDbType label.ui-state-active { - color: #000; - background-color: #e8e8e8; -} -#body-login .warning, #body-login .update, #body-login .error { - display: block; - padding: 10px; - background-color: rgba(0, 0, 0, 0.3); - color: #fff; - text-align: left; - border-radius: 3px; - cursor: default; -} -#body-login .update { - width: inherit; - text-align: center; -} -#body-login .update .appList { - list-style: disc; - text-align: left; - margin-left: 25px; - margin-right: 25px; -} -#body-login .v-align { - width: inherit; -} -#body-login .update img.float-spinner { - float: left; -} -#body-login form input[type='checkbox'] + label { - position: relative; - margin: 0; - padding: 14px; - vertical-align: middle; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -#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 #showAdvanced > img { - padding: 4px; - box-sizing: border-box; -} -#body-login p.info a, #body-login #showAdvanced { - color: #fff; -} -#body-login #remember_login:hover + label, #body-login #remember_login:focus + label { - opacity: .6; -} -#body-login #forgot-password:hover, #body-login #forgot-password:focus { - opacity: .6; -} -#body-login p.info a:hover, #body-login p.info a:focus { - opacity: .6; -} -#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: 269px; - background-position: right 16px center; -} -#body-login input[type='submit'] { - padding: 10px 20px; - /* larger log in and installation buttons */ -} -#body-login ul.error-wide { - margin-top: 35px; -} -#body-login .warning { - margin: 0 7px 5px 4px; -} -#body-login .warning legend { - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; - opacity: 1; -} -#body-login a.warning { - cursor: pointer; -} -#body-login .updateProgress .error { - margin-top: 10px; - margin-bottom: 10px; -} diff --git a/core/css/update.css b/core/css/update.css deleted file mode 100644 index 0ae72fd04a..0000000000 --- a/core/css/update.css +++ /dev/null @@ -1,449 +0,0 @@ -#update-progress-icon { - height: 32px; - margin: 10px; - background-size: 32px; -} - -#update-progress-message-error, -#update-progress-message-warnings { - font-weight: 600; - margin-bottom: 10px; -} - -#update-progress-message { - margin-bottom: 10px; -} - -.update-show-detailed { - padding: 13px; - display: block; - opacity: .75; -} - -#body-login .update a.update-show-detailed { - border-bottom: inherit; -} - -#update-progress-detailed { - text-align: left; -} - -#body-login .warning.hidden { - display: none; -} - -/** - * Below this is a copy of the original CSS because we moved to on-the-fly - * generated CSS from SCSS which doesn't work during update - */ - -/** HEADER **/ - -/* prevent ugly selection effect on accidental selection */ -#header { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; -} - -/* removed until content-focusing issue is fixed */ -#skip-to-content a { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; -} -#skip-to-content a:focus { - left: 76px; - top: -9px; - color: #fff; - width: auto; - height: auto; -} - -/* HEADERS ------------------------------------------------------------------ */ - -#header .logo { - background-image: url('../img/logo-icon.svg?v=1'); - background-repeat: no-repeat; - background-size: 175px; - background-position: center; - width: 252px; - height: 120px; - margin: 0 auto; -} - -/** STYLES **/ - -/* 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: 400; - 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-color: #0082c9; - background-image: url('../img/background.jpg?v=1'); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: cover; -} - -#nojavascript { - position: fixed; - top: 0; - bottom: 0; - height: 100%; - width: 100%; - z-index: 9000; - text-align: center; - background-color: rgba(0,0,0,0.5); - color: #fff; - line-height: 125%; - font-size: 24px; -} -#nojavascript div { - display: block; - position: relative; - width: 50%; - top: 35%; - margin: 0px auto; -} -#nojavascript a { - color: #fff; - border-bottom: 2px dotted #fff; -} -#nojavascript a:hover, -#nojavascript a:focus { - color: #ddd; -} - -/* SCROLLING */ -::-webkit-scrollbar { - width: 5px; -} -::-webkit-scrollbar-track-piece { - background-color: transparent; -} -::-webkit-scrollbar-thumb { - background: #ddd; - border-radius: 3px; -} - -/* 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 { - text-align: center; - color: #fff; -} - -#body-login .update h2 { - margin: 0 0 20px; -} - -#body-login .update a { - color: #fff; - border-bottom: 1px solid #aaa; -} - -#body-login .infogroup { - margin-bottom: 15px; -} - -#body-login p#message img { - vertical-align: middle; - padding: 5px; -} - -#body-login p.info { - margin: 0 auto; - padding-top: 20px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -#body-login p.info a { - font-weight: 600; - padding: 13px; - margin: -13px; - color: #fff; -} - -#body-login .success { - background:#d7fed7; - border:1px solid #0f0; - width: 35%; - margin: 30px auto; - padding:1em; - text-align: center; -} - -#body-login p.info a:hover, -#body-login p.info a:focus { - opacity: .6; -} - -/* 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; -} - -#body-login .update .appList { - list-style: disc; - text-align: left; - margin-left: 25px; - margin-right: 25px; -} - -#body-login .v-align { - width: inherit; -} - -.error a { - color: #fff !important; - font-weight: 600 !important; -} -.error a.button { - color: #555 !important; - display: inline-block; - text-align: center; -} -.error pre { - white-space: pre-wrap; - text-align: left; -} - -/* 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; -} - -/* Log in and install button */ -#body-login input { - font-size: 20px; - margin: 5px; - padding: 11px 10px 9px; -} -#body-login input.login { - width: 269px; - background-position: right 16px center; -} - -/* Sticky footer */ -#body-login .wrapper { - min-height: 100%; - margin: 0 auto -70px; - width: 300px; -} -#body-login footer, #body-login .push { - height: 70px; -} - -code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", monospace; } - -/* for IE10 */ -@-ms-viewport { - width: device-width; -} - -/** APPS **/ - -/* buttons */ -button.loading { - background-image: url('../img/loading.gif'); - background-position: right 10px center; background-repeat: no-repeat; - background-size: 16px; - padding-right: 30px; -} - -/* heading styles */ -h2 { - font-size: 20px; - font-weight: 300; - margin-bottom: 12px; - line-height: 140%; -} -h3 { - font-size: 15px; - font-weight: 300; - margin: 12px 0; -} - -/* do not use italic typeface style, instead lighter color */ -em { - font-style: normal; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - opacity: .5; -} - -/** ICONS **/ - -[class^="icon-"], [class*=" icon-"] { - background-repeat: no-repeat; - background-position: center; - min-width: 16px; - min-height: 16px; -} - -/* general assets */ - -.icon-loading-dark { - position: relative; -} -.icon-loading-dark:after { - z-index: 2; - content: ""; - height: 30px; - width: 30px; - margin: -16px 0 0 -16px; - position: absolute; - top: 50%; - left: 50%; - border-radius: 100%; - -webkit-animation: rotate .8s infinite linear; - animation: rotate .8s infinite linear; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} -.icon-loading-dark:after { - border: 2px solid rgba(150, 150, 150, .5); - border-top-color: rgb(100, 100, 100); -} - -.icon-loading-dark:after, -.icon-loading-small-dark:after { - border: 2px solid rgba(187, 187, 187, .5); - border-top-color: #bbb; -} - -/* Css replaced elements don't have ::after nor ::before */ -img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark { - background-image: url("../img/loading-dark.gif"); -} - -@-webkit-keyframes rotate { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes rotate { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -.icon-32 { - background-size: 32px !important; -} - -.icon-checkmark-white { - background-image: url('../img/actions/checkmark-white.svg?v=1'); -} - -.icon-error-white { - background-image: url('../img/actions/error-white.svg?v=1'); -} - -/* INPUTS */ - -/* specifically override browser styles */ -input { - font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; -} - -input[type="button"] { - 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; -} - -/* correctly align images inside of buttons */ -input img { - vertical-align: text-bottom; -} - -/* BUTTONS */ -input[type="button"] { - width: auto; - min-width: 25px; - padding: 5px; - background-color: rgba(240,240,240,.9); - font-weight: 600; - color: #555; - border: 1px solid rgba(240,240,240,.9); - cursor: pointer; -} - -input[type="button"]:hover, input[type="button"]:focus { - background-color: rgba(255, 255, 255, .95); - color: #111; -} -input[type="button"] img { - border: none; - box-shadow: none; -} diff --git a/lib/base.php b/lib/base.php index 0fc34b3d9b..386fc0a576 100644 --- a/lib/base.php +++ b/lib/base.php @@ -281,7 +281,7 @@ class OC { // render error page $template = new OC_Template('', 'update.user', 'guest'); OC_Util::addScript('maintenance-check'); - OC_Util::addStyle('update'); + OC_Util::addStyle('guest'); $template->printPage(); die(); } @@ -355,7 +355,7 @@ class OC { header('Status: 503 Service Temporarily Unavailable'); header('Retry-After: 120'); - \OCP\Util::addStyle('update'); + OC_Util::addStyle('guest'); // render error page $template = new OC_Template('', 'update.use-cli', 'guest'); @@ -376,9 +376,9 @@ class OC { $oldTheme = $systemConfig->getValue('theme'); $systemConfig->setValue('theme', ''); - \OCP\Util::addScript('config'); // needed for web root - \OCP\Util::addScript('update'); - \OCP\Util::addStyle('update'); + OC_Util::addScript('config'); // needed for web root + OC_Util::addScript('update'); + OC_Util::addStyle('guest'); /** @var \OC\App\AppManager $appManager */ $appManager = \OC::$server->getAppManager(); @@ -711,6 +711,7 @@ class OC { exit(1); } else { OC_Response::setStatus(OC_Response::STATUS_SERVICE_UNAVAILABLE); + OC_Util::addStyle('guest'); OC_Template::printGuestPage('', 'error', array('errors' => $errors)); exit; } diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php index c3197b0028..5a35f6806c 100644 --- a/lib/private/TemplateLayout.php +++ b/lib/private/TemplateLayout.php @@ -160,10 +160,11 @@ class TemplateLayout extends \OC_Template { $this->append( 'jsfiles', $web.'/'.$file . '?v=' . self::$versionHash); } - // Add the css files and check if server is already installed to prevent - // appdata initialisation before database configuration - // Prevent scss initialisation if an update is needed - if(\OC::$server->getSystemConfig()->getValue('installed', false) && !\OCP\Util::needUpgrade()) { + // Do not initialise scss appdata until we have a fully installed instance + // Do not load scss for update, errors, installation or login page + if(\OC::$server->getSystemConfig()->getValue('installed', false) + && !\OCP\Util::needUpgrade() + && \OC_User::isLoggedIn()) { $cssFiles = self::findStylesheetFiles(\OC_Util::$styles); } else { $cssFiles = self::findStylesheetFiles(\OC_Util::$styles, false); From ef9e2e4e7d5c1334e120168b0d183a1df9786324 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 10 Jan 2017 17:53:46 +0100 Subject: [PATCH 4/6] Added loader and fixed tabs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/guest.css | 114 ++++++++++++++++++++++++++++++++++++--------- 1 file changed, 92 insertions(+), 22 deletions(-) diff --git a/core/css/guest.css b/core/css/guest.css index be7247d27c..4f50e40d55 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -511,12 +511,12 @@ fieldset.update legend + p { margin-bottom: 15px; } p.info { - margin: 0 auto; - padding-top: 20px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + margin: 0 auto; + padding-top: 20px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } /* Update */ @@ -541,32 +541,102 @@ p.info { border-bottom: 1px solid #aaa; } .update a.update-show-detailed { - border-bottom: inherit; + border-bottom: inherit; } #update-progress-detailed { - text-align: left; + text-align: left; } .update-show-detailed { - padding: 13px; - display: block; - opacity: .75; + padding: 13px; + display: block; + opacity: .75; } #update-progress-icon { - height: 32px; - margin: 10px; - background-size: 32px; + height: 32px; + margin: 10px; + background-size: 32px; } /* Icons */ -[class^="icon-"], -[class*=" icon-"] { - background-repeat: no-repeat; - background-position: center; - min-width: 16px; - min-height: 16px; +.icon-info-white { + background-image: url(../img/actions/info-white.svg?v=1); } -.icon-checkmark-white { - background-image: url(../img/actions/checkmark-white.svg?v=1); + +/* Loading */ +.float-spinner { + margin-top: -32px; + padding-top: 32px; +} +[class^='icon-'], [class*=' icon-'] { + background-repeat: no-repeat; + background-position: center; + min-width: 16px; + min-height: 16px; +} +.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark { + position: relative; +} +.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { + z-index: 2; + content: ''; + height: 32px; + width: 32px; + margin: -17px 0 0 -17px; + position: absolute; + top: 50%; + left: 50%; + border-radius: 100%; + -webkit-animation: rotate .8s infinite linear; + animation: rotate .8s infinite linear; + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { + border: 2px solid rgba(150, 150, 150, 0.5); + border-top-color: #646464; +} +.icon-loading-dark:after, .icon-loading-small-dark:after { + border: 2px solid rgba(187, 187, 187, 0.5); + border-top-color: #bbb; +} +.icon-loading-small:after, .icon-loading-small-dark:after { + height: 16px; + width: 16px; + margin: -9px 0 0 -9px; +} +/* Css replaced elements don't have ::after nor ::before */ +img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading { + background-image: url("../img/loading.gif"); +} +img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark { + background-image: url("../img/loading-dark.gif"); +} +img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small { + background-image: url("../img/loading-small.gif"); +} +img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark { + background-image: url("../img/loading-small-dark.gif"); +} +@-webkit-keyframes rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } /* FOOTER */ From 86a5d5b399d90030327af537319c34e8c1485674 Mon Sep 17 00:00:00 2001 From: Christoph Wurst Date: Tue, 17 Jan 2017 09:23:59 +0100 Subject: [PATCH 5/6] fix show-more-icon position Signed-off-by: Christoph Wurst --- core/css/guest.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/core/css/guest.css b/core/css/guest.css index 4f50e40d55..521b5dc54d 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -123,8 +123,7 @@ form #datadirField legend { padding: 13px; /* increase clickable area of Advanced dropdown */ } #showAdvanced img { - vertical-align: bottom; /* adjust position of Advanced dropdown arrow */ - margin-left: -4px; + vertical-align: middle; /* adjust position of Advanced dropdown arrow */ } /* Buttons and input */ From 9619584383621031f421598baf7c5c3e3c0ecd47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sat, 21 Jan 2017 19:47:20 +0100 Subject: [PATCH 6/6] Fixed strengthify wrapper MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/guest.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/core/css/guest.css b/core/css/guest.css index 521b5dc54d..3223e764ac 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -294,6 +294,21 @@ label.infield { display: none; } +/* Password strength meter */ +.strengthify-wrapper { + display: inline-block; + position: relative; + left: 15px; + top: -23px; + width: 250px; +} +.tooltip-inner { + font-weight: bold; + color: #ccc; + padding: 3px 6px; + text-align: center; +} + /* Show password toggle */ #show, #dbpassword { position: absolute;