diff options
| -rw-r--r-- | core/css/animations.css | 43 | ||||
| -rw-r--r-- | core/css/animations.css.map | 1 | ||||
| -rw-r--r-- | core/css/animations.scss | 41 | ||||
| -rw-r--r-- | core/css/guest.css | 1083 | ||||
| -rw-r--r-- | core/css/guest.css.map | 1 | ||||
| -rw-r--r-- | core/css/guest.scss | 839 |
6 files changed, 1526 insertions, 482 deletions
diff --git a/core/css/animations.css b/core/css/animations.css new file mode 100644 index 00000000000..d0c80935a25 --- /dev/null +++ b/core/css/animations.css @@ -0,0 +1,43 @@ +@charset "UTF-8"; +/*! + * @copyright Copyright (c) 2022 Julius Härtl <jus@bitgrid.net> + * + * @author Julius Härtl <jus@bitgrid.net> + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + */ +@-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); + } +} + +/*# sourceMappingURL=animations.css.map */ diff --git a/core/css/animations.css.map b/core/css/animations.css.map new file mode 100644 index 00000000000..4ee389fb117 --- /dev/null +++ b/core/css/animations.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["animations.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBA;EACC;IACC;IACA;;EAED;IACC;IACA;;;AAGF;EACC;IACC;IACA;;EAED;IACC;IACA","file":"animations.css"}
\ No newline at end of file diff --git a/core/css/animations.scss b/core/css/animations.scss new file mode 100644 index 00000000000..5eda7c848ea --- /dev/null +++ b/core/css/animations.scss @@ -0,0 +1,41 @@ +/*! + * @copyright Copyright (c) 2022 Julius Härtl <jus@bitgrid.net> + * + * @author Julius Härtl <jus@bitgrid.net> + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + */ + +@-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); + } +} diff --git a/core/css/guest.css b/core/css/guest.css index bfd13ef98b9..0ee0013f86a 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -1,298 +1,388 @@ +@charset "UTF-8"; /* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net * SPDX-FileCopyrightText: 2022 Carl Schwan <carl@carlschwan.eu> This file is licensed under the Affero General Public License version 3 or later. See the COPYING-README file. */ - +/*! + * @copyright Copyright (c) 2022 Julius Härtl <jus@bitgrid.net> + * + * @author Julius Härtl <jus@bitgrid.net> + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + */ +@-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); + } +} /* 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 { 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: var(--color-main-text); text-decoration:none;} -a, a *, input, input *, select, .button span, label { cursor:pointer; } -ul { list-style:none; } +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 { + 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: var(--color-main-text); + text-decoration: none; +} + +a, a *, input, input *, select, .button span, label { + cursor: pointer; +} + +ul { + list-style: none; +} body { - font-weight: normal; - /* bring the default font size up to 14px */ - font-size: .875em; - line-height: 1.6em; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - color: var(--color-text); - text-align: center; - /* As guest, there is no color-background-plain */ - background-color: var(--color-background-plain, var(--color-primary-default, #0082c9)); - /* As guest, there is no user background (--image-background) - 1. User background if logged in ('no' if removed, that way the variable is _defined_) - 2. Empty background if enabled ('yes' is used, that way the variable is _defined_) - 3. Else default background - 4. Finally default gradient (should not happened, the background is always defined anyway) */ - background-image: var(--image-background, var(--image-background-plain, var(--image-background-default, linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)))); - background-attachment: fixed; - min-height: 100%; /* fix sticky footer */ - height: auto; - overflow: auto; - position: static; + font-weight: normal; + /* bring the default font size up to 14px */ + font-size: 0.875em; + line-height: 1.6em; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + color: var(--color-text); + text-align: center; + /* As guest, there is no color-background-plain */ + background-color: var(--color-background-plain, var(--color-primary-default, #0082c9)); + /* As guest, there is no user background (--image-background) + 1. User background if logged in ('no' if removed, that way the variable is _defined_) + 2. Empty background if enabled ('yes' is used, that way the variable is _defined_) + 3. Else default background + 4. Finally default gradient (should not happened, the background is always defined anyway) */ + background-image: var(--image-background, var(--image-background-plain, var(--image-background-default, linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)))); + background-attachment: fixed; + min-height: 100%; /* fix sticky footer */ + height: auto; + overflow: auto; + position: static; } /* Various fonts settings */ #body-login a { - font-weight: 600; + font-weight: 600; } #body-login footer a { - color: var(--color-text); + color: var(--color-text); } #body-login a:not(.button):hover, #body-login a:not(.button):focus { - text-decoration: underline; - text-decoration-skip-ink: auto; + text-decoration: underline; + text-decoration-skip-ink: auto; } em { - font-style: normal; - opacity: .5; + font-style: normal; + opacity: 0.5; } /* heading styles */ h2, h3, h4 { - font-weight: bold; + font-weight: bold; } h2 { - font-size: 20px; - margin-bottom: 12px; - line-height: 140%; + font-size: 20px; + margin-bottom: 12px; + line-height: 140%; } + h3 { - font-size: 15px; - margin: 12px 0; + font-size: 15px; + margin: 12px 0; } /* Global content */ body { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } #header .logo { - max-width: 175px; - width: auto; - max-height: 130px; - margin: 0 auto; - position: relative; - left: unset; + max-width: 175px; + width: auto; + max-height: 130px; + margin: 0 auto; + position: relative; + left: unset; } - #header .logo img { - opacity: 0; - max-width: 100%; - max-height: 200px; + opacity: 0; + max-width: 100%; + max-height: 200px; } .wrapper { - width: 100%; - max-width: 700px; - margin-top: 10vh; + width: 100%; + max-width: 700px; + margin-top: 10vh; } /* Default FORM */ form { - position: relative; - margin: auto; - padding: 0; + position: relative; + margin: auto; + padding: 0; } + form.install-form { - max-width: 300px; + max-width: 300px; } form.install-form fieldset, form.install-form fieldset input { - width: 100%; + width: 100%; } + form.install-form .strengthify-wrapper { - bottom: 17px; - width: calc(100% - 8px); - left: 4px; - top: unset; + bottom: 17px; + width: calc(100% - 8px); + left: 4px; + top: unset; } form.install-form #show { - top: 18px; + top: 18px; } form #sqliteInformation { - margin-top: 0.5rem; - margin-bottom: 20px; + margin-top: 0.5rem; + margin-bottom: 20px; } + form #adminaccount, form #use_other_db { - margin-bottom: 15px; - text-align: left; + margin-bottom: 15px; + text-align: left; } + form #adminaccount > legend, form #adminlogin { - margin-bottom: 1rem; + margin-bottom: 1rem; } + form #advancedHeader { - width: 100%; + width: 100%; } + form fieldset legend, #datadirContent label { - width: 100%; + width: 100%; } + #datadirContent label { - display: block; - margin: 0; + display: block; + margin: 0; } + form #datadirField legend { - margin-bottom: 15px; + margin-bottom: 15px; } /* View more button */ #showAdvanced { - padding: 13px; /* increase clickable area of Advanced dropdown */ + padding: 13px; /* increase clickable area of Advanced dropdown */ } + #showAdvanced img { - vertical-align: middle; /* adjust position of Advanced dropdown arrow */ + vertical-align: middle; /* adjust position of Advanced dropdown arrow */ } /* Buttons and input */ #submit-wrapper { - display: flex; - align-items: center; - justify-content: center; - padding: 10px 5px; - position: relative; /* Make the wrapper the containing block of its - absolutely positioned descendant icons */ + display: flex; + align-items: center; + justify-content: center; + padding: 10px 5px; + position: relative; /* Make the wrapper the containing block of its +absolutely positioned descendant icons */ } @media only screen and (max-width: 1024px) { - .wrapper { - margin-top: 0; - } + .wrapper { + margin-top: 0; + } } - - -#submit-wrapper .submit-icon { - position: absolute; - right: 24px; - transition: right 100ms ease-in-out; - 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. */ -} - #submit-wrapper { - margin: 0 auto; + margin: 0 auto; +} +#submit-wrapper .submit-icon { + position: absolute; + right: 24px; + transition: right 100ms ease-in-out; + 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. */ } - #submit-wrapper input.login:hover ~ .submit-icon.icon-confirm-white, #submit-wrapper input.login:focus ~ .submit-icon.icon-confirm-white, #submit-wrapper input.login:active ~ .submit-icon.icon-confirm-white { - right: 20px; + right: 20px; } - #submit-wrapper .icon-loading-small { - position: absolute; - top: 22px; - right: 26px; + position: absolute; + top: 22px; + right: 26px; } - input, textarea, select, button, div[contenteditable=true] { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } + input, -input:not([type='range']), -input:not([type='text']), -input:not([type='password']), +input:not([type=range]), +input:not([type=text]), +input:not([type=password]), a.button { - font-size: 20px; - margin: 5px; - padding: 5px; - outline: none; - border-radius: 3px; /* --border-radius */ - -webkit-appearance: none; + font-size: 20px; + margin: 5px; + padding: 5px; + outline: none; + border-radius: 3px; /* --border-radius */ + -webkit-appearance: none; } -input:not([type='radio']), -input:not([type='range']) { - border-width: 2px; +input:not([type=radio]), +input:not([type=range]) { + border-width: 2px; } -input:not([type='range']):focus-visible { - box-shadow: none !important; +input:not([type=range]):focus-visible { + box-shadow: none !important; } -input[type='submit'], -input[type='submit'].icon-confirm, -input[type='button'], +input[type=submit], +input[type=submit].icon-confirm, +input[type=button], button, a.button, .button, select { - display: inline-block; - width: auto; - min-width: 25px; - padding: 12px; - background-color: var(--color-main-background); - font-weight: bold; - color: var(--color-text); - border: none; - border-radius: 100px; /* --border-radius-pill */ - cursor: pointer; + display: inline-block; + width: auto; + min-width: 25px; + padding: 12px; + background-color: var(--color-main-background); + font-weight: bold; + color: var(--color-text); + border: none; + border-radius: 100px; /* --border-radius-pill */ + cursor: pointer; } .icon-confirm.input-button-inline { - position: absolute; - right: 3px; - top: 5px; -} - -input[type='submit']:focus { - box-shadow: 0 0 0 2px inset var(--color-main-text) !important; -} -input[type='text'], -input[type='tel'], -input[type='password'], -input[type='email'] { - width: 266px; - padding: 5px 10px; - color: var(--color-text-lighter); - cursor: text; - font-family: inherit; - font-weight: normal; - margin-left: 0; - margin-right: 0; -} -input[type='password'].password-with-toggle, input[type='text'].password-with-toggle { - width: 238px; - padding-right: 40px !important; + position: absolute; + right: 3px; + top: 5px; +} + +input[type=submit]:focus { + box-shadow: 0 0 0 2px inset var(--color-main-text) !important; +} + +input[type=text], +input[type=tel], +input[type=password], +input[type=email] { + width: 266px; + padding: 5px 10px; + color: var(--color-text-lighter); + cursor: text; + font-family: inherit; + font-weight: normal; + margin-left: 0; + margin-right: 0; } + +input[type=password].password-with-toggle, input[type=text].password-with-toggle { + width: 238px; + padding-right: 40px !important; +} + input.login { - width: 260px; - height: 50px; - background-position: right 16px center; + width: 260px; + height: 50px; + background-position: right 16px center; } -input[type='submit'], -input[type='submit'].icon-confirm, + +input[type=submit], +input[type=submit].icon-confirm, input.updateButton, input.update-continue { - padding: 10px 20px; /* larger log in and installation buttons */ - overflow: hidden; - text-overflow: ellipsis; + padding: 10px 20px; /* larger log in and installation buttons */ + overflow: hidden; + text-overflow: ellipsis; } /* Get rid of the inside dotted line in Firefox */ button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; + border: 0; } input.primary:not(:disabled):hover, @@ -301,102 +391,114 @@ button.primary:not(:disabled):hover, button.primary:not(:disabled):focus, a.primary:not(:disabled):hover, a.primary:not(:disabled):focus { - color: var(--color-primary-text); + color: var(--color-primary-text); } /* Checkboxes - white only for login */ -input[type='checkbox'].checkbox { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; -} -input[type='checkbox'].checkbox + label { - user-select: none; -} -input[type='checkbox'].checkbox:disabled + label, -input[type='checkbox'].checkbox:disabled + label:before { - cursor: default; -} -input[type='checkbox'].checkbox + label:before { - content: ''; - display: inline-block; - vertical-align: middle; - margin: 3px; - margin-top: 1px; - border: 1px solid #888; - border-radius: 1px; - height: 10px; - width: 10px; - background-position: center; -} -input[type='checkbox'].checkbox--white + label:before { - border-color: #ddd; -} -input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before, -input[type='checkbox'].checkbox--white:focus + label:before { - border-color: #fff; -} -input[type='checkbox'].checkbox--white:checked + label:before { - background-color: #eee; - border-color: #eee; -} -input[type='checkbox'].checkbox--white:disabled + label:before { - background-color: #666 !important; - border-color: #999 !important; -} -input[type='checkbox'].checkbox--white:checked:disabled + label:before { - border-color: #666; - background-color: #222; -} -input[type='checkbox'].checkbox--white:checked + label:before { - background-color: transparent !important; - border-color: #fff !important; - background-image: url('../img/actions/checkbox-mark-white.svg'); +input[type=checkbox].checkbox { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} + +input[type=checkbox].checkbox + label { + user-select: none; +} + +input[type=checkbox].checkbox:disabled + label, +input[type=checkbox].checkbox:disabled + label:before { + cursor: default; +} + +input[type=checkbox].checkbox + label:before { + content: ""; + display: inline-block; + vertical-align: middle; + margin: 3px; + margin-top: 1px; + border: 1px solid #888; + border-radius: 1px; + height: 10px; + width: 10px; + background-position: center; +} + +input[type=checkbox].checkbox--white + label:before { + border-color: #ddd; +} + +input[type=checkbox].checkbox--white:not(:disabled):not(:checked) + label:hover:before, +input[type=checkbox].checkbox--white:focus + label:before { + border-color: #fff; +} + +input[type=checkbox].checkbox--white:checked + label:before { + background-color: #eee; + border-color: #eee; +} + +input[type=checkbox].checkbox--white:disabled + label:before { + background-color: #666 !important; + border-color: #999 !important; +} + +input[type=checkbox].checkbox--white:checked:disabled + label:before { + border-color: #666; + background-color: #222; +} + +input[type=checkbox].checkbox--white:checked + label:before { + background-color: transparent !important; + border-color: #fff !important; + background-image: url("../img/actions/checkbox-mark-white.svg"); } /* Password strength meter */ .strengthify-wrapper { - display: inline-block; - position: relative; - top: -20px; - width: 250px; - border-radius: 0 0 3px 3px; - overflow: hidden; - height: 3px; + display: inline-block; + position: relative; + top: -20px; + width: 250px; + border-radius: 0 0 3px 3px; + overflow: hidden; + height: 3px; } + .tooltip-inner { - font-weight: bold; - padding: 3px 6px; - text-align: center; + font-weight: bold; + padding: 3px 6px; + text-align: center; } /* Show password toggle */ #show, #dbpassword-toggle { - position: absolute; - right: 2px; - top: -3px; - display: flex; - justify-content: center; - width: 44px; - align-content: center; - padding: 13px; + position: absolute; + right: 2px; + top: -3px; + display: flex; + justify-content: center; + width: 44px; + align-content: center; + padding: 13px; } -#pass2, input[name='personal-password-clone'] { - padding: .6em 2.5em .4em .4em; - width: 8em; +#pass2, input[name=personal-password-clone] { + padding: 0.6em 2.5em 0.4em 0.4em; + width: 8em; } + #personal-show + label { - height: 14px; - margin-top: -25px; - left: 295px; - display: block; + height: 14px; + margin-top: -25px; + left: 295px; + display: block; } + #passwordbutton { - margin-left: .5em; + margin-left: 0.5em; } /* Dark subtle label text */ @@ -404,417 +506,434 @@ p.info, form fieldset legend, #datadirContent label, form fieldset .warning-info, -form input[type='checkbox']+label { - text-align: center; +form input[type=checkbox] + label { + text-align: center; } + /* 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: var(--color-primary-text) !important; +form .warning input[type=checkbox]:hover + label, +form .warning input[type=checkbox]:focus + label, +form .warning input[type=checkbox] + label { + color: var(--color-primary-text) !important; } .body-login-container.two-factor { - max-width: 290px; - margin: 15px auto 0; + max-width: 290px; + margin: 15px auto 0; } + .two-factor-provider { - display: flex; - border-radius: 3px; /* --border-radius */ - margin: 12px 0; - border: 1px solid transparent; - text-align: left; - align-items: center; - text-decoration: none !important; -} -.two-factor-provider:hover, -.two-factor-provider:focus, -.two-factor-provider:active { - border: 1px solid #fff; + display: flex; + border-radius: 3px; /* --border-radius */ + margin: 12px 0; + border: 1px solid transparent; + text-align: left; + align-items: center; + text-decoration: none !important; +} +.two-factor-provider:hover, .two-factor-provider:focus, .two-factor-provider:active { + border: 1px solid #fff; } .two-factor-provider img { - width: 64px; - height: 64px; - padding: 0 12px; + width: 64px; + height: 64px; + padding: 0 12px; } .two-factor-provider div { - margin: 12px 0; + margin: 12px 0; } .two-factor-provider h3 { - margin: 0; + margin: 0; } .two-factor-provider p { - font-weight: normal; + font-weight: normal; } + .two-factor-icon { - width: 100px; - display: block; - margin: 0 auto; + width: 100px; + display: block; + margin: 0 auto; } + .two-factor-submit { - width: 100%; - padding: 10px; - margin: 0 0 5px 0; - border-radius: 100px; /* --border-radius-pill */ - font-size: 20px; + width: 100%; + padding: 10px; + margin: 0 0 5px 0; + border-radius: 100px; /* --border-radius-pill */ + font-size: 20px; } + .two-factor-primary { - /* Fix for 'Use backup codes' button not taking correct styles */ - padding: 14px !important; - width: 226px; + /* Fix for 'Use backup codes' button not taking correct styles */ + padding: 14px !important; + width: 226px; } + .two-factor-secondary { - display: inline-block; - padding: 12px; + display: inline-block; + padding: 12px; } - /* Additional login options */ #remember_login { - margin: 18px 5px 0 16px !important; + margin: 18px 5px 0 16px !important; } /* 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; + margin-top: 10px; + margin-bottom: 10px; } /* Database selector on install page */ form #selectDbType { - text-align:center; - white-space: nowrap; - margin: 0; - display: flex; + text-align: center; + white-space: nowrap; + margin: 0; + display: flex; } form #selectDbType .info { - white-space: normal; + white-space: normal; } form #selectDbType label { - flex-grow: 1; - margin: 0 -1px 5px; - font-size: 12px; - background: var(--color-background-hover); - color: var(--color-main-text); - cursor:pointer; - border: 1px solid var(--color-border); - padding: 10px 17px; + flex-grow: 1; + margin: 0 -1px 5px; + font-size: 12px; + background: var(--color-background-hover); + color: var(--color-main-text); + cursor: pointer; + border: 1px solid var(--color-border); + padding: 10px 17px; } form #selectDbType label.ui-state-hover, form #selectDbType label.ui-state-active { - font-weight: normal; - background: var(--color-background-darker); - color: var(--color-main-text); + font-weight: normal; + background: var(--color-background-darker); + color: var(--color-main-text); } form #selectDbType label span { - display: none; + display: none; } /* Nicely grouping input field sets */ .grouptop, .groupmiddle, .groupbottom { - position: relative; - user-select: none; + position: relative; + user-select: none; } + .grouptop, .groupmiddle { - margin-bottom: 8px !important; + margin-bottom: 8px !important; } + .groupbottom { - margin-bottom: 13px; + margin-bottom: 13px; } + .groupbottom input[type=submit] { - box-shadow: none !important; + box-shadow: none !important; } + .grouptop.groupbottom input { - border-radius: 3px !important; - margin: 5px 0 !important; + border-radius: 3px !important; + margin: 5px 0 !important; } /* Errors */ /* Warnings and errors are the same */ .body-login-container { - display: flex; - flex-direction: column; - text-align: left; - word-wrap: break-word; - border-radius: 10px; /* --border-radius-large */ - cursor: default; - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; - user-select: text; -} - -/* TODO: Change all .warning/.update/.error to .body-login-container */ + display: flex; + flex-direction: column; + text-align: left; + word-wrap: break-word; + border-radius: 10px; /* --border-radius-large */ + cursor: default; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; + /* TODO: Change all .warning/.update/.error to .body-login-container */ +} .body-login-container .icon-big { - background-size: 70px; - height: 70px; + background-size: 70px; + height: 70px; } - .body-login-container form { - width: initial; + width: initial; } - .body-login-container p:not(:last-child) { - margin-bottom: 12px; + margin-bottom: 12px; } /* Various paragraph styles */ .infogroup { - margin: 8px 0; + margin: 8px 0; } + .infogroup:last-child { - margin-bottom: 0; + margin-bottom: 0; } + p.info { - margin: 20px auto; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + margin: 20px auto; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } /* Update */ .update { - width: calc(100% - 32px); - text-align: center; + width: calc(100% - 32px); + text-align: center; } .update .appList { - list-style: disc; - text-align: left; - margin-left: 25px; - margin-right: 25px; + list-style: disc; + text-align: left; + margin-left: 25px; + margin-right: 25px; } .update img.float-spinner { - float: left; + float: left; } .update a.update-show-detailed { - border-bottom: inherit; + border-bottom: inherit; } + #update-progress-detailed { - text-align: left; - margin-bottom: 12px; + text-align: left; + margin-bottom: 12px; } + .update-show-detailed { - padding: 12px; - display: block; - opacity: .75; + padding: 12px; + display: block; + opacity: 0.75; } .update-show-detailed .icon-caret-white { - display: inline-block; - vertical-align: middle; + display: inline-block; + vertical-align: middle; } + #update-progress-icon { - height: 32px; - margin: 10px; - background-size: 32px; + height: 32px; + margin: 10px; + background-size: 32px; } - /* Icons */ .icon-info-white { - background-image: url('../img/actions/info-white.svg?v=2'); + background-image: url("../img/actions/info-white.svg?v=2"); } + .icon-error-white { - background-image: url('../img/actions/error-white.svg?v=1'); + background-image: url("../img/actions/error-white.svg?v=1"); } + .icon-caret-white { - background-image: url('../img/actions/caret-white.svg?v=1'); + background-image: url("../img/actions/caret-white.svg?v=1"); } + .icon-confirm { - background-image: url('../img/actions/confirm.svg?v=2'); + background-image: url("../img/actions/confirm.svg?v=2"); } + .icon-confirm-white { - background-image: url('../img/actions/confirm-white.svg?v=2'); + background-image: url("../img/actions/confirm-white.svg?v=2"); } + .icon-checkmark-white { - background-image: url('../img/actions/checkmark-white.svg?v=1'); + background-image: url("../img/actions/checkmark-white.svg?v=1"); } - /* Loading */ .float-spinner { - margin-top: -32px; - padding-top: 32px; - height: 32px; - display: none; + margin-top: -32px; + padding-top: 32px; + height: 32px; + display: none; } -[class^='icon-'], [class*=' icon-'] { - background-repeat: no-repeat; - background-position: center; - min-width: 16px; - min-height: 16px; + +[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; - filter: var(--background-invert-if-dark) + position: relative; + filter: var(--background-invert-if-dark); } + .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; -} -.primary .loading,.primary+.loading,.primary .loading-small,.primary+.loading-small,.primary .icon-loading,.primary+.icon-loading,.primary .icon-loading-dark,.primary+.icon-loading-dark,.primary .icon-loading-small,.primary+.icon-loading-small,.primary .icon-loading-small-dark,.primary+.icon-loading-small-dark { - filter: var(--primary-invert-if-bright) + 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 0.8s infinite linear; + animation: rotate 0.8s infinite linear; + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} + +.primary .loading, .primary + .loading, .primary .loading-small, .primary + .loading-small, .primary .icon-loading, .primary + .icon-loading, .primary .icon-loading-dark, .primary + .icon-loading-dark, .primary .icon-loading-small, .primary + .icon-loading-small, .primary .icon-loading-small-dark, .primary + .icon-loading-small-dark { + filter: var(--primary-invert-if-bright); } + .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; + 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; + 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; + 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, div[contenteditable=true].icon-loading { - background-image: url('../img/loading.gif'); + 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, div[contenteditable=true].icon-loading-dark { - background-image: url('../img/loading-dark.gif'); + 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, div[contenteditable=true].icon-loading-small { - background-image: url('../img/loading-small.gif'); + 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, div[contenteditable=true].icon-loading-small-dark { - background-image: url('../img/loading-small-dark.gif'); + 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); - } + 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); - } + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } - /* FOOTER */ footer { - min-height: 70px; - margin-top: auto; + min-height: 70px; + margin-top: auto; } - footer .info .entity-name { - font-weight: bold; -} - -.hidden { - display: none; + font-weight: bold; } /* keep the labels for screen readers but hide them since we use placeholders */ label.infield, .hidden-visually { - position: absolute; - left: -10000px; - top: -10000px; - width: 1px; - height: 1px; - overflow: hidden; + position: absolute; + left: -10000px; + top: -10000px; + width: 1px; + height: 1px; + overflow: hidden; } a.legal { - font-size: smaller; + font-size: smaller; } +.notecard { + color: var(--color-text-light); + background-color: var(--note-background); + border-left: 4px solid var(--note-theme); + border-radius: var(--border-radius); + margin: 1rem 0; + padding: 1rem; + text-align: left; +} .notecard.success { - --note-background: rgba(var(--color-success-rgb), 0.1); - --note-theme: var(--color-success); + --note-background: rgba(var(--color-success-rgb), 0.1); + --note-theme: var(--color-success); } .notecard.error { - --note-background: rgba(var(--color-error-rgb), 0.1); - --note-theme: var(--color-error); + --note-background: rgba(var(--color-error-rgb), 0.1); + --note-theme: var(--color-error); } .notecard.warning { - --note-background: rgba(var(--color-warning-rgb), 0.1); - --note-theme: var(--color-warning); + --note-background: rgba(var(--color-warning-rgb), 0.1); + --note-theme: var(--color-warning); } -.notecard { - color: var(--color-text-light); - background-color: var(--note-background); - border-left: 4px solid var(--note-theme); - border-radius: var(--border-radius); - margin: 1rem 0; - margin-top: 1rem; - padding: 1rem; - text-align: left; -} - .notecard:last-child { - margin-bottom: 0; + margin-bottom: 0; } - .notecard pre { - background-color: var(--color-background-dark); - margin-top: 1rem; - padding: 1em 1.3em; - border-radius: var(--border-radius); + background-color: var(--color-background-dark); + margin-top: 1rem; + padding: 1em 1.3em; + border-radius: var(--border-radius); } .guest-box, .body-login-container { - color: var(--color-main-text); - background-color: var(--color-main-background); - padding: 16px; - border-radius: var(--border-radius-large); - box-shadow: 0 0 10px var(--color-box-shadow); - display: inline-block; + color: var(--color-main-text); + background-color: var(--color-main-background); + padding: 16px; + border-radius: var(--border-radius-large); + box-shadow: 0 0 10px var(--color-box-shadow); + display: inline-block; } .guest-box.wide { - display: block; - text-align: left; + display: block; + text-align: left; } - .guest-box fieldset { - margin-top: 0; + margin-top: 0; } - -.guest-box pre { - overflow-x: scroll; +.guest-box .pre { + overflow-x: scroll; } button.toggle-password { - background-color: transparent; - border-width: 0; - height: 44px; + background-color: transparent; + border-width: 0; + height: 44px; } /** Utilities */ - .margin-top { - margin-top: 1rem !important; + margin-top: 1rem !important; } - .text-left { - text-align: left !important; + text-align: left !important; } + +.hidden { + display: none; +} + +/*# sourceMappingURL=guest.css.map */ diff --git a/core/css/guest.css.map b/core/css/guest.css.map new file mode 100644 index 00000000000..fdb20b94546 --- /dev/null +++ b/core/css/guest.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["guest.scss","animations.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBA;EACC;IACC;IACA;;EAED;IACC;IACA;;;AAGF;EACC;IACC;IACA;;EAED;IACC;IACA;;;AD7BF;AACA;EAAyT;EAAU;EAAW;EAAU;EAAW;EAAqB;EAAgB;EAAqB;EAAyB;;;AACtb;EAAO;;;AACP;EAAuE;;;AACvE;EAAO;;;AACP;EAAQ;EAA0B;EAAkB;;;AACpD;EAAkB;EAAiB;;;AACnC;EAAgB;;;AAChB;EAAI;EAAU;EAA+B;;;AAC7C;EAAsD;;;AACtD;EAAK;;;AAEL;EACC;AACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;AACA;AAAA;AAAA;AAAA;AAAA;EAKA;EACG;EACH;EACA;EACA;EACA;;;AAGD;AAEC;EACC;;AAGD;EACC;;AAGD;AAAA;EAEC;EACA;;;AAIF;EACC;EACA;;;AAGD;AACA;AAAA;AAAA;EAGC;;;AAGD;EACC;EACA;EACA;;;AAED;EACC;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;;;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;;;AAED;EACC;;;AAGD;AAAA;EAEC;;;AAED;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAED;EACC;EACA;;;AAED;AAAA;EAEC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAED;EACC;;;AAGD;AACA;EACC;;;AAED;EACC;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;AAAA;;;AAID;EACC;IACC;;;AAMF;EACC;;AAEA;EACC;EACA;EACA;EACA;AAAA;AAAA;AAAA;;AAKD;AAAA;AAAA;EAGC;;AAGD;EACC;EACA;EACA;;;AAMF;EACC;;;AAED;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;EAEI;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAED;AAAA;AAAA;AAAA;EAIC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;;;AAED;EACC;EACA;EACA;;;AAED;AAAA;AAAA;AAAA;EAIC;EACA;EACA;;;AAGD;AACA;AAAA;EAEC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAED;AAAA;EAEC;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAED;AAAA;EAEC;;;AAED;EACC;EACA;;;AAED;EACC;EACA;;;AAED;EACC;EACA;;;AAED;EACC;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;;;AAGD;AACA;AAAA;AAAA;AAAA;AAAA;EAKC;;;AAED;AACA;AAAA;AAAA;EAGC;;;AAGD;EACC;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;;AAED;EACC;EACA;EACA;;AAED;EACC;;AAED;EACC;;AAED;EACC;;;AAGF;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAED;AACC;EACA;EACA;;;AAED;EACC;EACA;;;AAID;AACA;EACC;;;AAGD;AACA;AACA;EACC;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;AAAA;EAEC;EACA;EACA;;AAED;EACC;;;AAKF;AACA;AAAA;AAAA;EAGC;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;EACA;;;AAGD;AACA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACC;EACA;;AAGD;EACC;;AAGD;EACC;;;AAKF;AACA;EACC;;;AAED;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;;AAGF;EACC;EACA;;;AAED;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;;AAID;AACA;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAID;AACA;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;EACI;;;AAEJ;EACC;EACA;;;AAED;EACC;EACA;;;AAED;EACC;EACA;EACA;;;AAED;AACA;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;IACA;IACA;;EAEA;IACA;IACA;;;AAGD;EACC;IACA;IACA;;EAEA;IACA;IACA;;;AAID;AACA;EACC;EACA;;AACA;EACC;;;AAIF;AACA;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA,SAzxByB;EA0xBzB;EACA;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;AACA;EACC;;;AAGD;EACC;;;AAGD;EACC","file":"guest.css"}
\ No newline at end of file diff --git a/core/css/guest.scss b/core/css/guest.scss new file mode 100644 index 00000000000..25c0a6f16ec --- /dev/null +++ b/core/css/guest.scss @@ -0,0 +1,839 @@ +/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net + * SPDX-FileCopyrightText: 2022 Carl Schwan <carl@carlschwan.eu> + This file is licensed under the Affero General Public License version 3 or later. + See the COPYING-README file. */ + +@import 'animations.scss'; + +$guest-container-padding: 16px; + +/* 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 { 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: var(--color-main-text); text-decoration:none;} +a, a *, input, input *, select, .button span, label { cursor:pointer; } +ul { list-style:none; } + +body { + font-weight: normal; + /* bring the default font size up to 14px */ + font-size: .875em; + line-height: 1.6em; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + color: var(--color-text); + text-align: center; + /* As guest, there is no color-background-plain */ + background-color: var(--color-background-plain, var(--color-primary-default, #0082c9)); + /* As guest, there is no user background (--image-background) + 1. User background if logged in ('no' if removed, that way the variable is _defined_) + 2. Empty background if enabled ('yes' is used, that way the variable is _defined_) + 3. Else default background + 4. Finally default gradient (should not happened, the background is always defined anyway) */ + background-image: var(--image-background, var(--image-background-plain, var(--image-background-default, linear-gradient(40deg, #0082c9 0%, #30b6ff 100%)))); + background-attachment: fixed; + min-height: 100%; /* fix sticky footer */ + height: auto; + overflow: auto; + position: static; +} + +/* Various fonts settings */ +#body-login { + a { + font-weight: 600; + } + + footer a { + color: var(--color-text); + } + + a:not(.button):hover, + a:not(.button):focus { + text-decoration: underline; + text-decoration-skip-ink: auto; + } +} + +em { + font-style: normal; + opacity: .5; +} + +/* heading styles */ +h2, +h3, +h4 { + font-weight: bold; +} + +h2 { + font-size: 20px; + margin-bottom: 12px; + line-height: 140%; +} +h3 { + font-size: 15px; + margin: 12px 0; +} + +/* Global content */ +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#header { + .logo { + max-width: 175px; + width: auto; + max-height: 130px; + margin: 0 auto; + position: relative; + left: unset; + img { + opacity: 0; + max-width: 100%; + max-height: 200px; + } + } +} + +.wrapper { + width: 100%; + max-width: 700px; + margin-top: 10vh; +} + +/* Default FORM */ +form { + position: relative; + margin: auto; + padding: 0; +} +form.install-form { + max-width: 300px; +} + +form.install-form fieldset, +form.install-form fieldset input { + width: 100%; +} +form.install-form .strengthify-wrapper { + bottom: 17px; + width: calc(100% - 8px); + left: 4px; + top: unset; +} + +form.install-form #show { + top: 18px; +} + +form #sqliteInformation { + margin-top: 0.5rem; + margin-bottom: 20px; +} +form #adminaccount, form #use_other_db { + margin-bottom: 15px; + text-align: left; +} +form #adminaccount > legend, +form #adminlogin { + margin-bottom: 1rem; +} +form #advancedHeader { + width: 100%; +} +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: middle; /* adjust position of Advanced dropdown arrow */ +} + +/* Buttons and input */ +#submit-wrapper { + display: flex; + align-items: center; + justify-content: center; + padding: 10px 5px; + position: relative; /* Make the wrapper the containing block of its + absolutely positioned descendant icons */ +} + +@media only screen and (max-width: 1024px) { + .wrapper { + margin-top: 0; + } +} + + + +#submit-wrapper { + margin: 0 auto; + + .submit-icon { + position: absolute; + right: 24px; + transition: right 100ms ease-in-out; + 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. */ + } + input.login:hover ~ .submit-icon.icon-confirm-white, + input.login:focus ~ .submit-icon.icon-confirm-white, + input.login:active ~ .submit-icon.icon-confirm-white { + right: 20px; + } + + .icon-loading-small { + position: absolute; + top: 22px; + right: 26px; + } +} + + + +input, textarea, select, button, div[contenteditable=true] { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; +} +input, +input:not([type='range']), +input:not([type='text']), +input:not([type='password']), +a.button { + font-size: 20px; + margin: 5px; + padding: 5px; + outline: none; + border-radius: 3px; /* --border-radius */ + -webkit-appearance: none; +} + +input:not([type='radio']), +input:not([type='range']) { + border-width: 2px; +} + +input:not([type='range']):focus-visible { + box-shadow: none !important; +} + +input[type='submit'], +input[type='submit'].icon-confirm, +input[type='button'], +button, +a.button, +.button, +select { + display: inline-block; + width: auto; + min-width: 25px; + padding: 12px; + background-color: var(--color-main-background); + font-weight: bold; + color: var(--color-text); + border: none; + border-radius: 100px; /* --border-radius-pill */ + cursor: pointer; +} + +.icon-confirm.input-button-inline { + position: absolute; + right: 3px; + top: 5px; +} + +input[type='submit']:focus { + box-shadow: 0 0 0 2px inset var(--color-main-text) !important; +} +input[type='text'], +input[type='tel'], +input[type='password'], +input[type='email'] { + width: 266px; + padding: 5px 10px; + color: var(--color-text-lighter); + cursor: text; + font-family: inherit; + font-weight: normal; + margin-left: 0; + margin-right: 0; +} +input[type='password'].password-with-toggle, input[type='text'].password-with-toggle { + width: 238px; + padding-right: 40px !important; +} +input.login { + width: 260px; + height: 50px; + 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 */ + overflow: hidden; + text-overflow: ellipsis; +} + +/* Get rid of the inside dotted line in Firefox */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; +} + +input.primary:not(:disabled):hover, +input.primary:not(:disabled):focus, +button.primary:not(:disabled):hover, +button.primary:not(:disabled):focus, +a.primary:not(:disabled):hover, +a.primary:not(:disabled):focus { + color: var(--color-primary-text); +} + +/* Checkboxes - white only for login */ +input[type='checkbox'].checkbox { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} +input[type='checkbox'].checkbox + label { + user-select: none; +} +input[type='checkbox'].checkbox:disabled + label, +input[type='checkbox'].checkbox:disabled + label:before { + cursor: default; +} +input[type='checkbox'].checkbox + label:before { + content: ''; + display: inline-block; + vertical-align: middle; + margin: 3px; + margin-top: 1px; + border: 1px solid #888; + border-radius: 1px; + height: 10px; + width: 10px; + background-position: center; +} +input[type='checkbox'].checkbox--white + label:before { + border-color: #ddd; +} +input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before, +input[type='checkbox'].checkbox--white:focus + label:before { + border-color: #fff; +} +input[type='checkbox'].checkbox--white:checked + label:before { + background-color: #eee; + border-color: #eee; +} +input[type='checkbox'].checkbox--white:disabled + label:before { + background-color: #666 !important; + border-color: #999 !important; +} +input[type='checkbox'].checkbox--white:checked:disabled + label:before { + border-color: #666; + background-color: #222; +} +input[type='checkbox'].checkbox--white:checked + label:before { + background-color: transparent !important; + border-color: #fff !important; + background-image: url('../img/actions/checkbox-mark-white.svg'); +} + +/* Password strength meter */ +.strengthify-wrapper { + display: inline-block; + position: relative; + top: -20px; + width: 250px; + border-radius: 0 0 3px 3px; + overflow: hidden; + height: 3px; +} +.tooltip-inner { + font-weight: bold; + padding: 3px 6px; + text-align: center; +} + +/* Show password toggle */ +#show, #dbpassword-toggle { + position: absolute; + right: 2px; + top: -3px; + display: flex; + justify-content: center; + width: 44px; + align-content: center; + padding: 13px; +} + +#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; +} +/* 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: var(--color-primary-text) !important; +} + +.body-login-container.two-factor { + max-width: 290px; + margin: 15px auto 0; +} +.two-factor-provider { + display: flex; + border-radius: 3px; /* --border-radius */ + margin: 12px 0; + border: 1px solid transparent; + text-align: left; + align-items: center; + text-decoration: none !important; + + &:hover, + &:focus, + &:active { + border: 1px solid #fff; + } + img { + width: 64px; + height: 64px; + padding: 0 12px; + } + div { + margin: 12px 0; + } + h3 { + margin: 0; + } + p { + font-weight: normal; + } +} +.two-factor-icon { + width: 100px; + display: block; + margin: 0 auto; +} +.two-factor-submit { + width: 100%; + padding: 10px; + margin: 0 0 5px 0; + border-radius: 100px; /* --border-radius-pill */ + font-size: 20px; +} +.two-factor-primary { + /* Fix for 'Use backup codes' button not taking correct styles */ + padding: 14px !important; + width: 226px; +} +.two-factor-secondary { + display: inline-block; + padding: 12px; +} + + +/* Additional login options */ +#remember_login { + margin: 18px 5px 0 16px !important; +} + +/* 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; + display: flex; + .info { + white-space: normal; + } + label { + flex-grow: 1; + margin: 0 -1px 5px; + font-size: 12px; + background: var(--color-background-hover); + color: var(--color-main-text); + cursor:pointer; + border: 1px solid var(--color-border); + padding: 10px 17px; + } + label.ui-state-hover, + label.ui-state-active { + font-weight: normal; + background: var(--color-background-darker); + color: var(--color-main-text); + } + label span { + display: none; + } +} + + +/* Nicely grouping input field sets */ +.grouptop, +.groupmiddle, +.groupbottom { + position: relative; + user-select: none; +} +.grouptop, .groupmiddle { + margin-bottom: 8px !important; +} +.groupbottom { + margin-bottom: 13px; +} +.groupbottom input[type=submit] { + box-shadow: none !important; +} +.grouptop.groupbottom input { + border-radius: 3px !important; + margin: 5px 0 !important; +} + +/* Errors */ +/* Warnings and errors are the same */ +.body-login-container { + display: flex; + flex-direction: column; + text-align: left; + word-wrap: break-word; + border-radius: 10px; /* --border-radius-large */ + cursor: default; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; + + /* TODO: Change all .warning/.update/.error to .body-login-container */ + .icon-big { + background-size: 70px; + height: 70px; + } + + form { + width: initial; + } + + p:not(:last-child) { + margin-bottom: 12px; + } +} + + +/* Various paragraph styles */ +.infogroup { + margin: 8px 0; +} +.infogroup:last-child { + margin-bottom: 0; +} +p.info { + margin: 20px auto; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +/* Update */ +.update { + width: calc(100% - 32px); + text-align: center; + + .appList { + list-style: disc; + text-align: left; + margin-left: 25px; + margin-right: 25px; + } + + img.float-spinner { + float: left; + } + + a.update-show-detailed { + border-bottom: inherit; + } +} +#update-progress-detailed { + text-align: left; + margin-bottom: 12px; +} +.update-show-detailed { + padding: 12px; + display: block; + opacity: .75; + + .icon-caret-white { + display: inline-block; + vertical-align: middle; + } +} + +#update-progress-icon { + height: 32px; + margin: 10px; + background-size: 32px; +} + + +/* Icons */ +.icon-info-white { + background-image: url('../img/actions/info-white.svg?v=2'); +} +.icon-error-white { + background-image: url('../img/actions/error-white.svg?v=1'); +} +.icon-caret-white { + background-image: url('../img/actions/caret-white.svg?v=1'); +} +.icon-confirm { + background-image: url('../img/actions/confirm.svg?v=2'); +} +.icon-confirm-white { + background-image: url('../img/actions/confirm-white.svg?v=2'); +} +.icon-checkmark-white { + background-image: url('../img/actions/checkmark-white.svg?v=1'); +} + + +/* Loading */ +.float-spinner { + margin-top: -32px; + padding-top: 32px; + height: 32px; + display: none; +} +[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; + filter: var(--background-invert-if-dark) +} +.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; +} +.primary .loading,.primary+.loading,.primary .loading-small,.primary+.loading-small,.primary .icon-loading,.primary+.icon-loading,.primary .icon-loading-dark,.primary+.icon-loading-dark,.primary .icon-loading-small,.primary+.icon-loading-small,.primary .icon-loading-small-dark,.primary+.icon-loading-small-dark { + filter: var(--primary-invert-if-bright) +} +.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, div[contenteditable=true].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, div[contenteditable=true].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, div[contenteditable=true].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, div[contenteditable=true].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 */ +footer { + min-height: 70px; + margin-top: auto; + .info .entity-name { + font-weight: bold; + } +} + +/* keep the labels for screen readers but hide them since we use placeholders */ +label.infield, +.hidden-visually { + position: absolute; + left: -10000px; + top: -10000px; + width: 1px; + height: 1px; + overflow: hidden; +} + +a.legal { + font-size: smaller; +} + +.notecard { + color: var(--color-text-light); + background-color: var(--note-background); + border-left: 4px solid var(--note-theme); + border-radius: var(--border-radius); + margin: 1rem 0; + padding: 1rem; + text-align: left; + + &.success { + --note-background: rgba(var(--color-success-rgb), 0.1); + --note-theme: var(--color-success); + } + + &.error { + --note-background: rgba(var(--color-error-rgb), 0.1); + --note-theme: var(--color-error); + } + + &.warning { + --note-background: rgba(var(--color-warning-rgb), 0.1); + --note-theme: var(--color-warning); + } + + &:last-child { + margin-bottom: 0; + } + + pre { + background-color: var(--color-background-dark); + margin-top: 1rem; + padding: 1em 1.3em; + border-radius: var(--border-radius); + } +} + +.guest-box, .body-login-container { + color: var(--color-main-text); + background-color: var(--color-main-background); + padding: $guest-container-padding; + border-radius: var(--border-radius-large); + box-shadow: 0 0 10px var(--color-box-shadow); + display: inline-block; +} + +.guest-box { + &.wide { + display: block; + text-align: left; + } + + fieldset { + margin-top: 0; + } + + .pre { + overflow-x: scroll; + } +} + +button.toggle-password { + background-color: transparent; + border-width: 0; + height: 44px; +} + +/** Utilities */ +.margin-top { + margin-top: 1rem !important; +} + +.text-left { + text-align: left !important; +} + +.hidden { + display: none; +} |