Settings pages: apply style to page titles using a flex container

Signed-off-by: RD WebDesign <[email protected]>
pi-hole · Jul 19, 2023 · b1c0631 · b1c0631
1 parent b26dcf3
commit b1c0631
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/style/pi-hole.css b/style/pi-hole.css
@@ -877,12 +877,31 @@ body:not(.lcars) .filter_types [class*="icheck-"] > input:first-child:checked +
   }
 }
 
+/* Page title container (flex) */
+.flex-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap-reverse;
+}
+
+.flex-header h1 {
+  margin: 10px 30px 10px 0;
+  flex: 1 0 auto;
+}
+
+/* Global settings level selector container */
+.settings-selector {
+  padding: 14px 0 0;
+  order: 2;
+  font-size: 18px;
+}
+
 /* Global settings level selector */
 #settings-level {
   display: inline-block;
   width: auto;
-  height: 2.2em;
-  border-radius: 4px;
+  min-width: 90px;
 }
 
 .navbar-nav {

diff --git a/style/themes/default-light.css b/style/themes/default-light.css
@@ -304,3 +304,7 @@ select:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 1000px #fff inset;
   transition: background-color 1s ease-in-out 0s;
 }
+
+.page-header {
+  border-color: #ddd;
+}