From db36adebe8342ae6cff189bae8c632d5f03da0a0 Mon Sep 17 00:00:00 2001
From: buzz-lightsnack-2007
 <73412182+buzz-lightsnack-2007@users.noreply.github.com>
Date: Mon, 22 Apr 2024 23:09:24 +0800
Subject: [PATCH] make the filters menu titlebar themed

---
 pages/settings/filters.htm |  28 ++---
 styles/ui.css              | 209 +++++++++++++++++++------------------
 2 files changed, 120 insertions(+), 117 deletions(-)

diff --git a/pages/settings/filters.htm b/pages/settings/filters.htm
index 2e421a2..037b969 100644
--- a/pages/settings/filters.htm
+++ b/pages/settings/filters.htm
@@ -21,18 +21,18 @@
 			</li>
 			<div data-results-list="filters"></div>
 		</ul>
-        <section>
-            <nav class="nav-wrapper" data-result-linked="filters">
-                <ul class="left">
-                    <li><a data-icon="menu" works-sidebar="control"></a></li>
-                </ul>
-                <ul class="right">
-                    <li><a data-icon="trash-can" data-result-enable="filters" data-action="filters,delete,one" accesskey="-"></a></li>
-                    <li><a data-icon="sync" data-result-enable="filters" data-action="filters,update,one"></a></li>
-                </ul>
-            </nav>
-            <section class="container">
-                <article data-result-linked="filters" class="">
+        	<section>
+			<nav id="header" class="nav-wrapper" data-result-linked="filters">
+				<ul class="left">
+					<li><a data-icon="menu" works-sidebar="control"></a></li>
+				</ul>
+				<ul class="right">
+					<li><a data-icon="trash-can" data-result-enable="filters" data-action="filters,delete,one" accesskey="-"></a></li>
+					<li><a data-icon="sync" data-result-enable="filters" data-action="filters,update,one"></a></li>
+				</ul>
+			</nav>
+			<section class="container">
+               	<article data-result-linked="filters" class="">
 					<h2 class="flow-text" data-result-content="*"></h2>
 					<div class="input-field">
 						<input type="text" class="validate" placeholder=" " data-result-store="name">
@@ -72,8 +72,8 @@
 						<label for="settings_filters_target"></label>
 					</div>
 				</article>
-            </section>
-        </section>
+            	</section>
+        	</section>
     </main>
     <footer class="fixed-action-btn">
         <button class="btn-floating btn-large" data-icon="plus" accesskey="+" data-action="filters,add,one"></button>
