Make it possible to define theme header styling per background

Signed-off-by: Julius Härtl <jus@bitgrid.net>

1 files changed, 71 insertions, 0 deletions

diff --git a/apps/dashboard/css/dashboard.scss b/apps/dashboard/css/dashboard.scss
new file mode 100644
index 00000000000..a320b3e3c99
--- /dev/null
+++ b/apps/dashboard/css/dashboard.scss
@@ -0,0 +1,71 @@
+// Show Dashboard background image beneath header
+#body-user #header {
+	background-size: cover !important;
+	background-position: center 50% !important;
+	background-repeat: no-repeat !important;
+	background-attachment: fixed !important;
+}
+
+#content {
+	padding-top: 0 !important;
+}
+
+// Hide triangle indicators from navigation since they are out of place without the header bar
+#appmenu li a.active::before,
+#appmenu li:hover a::before,
+#appmenu li:hover a.active::before,
+#appmenu li a:focus::before {
+	display: none !important;
+}
+
+$has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != '';
+
+body.dashboard-inverted:not(.dashboard-dark) {
+	// Do not invert the default logo
+	@if ($has-custom-logo == false) {
+		$image-logo: url(icon-color-path('logo', 'logo', #ffffff, 1, true));
+		#header .logo {
+			background-image: $image-logo !important;
+			opacity: 1;
+		}
+	}
+
+	#app-dashboard > h2 {
+		color: #fff;
+	}
+	#appmenu li span {
+		color: #fff;
+	}
+	#appmenu svg image {
+		filter: invert(0);
+	}
+	#appmenu .icon-more-white,
+	.header-right > div:not(#settings) > * {
+		filter: invert(1) hue-rotate(180deg);
+	}
+}
+
+body.dashboard-dark:not(.dashboard-inverted) {
+	// invert the default logo
+	@if ($has-custom-logo == false) {
+		$image-logo: url(icon-color-path('logo', 'logo', #000000, 1, true));
+		#header .logo {
+			background-image: $image-logo !important;
+			opacity: 1;
+		}
+	}
+
+	#app-dashboard > h2 {
+		color: #000;
+	}
+	#appmenu li span {
+		color: #000;
+	}
+	#appmenu svg {
+		filter: invert(1) !important;
+	}
+	#appmenu .icon-more-white,
+	.header-right > div:not(#settings) > * {
+		filter: invert(1) hue-rotate(180deg);
+	}
+}