Redesign guest pages for better accessibility

- Use white box and put content on it - Improve focus indicator Signed-off-by: Carl Schwan <carl@carlschwan.eu>
2022-07-18 17:58:05 +02:00 · 2022-07-18 17:58:05 +02:00 · 253118298d
--- a/core/Controller/LoginController.php
+++ b/core/Controller/LoginController.php
@ -205,6 +205,7 @@ class LoginController extends Controller {
 		];

 		$this->initialStateService->provideInitialState('core', 'countAlternativeLogins', count($parameters['alt_login']));
+		$this->initialStateService->provideInitialState('core', 'alternativeLogins', $parameters['alt_login']);

 		return new TemplateResponse(
 			$this->appName,
--- a/core/css/guest.css
+++ b/core/css/guest.css
@ -1,4 +1,5 @@
 /* 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. */

@ -10,7 +11,7 @@ body { line-height:1.5; }
 table { border-collapse:separate; border-spacing:0; white-space:nowrap; }
 caption, th, td { text-align:left; font-weight:normal; }
 table, td, th { vertical-align:middle; }
-a { border:0; color:#000; text-decoration:none;}
+a { border:0; color: var(--color-main-text); text-decoration:none;}
 a, a *, input, input *, select, .button span, label { cursor:pointer; }
 ul { list-style:none; }

@ -34,19 +35,17 @@ body {

 /* Various fonts settings */
 #body-login a {
-	color: var(--color-primary-text);
 	font-weight: 600;
 }
+#body-login footer a {
+    color: var(--color-primary-text);
+}
 #body-login a:not(.button):hover,
 #body-login a:not(.button):focus {
 	text-decoration: underline;
 	text-decoration-skip-ink: auto;
 }

-#showAdvanced {
-	color: var(--color-primary-text);
-}
-
 em {
 	font-style: normal;
 	opacity: .5;
@ -109,19 +108,22 @@ form {
 }
 form fieldset {
 	width: 260px;
-	margin: auto auto 20px;
+	margin-top: 8px;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
 }
 form #sqliteInformation {
-	margin-top: -20px;
+	margin-top: 0px;
 	margin-bottom: 20px;
 }
 form #adminaccount {
 	margin-bottom: 15px;
 }
+form #advancedHeader {
+	width: 100%;
+}
 form fieldset legend, #datadirContent label {
 	width: 100%;
 }
@ -143,8 +145,7 @@ form #datadirField legend {

 /* Buttons and input */
 #submit-wrapper,
-#reset-password-wrapper,
-.alternative-logins {
+#reset-password-wrapper {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@ -153,45 +154,6 @@ form #datadirField legend {
 						   absolutely positioned descendant icons */
 }

-.alternative-logins {
-	margin: auto;
-	display: block;
-	min-width: 260px;
-	max-width: 400px;
-	overflow: hidden;
-}
-
-.alternative-logins a.button {
-	margin: 0;
-	display: block;
-	font-size: 15px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.alternative-logins a.button::before {
-	content: "";
-	background-repeat: no-repeat;
-	background-size: contain;
-	width: 0;
-	margin-right: 0;
-	height: 18px;
-	display: inline-block;
-	vertical-align: bottom;
-}
-
-.alternative-logins .button {
-	color: var(--color-text-lighter);
-	padding: 12px 20px;
-}
-
-
-.alternative-logins .button.single-alt-login-option {
-	 width: 260px;
-	 margin: 0 auto;
- }
-
@media only screen and (max-width: 1024px) {
 	.wrapper {
 		margin-top: 0;
@ -246,11 +208,21 @@ input:not([type='password']),
 a.button {
 	font-size: 20px;
 	margin: 5px;
-	padding: 11px 10px 9px;
+	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'],
@ -264,36 +236,43 @@ select {
 	padding: 12px;
 	background-color: var(--color-main-background);
 	font-weight: bold;
-	color: var(--color-text-lighter);
+	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 {
-	border: 2px solid black !important;
-	padding: 8px;
+	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: 249px;
-	background: #fff;
+	width: 266px;
+	padding: 5px 10px;
 	color: var(--color-text-lighter);
 	cursor: text;
 	font-family: inherit;
 	-webkit-appearance: textfield;
 	-moz-appearance: textfield;
 	box-sizing: content-box;
-	border: none;
 	font-weight: normal;
+	margin-left: 0;
+	margin-right: 0;
 }
 input[type='text']:focus-visible,
 input[type='password']:focus-visible {
 	outline: var(--color-primary) auto 2px !important;
 }
 input[type='password'].password-with-toggle, input[type='text'].password-with-toggle {
-	width: 219px;
+	width: 236px;
 	padding-right: 40px;
 }
 input.login {
@ -309,17 +288,6 @@ input.update-continue {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.updateAnyways a.updateAnywaysButton {
-	font-size: 14px;
-	padding: 10px 20px;
-	color: #666 !important;
-	display: inline-block;
-	border-radius: 100px; /* --border-radius-pill */
-	margin: 15px 5px;
-}
-.updateAnyways a.updateAnywaysButton:hover {
-	color: #222 !important;
-}

 /* Get rid of the inside dotted line in Firefox */
 button::-moz-focus-inner,
@ -327,15 +295,6 @@ input::-moz-focus-inner {
 	border: 0;
 }

-input.primary,
-button.primary,
-a.primary {
-	border: 1px solid var(--color-primary-text);
-	background-color: var(--color-primary);
-	color: var(--color-primary-text);
-	transition: color 100ms ease-in-out;
-}
-
 input.primary:not(:disabled):hover,
 input.primary:not(:disabled):focus,
 button.primary:not(:disabled):hover,
@ -343,8 +302,6 @@ button.primary:not(:disabled):focus,
 a.primary:not(:disabled):hover,
 a.primary:not(:disabled):focus {
 	color: var(--color-primary-text);
-	background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
-	background-position: initial;
 }

 /* Checkboxes - white only for login */
@ -405,14 +362,13 @@ input[type='checkbox'].checkbox--white:checked + label:before {
 	display: inline-block;
 	position: relative;
 	top: -20px;
-	width: 269px;
+	width: 286px;
 	border-radius: 0 0 3px 3px;
 	overflow: hidden;
 	height: 3px;
 }
 .tooltip-inner {
 	font-weight: bold;
-	color: #ccc;
 	padding: 3px 6px;
 	text-align: center;
 }
@ -420,41 +376,15 @@ input[type='checkbox'].checkbox--white:checked + label:before {
 /* Show password toggle */
 #show, #dbpassword-toggle {
 	position: absolute;
-	right: 1em;
-	top: .8em;
-	float: right;
-}
-#show + label, #dbpassword-toggle + label {
-	right: 21px;
-	top: 15px !important;
-	margin: -14px !important;
-	padding: 14px !important;
-}
-#show:checked + label, #dbpassword-toggle:checked + label, #personal-show:checked + label {
-	opacity: .8;
-}
-#show + label, #dbpassword-toggle + label, #personal-show + label {
-	position: absolute !important;
-	height: 20px;
-	width: 24px;
-	background-image: url('../img/actions/toggle.svg?v=1');
-	background-repeat: no-repeat;
-	background-position: center;
-	opacity: .3;
-}
-#show + label:before, #dbpassword-toggle + label:before, #personal-show + label:before {
-	display: none;
-}
-/* Feedback for keyboard focus and mouse hover */
-#show:focus + label, #dbpassword-toggle:focus + label, #personal-show:focus + label,
-#show + label:hover, #dbpassword-toggle + label:hover, #personal-show + label:hover {
-  opacity: 1;
-}
-#show:focus-visible + label, #dbpassword-toggle:focus-visible + label, #personal-show:focus-visible + label {
-	box-shadow: var(--color-primary) 0 0 0 2px;
-	opacity: 1;
-	border-radius: 9999px;
+	right: 2px;
+	top: 4px;
+	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;
@ -476,7 +406,6 @@ form fieldset legend,
 form fieldset .warning-info,
 form input[type='checkbox']+label {
 	text-align: center;
-	color: var(--color-primary-text);
 }
 /* overrides another !important statement that sets this to unreadable black */
 form .warning input[type='checkbox']:hover+label,
@ -555,13 +484,8 @@ form .warning input[type='checkbox']+label {
 #reset-password-wrapper + a {
 	display: inline-block;
 	font-weight: normal !important;
-	padding: 12px;
-	color: var(--color-primary-text);
+	padding: 12px 12px 0 12px;
 	cursor: pointer;
-	text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */
-}
-#lost-password {
-	margin-top: -6px;
 }
 #forgot-password {
 	padding: 11px;
@ -618,20 +542,17 @@ form #selectDbType label {
 	flex-grow: 1;
 	margin: 0 -1px 5px;
 	font-size: 12px;
-	background:#f8f8f8;
-	color:#888;
+	background: var(--color-background-hover);
+	color: var(--color-main-text);
 	cursor:pointer;
-	border: 1px solid #ddd;
+	border: 1px solid var(--color-border);
 	padding: 10px 17px;
 }
 form #selectDbType label.ui-state-hover,
 form #selectDbType label.ui-state-active {
 	font-weight: normal;
-	color:#000;
-	background-color:#e8e8e8;
-}
-form #selectDbType .ui-visual-focus {
-	box-shadow: none;
+	background: var(--color-background-darker);
+	color: var(--color-main-text);
 }
 form #selectDbType label span {
 	display: none;
