Merge pull request #40481 from nextcloud/fix/guest-pages-contentinfo

fix: content info footer on guest pages

core/css/guest.scss

@@ -1,5 +1,6 @@
 /* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
  * SPDX-FileCopyrightText: 2022 Carl Schwan <carl@carlschwan.eu>
+ * SPDX-FileCopyrightText: Richard Steinmetz <richard@steinmetz.cloud>
  This file is licensed under the Affero General Public License version 3 or later.
  See the COPYING-README file. */
 
@@ -735,11 +736,19 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
 
 /* FOOTER */
 footer {
-	min-height: 70px;
 	margin-top: auto;
 	.info .entity-name {
 		font-weight: bold;
 	}
+
+	&[role="contentinfo"] {
+		padding: 6px 24px;
+		margin-bottom: 1rem;
+
+		.info {
+			margin: 0;
+		}
+	}
 }
 
 /* keep the labels for screen readers but hide them since we use placeholders */
@@ -795,11 +804,13 @@ a.legal {
 
 .guest-box, .body-login-container {
 	color: var(--color-main-text);
-	background-color: var(--color-main-background);
+	background-color: var(--color-main-background-blur);
 	padding: $guest-container-padding;
 	border-radius: var(--border-radius-rounded);
 	box-shadow: 0 0 10px var(--color-box-shadow);
 	display: inline-block;
+	-webkit-backdrop-filter: var(--filter-background-blur);
+	backdrop-filter: var(--filter-background-blur);
 }
 
 .guest-box {

core/src/views/Login.vue

@@ -2,6 +2,7 @@
   - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
   -
   - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  - @author Richard Steinmetz <richard@steinmetz.cloud>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -209,33 +210,6 @@ body {
 	}
 }
 
-// Same look like a dashboard panel
-.login-box.guest-box, footer {
-	color: var(--color-main-text);
-	background-color: var(--color-main-background-blur);
-	-webkit-backdrop-filter: var(--filter-background-blur);
-	backdrop-filter: var(--filter-background-blur);
-}
-
-footer {
-	// Usually the same size as the login box, but allow longer texts
-	min-width: 320px;
-	box-sizing: border-box;
-	// align with login box
-	box-shadow: 0 0 10px var(--color-box-shadow);
-	// set border to pill style and adjust padding for it
-	border-radius: var(--border-radius-pill);
-	padding: 6px 24px;
-	// always show above bottom
-	margin-bottom: 1rem;
-	min-height: unset;
-
-	// reset margin to reduce height of pill
-	p.info {
-		margin: auto 0px;
-	}
-}
-
 .fade-enter-active, .fade-leave-active {
 	transition: opacity .3s;
 }

core/templates/layout.guest.php

@@ -47,7 +47,7 @@
 				</main>
 			</div>
 		</div>
-		<footer role="contentinfo">
+		<footer role="contentinfo" class="guest-box">
 			<p class="info">
 				<?php print_unescaped($theme->getLongFooter()); ?>
 			</p>