From 8e162e4163952d8b46b6fcd3e8abb8d920282f36 Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Thu, 27 Jun 2024 15:43:50 +0000
Subject: [PATCH] Make colour and emoticon pickers follow selected theme.

---
 src/mami.css/colpick.css | 71 +++++++++++++++++++++-------------------
 src/mami.css/emopick.css | 32 +++++++++++-------
 2 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/src/mami.css/colpick.css b/src/mami.css/colpick.css
index 3532f12..2b4df74 100644
--- a/src/mami.css/colpick.css
+++ b/src/mami.css/colpick.css
@@ -1,13 +1,12 @@
 .colpick {
     accent-color: var(--colpick-colour, #000);
-    border: 2px solid var(--colpick-colour, #000);
     padding: 2px;
     display: flex;
     flex-direction: column;
     position: absolute;
-    background-color: #444;
-    color: #fff;
-    box-shadow: 0 3px 10px #000;
+    background-color: var(--theme-colour-input-menu-background);
+    box-shadow: 0 2px 10px var(--theme-colour-input-menu-box-shadow);
+    border: 1px solid var(--theme-colour-sidebar-background);
 }
 
 .colpick-tabbed {
@@ -15,38 +14,36 @@
     margin-bottom: 3px;
 }
 .colpick-tabbed-container {
-    border: 2px solid var(--colpick-colour, #000);
     height: 234px;
     overflow: auto;
     scrollbar-width: thin;
+    background-color: var(--theme-colour-sidebar-background);
 }
 .colpick-tabbed-list {
-    background-color: #222;
     overflow: auto;
 }
 
 .colpick-tab-button {
-    background: #333;
-    color: #fff;
+    background: transparent;
+    color: inherit;
     border-radius: 0;
     border-width: 0;
     display: inline-block;
-    padding: 3px 5px;
+    padding: 4px 10px;
     height: 24px;
     margin-right: 1px;
     cursor: pointer;
+    transition: background .1s;
 }
-.colpick-tab-button:hover {
-    background: #444;
-    border-color: #444;
-}
+.colpick-tab-button:hover,
 .colpick-tab-button:focus {
-    border-color: #fff;
+    background: #fff4;
+}
+.colpick-tab-button:active {
+    background: #0004;
 }
 .colpick-tab-button-active {
-    background: var(--colpick-colour, #000);
-    border-color: var(--colpick-colour, #000);
-    color: var(--colpick-text, #000);
+    background: var(--theme-colour-sidebar-background) !important;
 }
 
 .colpick-middle-row {
@@ -89,16 +86,17 @@
 }
 .colpick-values-child-input {
     display: inline-block;
-    border: 1px solid #222;
-    background: #333;
+    border: 1px solid var(--theme-colour-settings-input-border);
+    background: var(--theme-colour-settings-input-background);
     border-radius: 0;
-    color: #fff;
-    padding: 1px;
+    color: inherit;
+    padding: 2px;
     width: 100px;
     outline-style: none;
+    transition: border .1s, background .1s;
 }
 .colpick-values-child-input:focus {
-    border-color: #777;
+    background: var(--theme-colour-settings-input-focus);
 }
 
 .colpick-buttons-container {
@@ -111,23 +109,27 @@
 }
 
 .colpick-buttons-button {
-    border-radius: 0;
-    background: #222;
-    border-width: 0;
-    color: #fff;
+    display: inline-block;
+    background: var(--theme-colour-settings-input-background);
+    border: 1px solid var(--theme-colour-settings-input-border);
+    border-radius: 5px;
+    color: inherit;
+    font-family: inherit;
     font-size: 1.1em;
     line-height: 1.2em;
     padding: 3px 10px;
     margin-left: 5px;
     cursor: pointer;
+    transition: background .1s;
+}
+.colpick-buttons-button:hover {
+    background: var(--theme-colour-settings-input-focus);
 }
 .colpick-buttons-button:focus {
     box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #fff;
 }
 .colpick-buttons-button-submit {
     font-weight: 700;
-    color: var(--colpick-text, #fff);
-    background: var(--colpick-colour, #000);
 }
 
 .colpick-tab-container {}
@@ -151,7 +153,7 @@
     height: 42px;
     border-radius: 0;
     text-decoration: none;
-    color: #fff;
+    color: inherit;
     cursor: pointer;
 }
 .colpick-presets-option:focus {
@@ -211,16 +213,17 @@
 }
 .colpick-slider-value-input {
     display: inline-block;
-    border: 1px solid #222;
-    background: #333;
+    border: 1px solid var(--theme-colour-settings-input-border);
+    background: var(--theme-colour-settings-input-background);
     border-radius: 0;
-    color: #fff;
-    padding: 1px;
+    color: inherit;
+    padding: 2px;
     width: 50px;
     outline-style: none;
+    transition: border .1s, background .1s;
 }
 .colpick-slider-value-input:focus {
-    border-color: #777;
+    background: var(--theme-colour-settings-input-focus);
 }
 .colpick-slider-red .colpick-slider-value-input:focus {
     border-color: #f00;
diff --git a/src/mami.css/emopick.css b/src/mami.css/emopick.css
index 23e943b..9397b5e 100644
--- a/src/mami.css/emopick.css
+++ b/src/mami.css/emopick.css
@@ -3,10 +3,10 @@
     display: flex;
     flex-direction: column;
     position: absolute;
-    background-color: #444;
-    color: #fff;
-    box-shadow: 0 3px 10px #000;
-    max-width: 334px;
+    background-color: var(--theme-colour-input-menu-background);
+    box-shadow: 0 2px 10px var(--theme-colour-input-menu-box-shadow);
+    border: 1px solid var(--theme-colour-sidebar-background);
+    max-width: 336px;
     width: 100%;
 }
 
@@ -41,7 +41,7 @@
     height: 100%;
     overflow: auto;
     scrollbar-width: thin;
-    background: #333;
+    background: var(--theme-colour-sidebar-background);
 }
 .emopick-list-scroll {
     display: flex;
@@ -61,7 +61,7 @@
     border: 0;
     border-radius: 0;
     color: inherit;
-    background: #333;
+    background: var(--theme-colour-sidebar-background);
     font-size: inherit;
     font-family: inherit;
 }
@@ -82,13 +82,21 @@
 }
 
 .emopick-action-button {
-    display: block;
-    border: 0;
-    border-radius: 0;
-    background: #555;
-    color: #fff;
+    display: inline-block;
+    background: var(--theme-colour-settings-input-background);
+    border: 1px solid var(--theme-colour-settings-input-border);
+    border-radius: 5px;
+    color: inherit;
     font-family: inherit;
-    padding: 0 4px;
+    font-size: 1.1em;
+    line-height: 1.2em;
+    padding: 3px 10px;
+    margin-left: 5px;
+    cursor: pointer;
+    transition: background .1s;
+}
+.emopick-action-button:hover {
+    background: var(--theme-colour-settings-input-focus);
 }
 .emopick-action-button:focus {
     box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #fff;