1 files changed, 26 insertions, 8 deletions
diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css
index b7436783df..a353532f4e 100644
--- a/web_src/css/features/colorpicker.css
+++ b/web_src/css/features/colorpicker.css
@@ -1,15 +1,13 @@
-.js-color-picker-input {
+.color-picker-combo {
   display: flex;
-  position: relative;
+  position: relative; /* to position the preview square */
 }
 
-.js-color-picker-input input {
-  padding-top: 8px !important;
-  padding-bottom: 8px !important;
+.color-picker-combo input {
   padding-left: 32px !important;
 }
 
-.js-color-picker-input .preview-square {
+.color-picker-combo .preview-square {
   position: absolute;
   aspect-ratio: 1;
   height: 16px;
@@ -17,12 +15,12 @@
   top: 50%;
   transform: translateY(-50%);
   border-radius: 2px;
-  background: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa); /* stylelint-disable-line scale-unlimited/declaration-strict-value */
+  background: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
   background-position: 0 0, 4px 4px;
   background-size: 8px 8px;
 }
 
-.js-color-picker-input .preview-square::after {
+.color-picker-combo .preview-square::after {
   content: "";
   position: absolute;
   width: 100%;
@@ -31,6 +29,26 @@
   background-color: currentcolor;
 }
 
+.color-picker-combo .precolors {
+  display: flex;
+  margin-left: 1em;
+  align-items: center;
+  gap: 0.125em;
+}
+
+.color-picker-combo .precolors .generate-random-color {
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  min-height: 0;
+}
+
+.color-picker-combo .precolors .color {
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+}
+
 hex-color-picker {
   width: 180px;
   height: 120px;