build changes to dropdowns, dropdown toggles, flex.compact-gap, and i…

…cononlybutton
ehanahamed · Sep 4, 2024 · ebec2a5 · ebec2a5
1 parent ff0be0b
commit ebec2a5
Show file tree

Hide file tree

Showing 6 changed files with 228 additions and 12 deletions.
diff --git a/css/ehui-auto.css b/css/ehui-auto.css
@@ -641,7 +641,9 @@ input[type=checkbox]:checked {
 }
 
 button.dropdown-toggle,
-.button.dropdown-toggle {
+.button.dropdown-toggle,
+button.icon-only-button,
+.button.icon-only-button {
   background-color: transparent;
   border: none;
   color: #343a40;
@@ -650,7 +652,11 @@ button.dropdown-toggle,
 button.dropdown-toggle:hover,
 .button.dropdown-toggle:hover,
 button.dropdown-toggle:focus-visible,
-.button.dropdown-toggle:focus-visible {
+.button.dropdown-toggle:focus-visible,
+button.icon-only-button:hover,
+.button.icon-only-button:hover,
+button.icon-only-button:focus-visible,
+.button.icon-only-button:focus-visible {
   background-color: #EBEDF0;
   border: none;
   color: #6639BF;
@@ -765,6 +771,10 @@ button.dropdown-toggle:focus-visible,
   justify-self: end;
 }
 
+.flex.compact-gap {
+  gap: 0.2rem;
+}
+
 .grid {
   display: grid;
 }
@@ -1535,6 +1545,50 @@ button.large,
   color: #008055;
 }
 
+button.dropdown-toggle.ohno,
+.button.dropdown-toggle.ohno,
+button.icon-only-button.ohno,
+.button.icon-only-button.ohno {
+  background-color: transparent;
+  border: none;
+  color: #E64545;
+}
+
+button.dropdown-toggle.ohno:hover,
+.button.dropdown-toggle.ohno:hover,
+button.dropdown-toggle.ohno:focus-visible,
+.button.dropdown-toggle.ohno:focus-visible,
+button.icon-only-button.ohno:hover,
+.button.icon-only-button.ohno:hover,
+button.icon-only-button.ohno:focus-visible,
+.button.icon-only-button.ohno:focus-visible {
+  background-color: #EBEDF0;
+  border: none;
+  color: #B33636;
+}
+
+button.dropdown-toggle.yay,
+.button.dropdown-toggle.yay,
+button.icon-only-button.yay,
+.button.icon-only-button.yay {
+  background-color: transparent;
+  border: none;
+  color: #00B377;
+}
+
+button.dropdown-toggle.yay:hover,
+.button.dropdown-toggle.yay:hover,
+button.dropdown-toggle.yay:focus-visible,
+.button.dropdown-toggle.yay:focus-visible,
+button.icon-only-button.yay:hover,
+.button.icon-only-button.yay:hover,
+button.icon-only-button.yay:focus-visible,
+.button.icon-only-button.yay:focus-visible {
+  background-color: #EBEDF0;
+  border: none;
+  color: #008055;
+}
+
 @media (prefers-reduced-motion) {
   html {
     scroll-behavior: auto;
@@ -2241,7 +2295,9 @@ input[type=checkbox]:checked {
 }
 
 button.dropdown-toggle,
-.button.dropdown-toggle {
+.button.dropdown-toggle,
+button.icon-only-button,
+.button.icon-only-button {
   background-color: transparent;
   border: none;
   color: #c3cce9;
@@ -2250,7 +2306,11 @@ button.dropdown-toggle,
 button.dropdown-toggle:hover,
 .button.dropdown-toggle:hover,
 button.dropdown-toggle:focus-visible,
-.button.dropdown-toggle:focus-visible {
+.button.dropdown-toggle:focus-visible,
+button.icon-only-button:hover,
+.button.icon-only-button:hover,
+button.icon-only-button:focus-visible,
+.button.icon-only-button:focus-visible {
   background-color: #2B2B3D;
   border: none;
   color: #B899FF;
@@ -2365,6 +2425,10 @@ button.dropdown-toggle:focus-visible,
   justify-self: end;
 }
 
+.flex.compact-gap {
+  gap: 0.2rem;
+}
+
 .grid {
   display: grid;
 }
@@ -3135,6 +3199,50 @@ button.large,
   color: #CCFFEE;
 }
 
+button.dropdown-toggle.ohno,
+.button.dropdown-toggle.ohno,
+button.icon-only-button.ohno,
+.button.icon-only-button.ohno {
+  background-color: transparent;
+  border: none;
+  color: #ff6666;
+}
+
+button.dropdown-toggle.ohno:hover,
+.button.dropdown-toggle.ohno:hover,
+button.dropdown-toggle.ohno:focus-visible,
+.button.dropdown-toggle.ohno:focus-visible,
+button.icon-only-button.ohno:hover,
+.button.icon-only-button.ohno:hover,
+button.icon-only-button.ohno:focus-visible,
+.button.icon-only-button.ohno:focus-visible {
+  background-color: #2B2B3D;
+  border: none;
+  color: #ff9999;
+}
+
+button.dropdown-toggle.yay,
+.button.dropdown-toggle.yay,
+button.icon-only-button.yay,
+.button.icon-only-button.yay {
+  background-color: transparent;
+  border: none;
+  color: #66FFCC;
+}
+
+button.dropdown-toggle.yay:hover,
+.button.dropdown-toggle.yay:hover,
+button.dropdown-toggle.yay:focus-visible,
+.button.dropdown-toggle.yay:focus-visible,
+button.icon-only-button.yay:hover,
+.button.icon-only-button.yay:hover,
+button.icon-only-button.yay:focus-visible,
+.button.icon-only-button.yay:focus-visible {
+  background-color: #2B2B3D;
+  border: none;
+  color: #CCFFEE;
+}
+
 @media (prefers-reduced-motion) {
   html {
     scroll-behavior: auto;

diff --git a/css/ehui-dark.css b/css/ehui-dark.css
@@ -641,7 +641,9 @@ input[type=checkbox]:checked {
 }
 
 button.dropdown-toggle,
-.button.dropdown-toggle {
+.button.dropdown-toggle,
+button.icon-only-button,
+.button.icon-only-button {
   background-color: transparent;
   border: none;
   color: #c3cce9;
@@ -650,7 +652,11 @@ button.dropdown-toggle,
 button.dropdown-toggle:hover,
 .button.dropdown-toggle:hover,
 button.dropdown-toggle:focus-visible,
-.button.dropdown-toggle:focus-visible {
+.button.dropdown-toggle:focus-visible,
+button.icon-only-button:hover,
+.button.icon-only-button:hover,
+button.icon-only-button:focus-visible,
+.button.icon-only-button:focus-visible {
   background-color: #2B2B3D;
   border: none;
   color: #B899FF;
@@ -765,6 +771,10 @@ button.dropdown-toggle:focus-visible,
   justify-self: end;
 }
 
+.flex.compact-gap {
+  gap: 0.2rem;
+}
+
 .grid {
   display: grid;
 }
@@ -1535,6 +1545,50 @@ button.large,
   color: #CCFFEE;
 }
 
+button.dropdown-toggle.ohno,
+.button.dropdown-toggle.ohno,
+button.icon-only-button.ohno,
+.button.icon-only-button.ohno {
+  background-color: transparent;
+  border: none;
+  color: #ff6666;
+}
+
+button.dropdown-toggle.ohno:hover,
+.button.dropdown-toggle.ohno:hover,
+button.dropdown-toggle.ohno:focus-visible,
+.button.dropdown-toggle.ohno:focus-visible,
+button.icon-only-button.ohno:hover,
+.button.icon-only-button.ohno:hover,
+button.icon-only-button.ohno:focus-visible,
+.button.icon-only-button.ohno:focus-visible {
+  background-color: #2B2B3D;
+  border: none;
+  color: #ff9999;
+}
+
+button.dropdown-toggle.yay,
+.button.dropdown-toggle.yay,
+button.icon-only-button.yay,
+.button.icon-only-button.yay {
+  background-color: transparent;
+  border: none;
+  color: #66FFCC;
+}
+
+button.dropdown-toggle.yay:hover,
+.button.dropdown-toggle.yay:hover,
+button.dropdown-toggle.yay:focus-visible,
+.button.dropdown-toggle.yay:focus-visible,
+button.icon-only-button.yay:hover,
+.button.icon-only-button.yay:hover,
+button.icon-only-button.yay:focus-visible,
+.button.icon-only-button.yay:focus-visible {
+  background-color: #2B2B3D;
+  border: none;
+  color: #CCFFEE;
+}
+
 @media (prefers-reduced-motion) {
   html {
     scroll-behavior: auto;

diff --git a/css/ehui-light.css b/css/ehui-light.css
@@ -641,7 +641,9 @@ input[type=checkbox]:checked {
 }
 
 button.dropdown-toggle,
-.button.dropdown-toggle {
+.button.dropdown-toggle,
+button.icon-only-button,
+.button.icon-only-button {
   background-color: transparent;
   border: none;
   color: #343a40;
@@ -650,7 +652,11 @@ button.dropdown-toggle,
 button.dropdown-toggle:hover,
 .button.dropdown-toggle:hover,
 button.dropdown-toggle:focus-visible,
-.button.dropdown-toggle:focus-visible {
+.button.dropdown-toggle:focus-visible,
+button.icon-only-button:hover,
+.button.icon-only-button:hover,
+button.icon-only-button:focus-visible,
+.button.icon-only-button:focus-visible {
   background-color: #EBEDF0;
   border: none;
   color: #6639BF;
@@ -765,6 +771,10 @@ button.dropdown-toggle:focus-visible,
   justify-self: end;
 }
 
+.flex.compact-gap {
+  gap: 0.2rem;
+}
+
 .grid {
   display: grid;
 }
@@ -1535,6 +1545,50 @@ button.large,
   color: #008055;
 }
 
+button.dropdown-toggle.ohno,
+.button.dropdown-toggle.ohno,
+button.icon-only-button.ohno,
+.button.icon-only-button.ohno {
+  background-color: transparent;
+  border: none;
+  color: #E64545;
+}
+
+button.dropdown-toggle.ohno:hover,
+.button.dropdown-toggle.ohno:hover,
+button.dropdown-toggle.ohno:focus-visible,
+.button.dropdown-toggle.ohno:focus-visible,
+button.icon-only-button.ohno:hover,
+.button.icon-only-button.ohno:hover,
+button.icon-only-button.ohno:focus-visible,
+.button.icon-only-button.ohno:focus-visible {
+  background-color: #EBEDF0;
+  border: none;
+  color: #B33636;
+}
+
+button.dropdown-toggle.yay,
+.button.dropdown-toggle.yay,
+button.icon-only-button.yay,
+.button.icon-only-button.yay {
+  background-color: transparent;
+  border: none;
+  color: #00B377;
+}
+
+button.dropdown-toggle.yay:hover,
+.button.dropdown-toggle.yay:hover,
+button.dropdown-toggle.yay:focus-visible,
+.button.dropdown-toggle.yay:focus-visible,
+button.icon-only-button.yay:hover,
+.button.icon-only-button.yay:hover,
+button.icon-only-button.yay:focus-visible,
+.button.icon-only-button.yay:focus-visible {
+  background-color: #EBEDF0;
+  border: none;
+  color: #008055;
+}
+
 @media (prefers-reduced-motion) {
   html {
     scroll-behavior: auto;