@ -642,31 +563,13 @@ form #selectDbType label span {
 .groupmiddle,
 .groupbottom {
 	position: relative;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
 	user-select: none;
 }
-.grouptop input {
-	margin-bottom: 0 !important;
-	border-bottom: 0 !important;
-	border-bottom-left-radius: 0 !important;
-	border-bottom-right-radius: 0 !important;
+.grouptop, .groupmiddle {
+	margin-bottom: 8px !important;
 }
-.groupmiddle input {
-	margin-top: 0 !important;
-	margin-bottom: 0 !important;
-	border-top: 0 !important;
-	border-bottom: 0 !important;
-	border-radius: 0 !important;
-	box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
-}
-.groupbottom input {
-	margin-top: 0 !important;
-	border-top: 0 !important;
-	border-top-right-radius: 0 !important;
-	border-top-left-radius: 0 !important;
-	box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
+.groupbottom {
+	margin-bottom: 13px;
 }
 .groupbottom input[type=submit] {
 	box-shadow: none !important;
@ -678,16 +581,9 @@ form #selectDbType label span {

 /* Errors */
 /* Warnings and errors are the same */
-.body-login-container,
-.warning,
-.update,
-.error {
+.body-login-container {
 	display: flex;
 	flex-direction: column;
-	margin-top: 15px;
-	padding: 15px;
-	background-color: rgba(0,0,0,.3);
-	color: #fff;
 	text-align: left;
 	word-wrap: break-word;
 	border-radius: 10px; /* --border-radius-large */
@ -698,14 +594,6 @@ form #selectDbType label span {
 	user-select: text;
 }

-.body-login-container h2,
-.warning h2,
-.update h2,
-.error h2 {
-	color: #fff;
-	text-align: center;
-}
-
 /* TODO: Change all .warning/.update/.error to .body-login-container */
 .body-login-container .icon-big {
 	background-size: 70px;
@ -720,48 +608,6 @@ form #selectDbType label span {
    margin-bottom: 12px;
 }

-.warning.updateAnyways {
-	text-align: center;
-}
-.warning legend,
-.warning a,
-.error a {
-	color: #fff !important;
-	font-weight: bold !important;
-	opacity: 1;
-}
-.error a.button {
-	color: #555 !important;
-	display: inline-block;
-	text-align: center;
-}
-.error pre {
-	white-space: pre-wrap;
-	text-align: left;
-}
-.error-wide {
-	width: 700px;
-	margin-top: 35px;
-}
-.error-wide .button {
-	color: black !important;
-}
-.warning-input {
-	border-color: #ce3702 !important;
-}
-a.warning {
-	cursor: pointer;
-}
-fieldset.warning legend,
-fieldset.update legend {
-	top: 18px;
-	position: relative;
-}
-fieldset.warning legend + p,
-fieldset.update legend + p {
-	margin-top: 12px;
-}
-
 /* Various paragraph styles */
 .infogroup {
 	margin: 8px 0;
@ -771,7 +617,6 @@ fieldset.update legend + p {
 }
 p.info {
 	margin: 20px auto;
-	text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@ -947,3 +792,78 @@ label.infield,
 a.legal {
 	font-size: smaller;
 }
+
+.notecard.success {
+	--note-background: rgba(var(--color-success-rgb), 0.2);
+	--note-theme: var(--color-success);
+}
+.notecard.error {
+	--note-background: rgba(var(--color-error-rgb), 0.2);
+	--note-theme: var(--color-error);
+}
+.notecard.warning {
+	--note-background: rgba(var(--color-warning-rgb), 0.2);
+	--note-theme: var(--color-warning);
+}
+.notecard {
+	color: var(--color-text-light);
+	background-color: var(--note-background);
+	border: 1px solid var(--color-border);
+	border-left: 4px solid var(--note-theme);
+	border-radius: var(--border-radius);
+	box-shadow: rgba(43, 42, 51, 0.05) 0px 1px 2px 0px;
+	margin: 1rem 0;
+	margin-top: 1rem;
+	padding: 1rem;
+	text-align: left;
+}
+
+.notecard:last-child {
+	margin-bottom: 0;
+}
+
+.notecard 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: 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;
+}
+
+.guest-box fieldset {
+	margin-top: 0;
+}
+
+.guest-box 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;
+}
--- a/core/css/inputs.css
+++ b/core/css/inputs.css
@ -164,7 +164,7 @@ textarea:disabled,
 div[contenteditable=true]:disabled,
 .pager li a:disabled {
  background-color: var(--color-background-dark);
-  color: var(--color-text-maxcontrast);
+  color: var(--color-main-text);
  cursor: default;
  opacity: 0.5;
 }
@ -177,15 +177,14 @@ div[contenteditable=true]:required,
 .pager li a:required {
  box-shadow: none;
 }
-div.select2-drop .select2-search input:invalid,
-select:invalid,
-button:not(.button-vue):invalid, .button:invalid,
-input:not([type=range]):invalid,
-textarea:invalid,
-div[contenteditable=true]:invalid,
-.pager li a:invalid {
-  box-shadow: none !important;
-  border-color: var(--color-error);
+div.select2-drop .select2-search input:user-invalid,
+select:user-invalid,
+button:not(.button-vue):user-invalid, .button:user-invalid,
+input:not([type=range]):user-invalid,
+textarea:user-invalid,
+div[contenteditable=true]:user-invalid,
+.pager li a:user-invalid {
+  box-shadow: 0 0 0 2px var(--color-error) !important;
 }
 div.select2-drop .select2-search input.primary,
 select.primary,
--- a/core/css/inputs.css.map
+++ b/core/css/inputs.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["variables.scss","inputs.scss","functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ADlCC;AACD;EACC;;;AAED;EACC;;;AAKD;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;EACA,YAVgB;EAWhB;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA+BA;;AA7BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAGD;AACA;AAcC;AAAA;;AAbA;EACC;EACA;EAEA,QA9He;;AAgIhB;EAIC;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;EACC;;;AAIF;AACA;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA,YAjKgB;EAkKhB;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;;AAKD;AAAA;EACC;;AAIA;AAAA;EACC;;;AAKH;AACA;AAAA;AAAA;AAAA;EAIC;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAID;AACC;;AACA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;;AAEC;EAGC;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,QArPgB;;;AAwPjB;AAEC;AAsBC;;AAnBA;EACC;EACA;EACA;EACA;AACA;EACA;EACA;EACA,QArQc;EAsQd,OAtQc;EAuQd;EACA;EACA;;AACA;EACC;ACpOH;EAEA;;AD0OG;EACC;;AAID;EAGC;EACA;;AACA;EACC;;AAQH;EACC;EACA;AACA;EACA;;;AAOJ;AACA;AAAA;EAEC;;;AAED;AAAA;EAEC;;;AAGD;AAKC;AA8EC;;AA5EA;EAEC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;;AAED;EACC;EACA;EACA,QAxBkB;EAyBlB,OAzBkB;EA0BlB;EACA;EACA;EACA;;AAED;EAEC;;AAED;EACC;EACA;EACA;EACA;;AAED;AAEA;AAAA;EAEC;EACA;EACA;;AAED;EACC;EACA;AAA4D;;AAE7D;EACC;;AAID;EACC;EACA;;AAED;EACC,eA/DkB;;AAmEnB;EACC;EACA,QArEkB;EAsElB,OAtEkB;EAuElB;EACA;;AAED;EACC;;AAED;EACC;;AAOD;EAEC;;AAED;EACC,cAzFyB;;AA2F1B;EACC;EACA;EACA;;AAED;EACC;AAAuE;EACvE;AAAiE;;AAElE;EACC;EACA;AAAiE;EACjE;;AAID;EAEC;AAA0C;EAC1C;AAAsD;EACtD;;AAED;EACC;;AAED;EACC;AAAc;;;AAMlB;AACA;EACC;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;EACA;;AAIH;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;;AAGF;EACE;EACA;;;AAMH;AAAA;AAAA;AAAA;EAEC;;;AAID;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EAIC;EACA;EACA;EACA;;AAED;EACC;;AAGF;EACC;;AACA;EACC;;;AAKJ;EACC;;AACA;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AAGF;EAGC;;AAED;EACC;;;AAKH;AACA;EACC;EACA;;AACA;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAIH;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAED;EACC;EACA;;AACA;EACC;;;AAQL;AACA;EACC;EACA;EACA;EACA;EACA;EACA;AAiHA;;AAhHA;AACC;;AACA;EACC;EACA;;AAGF;EAEC;;AAED;AACC;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAjsBe;AAksBf;AAoDA;AASA;AAaA;;AAzEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;AASA;;AAPA;EACC;AACA;;AACA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;EAEA;EACA;EACA;EACA;AACA;AAAA;AAQA;AAAA;;AANA;EACC;;AAED;EACC,cAnDa;;AAuDd;EACC;EACA;EACA;;AAKH;EACC;EACA;EACA;AAAY;EACZ;EACA;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA,cAhFe;AAiFf;EACA;;AAGD;EACC;EACA;EACA;EACA;AACA;EACA;EACA;AACA;EACA;AACA;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AACA;AAAA;EAEC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAiBA;AAAA;AAAA;;AAhBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAMA;EACC;EACA;;AAGF;EACC;;AAED;EACC;;AAIA;EACC;;;AAQN;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEC;EACC;;AAED;EACC;;AAGF;EACC;;AAED;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;;AAIF;AACA;EACC;IAEC;;EAED;IAEC;;EAED;IAGC;;EAED;IAEC;;;AAGF;EACC;EACA;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC","file":"inputs.css"}
+{"version":3,"sourceRoot":"","sources":["variables.scss","inputs.scss","functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ADlCC;AACD;EACC;;;AAED;EACC;;;AAKD;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;EACA,YAVgB;EAWhB;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA8BA;;AA5BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAGD;AACA;AAcC;AAAA;;AAbA;EACC;EACA;EAEA,QA7He;;AA+HhB;EAIC;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;EACC;;;AAIF;AACA;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA,YAhKgB;EAiKhB;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;;AAKD;AAAA;EACC;;AAIA;AAAA;EACC;;;AAKH;AACA;AAAA;AAAA;AAAA;EAIC;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAID;AACC;;AACA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;;AAEC;EAGC;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,QApPgB;;;AAuPjB;AAEC;AAsBC;;AAnBA;EACC;EACA;EACA;EACA;AACA;EACA;EACA;EACA,QApQc;EAqQd,OArQc;EAsQd;EACA;EACA;;AACA;EACC;ACnOH;EAEA;;ADyOG;EACC;;AAID;EAGC;EACA;;AACA;EACC;;AAQH;EACC;EACA;AACA;EACA;;;AAOJ;AACA;AAAA;EAEC;;;AAED;AAAA;EAEC;;;AAGD;AAKC;AA8EC;;AA5EA;EAEC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;;AAED;EACC;EACA;EACA,QAxBkB;EAyBlB,OAzBkB;EA0BlB;EACA;EACA;EACA;;AAED;EAEC;;AAED;EACC;EACA;EACA;EACA;;AAED;AAEA;AAAA;EAEC;EACA;EACA;;AAED;EACC;EACA;AAA4D;;AAE7D;EACC;;AAID;EACC;EACA;;AAED;EACC,eA/DkB;;AAmEnB;EACC;EACA,QArEkB;EAsElB,OAtEkB;EAuElB;EACA;;AAED;EACC;;AAED;EACC;;AAOD;EAEC;;AAED;EACC,cAzFyB;;AA2F1B;EACC;EACA;EACA;;AAED;EACC;AAAuE;EACvE;AAAiE;;AAElE;EACC;EACA;AAAiE;EACjE;;AAID;EAEC;AAA0C;EAC1C;AAAsD;EACtD;;AAED;EACC;;AAED;EACC;AAAc;;;AAMlB;AACA;EACC;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;EACA;;AAIH;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;;AAGF;EACE;EACA;;;AAMH;AAAA;AAAA;AAAA;EAEC;;;AAID;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EAIC;EACA;EACA;EACA;;AAED;EACC;;AAGF;EACC;;AACA;EACC;;;AAKJ;EACC;;AACA;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AAGF;EAGC;;AAED;EACC;;;AAKH;AACA;EACC;EACA;;AACA;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAIH;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAED;EACC;EACA;;AACA;EACC;;;AAQL;AACA;EACC;EACA;EACA;EACA;EACA;EACA;AAiHA;;AAhHA;AACC;;AACA;EACC;EACA;;AAGF;EAEC;;AAED;AACC;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAhsBe;AAisBf;AAoDA;AASA;AAaA;;AAzEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;AASA;;AAPA;EACC;AACA;;AACA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;EAEA;EACA;EACA;EACA;AACA;AAAA;AAQA;AAAA;;AANA;EACC;;AAED;EACC,cAnDa;;AAuDd;EACC;EACA;EACA;;AAKH;EACC;EACA;EACA;AAAY;EACZ;EACA;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA,cAhFe;AAiFf;EACA;;AAGD;EACC;EACA;EACA;EACA;AACA;EACA;EACA;AACA;EACA;AACA;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AACA;AAAA;EAEC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAiBA;AAAA;AAAA;;AAhBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAMA;EACC;EACA;;AAGF;EACC;;AAED;EACC;;AAIA;EACC;;;AAQN;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEC;EACC;;AAED;EACC;;AAGF;EACC;;AAED;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;;AAIF;AACA;EACC;IAEC;;EAED;IAEC;;EAED;IAGC;;EAED;IAEC;;;AAGF;EACC;EACA;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC","file":"inputs.css"}
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@ -78,16 +78,15 @@ div[contenteditable=true],
 	}
 	&:disabled {
 		background-color: var(--color-background-dark);
-		color: var(--color-text-maxcontrast);
+		color: var(--color-main-text);
 		cursor: default;
 		opacity: 0.5;
 	}
 	&:required {
 		box-shadow: none;
 	}
-	&:invalid {
-		box-shadow: none !important;
-		border-color: var(--color-error);
+	&:user-invalid {
+		box-shadow: 0 0 0 2px var(--color-error) !important;
 	}
 	/* Primary action button, use sparingly */
 	&.primary {
--- a/core/css/login/authpicker.css
+++ b/core/css/login/authpicker.css
@ -1,13 +1,22 @@
 .picker-window {
-	display: block;
-	padding: 10px;
-	margin: 20px 0;
-	background-color: rgba(0,0,0,.3);
-	color: #fff;
-	border-radius: 3px;
+	display: inline-block;
+	padding: 16px;
+	margin: 20px;
+	background-color: var(--color-main-background);
+	color: var(--color-main-text);
+	border-radius: var(--border-radius-large);
+	box-shadow: 0 0 10px var(--color-box-shadow);
 	cursor: default;
 }

+.picker-window.small {
+    max-width: 400px;
+}
+
+.picker-window h2 {
+    margin: 20px auto;
+}
+
 .apptoken-link {
 	margin: 20px;
 	display: block;
--- a/core/css/server.css
+++ b/core/css/server.css
@ -380,12 +380,11 @@ body {
  margin-top: 8px;
  padding: 5px;
  border-radius: var(--border-radius);
-  color: var(--color-primary-text);
-  background-color: var(--color-warning);
+  color: var(--color-main-text);
+  background-color: rgba(var(--color-warning-rgb), 0.2);
 }

 .warning legend, .warning a {
-  color: var(--color-primary-text) !important;
  font-weight: bold !important;
 }

@ -1339,7 +1338,7 @@ textarea:disabled,
 div[contenteditable=true]:disabled,
 .pager li a:disabled {
  background-color: var(--color-background-dark);
-  color: var(--color-text-maxcontrast);
+  color: var(--color-main-text);
  cursor: default;
  opacity: 0.5;
 }
@ -1352,15 +1351,14 @@ div[contenteditable=true]:required,
 .pager li a:required {
  box-shadow: none;
 }
-div.select2-drop .select2-search input:invalid,
-select:invalid,
-button:not(.button-vue):invalid, .button:invalid,
-input:not([type=range]):invalid,
-textarea:invalid,
-div[contenteditable=true]:invalid,
-.pager li a:invalid {
-  box-shadow: none !important;
-  border-color: var(--color-error);
+div.select2-drop .select2-search input:user-invalid,
+select:user-invalid,
+button:not(.button-vue):user-invalid, .button:user-invalid,
+input:not([type=range]):user-invalid,
+textarea:user-invalid,
+div[contenteditable=true]:user-invalid,
+.pager li a:user-invalid {
+  box-shadow: 0 0 0 2px var(--color-error) !important;
 }
 div.select2-drop .select2-search input.primary,
 select.primary,
--- a/core/css/server.css.map
+++ b/core/css/server.css.map
--- a/core/css/styles.css
+++ b/core/css/styles.css
@ -379,12 +379,11 @@ body {
  margin-top: 8px;
  padding: 5px;
  border-radius: var(--border-radius);
-  color: var(--color-primary-text);
-  background-color: var(--color-warning);
+  color: var(--color-main-text);
+  background-color: rgba(var(--color-warning-rgb), 0.2);
 }

 .warning legend, .warning a {
-  color: var(--color-primary-text) !important;
  font-weight: bold !important;
 }

--- a/core/css/styles.css.map
+++ b/core/css/styles.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["variables.scss","styles.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AACA;AAAA;AAAA;EAGC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;AACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;;AAKH;AAEA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAID;AAEA;EACC;EACA;;;AAID;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAa;EACb;EACA;EACA;EACA;EACA;EACA,KDxGe;;;AC2GhB;AAEA;EACC;;;AAGD;EACC;;;AAMC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;;;AAKH;AAEA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;;;AAGD;AAEA;AAEA;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAED;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAIC;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;;AAKD;EACC;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;EACA;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;;;AAGD;AACA;AAEA;AAEA;AAEA;EACC;EACA;;AACA;EACC;EACA;;;AAIF;EACC;;;AAGD;EACC;;;AAIA;AAAA;EAGC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAED;EACC;;AAEA;EACC;;AAED;EACC;;AAGF;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;;AAGA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;;AAMJ;EACC;EACA;;;AAID;AACA;EACC;EACA;EACA;EACA;AAwBA;;AAtBA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;;AAGA;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;;AAGA;AAAA;AAAA;EAIC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;;AAMJ;AAGC;AAAA;EACC;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;AACA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGA;EACC;;AAED;EACC;;AAED;EACC;EACA;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AACA;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;AACA;AACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;AACC;EACA;EACA;;AAEC;EACC;EACA;;AACA;EACC;EACA;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;AAAA;AAAA;EAGC;;AAED;AAAA;EAEC;;AAGD;EACC;EACA;;AAED;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACC;;AACA;EACC;EACA;EACA;;AAED;EACC;;AAIH;EACC;;AAED;EACC;;AAED;EAIC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,SAhBS;EAiBT;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,aA/BU;EAgCV;;AACA;EACC;;AAGF;EACC;EACA;;AAED;EACC;;AAON;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;;;AAGD;AAGC;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAGD;EAGC;;AAKD;EACC;;AAEA;EACC;;;AAMJ;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;AAAA;EAEC;;AAIF;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;EACA;AA2DA;;AAzDA;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;EACA;;AAGD;AACC;EACA;EACA;EACA;EACA;;AAED;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EAGC;;AAIF;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;AAKF;EACC;EACA;;AAED;EACC;;;AAMH;EACC;EACA;EACA;;;AAGD;AAEA;EACC;;;AAGD;AAGC;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;;;AAIF;AACA;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;AAIA;EACC;;AAIF;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;;AAIH;EACC;;AACA;EACC;;AAGF;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;AAAA;AAAA;EAGC;;AAGF;EACC;EACA;;AAID;EACC;EACA;;AAEA;EACC;;AAGF;EACC;;AAEA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;;AAIF;AAGC;EACC;EACA;;AAED;EACC;;;AAIF;AACA;EACC;;AAID;AAEA;EACC;EACA;EACA;EACA","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["variables.scss","styles.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;AACA;AAAA;AAAA;EAGC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;AACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;;AAKH;AAEA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAID;AAEA;EACC;EACA;;;AAID;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAa;EACb;EACA;EACA;EACA;EACA;EACA,KDxGe;;;AC2GhB;AAEA;EACC;;;AAGD;EACC;;;AAMC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;;;AAKH;AAEA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;;;AAGD;AAEA;AAEA;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAED;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAIC;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;EACA;EACA;;;AAIA;EACC;;;AAKD;EACC;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;EACA;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;;;AAGD;AACA;AAEA;AAEA;AAEA;EACC;EACA;;AACA;EACC;EACA;;;AAIF;EACC;;;AAGD;EACC;;;AAIA;AAAA;EAGC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAIA;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAKD;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAED;EACC;;AAEA;EACC;;AAED;EACC;;AAGF;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;;AAGA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;;AAMJ;EACC;EACA;;;AAID;AACA;EACC;EACA;EACA;EACA;AAwBA;;AAtBA;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;;AAGA;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AAGF;EACC;;AAGA;AAAA;AAAA;EAIC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;;AAMJ;AAGC;AAAA;EACC;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;AACA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGA;EACC;;AAED;EACC;;AAED;EACC;EACA;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AACA;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;AACA;AACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;AACC;EACA;EACA;;AAEC;EACC;EACA;;AACA;EACC;EACA;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;AAAA;AAAA;EAGC;;AAED;AAAA;EAEC;;AAGD;EACC;EACA;;AAED;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACC;;AACA;EACC;EACA;EACA;;AAED;EACC;;AAIH;EACC;;AAED;EACC;;AAED;EAIC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,SAhBS;EAiBT;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,aA/BU;EAgCV;;AACA;EACC;;AAGF;EACC;EACA;;AAED;EACC;;AAON;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA;;;AAGD;AAGC;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAGD;EAGC;;AAKD;EACC;;AAEA;EACC;;;AAMJ;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;AAAA;EAEC;;AAIF;AACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;EACA;AA2DA;;AAzDA;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;EACA;;AAGD;AACC;EACA;EACA;EACA;EACA;;AAED;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EAGC;;AAIF;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;AAKF;EACC;EACA;;AAED;EACC;;;AAMH;EACC;EACA;EACA;;;AAGD;AAEA;EACC;;;AAGD;AAGC;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;;;AAIF;AACA;EACC;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;AAIA;EACC;;AAIF;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAGF;EACC;;AAIH;EACC;;AACA;EACC;;AAGF;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;AAAA;AAAA;EAGC;;AAGF;EACC;EACA;;AAID;EACC;EACA;;AAEA;EACC;;AAGF;EACC;;AAEA;AAAA;AAAA;AAAA;AAAA;EAEC;;;AAKH;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;;AAIF;AAGC;EACC;EACA;;AAED;EACC;;;AAIF;AACA;EACC;;AAID;AAEA;EACC;EACA;EACA;EACA","file":"styles.css"}
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@ -365,13 +365,12 @@ body {
 	margin-top: 8px;
 	padding: 5px;
 	border-radius: var(--border-radius);
-	color: var(--color-primary-text);
-	background-color: var(--color-warning);
+	color: var(--color-main-text);
+	background-color: rgba(var(--color-warning-rgb), 0.2);
 }

 .warning {
 	legend, a {
-		color: var(--color-primary-text) !important;
 		font-weight: bold !important;
 	}
 }
--- a/core/src/components/login/LoginButton.vue
+++ b/core/src/components/login/LoginButton.vue
@ -20,23 +20,27 @@
  -->

 <template>
-	<div class="submit-wrapper" @click="$emit('click')">
-		<input type="submit"
-			class="submit-wrapper__input primary"
-			title=""
-			:value="!loading ? value : valueLoading">
-		<div v-if="loading" class="submit-wrapper__icon icon-loading-small-dark" />
-		<ArrowRight v-else class="submit-wrapper__icon" />
-	</div>
+	<Button type="primary"
+		native-type="submit"
+		:wide="true"
+		@click="$emit('click')">
+		{{ !loading ? value : valueLoading }}
+		<template #icon>
+			<div v-if="loading" class="submit-wrapper__icon icon-loading-small-dark" />
+			<ArrowRight v-else class="submit-wrapper__icon" />
+		</template>
+	</Button>
 </template>

 <script>
+import Button from '@nextcloud/vue/dist/Components/Button'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'

 export default {
 	name: 'LoginButton',
 	components: {
 		ArrowRight,
+		Button,
 	},
 	props: {
 		value: {
@ -58,37 +62,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped lang="scss">
-.submit-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px 5px;
-    position: relative;
-	margin: 0 auto;
-
-	&__input {
-		width: 260px;
-		height: 50px;
-	}
-
-	&__icon {
-		display: flex;
-		position: absolute;
-		right: 24px;
-		transition: right 100ms ease-in-out;
-		/* 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. */
-		pointer-events: none;
-	}
-
-	&__input:hover + &__icon:not(.icon-loading-small-dark),
-	&__input:focus + &__icon:not(.icon-loading-small-dark),
-	&__input:active + &__icon:not(.icon-loading-small-dark) {
-		right: 20px;
-	}
-}
-</style>
--- a/core/src/components/login/ResetPassword.vue
+++ b/core/src/components/login/ResetPassword.vue
@ -40,22 +40,19 @@
 				<LoginButton :value="t('core', 'Reset password')" />
 			</div>
 			<p v-if="message === 'send-success'"
-				class="update">
+				class="notecard success">
 				{{ t('core', 'A password reset message has been sent to the email address of this account. If you do not receive it, check your spam/junk folders or ask your local administrator for help.') }}
 				<br>
 				{{ t('core', 'If it is not there ask your local administrator.') }}
 			</p>
 			<p v-else-if="message === 'send-error'"
-				class="update warning">
+				class="notecard error">
 				{{ t('core', 'Couldn\'t send reset email. Please contact your administrator.') }}
 			</p>
 			<p v-else-if="message === 'reset-error'"
-				class="update warning">
+				class="notecard error">
 				{{ t('core', 'Password cannot be changed. Please contact your administrator.') }}
 			</p>
-			<p v-else-if="message"
-				class="update"
-				:class="{warning: error}" />

 			<a href="#"
 				@click.prevent="$emit('abort')">
--- a/core/src/components/setup/InstallButton.vue
+++ b/core/src/components/setup/InstallButton.vue
@ -1,43 +0,0 @@
-<!--
-  - @copyright 2022 Christopher Ng <chrng8@gmail.com>
-  -
-  - @author Christopher Ng <chrng8@gmail.com>
-  -
-  - @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/>.
-  -
-->
-
-<template>
-	<button class="primary"
-		:autofocus="true"
-		v-on="$listeners">
-		{{ t('core', 'Install recommended apps') }}
-	</button>
-</template>
-
-<script>
-export default {
-	name: 'InstallButton',
-}
-</script>
-
-<style lang="scss" scoped>
-	button {
-		margin: 24px auto 10px auto;
-		padding: 10px 20px;
-		font-size: 20px;
-	}
-</style>
--- a/core/src/components/setup/RecommendedApps.vue
+++ b/core/src/components/setup/RecommendedApps.vue
@ -20,7 +20,7 @@
  -->

 <template>
-	<div class="body-login-container">
+	<div class="guest-box">
 		<h2>{{ t('core', 'Recommended apps') }}</h2>
 		<p v-if="loadingApps" class="loading text-center">
 			{{ t('core', 'Loading apps …') }}
@ -53,12 +53,21 @@
 			</div>
 		</div>

-		<InstallButton v-if="showInstallButton"
-			@click.stop.prevent="installApps" />
+		<div class="dialog-row">
+			<Button v-if="showInstallButton"
+				type="tertiary"
+				role="link"
+				href="defaultPageUrl"
+				@click="goTo(defaultPageUrl)">
+				{{ t('core', 'Cancel') }}
+			</Button>

-		<p class="text-center">
-			<a :href="defaultPageUrl">{{ t('core', 'Cancel') }}</a>
-		</p>
+			<Button v-if="showInstallButton"
+				type="primary"
+				@click.stop.prevent="installApps">
+				{{ t('core', 'Install recommended apps') }}
+			</Button>
+		</div>
 	</div>
 </template>

@ -69,8 +78,7 @@ import { loadState } from '@nextcloud/initial-state'
 import pLimit from 'p-limit'
 import { translate as t } from '@nextcloud/l10n'

-// TODO replace with Button component when @nextcloud/vue is upgraded to v5
-import InstallButton from './InstallButton'
+import Button from '@nextcloud/vue/dist/Components/Button'

 import logger from '../../logger'

@ -106,7 +114,7 @@ const defaultPageUrl = loadState('core', 'defaultPageUrl')
 export default {
 	name: 'RecommendedApps',
 	components: {
-		InstallButton,
+		Button,
 	},
 	data() {
 		return {
@ -184,13 +192,18 @@ export default {
 			}
 			return recommended[appId].description
 		},
+		goTo(href) {
+			window.location.href = href
+		},
 	},
 }
 </script>

 <style lang="scss" scoped>
-.body-login-container {
-
+.dialog-row {
+	display: flex;
+	justify-content: end;
+	margin-top: 8px;
 }

 p {
@ -215,7 +228,7 @@ p {
 	img {
 		height: 50px;
 		width: 50px;
-		filter: invert(1);
+		filter: var(--background-invert-if-dark);
 	}

 	img, .info {
@ -228,7 +241,6 @@ p {
 		}

 		h3 {
-			color: #fff;
 			margin-top: 0;
 		}

--- a/core/src/install.js
+++ b/core/src/install.js
@ -95,14 +95,13 @@ window.addEventListener('DOMContentLoaded', function() {
 		$('.float-spinner').show(250)

 		// Disable inputs
-		$(':submit', this).attr('disabled', 'disabled').val($(':submit', this).data('finishing'))
+		$('input[type="submit"]').attr('disabled', 'disabled').val($('input[type="submit"]').data('finishing'))
 		$('input', this).addClass('ui-state-disabled').attr('disabled', 'disabled')
 		// only disable buttons if they are present
 		if ($('#selectDbType').find('.ui-button').length > 0) {
 			$('#selectDbType').buttonset('disable')
 		}
 		$('.strengthify-wrapper, .tipsy')
-			.css('-ms-filter', '"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"')
 			.css('filter', 'alpha(opacity=30)')
 			.css('opacity', 0.3)

@ -165,5 +164,13 @@ window.addEventListener('DOMContentLoaded', function() {
 	})

 	$('#dbpass').showPassword().keyup()
-	$('#adminpass').showPassword().keyup()
+	$('.toggle-password').click(function(event) {
+		event.preventDefault()
+		const currentValue = $(this).parent().children('input').attr('type')
+		if (currentValue === 'password') {
+			$(this).parent().children('input').attr('type', 'text')
+		} else {
+			$(this).parent().children('input').attr('type', 'password')
+		}
+	})
 })
--- a/core/src/views/Login.vue
+++ b/core/src/views/Login.vue
@ -20,87 +20,102 @@
  -->

 <template>
-	<div v-if="!hideLoginForm || directLogin">
-		<transition name="fade" mode="out-in">
-			<div v-if="!passwordlessLogin && !resetPassword && resetPasswordTarget === ''"
-				key="login">
-				<LoginForm :username.sync="user"
-					:redirect-url="redirectUrl"
-					:direct-login="directLogin"
-					:messages="messages"
-					:errors="errors"
-					:throttle-delay="throttleDelay"
-					:auto-complete-allowed="autoCompleteAllowed"
-					@submit="loading = true" />
-				<a v-if="canResetPassword && resetPasswordLink !== ''"
-					id="lost-password"
-					:href="resetPasswordLink">
-					{{ t('core', 'Forgot password?') }}
-				</a>
-				<a v-else-if="canResetPassword && !resetPassword"
-					id="lost-password"
-					:href="resetPasswordLink"
-					@click.prevent="resetPassword = true">
-					{{ t('core', 'Forgot password?') }}
-				</a>
-				<br>
-				<template v-if="hasPasswordless">
-					<div v-if="countAlternativeLogins"
-						class="alternative-logins">
-						<a v-if="hasPasswordless"
-							class="button"
-							:class="{ 'single-alt-login-option': countAlternativeLogins }"
+	<div id="login" class="guest-box">
+		<div v-if="!hideLoginForm || directLogin">
+			<transition name="fade" mode="out-in">
+				<div v-if="!passwordlessLogin && !resetPassword && resetPasswordTarget === ''">
+					<LoginForm :username.sync="user"
+						:redirect-url="redirectUrl"
+						:direct-login="directLogin"
+						:messages="messages"
+						:errors="errors"
+						:throttle-delay="throttleDelay"
+						:auto-complete-allowed="autoCompleteAllowed"
+						@submit="loading = true" />
+					<a v-if="canResetPassword && resetPasswordLink !== ''"
+						id="lost-password"
+						:href="resetPasswordLink">
+						{{ t('core', 'Forgot password?') }}
+					</a>
+					<a v-else-if="canResetPassword && !resetPassword"
+						id="lost-password"
+						:href="resetPasswordLink"
+						@click.prevent="resetPassword = true">
+						{{ t('core', 'Forgot password?') }}
+					</a>
+					<br>
+					<template v-if="hasPasswordless">
+						<div v-if="countAlternativeLogins"
+							class="alternative-logins">
+							<a v-if="hasPasswordless"
+								class="button"
+								:class="{ 'single-alt-login-option': countAlternativeLogins }"
+								href="#"
+								@click.prevent="passwordlessLogin = true">
+								{{ t('core', 'Log in with a device') }}
+							</a>
+						</div>
+						<a v-else
 							href="#"
 							@click.prevent="passwordlessLogin = true">
 							{{ t('core', 'Log in with a device') }}
 						</a>
-					</div>
-					<a v-else
-						href="#"
-						@click.prevent="passwordlessLogin = true">
-						{{ t('core', 'Log in with a device') }}
-					</a>
-				</template>
-			</div>
-			<div v-else-if="!loading && passwordlessLogin"
-				key="reset"
-				class="login-additional">
-				<PasswordLessLoginForm :username.sync="user"
-					:redirect-url="redirectUrl"
-					:auto-complete-allowed="autoCompleteAllowed"
-					:is-https="isHttps"
-					:is-localhost="isLocalhost"
-					:has-public-key-credential="hasPublicKeyCredential"
-					@submit="loading = true" />
-				<a href="#" @click.prevent="passwordlessLogin = false">
-					{{ t('core', 'Back') }}
-				</a>
-			</div>
-			<div v-else-if="!loading && canResetPassword"
-				key="reset"
-				class="login-additional">
-				<div class="lost-password-container">
-					<ResetPassword v-if="resetPassword"
-						:username.sync="user"
-						:reset-password-link="resetPasswordLink"
-						@abort="resetPassword = false" />
+					</template>
 				</div>
-			</div>
-			<div v-else-if="resetPasswordTarget !== ''">
-				<UpdatePassword :username.sync="user"
-					:reset-password-target="resetPasswordTarget"
-					@done="passwordResetFinished" />
-			</div>
-		</transition>
-	</div>
-	<div v-else>
-		<transition name="fade" mode="out-in">
-			<div class="warning">
-				{{ t('core', 'Login form is disabled.') }}<br>
-				<small>{{ t('core', 'Please contact your administrator.') }}
-				</small>
-			</div>
-		</transition>
+				<div v-else-if="!loading && passwordlessLogin"
+					key="reset"
+					class="login-additional">
+					<PasswordLessLoginForm :username.sync="user"
+						:redirect-url="redirectUrl"
+						:auto-complete-allowed="autoCompleteAllowed"
+						:is-https="isHttps"
+						:is-localhost="isLocalhost"
+						:has-public-key-credential="hasPublicKeyCredential"
+						@submit="loading = true" />
+					<a href="#" @click.prevent="passwordlessLogin = false">
+						{{ t('core', 'Back') }}
+					</a>
+				</div>
+				<div v-else-if="!loading && canResetPassword"
+					key="reset"
+					class="login-additional">
+					<div class="lost-password-container">
+						<ResetPassword v-if="resetPassword"
+							:username.sync="user"
+							:reset-password-link="resetPasswordLink"
+							@abort="resetPassword = false" />
+					</div>
+				</div>
+				<div v-else-if="resetPasswordTarget !== ''">
+					<UpdatePassword :username.sync="user"
+						:reset-password-target="resetPasswordTarget"
+						@done="passwordResetFinished" />
+				</div>
+			</transition>
+		</div>
+		<div v-else>
+			<transition name="fade" mode="out-in">
+				<div class="warning">
+					{{ t('core', 'Login form is disabled.') }}<br>
+					<small>
+						{{ t('core', 'Please contact your administrator.') }}
+					</small>
+				</div>
+			</transition>
+		</div>
+
+		<div id="alternative-logins" class="alternative-logins">
+			<Button v-for="(alternativeLogin, index) in alternativeLogins"
+				:key="index"
+				type="primary"
+				:wide="true"
+				:class="[alternativeLogin.class]"
+				role="link"
+				:href="alternativeLogin.href"
+				@click="goTo(alternativeLogin.href)">
+				{{ alternativeLogin.name }}
+			</Button>
+		</div>
 	</div>
 </template>

@ -112,6 +127,7 @@ import LoginForm from '../components/login/LoginForm.vue'
 import PasswordLessLoginForm from '../components/login/PasswordLessLoginForm.vue'
 import ResetPassword from '../components/login/ResetPassword.vue'
 import UpdatePassword from '../components/login/UpdatePassword.vue'
+import Button from '@nextcloud/vue/dist/Components/Button'

 const query = queryString.parse(location.search)
 if (query.clear === '1') {
@ -132,6 +148,7 @@ export default {
 		PasswordLessLoginForm,
 		ResetPassword,
 		UpdatePassword,
+		Button,
 	},

 	data() {
@ -154,6 +171,7 @@ export default {
 			directLogin: query.direct === '1',
 			hasPasswordless: loadState('core', 'webauthn-available', false),
 			countAlternativeLogins: loadState('core', 'countAlternativeLogins', false),
+			alternativeLogins: loadState('core', 'alternativeLogins', []),
 			isHttps: window.location.protocol === 'https:',
 			isLocalhost: window.location.hostname === 'localhost',
 			hasPublicKeyCredential: typeof (window.PublicKeyCredential) !== 'undefined',
@ -166,15 +184,36 @@ export default {
 			this.resetPasswordTarget = ''
 			this.directLogin = true
 		},
+		goTo(href) {
+			window.location.href = href
+		},
 	},
 }
 </script>

-<style>
+<style lang="scss">
 	.fade-enter-active, .fade-leave-active {
 		transition: opacity .3s;
 	}
 	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
 		opacity: 0;
 	}
+
+	#lost-password {
+		padding: 4px;
+		margin: 8px;
+		border-radius: var(--border-radius);
+	}
+
+	.alternative-logins button {
+		margin-top: 12px;
+		margin-bottom: 12px;
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
 </style>
--- a/core/templates/403.php
+++ b/core/templates/403.php
@ -9,11 +9,9 @@ if (!isset($_)) {//standalone  page is not supported anymore - redirect to /
 }
 // @codeCoverageIgnoreEnd
 ?>
-<ul>
-	<li class='error'>
-		<?php p($l->t('Access forbidden')); ?><br>
+<div class="guest-box">
+	<h2><?php p($l->t('Access forbidden')); ?></h2>
 		<p class='hint'><?php if (isset($_['message'])) {
 	p($_['message']);
 }?></p>
-	</li>
 </ul>
--- a/core/templates/404-profile.php
+++ b/core/templates/404-profile.php
@ -17,7 +17,7 @@ if (!isset($_)) { //standalone  page is not supported anymore - redirect to /
 	<?php print_unescaped($_['content']) ?>
 <?php else : ?>
 	<div class="body-login-container update">
-		<div class="icon-big icon-error icon-white"></div>
+		<div class="icon-big icon-error"></div>
 		<h2><?php p($l->t('Profile not found')); ?></h2>
 		<p class="infogroup"><?php p($l->t('The profile does not exist.')); ?></p>
 		<p><a class="button primary" href="<?php p(\OC::$server->getURLGenerator()->linkTo('', 'index.php')) ?>">
--- a/core/templates/404.php
+++ b/core/templates/404.php
@ -16,7 +16,7 @@ if (!isset($_)) {//standalone  page is not supported anymore - redirect to /
 	<?php print_unescaped($_['content']) ?>
 <?php else: ?>
 	<div class="body-login-container update">
-		<div class="icon-big icon-search icon-white"></div>
+		<div class="icon-big icon-search"></div>
 		<h2><?php p($l->t('File not found')); ?></h2>
 		<p class="infogroup"><?php p($l->t('The document could not be found on the server. Maybe the share was deleted or has expired?')); ?></p>
 		<p><a class="button primary" href="<?php p(\OC::$server->getURLGenerator()->linkTo('', 'index.php')) ?>">
--- a/core/templates/error.php
+++ b/core/templates/error.php
@ -1,4 +1,4 @@
-<div class="error">
+<div class="guest-box">
 	<h2><?php p($l->t('Error')) ?></h2>
 	<ul>
 	<?php foreach ($_["errors"] as $error):?>
--- a/core/templates/exception.php
+++ b/core/templates/exception.php
@ -20,7 +20,7 @@ function print_exception(Throwable $e, \OCP\IL10N $l): void {
 }

 ?>
-<div class="error error-wide">
+<div class="guest-box wide">
 	<h2><?php p($l->t('Internal Server Error')) ?></h2>
 	<p><?php p($l->t('The server was unable to complete your request.')) ?></p>
 	<p><?php p($l->t('If this happens again, please send the technical details below to the server administrator.')) ?></p>
--- a/core/templates/installation.php
+++ b/core/templates/installation.php
@ -5,7 +5,7 @@ script('core', 'install');
 <input type='hidden' id='hasSQLite' value='<?php p($_['hasSQLite']) ?>'>
 <input type='hidden' id='hasPostgreSQL' value='<?php p($_['hasPostgreSQL']) ?>'>
 <input type='hidden' id='hasOracle' value='<?php p($_['hasOracle']) ?>'>
-<form action="index.php" method="post">
+<form action="index.php" method="post" class="guest-box">
 <input type="hidden" name="install" value="true">
 	<?php if (count($_['errors']) > 0): ?>
 	<fieldset class="warning">
@ -47,14 +47,15 @@ script('core', 'install');
 				value="<?php p($_['adminpass']); ?>"
 				autocomplete="off" autocapitalize="none" autocorrect="off" required>
 			<label for="adminpass" class="infield"><?php p($l->t('Password')); ?></label>
-			<input type="checkbox" id="show" class="hidden-visually" name="show" aria-label="<?php p($l->t('Show password')); ?>">
-			<label for="show"></label>
+			<button id="show" class="toggle-password" aria-label="<?php p($l->t('Show password')); ?>">
+				<img src="<?php print_unescaped(image_path('', 'actions/toggle.svg')); ?>" alt="<?php p($l->t('Toggle password visibility')); ?>">
+			</button>
 		</p>
 	</fieldset>

 	<?php if (!$_['directoryIsSet'] or !$_['dbIsSet'] or count($_['errors']) > 0): ?>
 	<fieldset id="advancedHeader">
-		<legend><a id="showAdvanced" tabindex="0" href="#"><?php p($l->t('Storage & database')); ?><img src="<?php print_unescaped(image_path('', 'actions/caret-white.svg')); ?>" /></a></legend>
+		<legend><a id="showAdvanced" tabindex="0" href="#"><?php p($l->t('Storage & database')); ?><img src="<?php print_unescaped(image_path('', 'actions/caret.svg')); ?>" /></a></legend>
 	</fieldset>
 	<?php endif; ?>

@ -108,13 +109,14 @@ script('core', 'install');
 					autocomplete="off" autocapitalize="none" autocorrect="off">
 			</p>
 			<p class="groupmiddle">
-				<input type="password" name="dbpass" id="dbpass" data-typetoggle="#dbpassword-toggle"
+				<input type="password" name="dbpass" id="dbpass"
 					placeholder="<?php p($l->t('Database password')); ?>"
 					value="<?php p($_['dbpass']); ?>"
 					autocomplete="off" autocapitalize="none" autocorrect="off">
 				<label for="dbpass" class="infield"><?php p($l->t('Database password')); ?></label>
-				<input type="checkbox" id="dbpassword-toggle" class="hidden-visually" name="dbpassword-toggle" aria-label="<?php p($l->t('Show password')); ?>">
-				<label for="dbpassword-toggle"></label>
+				<button id="show" class="toggle-password" aria-label="<?php p($l->t('Show password')); ?>">
+					<img src="<?php print_unescaped(image_path('', 'actions/toggle.svg')); ?>" alt="<?php p($l->t('Toggle password visibility')); ?>">
+				</button>
 			</p>
 			<p class="groupmiddle">
 				<label for="dbname" class="infield"><?php p($l->t('Database name')); ?></label>
@ -151,7 +153,7 @@ script('core', 'install');
 	<?php endif; ?>

 	<?php if (!$_['dbIsSet'] or count($_['errors']) > 0): ?>
-		<fieldset id="sqliteInformation" class="warning">
+		<fieldset id="sqliteInformation" class="notecard warning">
 			<legend><?php p($l->t('Performance warning'));?></legend>
 			<p><?php p($l->t('You chose SQLite as database.'));?></p>
 			<p><?php p($l->t('SQLite should only be used for minimal and development instances. For production we recommend a different database backend.'));?></p>
--- a/core/templates/installation_forbidden.php
+++ b/core/templates/installation_forbidden.php
@ -1,6 +1,6 @@
-<div class="error">
+<div class="guest-box">
 	<h2><?php p($l->t('Error')) ?></h2>
-	<p>
+	<p class="text-left">
 		<?php p($l->t('It looks like you are trying to reinstall your Nextcloud. However the file CAN_INSTALL is missing from your config directory. Please create the file CAN_INSTALL in your config folder to continue.')) ?>
 	</p>
 </div>
--- a/core/templates/installation_incomplete.php
+++ b/core/templates/installation_incomplete.php
@ -1,6 +1,6 @@
-<div class="error">
+<div class="guest-box">
 	<h2><?php p($l->t('Error')) ?></h2>
-	<p>
+	<p class="text-left">
 		<?php p($l->t('Could not remove CAN_INSTALL from the config folder. Please remove this file manually.')) ?>
 	</p>
 </div>
--- a/core/templates/login.php
+++ b/core/templates/login.php
@ -3,14 +3,6 @@
 script('core', 'login');
 ?>

-<div id="login"></div>
-
-<?php if (!empty($_['alt_login'])) { ?>
-    <div id="alternative-logins" class="alternative-logins">
-        <?php foreach ($_['alt_login'] as $login): ?>
-            <a class="button <?php p($login['style'] ?? ''); ?>" href="<?php print_unescaped($login['href']); ?>" >
-                <?php p($login['name']); ?>
-            </a>
-        <?php endforeach; ?>
-    </div>
-<?php } ?>
+<div>
+	<div id="login"></div>
+</div>
--- a/core/templates/loginflow/authpicker.php
+++ b/core/templates/loginflow/authpicker.php
@ -36,12 +36,12 @@ $urlGenerator = $_['urlGenerator'];
 		])) ?>
 	</p>

-	<span class="warning">
+	<div class="notecard warning">
 		<h3><?php p($l->t('Security warning')) ?></h3>
 		<p>
 			<?php p($l->t('If you are not trying to set up a new device or app, someone is trying to trick you into granting them access to your data. In this case do not proceed and instead contact your system administrator.')) ?>
 		</p>
-	</span>
+	</div>

 	<br/>

--- a/core/templates/loginflow/grant.php
+++ b/core/templates/loginflow/grant.php
@ -27,7 +27,7 @@ style('core', 'login/authpicker');
 $urlGenerator = $_['urlGenerator'];
 ?>

-<div class="picker-window">
+<div class="picker-window small">
 	<h2><?php p($l->t('Account access')) ?></h2>
 	<p class="info">
 		<?php p($l->t('Currently logged in as %1$s (%2$s).', [
--- a/core/templates/loginflowv2/authpicker.php
+++ b/core/templates/loginflowv2/authpicker.php
@ -36,19 +36,19 @@ $urlGenerator = $_['urlGenerator'];
 		])) ?>
 	</p>

-	<span class="warning">
+	<div class="notecard warning">
 		<h3><?php p($l->t('Security warning')) ?></h3>
 		<p>
 			<?php p($l->t('If you are not trying to set up a new device or app, someone is trying to trick you into granting them access to your data. In this case do not proceed and instead contact your system administrator.')) ?>
 		</p>
-	</span>
+	</div>

 	<br/>

 	<p id="redirect-link">
-		<a href="<?php p($urlGenerator->linkToRouteAbsolute('core.ClientFlowLoginV2.grantPage', ['stateToken' => $_['stateToken'], 'user' => $_['user']])) ?>">
+		<form action="<?php p($urlGenerator->linkToRouteAbsolute('core.ClientFlowLoginV2.grantPage', ['stateToken' => $_['stateToken'], 'user' => $_['user']])) ?>" method="get">
 			<input type="submit" class="login primary icon-confirm-white" value="<?php p($l->t('Log in')) ?>">
-		</a>
+		</form>
 	</p>

 	<form action="<?php p($urlGenerator->linkToRouteAbsolute('core.ClientFlowLoginV2.apptokenRedirect')); ?>" method="post" id="app-token-login-field" class="hidden">
--- a/core/templates/loginflowv2/grant.php
+++ b/core/templates/loginflowv2/grant.php
@ -27,7 +27,7 @@ style('core', 'login/authpicker');
 $urlGenerator = $_['urlGenerator'];
 ?>

-<div class="picker-window">
+<div class="picker-window small">
 	<h2><?php p($l->t('Account access')) ?></h2>
 	<p class="info">
 		<?php p($l->t('Currently logged in as %1$s (%2$s).', [
--- a/core/templates/publicshareauth.php
+++ b/core/templates/publicshareauth.php
@ -1,80 +1,82 @@
 <?php
 	/** @var array $_ */
 	/** @var \OCP\IL10N $l */
-	style('core', 'guest');
-	style('core', 'publicshareauth');
-	script('core', 'publicshareauth');
+	\OCP\Util::addStyle('core', 'guest');
+	\OCP\Util::addStyle('core', 'publicshareauth');
+	\OCP\Util::addScript('core', 'publicshareauth');
 ?>

-<!-- password prompt form. It should be hidden when we show the email prompt form -->
-<?php if (!isset($_['identityOk'])): ?>
-	<form method="post" id="password-input-form">
-<?php else: ?>
-	<form method="post" id="password-input-form" style="display:none;">
-<?php endif; ?>
-	<fieldset class="warning">
-		<?php if (!isset($_['wrongpw'])): ?>
-			<div class="warning-info"><?php p($l->t('This share is password-protected')); ?></div>
-		<?php endif; ?>
-		<?php if (isset($_['wrongpw'])): ?>
-			<div class="warning wrongPasswordMsg"><?php p($l->t('The password is wrong or expired. Please try again or request a new one.')); ?></div>
-		<?php endif; ?>
-		<p>
-			<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
-			<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
-			<input type="password" name="password" id="password"
-				placeholder="<?php p($l->t('Password')); ?>" value=""
-				autocomplete="new-password" autocapitalize="off" autocorrect="off"
-				autofocus />
-			<input type="hidden" name="sharingToken" value="<?php p($_['share']->getToken()) ?>" id="sharingToken">
-			<input type="hidden" name="sharingType" value="<?php p($_['share']->getShareType()) ?>" id="sharingType">
-			<input type="submit" id="password-submit"
-				class="svg icon-confirm input-button-inline" value="" disabled="disabled" />
-		</p>
-	</fieldset>
-</form>
-
-<!-- email prompt form. It should initially be hidden -->
-<?php if (isset($_['identityOk'])): ?>
-	<form method="post" id="email-input-form">
-<?php else: ?>
-	<form method="post" id="email-input-form" style="display:none;">
-<?php endif; ?>
-	<fieldset class="warning">
-		<div class="warning-info" id="email-prompt"><?php p($l->t('Please type in your email address to request a temporary password')); ?></div>
-		 <p>
-			<input type="email" id="email" name="identityToken" placeholder="<?php p($l->t('Email address')); ?>" />
-			<input type="submit" id="password-request" name="passwordRequest" class="svg icon-confirm input-button-inline" value="" disabled="disabled"/>
-			<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
-			<input type="hidden" name="sharingToken" value="<?php p($_['share']->getToken()) ?>" id="sharingToken">
-			<input type="hidden" name="sharingType" value="<?php p($_['share']->getShareType()) ?>" id="sharingType">
-		</p>
-		<?php if (isset($_['identityOk'])): ?>
-			<?php if ($_['identityOk']): ?>
-				<div class="warning-info" id="identification-success"><?php p($l->t('Password sent!')); ?></div>
-			<?php else: ?>
-				<div class="warning" id="identification-failure"><?php p($l->t('You are not authorized to request a password for this share')); ?></div>
+<div class="guest-box">
+	<!-- password prompt form. It should be hidden when we show the email prompt form -->
+	<?php if (!isset($_['identityOk'])): ?>
+		<form method="post" id="password-input-form">
+	<?php else: ?>
+		<form method="post" id="password-input-form" style="display:none;">
+	<?php endif; ?>
+		<fieldset class="warning">
+			<?php if (!isset($_['wrongpw'])): ?>
+				<div class="warning-info"><?php p($l->t('This share is password-protected')); ?></div>
 			<?php endif; ?>
-		<?php endif; ?>
-	</fieldset>
-</form>
-
-<!-- request password button -->
-<?php if (!isset($_['identityOk']) && $_['share']->getShareType() === $_['share']::TYPE_EMAIL && !$_['share']->getSendPasswordByTalk()): ?>
-	<a id="request-password-button-not-talk"><?php p($l->t('Forgot password?')); ?></a>
-<?php endif; ?>
-
-<!-- back to showShare button -->
-<form method="get">
-	<fieldset>
-		<a
-			href=""
-			id="request-password-back-button"
-<?php if (isset($_['identityOk'])): ?>
-			style="display:block;">
-<?php else: ?>
-			style="display:none;">
-<?php endif; ?>
-			<?php p($l->t('Back')); ?></a>
-	</fieldset>
-</form>
+			<?php if (isset($_['wrongpw'])): ?>
+				<div class="warning wrongPasswordMsg"><?php p($l->t('The password is wrong or expired. Please try again or request a new one.')); ?></div>
+			<?php endif; ?>
+			<p>
+				<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
+				<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
+				<input type="password" name="password" id="password"
+					placeholder="<?php p($l->t('Password')); ?>" value=""
+					autocomplete="new-password" autocapitalize="off" autocorrect="off"
+					autofocus />
+				<input type="hidden" name="sharingToken" value="<?php p($_['share']->getToken()) ?>" id="sharingToken">
+				<input type="hidden" name="sharingType" value="<?php p($_['share']->getShareType()) ?>" id="sharingType">
+				<input type="submit" id="password-submit"
+					class="svg icon-confirm input-button-inline" value="" disabled="disabled" />
+			</p>
+		</fieldset>
+	</form>
+	
+	<!-- email prompt form. It should initially be hidden -->
+	<?php if (isset($_['identityOk'])): ?>
+		<form method="post" id="email-input-form">
+	<?php else: ?>
+		<form method="post" id="email-input-form" style="display:none;">
+	<?php endif; ?>
+		<fieldset class="warning">
+			<div class="warning-info" id="email-prompt"><?php p($l->t('Please type in your email address to request a temporary password')); ?></div>
+			 <p>
+				<input type="email" id="email" name="identityToken" placeholder="<?php p($l->t('Email address')); ?>" />
+				<input type="submit" id="password-request" name="passwordRequest" class="svg icon-confirm input-button-inline" value="" disabled="disabled"/>
+				<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>" />
+				<input type="hidden" name="sharingToken" value="<?php p($_['share']->getToken()) ?>" id="sharingToken">
+				<input type="hidden" name="sharingType" value="<?php p($_['share']->getShareType()) ?>" id="sharingType">
+			</p>
+			<?php if (isset($_['identityOk'])): ?>
+				<?php if ($_['identityOk']): ?>
+					<div class="warning-info" id="identification-success"><?php p($l->t('Password sent!')); ?></div>
+				<?php else: ?>
+					<div class="warning" id="identification-failure"><?php p($l->t('You are not authorized to request a password for this share')); ?></div>
+				<?php endif; ?>
+			<?php endif; ?>
+		</fieldset>
+	</form>
+	
+	<!-- request password button -->
+	<?php if (!isset($_['identityOk']) && $_['share']->getShareType() === $_['share']::TYPE_EMAIL && !$_['share']->getSendPasswordByTalk()): ?>
+		<a id="request-password-button-not-talk"><?php p($l->t('Forgot password?')); ?></a>
+	<?php endif; ?>
+	
+	<!-- back to showShare button -->
+	<form method="get">
+		<fieldset>
+			<a
+				href=""
+				id="request-password-back-button"
+	<?php if (isset($_['identityOk'])): ?>
+				style="display:block;">
+	<?php else: ?>
+				style="display:none;">
+	<?php endif; ?>
+				<?php p($l->t('Back')); ?></a>
+		</fieldset>
+	</form>
+</div>
--- a/core/templates/update.admin.php
+++ b/core/templates/update.admin.php
@ -1,4 +1,4 @@
-<div class="update" data-productname="<?php p($_['productName']) ?>" data-version="<?php p($_['version']) ?>">
+<div class="guest-box update" data-productname="<?php p($_['productName']) ?>" data-version="<?php p($_['version']) ?>">
 	<div class="updateOverview">
 		<?php if ($_['isAppsOnlyUpgrade']) { ?>
 		<h2 class="title"><?php p($l->t('App update required')); ?></h2>
@ -7,7 +7,7 @@
 			[$_['productName'], $_['version']])); ?></h2>
 		<?php } ?>
 		<?php if (!empty($_['appsToUpgrade'])) { ?>
-		<div class="infogroup">
+		<div class="text-left">
 			<span><?php p($l->t('The following apps will be updated:')); ?></span>
 			<ul class="content appList">
 				<?php foreach ($_['appsToUpgrade'] as $appInfo) { ?>
@ -17,7 +17,7 @@
 		</div>
 		<?php } ?>
 		<?php if (!empty($_['incompatibleAppsList'])) { ?>
-		<div class="infogroup">
+		<div class="text-left">
 			<span><?php p($l->t('These incompatible apps will be disabled:')) ?></span>
 			<ul class="content appList">
 				<?php foreach ($_['incompatibleAppsList'] as $appInfo) { ?>
@ -31,15 +31,13 @@
 			<?php p($l->t('The theme %s has been disabled.', [$_['oldTheme']])) ?>
 		</div>
 		<?php } ?>
-		<div class="infogroup bold">
+		<div class="text-left margin-top bold">
 			<?php p($l->t('Please make sure that the database, the config folder and the data folder have been backed up before proceeding.')) ?>
 		</div>
-		<input class="updateButton primary" type="button" value="<?php p($l->t('Start update')) ?>">
-		<div class="infogroup">
-			<em>
+		<input class="updateButton primary margin-top" type="button" value="<?php p($l->t('Start update')) ?>">
+		<div class="notecard warning">
 			<?php p($l->t('To avoid timeouts with larger installations, you can instead run the following command from your installation directory:')) ?>
 			<pre>./occ upgrade</pre>
-			</em>
 		</div>
 	</div>

--- a/core/templates/update.use-cli.php
+++ b/core/templates/update.use-cli.php
@ -1,23 +1,21 @@
-<div class="update" data-productname="<?php p($_['productName']) ?>" data-version="<?php p($_['version']) ?>">
+<div class="guest-box update" data-productname="<?php p($_['productName']) ?>" data-version="<?php p($_['version']) ?>">
 	<div class="updateOverview">
 		<h2 class="title"><?php p($l->t('Update needed')) ?></h2>
-		<div class="infogroup">
+		<div class="text-left">
 			<?php if ($_['tooBig']) {
 	p($l->t('Please use the command line updater because you have a big instance with more than 50 users.'));
 } else {
 	p($l->t('Please use the command line updater because automatic updating is disabled in the config.php.'));
 } ?><br><br>
 			<?php
-			print_unescaped($l->t('For help, see the  <a target="_blank" rel="noreferrer noopener" href="%s">documentation</a>.', [link_to_docs('admin-cli-upgrade')])); ?><br><br>
+			print_unescaped($l->t('For help, see the  <a target="_blank" rel="noreferrer noopener" href="%s">documentation</a>.', [link_to_docs('admin-cli-upgrade')])); ?>
 		</div>
 	</div>

 	<?php if ($_['tooBig']) { ?>
-		<div class="warning updateAnyways">
+		<div class="notecard warning">
 			<p><?php p($l->t('I know that if I continue doing the update via web UI has the risk, that the request runs into a timeout and could cause data loss, but I have a backup and know how to restore my instance in case of a failure.')); ?></p>
-			<a href="?IKnowThatThisIsABigInstanceAndTheUpdateRequestCouldRunIntoATimeoutAndHowToRestoreABackup=IAmSuperSureToDoThis" class="button updateAnywaysButton"><?php p($l->t('Upgrade via web on my own risk')); ?></a>
+			<a class="button error margin-top" href="?IKnowThatThisIsABigInstanceAndTheUpdateRequestCouldRunIntoATimeoutAndHowToRestoreABackup=IAmSuperSureToDoThis"><?php p($l->t('Upgrade via web on my own risk')); ?></a>
 		</div>
 	<?php } ?>
-
-
 </div>
--- a/core/templates/update.user.php
+++ b/core/templates/update.user.php
@ -1,5 +1,5 @@
-<div class="body-login-container">
-	<div class="icon-big icon-error-white"></div>
+<div class="guest-box">
+	<div class="icon-big icon-error"></div>
 	<h2><?php p($l->t('Maintenance mode', [$theme->getName()])) ?></h2>
 	<p><?php p($l->t('This %s instance is currently in maintenance mode, which may take a while.', [$theme->getName()])) ?> <?php p($l->t('This page will refresh itself when the instance is available again.')) ?></p>
 	<p><?php p($l->t('Contact your system administrator if this message persists or appeared unexpectedly.')) ?></p>
--- a/dist/core-install.js
+++ b/dist/core-install.js
--- a/dist/core-install.js.map
+++ b/dist/core-install.js.map
--- a/dist/core-login.js
+++ b/dist/core-login.js
--- a/dist/core-login.js.map
+++ b/dist/core-login.js.map
--- a/dist/core-recommendedapps.js
+++ b/dist/core-recommendedapps.js
--- a/dist/core-recommendedapps.js.map
+++ b/dist/core-recommendedapps.js.map
--- a/tests/acceptance/features/bootstrap/LoginPageContext.php
+++ b/tests/acceptance/features/bootstrap/LoginPageContext.php
@ -38,34 +38,22 @@ class LoginPageContext implements Context, ActorAwareInterface {
 	 */
 	private $filesAppContext;

-	/**
-	 * @return Locator
-	 */
-	public static function userNameField() {
+	public static function userNameField(): Locator {
 		return Locator::forThe()->field("user")->
 				describedAs("User name field in Login page");
 	}

-	/**
-	 * @return Locator
-	 */
-	public static function passwordField() {
+	public static function passwordField(): Locator {
 		return Locator::forThe()->field("password")->
 				describedAs("Password field in Login page");
 	}

-	/**
-	 * @return Locator
-	 */
-	public static function loginButton() {
-		return Locator::forThe()->css(".submit-wrapper .submit-wrapper__input")->
+	public static function loginButton(): Locator {
+		return Locator::forThe()->css(".button-vue[type='submit']")->
 				describedAs("Login button in Login page");
 	}

-	/**
-	 * @return Locator
-	 */
-	public static function wrongPasswordMessage() {
+	public static function wrongPasswordMessage(): Locator {
 		return Locator::forThe()->xpath("//*[@class = 'warning wrongPasswordMsg' and normalize-space() = 'Wrong username or password.']")->
 				describedAs("Wrong password message in Login page");
 	}
@ -81,7 +69,7 @@ class LoginPageContext implements Context, ActorAwareInterface {
 	/**
 	 * @When I log in with user :user and password :password
 	 */
-	public function iLogInWithUserAndPassword($user, $password) {
+	public function iLogInWithUserAndPassword(string $user, string $password): void {
 		$this->actor->find(self::userNameField(), 10)->setValue($user);
 		$this->actor->find(self::passwordField())->setValue($password);
 		$this->actor->find(self::loginButton())->click();