From 8c004fdc64f5234b0f4f5baa7c9db90c522ede9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 13 Jul 2018 01:55:12 +0200 Subject: [PATCH 1/4] Enable SCSS for guest pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SCSS is disabled for several types of pages, as the SCSS compiler uses the cache system, which is not available for example when Nextcloud is not installed yet. However, in regular guest pages the cache system is available, so SCSS is now enabled for them too. To keep the same behaviour for guest pages the guest style is automatically added for them, as before this commit it was automatically added due to SCSS not being used. Signed-off-by: Daniel Calviño Sánchez --- lib/private/TemplateLayout.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php index 5e6719593a..1efdf8b441 100644 --- a/lib/private/TemplateLayout.php +++ b/lib/private/TemplateLayout.php @@ -122,6 +122,7 @@ class TemplateLayout extends \OC_Template { $this->assign('bodyid', 'body-login'); } else if ($renderAs == 'guest') { parent::__construct('core', 'layout.guest'); + \OC_Util::addStyle('guest'); $this->assign('bodyid', 'body-login'); } else if ($renderAs == 'public') { parent::__construct('core', 'layout.public'); @@ -187,7 +188,7 @@ class TemplateLayout extends \OC_Template { && !\OCP\Util::needUpgrade() && $pathInfo !== '' && !preg_match('/^\/login/', $pathInfo) - && $renderAs !== 'error' && $renderAs !== 'guest' + && $renderAs !== 'error' ) { $cssFiles = self::findStylesheetFiles(\OC_Util::$styles); } else { From 26db9540d41cbbaa9a4161b5d07325dea5ff5dd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 13 Jul 2018 03:11:47 +0200 Subject: [PATCH 2/4] Remove SCSS rules for "#body-login" elements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit "#body-login" is only used in the layout for guest pages. Therefore, before SCSS was enabled for guest pages, all "#body-login" rules in SCSS files were ignored. Now that SCSS is enabled for guest pages those rules break the guest pages, but given that they were ignored until now they can be safely removed. Note, however, that all of the above refers to regular SCSS rules; those defined in the Theming app are different, as they were converted to CSS and used in the guest pages even when SCSS was disabled, so they do not need to be adjusted due to SCSS being enabled now. Signed-off-by: Daniel Calviño Sánchez --- core/css/mobile.scss | 11 -- core/css/styles.scss | 352 ------------------------------------------- 2 files changed, 363 deletions(-) diff --git a/core/css/mobile.scss b/core/css/mobile.scss index f3b89ddb48..116d174989 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -1,16 +1,5 @@ @media only screen and (max-width: 768px) { -#body-login #header { - padding-top: 10px; -} - -#body-login .wrapper { - display: flex; - flex-direction: row; - align-self: center; - align-items: center; -} - /* do not show update notification on mobile */ #update-notification { display: none !important; diff --git a/core/css/styles.scss b/core/css/styles.scss index 1938eb79af..6ff8d30a59 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -92,15 +92,6 @@ body { height: auto; } -#body-login { - text-align: center; - background-color: var(--color-primary); - background-image: url('../img/background.png?v=2'); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: cover; -} - .two-factor-header { text-align: center; } @@ -125,11 +116,6 @@ body { display: none; } -#body-login .float-spinner { - margin-top: -32px; - padding-top: 32px; -} - #nojavascript { position: fixed; top: 0; @@ -332,135 +318,10 @@ body { /* 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: var(--color-primary-text); - } - form { - fieldset .warning-info, input[type='checkbox'] + label { - text-align: center; - color: var(--color-primary-text); - } - .warning input[type='checkbox'] { - &:hover + label, &:focus + label, + label { - color: var(--color-primary-text) !important; - } - } - } - .update { - h2 { - margin: 0 0 20px; - } - a { - color: var(--color-primary-text); - border-bottom: 1px solid var(--color-background-darker); - } - } - .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: 5px; - top: -20px; - width: 269px; - border-radius: 0 0 2px 2px; - overflow: hidden; - height: 3px; - } - input { - &[type='text'], &[type='password'], &[type='email'] { - border: none; - font-weight: 300; - } - } -} - /* strengthify wrapper */ /* General new input field look */ @@ -475,88 +336,12 @@ body { 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; -} - -#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; -} - -#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 { - border: 1px solid var(--color-error); - list-style-indent: inside; - margin: 0 0 2em; - padding: 1em; - } - } - .success { - border: 1px solid var(--color-success); - width: 35%; - margin: 30px auto; - padding: 1em; - text-align: center; - } - #showAdvanced > img { - padding: 4px; - box-sizing: border-box; - } - p.info a, #showAdvanced { - color: var(--color-primary-text); - } - #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 { @@ -611,60 +396,6 @@ label.infield { padding: 6px 4px; } -/* 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: var(--color-background-dark); - color: var(--color-text-lighter); - cursor: pointer; - border: 1px solid var(--color-border-dark); - span { - cursor: pointer; - padding: 10px 20px; - } - &.ui-state-hover, &.ui-state-active { - color: var(--color-main-text); - background-color: var(--color-border); - } - } - } - .warning, .update, .error { - display: block; - padding: 10px; - background-color: var(--color-background-darker); - color: var(--color-primary-text); - text-align: left; - border-radius: var(--border-radius); - 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 { @@ -708,27 +439,6 @@ label.infield { border-color: var(--color-error) !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 { - 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 */ @@ -747,72 +457,10 @@ label.infield { /* Log in and install button */ -#body-login #submit-wrapper { - position: relative; /* Make the wrapper the containing block of its - absolutely positioned descendant icons */ - - .icon-confirm-white { - position: absolute; - top: 23px; - right: 23px; - } - .icon-loading-small { - position: absolute; - top: 22px; - right: 24px; - } - - #submit-icon { - pointer-events: none; /* The submit icon is positioned on the submit - button. From the user point of view the icon is - part of the button, so the clicks on the icon - have to be applied to the button instead. */ - } -} - -#body-login input { - font-size: 20px; - margin: 5px; - padding: 10px 10px 8px; - &[type='text'], &[type='password'] { - width: calc(100% - 10px); /* 5px margin */ - } - &.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: var(--color-primary-text); - } - .wrapper { - min-height: 100%; - margin: 0 auto -70px; - width: 300px; - } - footer, .push { - height: 70px; - } -} - /* Sticky footer */ /* round profile photos */ From 06b2952cee72f549959b321cdfaf922461d07fdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 13 Jul 2018 03:40:47 +0200 Subject: [PATCH 3/4] Override server SCSS rules for inputs in guest pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit As the server defines some SCSS rules using "input:not([type='range'])" the selector is more specific than just "input" used in "guest.css", so the server SCSS rules took precedence over the guest CSS rules. Now that selector was added to the guest rules too; as the guest rules are loaded after the server ones now the guest rules for input elements take precedence over the server ones. Signed-off-by: Daniel Calviño Sánchez --- core/css/guest.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/core/css/guest.css b/core/css/guest.css index a5f6b57533..c15596f3c3 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -166,7 +166,8 @@ form #datadirField legend { input, textarea, select, button, div[contenteditable=true] { font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; } -input { +input, +input:not([type='range']) { font-size: 20px; margin: 5px; padding: 11px 10px 9px; From e062057cf6e6bb93478823cbb476e15cd428f6b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 13 Jul 2018 04:10:10 +0200 Subject: [PATCH 4/4] Override server SCSS rules for confirm button in guest pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit As the server defines some SCSS rules using "XXX + .icon-confirm" the selector is more specific than just "input" used in "guest.css", so the server SCSS rules took precedence over the guest CSS rules. Now a more specific selector was added to the guest and public share auth rules; as the guest and public share auth rules are loaded after the server ones now the guest rules for input elements take precedence over the server ones. Signed-off-by: Daniel Calviño Sánchez --- core/css/guest.css | 2 ++ core/css/publicshareauth.css | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/core/css/guest.css b/core/css/guest.css index c15596f3c3..75ad1a787d 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -176,6 +176,7 @@ input:not([type='range']) { -webkit-appearance: none; } input[type='submit'], +input[type='submit'].icon-confirm, input[type='button'], button, .button, select { @@ -208,6 +209,7 @@ input.login { background-position: right 16px center; } input[type='submit'], +input[type='submit'].icon-confirm, input.updateButton, input.update-continue { padding: 10px 20px; /* larger log in and installation buttons */ diff --git a/core/css/publicshareauth.css b/core/css/publicshareauth.css index 7f83e0b41e..2f7622ea22 100644 --- a/core/css/publicshareauth.css +++ b/core/css/publicshareauth.css @@ -14,7 +14,8 @@ form fieldset { min-width: 0; /* FF hack for to override default value */ } -input[type='submit'] { +input[type='submit'], +input[type='submit'].icon-confirm { width: 45px; height: 45px; margin-left: 0 !important;