Adjust style for the "group assignment" control

Signed-off-by: RD WebDesign <[email protected]>
pi-hole · Dec 24, 2024 · 46092a4 · 46092a4
1 parent 6ab55c4
commit 46092a4
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 7 deletions.
diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css
@@ -654,3 +654,23 @@ input[type="password"]::-webkit-caps-lock-indicator {
   background: none;
   border-color: rgb(120, 127, 133);
 }
+
+/* Group assignment select */
+.bootstrap-select > .dropdown-toggle {
+  border-radius: 0;
+  background-color: #353c42;
+  border-color: #3d444b;
+}
+.bootstrap-select > .dropdown-toggle:hover,
+.bootstrap-select > .dropdown-toggle:focus {
+  color: #fff;
+}
+.open > .dropdown-toggle.btn-default,
+.open > .dropdown-toggle.btn-default:active {
+  background-color: #353c42;
+  color: #bec5cb;
+  border: 1px solid #3d444b;
+}
+.open > .dropdown-toggle.btn-default:hover {
+  color: #fff;
+}
diff --git a/style/themes/default-darker.css b/style/themes/default-darker.css
@@ -692,8 +692,7 @@ fieldset[disabled] .btn {
 .btn-default:active,
 .open > .dropdown-toggle.btn-default {
   color: rgb(200, 195, 188);
-  background-color: rgb(38, 41, 43);
-  background-image: none;
+  background: rgb(24, 26, 27);
   border-color: rgb(71, 77, 80);
 }
 .btn-default.active.focus,
@@ -706,9 +705,15 @@ fieldset[disabled] .btn {
 .open > .dropdown-toggle.btn-default:focus,
 .open > .dropdown-toggle.btn-default:hover {
   color: rgb(200, 195, 188);
-  background-color: rgb(48, 52, 54);
+  background: rgb(24, 26, 27);
   border-color: rgb(80, 87, 91);
 }
+
+.bootstrap-select > .dropdown-toggle {
+  border-radius: 0;
+  background: rgb(24, 26, 27);
+}
+
 .btn-default.disabled.focus,
 .btn-default.disabled:focus,
 .btn-default.disabled:hover,

diff --git a/style/themes/default-light.css b/style/themes/default-light.css
@@ -311,3 +311,13 @@ select:-webkit-autofill {
 .page-header {
   border-color: #ddd;
 }
+
+/* Group assignment select */
+.bootstrap-select > .dropdown-toggle {
+  border-radius: 0;
+  background-color: #fff;
+}
+.open > .dropdown-toggle.btn-default,
+.open > .dropdown-toggle.btn-default:active {
+  background-color: #fff;
+}
diff --git a/style/themes/high-contrast-dark.css b/style/themes/high-contrast-dark.css
@@ -985,3 +985,19 @@ td.highlight {
   animation: none;
   border-radius: 6px;
 }
+
+/* Group assignment select */
+.bootstrap-select > .dropdown-toggle {
+  border-radius: 0;
+  background-color: #2d363f;
+  border: 1px solid #3c4652;
+}
+
+.open > .dropdown-toggle.btn-default:active,
+.bootstrap-select > .dropdown-toggle:hover {
+  color: var(--main-text-color);
+}
+.bootstrap-select > .dropdown-toggle:focus {
+  border-color: #3c8dbc;
+  color: var(--main-text-color);
+}
diff --git a/style/themes/high-contrast.css b/style/themes/high-contrast.css
@@ -574,3 +574,13 @@ table.dataTable thead th:hover.sorting_desc_disabled::after {
   animation: none;
   border-radius: 6px;
 }
+
+/* Group assignment select */
+.bootstrap-select > .dropdown-toggle {
+  border-radius: 0;
+  background-color: #fff;
+}
+.bootstrap-select > .dropdown-toggle:hover {
+  color: #000;
+  background-color: #eee;
+}
diff --git a/style/themes/lcars.css b/style/themes/lcars.css
@@ -287,13 +287,19 @@ div.dataTables_wrapper div.dataTables_length select {
   border-radius: 8px;
 }
 
+/* Remove border from group assignment select */
+.form-control:has(.selectpicker) {
+  border: none;
+  color: #246;
+}
+
 /*** Overwrite chrome's input field auto-filling ***/
 input:-webkit-autofill,
 input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 select:-webkit-autofill {
   -webkit-text-fill-color: #fff !important;
-  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
+  -webkit-box-shadow: 0 0 0 1000px #000 inset;
   transition: background-color 1s ease-in-out 0s;
 }
 
@@ -528,15 +534,23 @@ p.login-box-msg,
   color: #456;
 }
 
-.bootstrap-select.bs-container .dropdown-menu {
+.bootstrap-select.bs-container .dropdown-menu,
+.open > .dropdown-menu {
   border-radius: 12px;
   border-width: 2px;
 }
 
-.bootstrap-select.bs-container .dropdown-menu.open {
+.bootstrap-select.bs-container .dropdown-menu.open,
+.open > .dropdown-menu.open {
   filter: invert(0.88) hue-rotate(180deg);
 }
 
+.open > .dropdown-toggle.btn-default,
+.open > .dropdown-toggle.btn-default:active {
+  background-color: #353c42;
+  color: #bec5cb;
+}
+
 /*** Set .dropdown-toggle width to fill the whole table cell ***/
 @media screen and (min-width: 661px) and (max-width: 767px), screen and (min-width: 960px) {
   .bootstrap-select.fit-width {
@@ -1163,7 +1177,7 @@ footer a:focus {
 }
 
 .modal-body .overlay {
-  padding: 0px;
+  padding: 0;
   border-radius: 3px;
 }