From e9d4a982c0a7c3fabcaff379f1ba1c4b34db4913 Mon Sep 17 00:00:00 2001
From: Wolfsblvt <wolfsblvt@gmx.de>
Date: Mon, 3 Jun 2024 06:19:41 +0200
Subject: [PATCH] Small tweaks to (focus) element styling

---
 public/css/popup.css       |  9 +----
 public/css/st-tailwind.css |  8 ++++
 public/css/tags.css        |  8 ++--
 public/index.html          | 10 ++---
 public/scripts/keyboard.js | 12 ++++--
 public/style.css           | 75 ++++++++++++++++++++++++--------------
 6 files changed, 77 insertions(+), 45 deletions(-)

diff --git a/public/css/popup.css b/public/css/popup.css
index d5cf0a626..de9a332e2 100644
--- a/public/css/popup.css
+++ b/public/css/popup.css
@@ -29,6 +29,7 @@ dialog {
     overflow: hidden;
     width: 100%;
     height: 100%;
+    padding: 1px;
 }
 
 .popup .popup_text {
@@ -113,12 +114,6 @@ dialog {
 }
 
 .menu_button.menu_button_custom {
-    /** Custom buttons should not scale to smallest size, otherwise they will always break to multiline */
+    /* Custom buttons should not scale to smallest size, otherwise they will always break to multiline */
     width: unset;
 }
-
-dialog.popup .menu_button:focus,
-dialog input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin):focus {
-    /** For dialogs, mimic the outline of keyboard navigation for all button focus */
-    outline: 1px solid white;
-}
diff --git a/public/css/st-tailwind.css b/public/css/st-tailwind.css
index 8532a90df..fa39ce09d 100644
--- a/public/css/st-tailwind.css
+++ b/public/css/st-tailwind.css
@@ -336,6 +336,14 @@
     padding: 0;
 }
 
+.padding1 {
+    padding: 0;
+}
+
+.padding2 {
+    padding: 0;
+}
+
 .padding5 {
     padding: 5px;
 }
diff --git a/public/css/tags.css b/public/css/tags.css
index 1912a541b..b58aea035 100644
--- a/public/css/tags.css
+++ b/public/css/tags.css
@@ -14,7 +14,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 10px;
+    gap: 6px;
     margin-bottom: 5px;
 }
 
@@ -39,7 +39,7 @@
 }
 
 .tag_delete {
-    padding-right: 0;
+    padding: 2px 4px;
     color: var(--SmartThemeBodyColor) !important;
 }
 
@@ -162,7 +162,8 @@
     transition: opacity 200ms;
 }
 
-.rm_tag_filter .tag:hover {
+.rm_tag_filter .tag:hover,
+.rm_tag_filter .tag:focus {
     opacity: 1;
     filter: brightness(1);
 }
@@ -206,6 +207,7 @@
 }
 
 .tag_as_folder:hover,
+.tag_as_folder:focus,
 .tag_as_folder.flash {
     filter: brightness(150%) saturate(0.6) !important;
 }
diff --git a/public/index.html b/public/index.html
index e77349231..510aea077 100644
--- a/public/index.html
+++ b/public/index.html
@@ -74,8 +74,8 @@
                 <div id="lm_button_panel_pin_div" title="Locked = AI Configuration panel will stay open" data-i18n="[title]AI Configuration panel will stay open">
                     <input type="checkbox" id="lm_button_panel_pin">
                     <label for="lm_button_panel_pin">
-                        <div class="unchecked fa-solid fa-unlock "></div>
-                        <div class="checked fa-solid fa-lock "></div>
+                        <div class="unchecked fa-solid fa-unlock right_menu_button"></div>
+                        <div class="checked fa-solid fa-lock right_menu_button"></div>
                     </label>
                 </div>
                 <div id="clickSlidersTips" data-i18n="clickslidertips" class="toggle-description wide100p editable-slider-notification">
