aboutsummaryrefslogtreecommitdiffstats
path: root/core/css/guest.scss
diff options
context:
space:
mode:
Diffstat (limited to 'core/css/guest.scss')
-rw-r--r--core/css/guest.scss311
1 files changed, 182 insertions, 129 deletions
diff --git a/core/css/guest.scss b/core/css/guest.scss
index 25c0a6f16ec..ef7d733165a 100644
--- a/core/css/guest.scss
+++ b/core/css/guest.scss
@@ -1,41 +1,50 @@
-/* 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;
+/*!
+ * SPDX-FileCopyrightText: 2016-2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+@use 'animations';
/* 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; }
+
+caption, th, td { text-align:start; 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;
+ /* Guest content uses flexbox */
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
/* bring the default font size up to 14px */
font-size: .875em;
+ font-weight: normal;
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);
+ font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ color: var(--color-background-plain-text, #ffffff);
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;
+ background-color: var(--color-background-plain, #0082c9);
+ /*
+ User background if logged in ('no' if removed, that way the variable is _defined_)
+ Fallback to default gradient (should not happened, the background is always defined anyway) */
+ background-image: var(--image-background, linear-gradient(40deg, #0082c9 0%, #30b6ff 100%));
+ background-attachment: fixed;
+ background-size: cover;
+ background-position: center;
min-height: 100%; /* fix sticky footer */
height: auto;
overflow: auto;
@@ -76,39 +85,31 @@ h2 {
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;
+ background-image: var(--image-logo, url('../../core/img/logo/logo.svg'));
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+ width: 175px;
+ height: 130px;
margin: 0 auto;
position: relative;
- left: unset;
- img {
- opacity: 0;
- max-width: 100%;
- max-height: 200px;
- }
+ inset-inline-start: unset;
}
}
.wrapper {
width: 100%;
max-width: 700px;
- margin-top: 10vh;
+ margin-block: 10vh auto;
}
/* Default FORM */
@@ -117,6 +118,7 @@ form {
margin: auto;
padding: 0;
}
+
form.install-form {
max-width: 300px;
}
@@ -125,10 +127,11 @@ form.install-form fieldset,
form.install-form fieldset input {
width: 100%;
}
+
form.install-form .strengthify-wrapper {
bottom: 17px;
width: calc(100% - 8px);
- left: 4px;
+ inset-inline-start: 4px;
top: unset;
}
@@ -140,24 +143,30 @@ form #sqliteInformation {
margin-top: 0.5rem;
margin-bottom: 20px;
}
+
form #adminaccount, form #use_other_db {
margin-bottom: 15px;
- text-align: left;
+ text-align: start;
}
+
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;
}
@@ -166,19 +175,12 @@ form #datadirField legend {
#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 {
@@ -186,15 +188,19 @@ form #datadirField legend {
}
}
-
-
#submit-wrapper {
margin: 0 auto;
+ 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 */
.submit-icon {
position: absolute;
- right: 24px;
- transition: right 100ms ease-in-out;
+ inset-inline-end: 24px;
+ transition: inset-inline-end 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
@@ -203,41 +209,23 @@ form #datadirField legend {
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;
+ inset-inline-end: 20px;
}
.icon-loading-small {
position: absolute;
top: 22px;
- right: 26px;
+ inset-inline-end: 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;
+ border-width: 2px;
}
input:not([type='range']):focus-visible {
- box-shadow: none !important;
+ box-shadow: none !important;
}
input[type='submit'],
@@ -250,24 +238,25 @@ select {
display: inline-block;
width: auto;
min-width: 25px;
- padding: 12px;
+ padding: calc(2 * var(--default-grid-baseline));
background-color: var(--color-main-background);
font-weight: bold;
- color: var(--color-text);
+ color: var(--color-main-text);
border: none;
- border-radius: 100px; /* --border-radius-pill */
+ border-radius: var(--border-radius-element);
cursor: pointer;
}
.icon-confirm.input-button-inline {
position: absolute;
- right: 3px;
+ inset-inline-end: 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'],
@@ -278,18 +267,20 @@ input[type='email'] {
cursor: text;
font-family: inherit;
font-weight: normal;
- margin-left: 0;
- margin-right: 0;
+ margin-inline: 0;
}
+
input[type='password'].password-with-toggle, input[type='text'].password-with-toggle {
width: 238px;
- padding-right: 40px !important;
+ padding-inline-end: 40px !important;
}
+
input.login {
width: 260px;
height: 50px;
background-position: right 16px center;
}
+
input[type='submit'],
input[type='submit'].icon-confirm,
input.updateButton,
@@ -305,31 +296,42 @@ 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);
+input.primary {
+ background-color: var(--color-primary-element);
+ color: var(--color-primary-element-text);
+}
+
+input,
+button,
+a {
+ &.primary:not(:disabled) {
+ &:hover,
+ &:focus {
+ background-color: var(--color-primary-element-hover);
+ color: var(--color-primary-element-text);
+ }
+ }
}
/* Checkboxes - white only for login */
input[type='checkbox'].checkbox {
position: absolute;
- left: -10000px;
+ inset-inline-start: -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;
@@ -342,25 +344,26 @@ input[type='checkbox'].checkbox + label:before {
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;
@@ -373,10 +376,14 @@ input[type='checkbox'].checkbox--white:checked + label:before {
position: relative;
top: -20px;
width: 250px;
- border-radius: 0 0 3px 3px;
+ border-start-start-radius: 0;
+ border-start-end-radius: 0;
+ border-end-end-radius: 3px;
+ border-end-start-radius: 3px;
overflow: hidden;
height: 3px;
}
+
.tooltip-inner {
font-weight: bold;
padding: 3px 6px;
@@ -386,7 +393,7 @@ input[type='checkbox'].checkbox--white:checked + label:before {
/* Show password toggle */
#show, #dbpassword-toggle {
position: absolute;
- right: 2px;
+ inset-inline-end: 2px;
top: -3px;
display: flex;
justify-content: center;
@@ -399,14 +406,16 @@ input[type='checkbox'].checkbox--white:checked + label:before {
padding: .6em 2.5em .4em .4em;
width: 8em;
}
+
#personal-show + label {
height: 14px;
margin-top: -25px;
- left: 295px;
+ inset-inline-start: 295px;
display: block;
}
+
#passwordbutton {
- margin-left: .5em;
+ margin-inline-start: .5em;
}
/* Dark subtle label text */
@@ -421,19 +430,21 @@ form input[type='checkbox']+label {
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;
+ color: var(--color-primary-element-text) !important;
}
.body-login-container.two-factor {
- max-width: 290px;
- margin: 15px auto 0;
+ // Same size as login box and dashboard panels
+ width: 320px;
+ box-sizing: border-box;
}
+
.two-factor-provider {
display: flex;
border-radius: 3px; /* --border-radius */
margin: 12px 0;
border: 1px solid transparent;
- text-align: left;
+ text-align: start;
align-items: center;
text-decoration: none !important;
@@ -457,11 +468,13 @@ form .warning input[type='checkbox']+label {
font-weight: normal;
}
}
+
.two-factor-icon {
width: 100px;
display: block;
margin: 0 auto;
}
+
.two-factor-submit {
width: 100%;
padding: 10px;
@@ -469,11 +482,13 @@ form .warning input[type='checkbox']+label {
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;
@@ -482,7 +497,8 @@ form .warning input[type='checkbox']+label {
/* Additional login options */
#remember_login {
- margin: 18px 5px 0 16px !important;
+ margin-block: 18px 0 !important;
+ margin-inline: 16px 5px !important;
}
/* fixes for update page TODO should be fixed some time in a proper way */
@@ -530,15 +546,19 @@ form #selectDbType {
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;
@@ -549,7 +569,7 @@ form #selectDbType {
.body-login-container {
display: flex;
flex-direction: column;
- text-align: left;
+ text-align: start;
word-wrap: break-word;
border-radius: 10px; /* --border-radius-large */
cursor: default;
@@ -578,9 +598,11 @@ form #selectDbType {
.infogroup {
margin: 8px 0;
}
+
.infogroup:last-child {
margin-bottom: 0;
}
+
p.info {
margin: 20px auto;
-webkit-user-select: none;
@@ -596,23 +618,29 @@ p.info {
.appList {
list-style: disc;
- text-align: left;
- margin-left: 25px;
- margin-right: 25px;
- }
-
- img.float-spinner {
- float: left;
+ text-align: start;
+ margin-inline: 25px;
}
a.update-show-detailed {
border-bottom: inherit;
}
}
+
+/* Cannot use inline-start and :dir to support Samsung Internet */
+body[dir='ltr'] .update img.float-spinner {
+ float: left;
+}
+
+body[dir='rtl'] .update img.float-spinner {
+ float: right;
+}
+
#update-progress-detailed {
- text-align: left;
+ text-align: start;
margin-bottom: 12px;
}
+
.update-show-detailed {
padding: 12px;
display: block;
@@ -635,18 +663,23 @@ p.info {
.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');
}
@@ -659,17 +692,24 @@ p.info {
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 {
+ border: 2px solid rgba(150, 150, 150, 0.5);
+ border-radius: 100%;
+ border-top-color: #646464;
+
z-index: 2;
content: '';
height: 32px;
@@ -677,25 +717,23 @@ p.info {
margin: -17px 0 0 -17px;
position: absolute;
top: 50%;
- left: 50%;
- border-radius: 100%;
+ inset-inline-start: 50%;
-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;
+ filter: var(--primary-invert-if-bright)
}
+
.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;
@@ -705,12 +743,15 @@ p.info {
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');
}
@@ -737,18 +778,25 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
/* FOOTER */
footer {
- min-height: 70px;
- margin-top: auto;
.info .entity-name {
font-weight: bold;
}
+
+ &.guest-box {
+ padding: var(--default-grid-baseline) calc(3 * var(--default-grid-baseline));
+ margin-bottom: 1rem;
+
+ .info {
+ margin: 0;
+ }
+ }
}
/* keep the labels for screen readers but hide them since we use placeholders */
label.infield,
.hidden-visually {
position: absolute;
- left: -10000px;
+ inset-inline-start: -10000px;
top: -10000px;
width: 1px;
height: 1px;
@@ -762,11 +810,11 @@ a.legal {
.notecard {
color: var(--color-text-light);
background-color: var(--note-background);
- border-left: 4px solid var(--note-theme);
+ border-inline-start: 4px solid var(--note-theme);
border-radius: var(--border-radius);
margin: 1rem 0;
padding: 1rem;
- text-align: left;
+ text-align: start;
&.success {
--note-background: rgba(var(--color-success-rgb), 0.1);
@@ -796,18 +844,23 @@ a.legal {
}
.guest-box, .body-login-container {
+ // Ensure the maxcontrast color is set for the background
+ --color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
color: var(--color-main-text);
- background-color: var(--color-main-background);
- padding: $guest-container-padding;
- border-radius: var(--border-radius-large);
+ background-color: var(--color-main-background-blur);
+ padding: calc(3 * var(--default-grid-baseline));
+ border-radius: var(--border-radius-container);
box-shadow: 0 0 10px var(--color-box-shadow);
display: inline-block;
+ -webkit-backdrop-filter: var(--filter-background-blur);
+ backdrop-filter: var(--filter-background-blur);
}
.guest-box {
&.wide {
display: block;
- text-align: left;
+ text-align: start;
+ border-radius: var(--border-radius-container-large);
}
fieldset {
@@ -831,7 +884,7 @@ button.toggle-password {
}
.text-left {
- text-align: left !important;
+ text-align: start !important;
}
.hidden {
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-14 20:41:26 +0000