diff --git a/styles/ui.css b/styles/ui.css
index b302a51..b3096cc 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -1,165 +1,168 @@
 :root {
-    --font-color-main: rgba(0, 0, 0) !important;
-    --font-color-medium: rgba(25, 25, 25) !important;
-    --font-color-disabled: rgba(63, 63, 63) !important;
+	--font-color-main: rgba(0, 0, 0) !important;
+	--font-color-medium: rgba(25, 25, 25) !important;
+	--font-color-disabled: rgba(63, 63, 63) !important;
 
-    --error-color: #cf6679 !important;
+	--error-color: #cf6679 !important;
 
-    --primary-color: rgba(255, 134, 57) !important;
-    --primary-color-dark: rgba(221, 106, 59) !important;
-    --primary-color-numeric: 255, 134, 57 !important;
-    --primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
-    --primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
+	--primary-color: rgba(255, 134, 57) !important;
+	--primary-color-dark: rgba(221, 106, 59) !important;
+	--primary-color-numeric: 255, 134, 57 !important;
+	--primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
+	--primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
 
-    --background-color-level-16dp-solid: rgba(255, 238, 235) !important;
+	--background-color-level-16dp-solid: rgba(255, 238, 235) !important;
 
-    --secondary-color: rgba(221, 106, 59, 1) !important;
-    --secondary-color-hover-solid: rgba(252, 162, 133) !important;
-    --secondary-color-focus-solid: rgba(221, 106, 59) !important;
+	--secondary-color: rgba(221, 106, 59, 1) !important;
+	--secondary-color-hover-solid: rgba(252, 162, 133) !important;
+	--secondary-color-focus-solid: rgba(221, 106, 59) !important;
 
-    --secondary-container-color: rgba(252, 162, 133) !important;
+	--secondary-container-color: rgba(252, 162, 133) !important;
 }
 
 @media (prefers-color-scheme: dark) {
-    :root {
-        --background-color: #000 !important;
-        --surface-color: #000000 !important;
+	:root {
+		--background-color: #000 !important;
+		--surface-color: #000000 !important;
 
-        --font-color-main: rgba(255, 255, 255) !important;
-        --font-color-medium: rgba(200, 200, 200) !important;
-        --font-color-disabled: rgba(255, 255, 255) !important;
+		--font-color-main: rgba(255, 255, 255) !important;
+		--font-color-medium: rgba(200, 200, 200) !important;
+		--font-color-disabled: rgba(255, 255, 255) !important;
 
-        --font-on-primary-color-main: rgba(255, 255, 255) !important;
-        --font-on-primary-color-dark-main: rgba(255, 255, 255) !important;
-        --font-on-primary-color-dark-medium: rgba(255, 255, 255) !important;
-        --font-on-primary-color-medium: rgba(0, 0, 0, 0.56) !important;
-        --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38) !important;
+		--font-on-primary-color-main: rgba(255, 255, 255) !important;
+		--font-on-primary-color-dark-main: rgba(255, 255, 255) !important;
+		--font-on-primary-color-dark-medium: rgba(255, 255, 255) !important;
+		--font-on-primary-color-medium: rgba(0, 0, 0, 0.56) !important;
+		--font-on-primary-color-disabled: rgba(0, 0, 0, 0.38) !important;
 
-        --hover-color: rgba(255, 255, 255, 0.04) !important;
-        --focus-color: rgba(255, 255, 255, 0.12) !important;
-        --focus-color-solid: #424242 !important;
+		--hover-color: rgba(255, 255, 255, 0.04) !important;
+		--focus-color: rgba(255, 255, 255, 0.12) !important;
+		--focus-color-solid: #424242 !important;
 
-        --background-color-disabled: rgba(255, 255, 255, 0.12) !important;
-        --background-color-level-4dp: rgba(255, 255, 255, 0.09) !important;
-        --background-color-level-16dp-solid: #262626 !important;
-        --background-color-card: var(--surface-color) !important;
-        --background-color-slight-emphasis: rgba(
-            255,
-            255,
-            255,
-            0.05
-        ) !important;
+		--background-color-disabled: rgba(255, 255, 255, 0.12) !important;
+		--background-color-level-4dp: rgba(255, 255, 255, 0.09) !important;
+		--background-color-level-16dp-solid: #262626 !important;
+		--background-color-card: var(--surface-color) !important;
+		--background-color-slight-emphasis: rgba(
+			255,
+			255,
+			255,
+			0.05
+		) !important;
 
-        --separator-color: #424242 !important;
-        --error-color: #cf6679 !important;
+		--separator-color: #424242 !important;
+		--error-color: #cf6679 !important;
 
-        --slider-track-color: rgba(255, 255, 255, 0.26) !important;
-        --switch-thumb-off-color: #bababa !important;
+		--slider-track-color: rgba(255, 255, 255, 0.26) !important;
+		--switch-thumb-off-color: #bababa !important;
 
-        --primary-color: rgba(255, 134, 57) !important;
-        --primary-color-dark: rgba(221, 106, 59) !important;
-        --primary-color-numeric: 255, 134, 57 !important;
-        --primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
-        --primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
+		--primary-color: rgba(255, 134, 57) !important;
+		--primary-color-dark: rgba(221, 106, 59) !important;
+		--primary-color-numeric: 255, 134, 57 !important;
+		--primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
+		--primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
 
-        --secondary-color: rgba(221, 106, 59) !important;
-        --secondary-color-hover-solid: rgba(252, 162, 133) !important;
-        --secondary-color-focus-solid: rgba(221, 106, 59) !important;
-        --font-on-secondary-container-color: rgba(255, 255, 255) !important;
+		--secondary-color: rgba(221, 106, 59) !important;
+		--secondary-color-hover-solid: rgba(252, 162, 133) !important;
+		--secondary-color-focus-solid: rgba(221, 106, 59) !important;
+		--font-on-secondary-container-color: rgba(255, 255, 255) !important;
 
-        --secondary-container-color: rgba(221, 106, 59) !important;
+		--secondary-container-color: rgba(221, 106, 59) !important;
 
-        --md_sys_color_on-surface: 230, 225, 229 !important;
-    }
+		--md_sys_color_on-surface: 230, 225, 229 !important;
+	}
 }
 
 body {
-    color: var(--font-color-main);
-    background-color: var(--background-color);
+	color: var(--font-color-main);
+	background-color: var(--background-color);
 }
 
 body:has(main.container),
 .background {
-    background: linear-gradient(
-        25deg,
-        var(--primary-color-dark) 0%,
-        var(--primary-color) 62%,
-        var(--primary-color-raised-hover-solid) 100%
-    );
+	background: linear-gradient(
+		25deg,
+		var(--primary-color-dark) 0%,
+		var(--primary-color) 62%,
+		var(--primary-color-raised-hover-solid) 100%
+	);
 }
 
 main.container {
-    background-color: var(--background-color);
+	background-color: var(--background-color);
 }
 
 nav {
-    background-color: none;
-    background: linear-gradient(
-        335deg,
-        var(--primary-color-dark) 0%,
-        var(--primary-color) 62%,
-        var(--primary-color-raised-hover-solid) 100%
-    );
+	background-color: var(--background-color) !important;
+}
+
+nav#header {
+	background: linear-gradient(
+		335deg,
+		var(--primary-color-dark) 0%,
+		var(--primary-color) 62%,
+		var(--primary-color-raised-hover-solid) 100%
+	);
 }
 
 nav .input-field input[type="search"] {
-    color: var(--font-color-main) !important;
+	color: var(--font-color-main) !important;
 }
 
 ul.sidenav-fixed + * {
-    padding-left: 300px;
+	padding-left: 300px;
 }
 
 @media only screen and (max-width: 992px) {
-    ul.sidenav-fixed + * {
-        padding-left: 0;
-    }
+	ul.sidenav-fixed + * {
+		padding-left: 0;
+	}
 }
 
 .collapsible > li > header {
-    font-weight: bold;
+	font-weight: bold;
 }
 
 form ul > li:has(input[type="checkbox"]),
 ul.input-field > li {
-    list-style-type: none;
+	list-style-type: none;
 }
 
 form ul:has(li input[type="checkbox"]),
 ul.input-field {
-    padding-left: 0;
+	padding-left: 0;
 }
 
 .input-group {
-    margin-block-start: 1em !important;
-    margin-block-end: 1em !important;
+	margin-block-start: 1em !important;
+	margin-block-end: 1em !important;
 }
 
 .input-group:not(:has(input)) {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
 }
 
 .input-group side:not(:has(input)) {
-    display: flex;
-    flex-direction: row;
-    justify-content: end;
-    align-items: center;
+	display: flex;
+	flex-direction: row;
+	justify-content: end;
+	align-items: center;
 }
 
 .field-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
 }
 
 .dual > * > *:not(nav) {
-    margin: 1em;
+	margin: 1em;
 }
 
 .dual .container {
-    width: 90% !important;
+	width: 90% !important;
 	margin-left: auto;
 	margin-right: auto;
 }