@@ -4472,8 +4472,8 @@
                         <div id="rm_button_panel_pin_div" class="alignitemsflexstart" title="Locked = Character Management panel will stay open" data-i18n="[title]Locked = Character Management panel will stay open">
                             <input type="checkbox" id="rm_button_panel_pin">
                             <label for="rm_button_panel_pin">
-                                <div class="fa-solid unchecked  fa-unlock" alt=""></div>
-                                <div class="fa-solid checked  fa-lock" alt=""></div>
+                                <div class="fa-solid unchecked fa-unlock right_menu_button" alt=""></div>
+                                <div class="fa-solid checked fa-lock right_menu_button" alt=""></div>
                             </label>
                         </div>
                         <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters" data-i18n="[title]Select/Create Characters"></div>
@@ -4487,7 +4487,7 @@
                 <div id="rm_PinAndTabs">
                     <div id="right-nav-panel-tabs" class="">
                         <div id="rm_button_selected_ch">
-                            <h2></h2>
+                            <h2 class="selectable"></h2>
                         </div>
                         <div id="result_info" class="flex-container" style="display: none;">
                             <div id="result_info_text" title="Token counts may be inaccurate and provided just for reference." data-i18n="[title]Token counts may be inaccurate and provided just for reference.">
diff --git a/public/scripts/keyboard.js b/public/scripts/keyboard.js
index 78e0f2200..88246bdcb 100644
--- a/public/scripts/keyboard.js
+++ b/public/scripts/keyboard.js
@@ -1,7 +1,8 @@
 /* All selectors that should act as keyboard buttons by default */
-const buttonSelectors = ['.menu_button', '.right_menu_button', '.clickable'];
+const buttonSelectors = ['.menu_button', '.right_menu_button', '.custom_selectable_button', '.selectable_button'];
 
-const CUSTOM_CLICKABLE_BUTTON_CLASS = 'clickable';
+const SELECTABLE_BUTTON_CLASS = 'selectable_button';
+const CUSTOM_SELECTABE_BUTTON_CLASS = 'custom_selectable_button';
 
 const NOT_FOCUSABLE_CLASS = 'not_focusable';
 const DISABLED_CLASS = 'disabled';
