1 files changed, 5 insertions, 361 deletions
diff --git a/core/css/header.css b/core/css/header.css
index 5a5acb269ab..1c748610023 100644
--- a/core/css/header.css
+++ b/core/css/header.css
@@ -1,361 +1,5 @@
-/* prevent ugly selection effect on accidental selection */
-#header,
-#navigation,
-#expanddiv {
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-}
-
-/* removed until content-focusing issue is fixed */
-#skip-to-content a {
-	position: absolute;
-	left: -10000px;
-	top: auto;
-	width: 1px;
-	height: 1px;
-	overflow: hidden;
-}
-#skip-to-content a:focus {
-	left: 76px;
-	top: -9px;
-	color: #fff;
-	width: auto;
-	height: auto;
-}
-
-
-
-/* HEADERS ------------------------------------------------------------------ */
-
-#body-user #header,
-#body-settings #header,
-#body-public #header {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	z-index: 2000;
-	height: 45px;
-	line-height: 2.5em;
-	background-color: #1d2d44;
-	box-sizing: border-box;
-}
-
-
-
-/* LOGO and APP NAME -------------------------------------------------------- */
-
-#owncloud {
-	position: absolute;
-	top: 0;
-	left: 0;
-	padding: 5px;
-	padding-bottom: 0;
-	height: 45px; /* header height */
-	box-sizing: border-box;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-	opacity: 1;
-}
-#owncloud:focus {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
-	opacity: .75;
-}
-#owncloud:hover,
-#owncloud:active {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-	opacity: 1;
-}
-
-#header .logo {
-	background-image: url(../img/logo-icon.svg);
-	background-repeat: no-repeat;
-	background-size: 175px;
-	background-position: center 30px;
-	width: 252px;
-	height: 120px;
-	margin: 0 auto;
-}
-
-#header .logo-icon {
-	/* display logo so appname can be shown next to it */
-	display: inline-block;
-	background-image: url(../img/logo-icon.svg);
-	background-repeat: no-repeat;
-	width: 62px;
-	height: 34px;
-}
-
-#header .header-appname-container {
-	display: inline-block;
-	position: absolute;
-	left: 70px;
-	height: 27px;
-	padding-top: 18px;
-	padding-right: 10px;
-}
-
-/* hover effect for app switcher label */
-.header-appname-container .header-appname,
-.menutoggle .icon-caret {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
-	opacity: .75;
-}
-.menutoggle:hover .header-appname,
-.menutoggle:hover .icon-caret,
-.menutoggle:focus .header-appname,
-.menutoggle:focus .icon-caret,
-.menutoggle.active .header-appname,
-.menutoggle.active .icon-caret {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-	opacity: 1;
-}
-
-/* show appname next to logo */
-.header-appname {
-	display: inline-block;
-	position: relative;
-	color: #fff;
-	font-size: 16px;
-	font-weight: 300;
-	margin: 0;
-	margin-top: -24px;
-	padding: 7px 0 7px 5px;
-	vertical-align: middle;
-}
-/* show caret indicator next to logo to make clear it is tappable */
-#header .icon-caret {
-	display: inline-block;
-	width: 12px;
-	height: 12px;
-	margin: 0;
-	margin-top: -21px;
-	padding: 0;
-	vertical-align: middle;
-}
-/* do not show menu toggle on public share links as there is no menu */
-#body-public #header .icon-caret {
-	display: none;
-}
-
-
-
-/* NAVIGATION --------------------------------------------------------------- */
-
-#navigation {
-	position: fixed;
-	top: 45px;
-	left: 10px;
-	width: 265px;
-	max-height: 85%;
-	margin-top: 0;
-	padding-bottom: 10px;
-	background-color: rgba(0, 0, 0, .97);
-	box-shadow: 0 1px 10px rgba(50, 50, 50, .7);
-	border-radius: 3px;
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-	display: none;
-	/*overflow-y: auto;
-	overflow-x: hidden;*/
-	z-index: 2000;
-}
-/* arrow look */
-#navigation:after, #expanddiv:after {
-	bottom: 100%;
-	border: solid transparent;
-	content: " ";
-	height: 0;
-	width: 0;
-	position: absolute;
-	pointer-events: none;
-	border-color: rgba(0, 0, 0, 0);
-	border-bottom-color: rgba(0, 0, 0, .97);
-	border-width: 10px;
-	margin-left: -10px;
-}
-/* position of dropdown arrow */
-#navigation:after {
-	left: 47%;
-}
-#expanddiv:after {
-	right: 15px;
-}
-
-#navigation, #navigation * {
-	box-sizing:border-box;
-}
-#navigation li {
-	display: inline-block;
-}
-#navigation a {
-	position: relative;
-	width: 80px;
-	height: 80px;
-	display: inline-block;
-	text-align: center;
-	padding: 20px 0;
-}
-#navigation a span {
-	display: inline-block;
-	font-size: 13px;
-	padding-bottom: 0;
-	padding-left: 0;
-	width: 80px;
-	text-align: center;
-	color: #fff;
-	white-space:nowrap;
-	overflow:hidden;
-	text-overflow:ellipsis;
-}
-	/* icon opacity and hover effect */
-	#navigation a img,
-	#navigation a span {
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-		opacity: .7;
-	}
-	#navigation a:hover img,
-	#navigation a:focus img,
-	#navigation a:hover span,
-	#navigation a:focus span,
-	#navigation a.active img,
-	#navigation a.active span {
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-		opacity: 1;
-	}
-
-#navigation .app-icon {
-	margin: 0 auto;
-	padding: 0;
-	max-height: 32px;
-	max-width: 32px;
-}
-
-/* Apps management */
-#apps-management {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-	opacity: .6;
-	min-height: initial;
-	height: initial;
-	margin: 0;
-}
-
-
-/* loading feedback for apps */
-#navigation .app-loading .icon-loading-dark {
-	display: inline !important;
-	position: absolute;
-	top: 20px;
-	left: 24px;
-	width: 32px;
-	height: 32px;
-}
-#navigation .app-loading .app-icon {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
-	opacity: .1;
-}
-
-#apps {
-	max-height: calc(100vh - 100px);
-	overflow:auto;
-}
-
-
-/* USER MENU -----------------------------------------------------------------*/
-
-/* info part on the right, used e.g. for info on who shared something */
-.header-right {
-	position: absolute;
-	right: 0;
-	padding: 7px 5px;
-	color: #fff;
-	height: 100%;
-	max-width: 80%;
-	white-space: nowrap;
-	box-sizing: border-box;
-}
-
-/* Profile picture in header */
-#header .avatardiv {
-	float: left;
-	display: inline-block;
-	margin-right: 8px;
-	cursor: pointer;
-	height: 32px;
-	width: 32px;
-}
-#header .avatardiv img {
-	opacity: 1;
-	cursor: pointer;
-}
-
-#settings {
-	float: right;
-	color: #bbb;
-	cursor: pointer;
-}
-#expand {
-	display: block;
-	padding: 7px 30px 6px 10px;
-	cursor: pointer;
-}
-#expand * {
-	cursor: pointer;
-}
-#expand:hover,
-#expand:focus,
-#expand:active {
-	color: #fff;
-}
-#expand img {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-	opacity: .7;
-	margin-bottom: -2px;
-}
-#expand:hover img,
-#expand:focus img,
-#expand:active img {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-	opacity: 1;
-}
-#expanddiv {
-	position: absolute;
-	right: 10px;
-	top: 45px;
-	z-index: 2000;
-	display: none;
-	background-color: rgba(0, 0, 0, .97);
-	box-shadow: 0 1px 10px rgba(50, 50, 50, .7);
-	border-radius: 3px;
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-	box-sizing: border-box;
-}
-	#expanddiv a {
-		display: block;
-		height: 40px;
-		color: #fff;
-		padding: 4px 12px 0;
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-		opacity: .7;
-		box-sizing: border-box;
-	}
-	#expanddiv a img {
-		margin-bottom: -3px;
-		margin-right: 6px;
-	}
-	#expanddiv a:hover,
-	#expanddiv a:focus,
-	#expanddiv a:active,
-	#expanddiv a.active {
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-		opacity: 1;
-	}
-
-/* do not show display name when profile picture is present */
-#header .avatardiv.avatardiv-shown + #expandDisplayName {
-	display: none;
-}
-#header #expand {
-	display: block;
-}
+/*!
+ * SPDX-FileCopyrightText: 2016-2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */#skip-actions{position:absolute;overflow:hidden;z-index:9999;top:-999px;inset-inline-start:3px;padding:11px;display:flex;flex-wrap:wrap;gap:11px}#skip-actions:focus-within{top:var(--header-height)}#header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#header:not(.header-guest){display:inline-flex;position:absolute;top:0;width:100%;z-index:2000;height:var(--header-height);box-sizing:border-box;justify-content:space-between}#header #nextcloud{padding:5px 0;padding-inline-start:86px;position:relative;height:calc(100% - var(--default-grid-baseline));box-sizing:border-box;opacity:1;align-items:center;display:flex;flex-wrap:wrap;overflow:hidden;margin:2px}#header #nextcloud:hover,#header #nextcloud:active{opacity:1}#header #nextcloud .logo{display:inline-flex;background-image:var(--image-logoheader, var(--image-logo, url("../img/logo/logo.svg")));background-repeat:no-repeat;background-size:contain;background-position:center;width:62px;position:absolute;inset-inline-start:12px;top:1px;bottom:1px;filter:var(--image-logoheader-custom, var(--background-image-invert-if-bright))}#header #nextcloud:focus-visible,#header .app-menu-entry a:focus-visible,#header .header-menu button:first-of-type:focus-visible{outline:none}#header #nextcloud:focus-visible::after,#header .app-menu-entry a:focus-visible::after,#header .header-menu button:first-of-type:focus-visible::after{content:" ";position:absolute;inset-block-end:2px;transform:translateX(-50%);width:12px;height:2px;border-radius:3px;background-color:var(--color-background-plain-text);inset-inline-start:50%;opacity:1}#header .header-start{display:inline-flex;align-items:center;flex:1 0;white-space:nowrap;min-width:0}#header .header-end{display:inline-flex;align-items:center;justify-content:flex-end;flex-shrink:1;margin-inline-end:calc(3*var(--default-grid-baseline))}#header .header-end>div,#header .header-end>form{height:100%;position:relative}#header .header-end>div>.menutoggle,#header .header-end>form>.menutoggle{display:flex;justify-content:center;align-items:center;width:var(--header-height);height:var(--header-menu-item-height);cursor:pointer;opacity:.85;padding:0;margin:2px 0}#header .header-end>div>.menutoggle:focus,#header .header-end>form>.menutoggle:focus{opacity:1}#header .header-end>div>.menutoggle:focus-visible,#header .header-end>form>.menutoggle:focus-visible{outline:none}#header .header-end>div>.menu,#header .header-end>form>.menu{background-color:var(--color-main-background);filter:drop-shadow(0 1px 5px var(--color-box-shadow));border-radius:var(--border-radius-large);box-sizing:border-box;z-index:2000;position:absolute;max-width:350px;min-height:calc(var(--default-clickable-area)*1.5);max-height:calc(100vh - var(--header-height) - 2*var(--default-grid-baseline));inset-inline-end:8px;top:var(--header-height);margin:0;overflow-y:auto}#header .header-end>div>.menu:not(.popovermenu),#header .header-end>form>.menu:not(.popovermenu){display:none}#header .header-end>div>.menu:after,#header .header-end>form>.menu:after{border:10px solid rgba(0,0,0,0);border-bottom-color:var(--color-main-background);bottom:100%;content:" ";height:0;width:0;position:absolute;pointer-events:none;inset-inline-end:10px}#header .header-end>div>.menu>div,#header .header-end>div>.menu>ul,#header .header-end>form>.menu>div,#header .header-end>form>.menu>ul{-webkit-overflow-scrolling:touch;min-height:calc(var(--default-clickable-area)*1.5);max-height:calc(100vh - var(--header-height) - 2*var(--default-grid-baseline))}#header .header-end>div .emptycontent h2,#header .header-end>form .emptycontent h2{font-weight:normal;font-size:16px}#header .header-end>div .emptycontent [class^=icon-],#header .header-end>div .emptycontent [class*=icon-],#header .header-end>form .emptycontent [class^=icon-],#header .header-end>form .emptycontent [class*=icon-]{background-size:48px;height:48px;width:48px}#header .header-appname{color:var(--color-background-plain-text);font-size:16px;font-weight:bold;margin:0;padding:0;padding-inline-end:5px;overflow:hidden;text-overflow:ellipsis;flex:1 1 100%}#header .header-appname .header-info{display:flex;flex-direction:column;overflow:hidden}#header .header-appname .header-info .header-title{overflow:hidden;text-overflow:ellipsis}#header .header-appname .header-info .header-shared-by{color:var(--color-background-plain-text);position:relative;font-weight:300;font-size:var(--font-size-small);line-height:var(--font-size-small);overflow:hidden;text-overflow:ellipsis}@media(display-mode: standalone)or (display-mode: minimal-ui){#header:not(.header-guest){display:none !important}#content,#content-vue{margin-top:var(--body-container-margin)}:root{--body-height: calc(100% - env(safe-area-inset-bottom) - var(--body-container-margin) * 2) !important}}/*# sourceMappingURL=header.css.map */