Merge branch 'nc19-small-fixes' into 'nextcloud-19' (ee38cb76) · Commits · e / infra / ecloud / nextcloud-apps / nextcloud-theme

eelo/core/css/guest.css

+1218 −1058

Original line number	Diff line number	Diff line
		@@ -10,6 +10,7 @@
		src: local("Century Gothic Regular"),
		url("../webfonts/GOTHIC.woff") format("woff");
		}

		/* Mobile font sizes */
		@media screen and (max-width: 768px) {
		#body-login #user, #body-login #password {
		@@ -17,16 +18,59 @@

		}
		}
		html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }
		html { height:100%; }
		article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
		body { line-height:1.5; }
		table { border-collapse:separate; border-spacing:0; white-space:nowrap; }
		caption, th, td { text-align:left; font-weight:normal; }
		table, td, th { vertical-align:middle; }
		a { border:0; color:#000; text-decoration:none;}
		a, a , input, input , select, .button span, label { cursor:pointer; }
		ul { list-style:none; }

		html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
		cursor: default;
		}

		html {
		height: 100%;
		}

		article, aside, dialog, figure, footer, header, hgroup, nav, section {
		display: block;
		}

		body {
		line-height: 1.5;
		}

		table {
		border-collapse: separate;
		border-spacing: 0;
		white-space: nowrap;
		}

		caption, th, td {
		text-align: left;
		font-weight: normal;
		}

		table, td, th {
		vertical-align: middle;
		}

		a {
		border: 0;
		color: #000;
		text-decoration: none;
		}

		a, a , input, input , select, .button span, label {
		cursor: pointer;
		}

		ul {
		list-style: none;
		}

		body {
		background-color: #ffffff;
		@@ -51,6 +95,7 @@
		#body-login .wrapper a {
		color: #808080;
		}

		#body-login a:not(.button):hover,
		#body-login a:not(.button):focus {
		text-decoration: underline;
		@@ -78,6 +123,7 @@
		margin-bottom: 12px;
		line-height: 140%;
		}

		h3 {
		font-size: 15px;
		margin: 12px 0;
		@@ -92,7 +138,7 @@
		}

		#header .logo {
		background-image: url('../img/logo.png?v=18');
		background-image: url('../img/logo.png?v=19');
		background-repeat: no-repeat;
		background-size: 100px;
		background-position: center;
		@@ -111,8 +157,8 @@
		}

		.wrapper {
		width: 100%;
		max-width: 700px;
		width: 96%;
		max-width: 500px;
		margin-top: 10vh;
		}

		@@ -122,6 +168,7 @@
		margin: auto;
		padding: 0;
		}

		form fieldset {
		width: 260px;
		margin: auto auto 20px;
		@@ -130,20 +177,25 @@
		-ms-user-select: none;
		user-select: none;
		}

		form #sqliteInformation {
		margin-top: -20px;
		margin-bottom: 20px;
		}

		form #adminaccount {
		margin-bottom: 15px;
		}

		form fieldset legend, #datadirContent label {
		width: 100%;
		}

		#datadirContent label {
		display: block;
		margin: 0;
		}

		form #datadirField legend {
		margin-bottom: 15px;
		}
		@@ -152,6 +204,7 @@
		#showAdvanced {
		padding: 13px; /* increase clickable area of Advanced dropdown */
		}

		#showAdvanced img {
		vertical-align: middle; /* adjust position of Advanced dropdown arrow */
		}
		@@ -163,7 +216,8 @@
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative; /* Make the wrapper the containing block of its
		position: relative;
		/* Make the wrapper the containing block of its
		absolutely positioned descendant icons */
		}

		@@ -204,6 +258,7 @@
		.wrapper {
		margin-top: 0;
		}

		#alternative-logins {
		margin: auto;
		}
		@@ -216,7 +271,8 @@
		top: 22px;
		right: 24px;
		transition: right 100ms ease-in-out;
		pointer-events: none; /* The submit icon is positioned on the submit button.
		pointer-events: none;
		/* The submit icon is positioned on the submit button.
		From the user point of view the icon is part of the
		button, so the clicks on the icon have to be
		applied to the button instead. */
		@@ -248,6 +304,7 @@
		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']),
		a.button {
		@@ -258,6 +315,7 @@
		border-radius: 3px; /* --border-radius */
		-webkit-appearance: none;
		}

		input[type='submit'],
		input[type='submit'].icon-confirm,
		input[type='button'],
		@@ -276,6 +334,7 @@
		border-radius: 100px; /* --border-radius-pill */
		cursor: pointer;
		}

		input[type='text'],
		input[type='tel'],
		input[type='password'],
		@@ -291,20 +350,24 @@
		border: none;
		font-weight: normal;
		}

		input[type='password'].password-with-toggle, input[type='text'].password-with-toggle {
		width: 219px;
		padding-right: 40px;
		}

		.toggle-password {
		position: absolute;
		top: 17px;
		right: 20px;
		}

		input.login {
		width: 260px;
		height: 50px;
		background-position: right 16px center;
		}

		input[type='submit'],
		input[type='submit'].icon-confirm,
		input.updateButton,
		@@ -313,6 +376,7 @@
		overflow: hidden;
		text-overflow: ellipsis;
		}

		.updateAnyways a.updateAnywaysButton {
		font-size: 14px;
		padding: 10px 20px;
		@@ -321,6 +385,7 @@
		border-radius: 100px; /* --border-radius-pill */
		margin: 15px 5px;
		}

		.updateAnyways a.updateAnywaysButton:hover {
		color: #222 !important;
		}
		@@ -358,13 +423,16 @@
		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;
		@@ -377,25 +445,31 @@
		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;
		@@ -413,6 +487,7 @@
		overflow: hidden;
		height: 3px;
		}

		.tooltip-inner {
		font-weight: bold;
		color: #ccc;
		@@ -427,15 +502,18 @@
		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;
		@@ -445,24 +523,29 @@
		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;
		}

		#pass2, input[name='personal-password-clone'] {
		padding: .6em 2.5em .4em .4em;
		width: 8em;
		}

		#personal-show + label {
		height: 14px;
		margin-top: -25px;
		left: 295px;
		display: block;
		}

		#passwordbutton {
		margin-left: .5em;
		}
		@@ -476,6 +559,7 @@
		text-align: center;
		color: #fff;
		}

		/* overrides another !important statement that sets this to unreadable black */
		form .warning input[type='checkbox']:hover + label,
		form .warning input[type='checkbox']:focus + label,
		@@ -487,6 +571,7 @@
		max-width: 290px;
		margin: 15px auto 0;
		}

		.two-factor-provider {
		display: flex;
		border-radius: 3px; /* --border-radius */
		@@ -496,30 +581,37 @@
		align-items: center;
		text-decoration: none !important;
		}

		.two-factor-provider:hover,
		.two-factor-provider:focus,
		.two-factor-provider:active {
		border: 1px solid #fff;
		}

		.two-factor-provider img {
		width: 64px;
		height: 64px;
		padding: 0 12px;
		}

		.two-factor-provider div {
		margin: 12px 0;
		}

		.two-factor-provider h3 {
		margin: 0;
		}

		.two-factor-provider p {
		font-weight: normal;
		}

		.two-factor-icon {
		width: 100px;
		display: block;
		margin: 0 auto;
		}

		.two-factor-submit {
		width: 100%;
		padding: 10px;
		@@ -527,11 +619,13 @@
		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;
		@@ -542,12 +636,14 @@
		#remember_login {
		margin: 18px 5px 0 16px !important;
		}

		.lost-password-container {
		display: inline-block;
		margin: 10px 0;
		text-align: center;
		width: 100%;
		}

		#lost-password,
		#lost-password-back,
		#reset-password-wrapper + a {
		@@ -558,9 +654,11 @@
		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;
		float: right;
		@@ -571,11 +669,13 @@
		#alternative-logins legend {
		margin-bottom: 10px;
		}

		#alternative-logins li {
		height: 40px;
		white-space: nowrap;
		padding: 05px;
		}

		#alternative-logins li a {
		width: 100%;
		display: inline-block;
		@@ -600,9 +700,11 @@
		margin: 0;
		display: flex;
		}

		form #selectDbType .info {
		white-space: normal;
		}

		form #selectDbType label {
		flex-grow: 1;
		margin: 0 -1px 5px;
		@@ -613,15 +715,18 @@
		border: 1px solid #ddd;
		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;
		}

		form #selectDbType label span {
		display: none;
		}
		@@ -636,12 +741,14 @@
		-ms-user-select: none;
		user-select: none;
		}

		.grouptop input {
		margin-bottom: 0 !important;
		border-bottom: 0 !important;
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
		}

		.groupmiddle input {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		@@ -650,6 +757,7 @@
		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;
		@@ -657,6 +765,7 @@
		border-top-left-radius: 0 !important;
		box-shadow: 0 1px 0 rgba(0, 0, 0, .1) inset !important;
		}

		.groupbottom input[type=submit] {
		box-shadow: none !important;
		}
		@@ -672,7 +781,7 @@
		.warning,
		.update,
		.error {
		display: block !important;
		display: block;
		margin-top: 15px;
		padding: 15px;
		background-color: rgba(0, 0, 0, .3);
		@@ -712,6 +821,7 @@
		.warning.updateAnyways {
		text-align: center;
		}

		.warning legend,
		.warning a,
		.error a {
		@@ -719,33 +829,41 @@
		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;
		@@ -755,9 +873,11 @@
		.infogroup {
		margin: 8px 0;
		}

		.infogroup:last-child {
		margin-bottom: 0;
		}

		p.info {
		margin: 20px auto;
		text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */
		@@ -772,31 +892,38 @@
		width: inherit;
		text-align: center;
		}

		.update .appList {
		list-style: disc;
		text-align: left;
		margin-left: 25px;
		margin-right: 25px;
		}

		.update img.float-spinner {
		float: left;
		}

		.update a.update-show-detailed {
		border-bottom: inherit;
		}

		#update-progress-detailed {
		text-align: left;
		margin-bottom: 12px;
		}

		.update-show-detailed {
		padding: 12px;
		display: block;
		opacity: .75;
		}

		.update-show-detailed .icon-caret-white {
		display: inline-block;
		vertical-align: middle;
		}

		#update-progress-icon {
		height: 32px;
		margin: 10px;
		@@ -808,18 +935,23 @@
		.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');
		}
		@@ -832,15 +964,18 @@
		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;
		}

		.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
		z-index: 2;
		content: '';
		@@ -857,32 +992,40 @@
		-ms-transform-origin: center;
		transform-origin: center;
		}

		.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
		border: 2px solid rgba(150, 150, 150, 0.5);
		border-top-color: #646464;
		}

		.icon-loading-dark:after, .icon-loading-small-dark:after {
		border: 2px solid rgba(187, 187, 187, 0.5);
		border-top-color: #bbb;
		}

		.icon-loading-small:after, .icon-loading-small-dark:after {
		height: 16px;
		width: 16px;
		margin: -9px 0 0 -9px;
		}

		/* Css replaced elements don't have ::after nor ::before */
		img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading, div[contenteditable=true].icon-loading {
		background-image: url('../img/loading.gif');
		}

		img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark, div[contenteditable=true].icon-loading-dark {
		background-image: url('../img/loading-dark.gif');
		}

		img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small, div[contenteditable=true].icon-loading-small {
		background-image: url('../img/loading-small.gif');
		}

		img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark, div[contenteditable=true].icon-loading-small-dark {
		background-image: url('../img/loading-small-dark.gif');
		}

		@-webkit-keyframes rotate {
		from {
		-webkit-transform: rotate(0deg);
		@@ -893,6 +1036,7 @@
		transform: rotate(360deg);
		}
		}

		@keyframes rotate {
		from {
		-webkit-transform: rotate(0deg);
		@@ -956,20 +1100,24 @@
		border: none;
		border-radius: 0;
		}

		#body-login .groupbottom,
		#body-login .grouptop {
		display: block;
		width: 100%;
		border: none;
		}

		#body-login #reset-password-wrapper a {
		color: rgba(0, 0, 0, 0.8);
		}

		#body-login #submit-wrapper,
		#body-login #reset-password-wrapper {
		background-color: #f2f2f2;
		margin-top: 26px;
		}

		#body-login #submit-form,
		#body-login #reset-password-submit {
		background-color: #007fff;
		@@ -977,22 +1125,27 @@
		border: none;
		height: 50px;
		}

		#body-login #submit-form {
		width: 190px;
		}

		#body-login #reset-password-submit {
		width: 220px;
		}

		#body-login form {
		padding-left: 22%;
		padding-right: 22%;
		padding-left: 10%;
		padding-right: 10%;
		margin-top: 50px;
		}

		#body-login fieldset {
		width: auto;
		margin: 0;
		overflow-x: hidden;
		}

		#body-login .toggle-password {
		right: 4%;
		top: 39%;
		@@ -1008,10 +1161,12 @@
		font-size: 1em;
		text-shadow: none;
		}

		#body-login footer .info,
		#body-login footer .info a {
		line-height: 1em;
		}

		#body-login .lost-password-container a:hover {
		text-decoration: underline;
		text-decoration-skip-ink: auto;
		@@ -1021,10 +1176,12 @@
		top: 23px;
		right: 30%;
		}

		#reset-password-wrapper .submit-icon {
		top: 23px;
		right: 25%;
		}

		#body-login .warning,
		#body-login .error {
		max-width: 100%;
		@@ -1048,18 +1205,21 @@
		transition: all 0.5s linear !important;
		box-shadow: inset 0px 0px 10px #ccc !important;
		}

		#body-login #lost-password:hover {
		text-decoration: underline;
		}

		#body-login #header .logo {
		background-image: url("../img/logo.png");
		margin-top: 0.5em;
		}

		#body-login .lost-password-container .update {
		margin-bottom: 3%;
		width: 100%;
		font-size: 1.1em;
		}

		#body-login #submit-form:hover,
		#body-login #reset-password-submit:hover {
		opacity: 0.9;