@@ -80,7 +81,12 @@ export function enableKeyboardButton(...buttons) {
     buttons.forEach(button => {
         // If this button doesn't have any of the classes, lets say the caller knows this and wants this to be a custom-enabled keyboard button.
         if (!isKeyboardButton(button)) {
-            button.classList.add(CUSTOM_CLICKABLE_BUTTON_CLASS);
+            button.classList.add(CUSTOM_SELECTABE_BUTTON_CLASS);
+        }
+
+        // Just for CSS styling and future reference, every keyboard selectable control should have a common class
+        if (!button.classList.contains(SELECTABLE_BUTTON_CLASS)) {
+            button.classList.add(SELECTABLE_BUTTON_CLASS);
         }
 
         // Set/remove the tabindex accordingly to the classes. Remembering if it had a custom value.
diff --git a/public/style.css b/public/style.css
index cfc0b6974..715b1d3bd 100644
--- a/public/style.css
+++ b/public/style.css
@@ -211,6 +211,26 @@ table.responsiveTable {
     animation-name: flash;
 }
 
+/* Keyboard/focus navigation styling */
+/** Mimic the outline of keyboard navigation for most most focusable controls */
+.selectable_button {
+    border-radius: 5px;
+}
+
+.selectable_button:focus {
+    outline: 1px solid var(--white100);
+}
+
+select:focus,
+input:focus,
+textarea:focus {
+    outline: 1px solid var(--white30a);
+}
+
+input[type='checkbox']:focus {
+    outline: 1px solid var(--white100);
+}
+
 /* General dragover styling */
 .dragover {
     filter: brightness(1.1) saturate(1.0);
@@ -244,6 +264,11 @@ table.responsiveTable {
     text-align: center;
 }
 
+.fa-lock.right_menu_button,
+.fa-unlock.right_menu_button {
+    padding: 2 4px;
+}
+
 .text_muted {
     font-size: calc(var(--mainFontSize) - 0.2rem);
     color: var(--white50a);
@@ -1993,9 +2018,13 @@ body[data-stscript-style] .hljs.language-stscript {
     }
 }
 
+.editor_maximize {
+    padding: 2px;
+}
+
 #character_popup .editor_maximize {
     cursor: pointer;
-    margin: 5px;
+    margin: 3px;
     opacity: 0.75;
     filter: grayscale(1);
     -webkit-transition: all 250ms ease-in-out;
@@ -2106,12 +2135,6 @@ h3 {
     padding: 5px 0;
 }
 
-input:focus,
-textarea:focus,
-select:focus {
-    outline: none;
-}
-
 input[type="file"] {
     display: none;
 }
@@ -2132,12 +2155,6 @@ input[type="file"] {
     padding: 0px 10px 0px 5px;
 }
 
-#right-nav-panel-tabs .right_menu_button,
-#CharListButtonAndHotSwaps .right_menu_button {
-    padding-right: 0;
-    color: unset;
-}
-
 #chartokenwarning.menu_button {
     font-size: unset;
     height: fit-content;
@@ -2153,13 +2170,15 @@ input[type="file"] {
     cursor: pointer;
     text-align: center;
     margin-top: 0;
+    padding: 1px;
     filter: grayscale(1) brightness(75%);
     -webkit-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out;
 }
 
-.right_menu_button:hover {
-    filter: brightness(150%) grayscale(1);
+.right_menu_button:hover,
+.right_menu_button:focus {
+    filter: brightness(150%);
 }
 
 #rm_button_characters,
@@ -2168,6 +2187,7 @@ input[type="file"] {
 #WI_button_panel_pin_div {
     font-size: 24px;
     display: inline;
+    padding: 1px;
 }
 
 #rm_button_panel_pin_div,
@@ -2178,8 +2198,11 @@ input[type="file"] {
 }
 
 #rm_button_panel_pin_div:hover,
+#rm_button_panel_pin_div:focus-within,
 #lm_button_panel_pin_div:hover,
-#WI_button_panel_pin_div:hover {
+#lm_button_panel_pin_div:focus-within,
+#WI_button_panel_pin_div:hover,
+#WI_button_panel_pin_div:focus-within {
     opacity: 1;
 }
 
@@ -2254,6 +2277,7 @@ input[type="file"] {
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
+    padding: 1px;
 }
 
 .bulk_select_checkbox {
@@ -2296,7 +2320,7 @@ input[type="file"] {
 #rm_ch_create_block {
     display: none;
     overflow-y: auto;
-    padding: 5px;
+    padding: 4px;
     height: 100%;
 }
 
@@ -2806,6 +2830,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     flex-direction: column;
     height: 100%;
     overflow-y: auto;
+    padding: 1px;
 }
 
 .avatar_div {
@@ -2995,6 +3020,7 @@ grammarly-extension {
     display: flex;
     align-items: center;
     gap: 10px;
+    padding: 1px 3px;
 }
 
 #result_info_text {
@@ -3327,7 +3353,7 @@ body #toast-container>div {
     display: block;
 }
 
-input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin) {
+input[type='checkbox'] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
@@ -3345,13 +3371,10 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
     flex-shrink: 0;
     place-content: center;
     filter: brightness(1.2);
-}
-
-input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin):not(.del_checkbox) {
     display: grid;
 }
 
-input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin)::before {
+input[type="checkbox"]::before {
     content: "";
     width: 0.65em;
     height: 0.65em;
@@ -3362,16 +3385,16 @@ input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
     clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
 }
 
-input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin):checked::before {
+input[type="checkbox"]:checked::before {
     transform: scale(1);
 }
 
-input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin):disabled {
+input[type="checkbox"]:disabled {
     color: grey;
     cursor: not-allowed;
 }
 
-.del_checkbox {
+input[type='checkbox'].del_checkbox {
     display: none;
     opacity: 0.7;
     margin-top: 12px;
@@ -5089,5 +5112,3 @@ body:not(.movingUI) .drawer-content.maximized {
 .regex-highlight {
     color: #FAF8F6;
 }
-
-/* Pastel White */