@@ -171,16 +174,16 @@ ul.input-field {
 }
 
 nav .input-field label {
-    left: auto !important;
+	left: auto !important;
 }
 
 .input-field > button:not(:last-child) {
-    margin-right: 0.5em;
+	margin-right: 0.5em;
 }
 
 .nav-wrapper {
-    position: sticky;
-    z-index: 10;
+	position: sticky;
+	z-index: 10;
 }
 
 @media only screen and (min-width: 992px) {
@@ -193,7 +196,7 @@ nav .input-field label {
 	font-weight: bold;
 }
 #author {
-    font-style: italic;
+	font-style: italic;
 }
 
 nav ul:not(.dropdown-content) > li > a {
@@ -215,20 +218,20 @@ textarea[type="code"] {
 }
 
 fieldset {
-    padding: 2em !important;
-    border-radius: 4px;
+	padding: 2em !important;
+	border-radius: 4px;
 }
 fieldset > legend {
-    padding: 0.5em !important;
+	padding: 0.5em !important;
 }
 fieldset > ul {
-    margin-top: 0em !important;
+	margin-top: 0em !important;
 }
 
 fieldset > ul li {
-    padding-top: 0em !important;
+	padding-top: 0em !important;
 }
 
 .input-field {
-    margin-bottom: .25em;
+	margin-bottom: .25em;
 }
\ No newline at end of file