Add Border Color Control

public/css/mobile-styles.css

@@ -78,7 +78,7 @@
         position: fixed;
         left: 0;
         top: 5px;
-        border: 1px solid var(--grey30);
+        border: 1px solid var(--SmartThemeBorderColor);
     }
 
     #select_chat_popup {
@@ -134,15 +134,15 @@
 
     #character_popup,
     #send_form {
-        border: 1px solid var(--grey30);
+        border: 1px solid var(--SmartThemeBorderColor);
         backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
         max-width: 100dvw;
     }
 
     #chat {
-        border-left: 1px solid var(--grey30);
+        border-left: 1px solid var(--SmartThemeBorderColor);
-        border-right: 1px solid var(--grey30);
+        border-right: 1px solid var(--SmartThemeBorderColor);
-        border-bottom: 1px solid var(--grey30);
+        border-bottom: 1px solid var(--SmartThemeBorderColor);
         align-items: start;
         align-content: start;
         overflow-y: auto;
@@ -175,9 +175,9 @@
         width: 100% !important;
         max-width: 100% !important;
         overflow-y: hidden;
-        border-left: 1px solid var(--grey30);
+        border-left: 1px solid var(--SmartThemeBorderColor);
-        border-right: 1px solid var(--grey30);
+        border-right: 1px solid var(--SmartThemeBorderColor);
-        border-bottom: 1px solid var(--grey30);
+        border-bottom: 1px solid var(--SmartThemeBorderColor);
         border-radius: 0 0 20px 20px;
         top: var(--topBarBlockSize) !important;
         left: 0 !important;
@@ -418,4 +418,4 @@
     #horde_model {
         height: unset;
     }
-}
+}

public/css/promptmanager.css

@@ -54,7 +54,7 @@
 #completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt {
     align-items: center;
     padding: 0.5em;
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
 }
 
 #completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt .prompt_manager_prompt_controls {
@@ -109,7 +109,7 @@
 #completion_prompt_manager_popup .completion_prompt_manager_prompt {
     margin: 1em 0;
     padding: 0.5em;
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
 }
 
 #completion_prompt_manager_popup .completion_prompt_manager_popup_header {
@@ -265,7 +265,7 @@
     top: var(--topBarBlockSize);
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
     padding: 1em;
-    border: 1px solid #333333;
+    border: 1px solid var(--SmartThemeBorderColor);
     flex-direction: column;
     z-index: 3010 !important;
     border-radius: 0 0 20px 20px;

public/css/rm-groups.css

@@ -14,7 +14,8 @@
     margin-top: auto;
     margin-bottom: auto;
     color: rgb(188, 193, 200, 1);
-    border: 1px solid #333;
+    border: 1px solid var(--SmartThemeBorderColor);
+    ;
     background-color: rgba(0, 0, 0, 0.3);
     padding: 6px;
     border-radius: 10px;
@@ -61,7 +62,8 @@
 #rm_group_add_members {
     margin-top: 0.25rem;
     margin-bottom: 0.5rem;
-    border: 1px solid grey;
+    border: 1px solid var(--SmartThemeBorderColor);
+    ;
     border-radius: 10px;
     background-color: var(--black30a);
 }

public/css/select2-overrides.css

@@ -6,7 +6,7 @@
 /* Customize the dropdown */
 .select2-dropdown {
     background-color: var(--SmartThemeBlurTintColor);
-    border: 1px solid var(--white30a) !important;
+    border: 1px solid var(--SmartThemeBorderColor) !important;
     border-radius: 10px;
     box-shadow: 0 0 5px black;
     text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
@@ -35,7 +35,7 @@
 
 .select2-container .select2-selection--multiple .select2-selection__choice__remove {
     padding: revert;
-    border-right: 1px solid var(--white30a);
+    border-right: 1px solid var(--SmartThemeBorderColor);
     font-size: 1.1em;
 }
 
@@ -47,7 +47,7 @@
 .select2-search__field {
     background-color: var(--black30a);
     color: var(--SmartThemeBodyColor);
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 7px;
     font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
     padding: 3px 5px;
@@ -75,7 +75,7 @@
 .select2-container .select2-selection--single {
     background-color: var(--black30a);
     color: var(--SmartThemeBodyColor);
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 7px;
     font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
     padding: 3px 5px;
@@ -83,7 +83,7 @@
 
 .select2-container.select2-container--focus .select2-selection--multiple,
 .select2-container.select2-container--focus .select2-selection--single {
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
 }
 
 .select2-container .select2-selection--multiple .select2-selection__choice,
@@ -94,7 +94,7 @@
     box-sizing: border-box;
     color: var(--SmartThemeBodyColor);
     background-color: var(--black30a);
-    border-color: var(--white30a);
+    border-color: var(--SmartThemeBorderColor);
     font-size: calc(var(--mainFontSize) - 5%);
     text-shadow: none !important;
 }
@@ -130,7 +130,7 @@
     margin-top: -7px;
     width: 14px;
     height: 14px;
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     background-color: var(--SmartThemeBlurTintColor);
     border-radius: 2px;
 }
@@ -148,4 +148,4 @@
     background-color: var(--SmartThemeBlurTintColor);
     text-align: center;
     line-height: 14px;
-}
+}

public/css/toggle-dependent.css

@@ -117,7 +117,7 @@ body.big-avatars .avatar img {
     height: 90px;
     object-fit: cover;
     object-position: center;
-    border: 1px solid var(--black30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 10px;
 }
 
@@ -191,7 +191,7 @@ body.bubblechat .mes {
     border-radius: 10px;
     background-color: var(--SmartThemeBotMesBlurTintColor);
     margin-bottom: 5px;
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
 }
 
 body.bubblechat .mes[is_user="true"] {
@@ -281,7 +281,7 @@ body.no-blur .select2-results__options {
 
 body.waifuMode #top-bar {
     border-radius: 0 0 20px 20px;
-    border: 1px solid var(--grey30a);
+    border: 1px solid var(--SmartThemeBorderColor);
 }
 
 body.waifuMode #sheld {
@@ -292,7 +292,7 @@ body.waifuMode #sheld {
 }
 
 body.waifuMode #chat {
-    border-top: 1px solid var(--grey30a);
+    border-top: 1px solid var(--SmartThemeBorderColor);
     border-radius: 20px 20px 0 0;
 }
 
@@ -367,4 +367,4 @@ body.expandMessageActions .mes .mes_buttons .extraMesButtons {
 
 body.expandMessageActions .mes .mes_buttons .extraMesButtonsHint {
     display: none !important;
-}
+}

public/index.html

@@ -822,7 +822,7 @@
                                         <div class="range-block m-t-1">
                                             <div class="range-block-title openai_restorable" data-i18n="Continue nudge">
                                                 <span>Continue nudge</span>
-                                                <div id="continue_nudge_prompt_restore" title="Restore new chat prompt" class="right_menu_button" >
+                                                <div id="continue_nudge_prompt_restore" title="Restore new chat prompt" class="right_menu_button">
                                                     <div class="fa-solid fa-clock-rotate-left"></div>
                                                 </div>
                                             </div>
@@ -1735,7 +1735,7 @@
 
                                 <h4 data-i18n="API key">API key</h4>
                                 <small>
-                                <span data-i18n="Get it here:">Get it here: </span> <a target="_blank" href="https://horde.koboldai.net/register" data-i18n="Register">Register</a> (<a id="horde_kudos" href="javascript:void(0);" data-i18n="View my Kudos">View my Kudos</a>)<br>
+                                    <span data-i18n="Get it here:">Get it here: </span> <a target="_blank" href="https://horde.koboldai.net/register" data-i18n="Register">Register</a> (<a id="horde_kudos" href="javascript:void(0);" data-i18n="View my Kudos">View my Kudos</a>)<br>
                                     <span data-i18n="Enter">Enter </span> <span class="monospace">0000000000</span> <span data-i18n="to use anonymous mode.">to use anonymous mode. </span>
                                 </small>
                                 <!-- <div>
@@ -2711,6 +2711,10 @@
                                     <toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
                                     <span data-i18n="Blur Tint">UI Background</span>
                                 </div>
+                                <div class="flex-container">
+                                    <toolcool-color-picker id="border-color-picker"></toolcool-color-picker>
+                                    <span data-i18n="UI Border">UI Border</span>
+                                </div>
                                 <div class="flex-container">
                                     <toolcool-color-picker id="user-mes-blur-tint-color-picker"></toolcool-color-picker>
                                     <span data-i18n="User Message Blur Tint">User Message</span>
@@ -4532,4 +4536,4 @@
     </script>
 </body>
 
-</html>
+</html>

public/scripts/extensions/backgrounds/style.css

@@ -6,7 +6,7 @@
     background-attachment: fixed;
     background-size: cover;
     border-radius: 20px;
-    border: 1px solid var(--black50a);
+    border: 1px solid var(--SmartThemeBorderColor);
     box-shadow: 0 0 7px var(--black50a);
     margin: 5px;
 }

public/scripts/extensions/quick-reply/style.css

@@ -1,7 +1,7 @@
 #quickReplyBar {
     outline: none;
     padding: 5px 0;
-    border-bottom: 1px solid var(--black30a);
+    border-bottom: 1px solid var(--SmartThemeBorderColor);
     margin: 0;
     transition: 0.3s;
     opacity: 0.7;
@@ -28,7 +28,7 @@
 #quickReplies div {
     color: var(--SmartThemeBodyColor);
     background-color: var(--black50a);
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 10px;
     padding: 3px 5px;
     width: min-content;
@@ -44,4 +44,4 @@
     opacity: 1;
     filter: brightness(1.2);
     cursor: pointer;
-}
+}

public/scripts/extensions/regex/style.css

@@ -12,9 +12,9 @@
 
 .regex-script-label {
     align-items: center;
-    border: 1px solid rgba(128, 128, 128, 0.5);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 10px;
     padding: 0 5px;
     margin-top: 1px;
     margin-bottom: 1px;
-}
+}

public/scripts/power-user.js

@@ -126,6 +126,8 @@ let power_user = {
     user_mes_blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeUserMesBlurTintColor').trim()}`,
     bot_mes_blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBotMesBlurTintColor').trim()}`,
     shadow_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeShadowColor').trim()}`,
+    border_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBorderColor').trim()}`,
+
 
     waifuMode: false,
     movingUI: false,
@@ -227,6 +229,7 @@ const storage_keys = {
     blur_strength: "TavernAI_blur_strength",
     shadow_color: "TavernAI_shadow_color",
     shadow_width: "TavernAI_shadow_width",
+    border_color: "TavernAI_border_color",
 
     waifuMode: "TavernAI_waifuMode",
     movingUI: "TavernAI_movingUI",
@@ -522,6 +525,9 @@ async function applyThemeColor(type) {
     if (type === 'shadow') {
         document.documentElement.style.setProperty('--SmartThemeShadowColor', power_user.shadow_color);
     }
+    if (type === 'border') {
+        document.documentElement.style.setProperty('--SmartThemeBorderColor', power_user.border_color);
+    }
 }
 
 async function applyBlurStrength() {
@@ -572,6 +578,7 @@ async function applyTheme(name) {
         { key: 'user_mes_blur_tint_color', selector: '#user-mes-blur-tint-color-picker', type: 'userMesBlurTint' },
         { key: 'bot_mes_blur_tint_color', selector: '#bot-mes-blur-tint-color-picker', type: 'botMesBlurTint' },
         { key: 'shadow_color', selector: '#shadow-color-picker', type: 'shadow' },
+        { key: 'border_color', selector: '#border-color-picker', type: 'border' },
         {
             key: 'blur_strength',
             action: async () => {
@@ -890,6 +897,7 @@ function loadPowerUserSettings(settings, data) {
     $("#user-mes-blur-tint-color-picker").attr('color', power_user.user_mes_blur_tint_color);
     $("#bot-mes-blur-tint-color-picker").attr('color', power_user.bot_mes_blur_tint_color);
     $("#shadow-color-picker").attr('color', power_user.shadow_color);
+    $("#border-color-picker").attr('color', power_user.border_color);
     $("#ui_mode_select").val(power_user.ui_mode).find(`option[value="${power_user.ui_mode}"]`).attr('selected', true);
 
     for (const theme of themes) {
@@ -1227,6 +1235,7 @@ async function saveTheme() {
         bot_mes_blur_tint_color: power_user.bot_mes_blur_tint_color,
         shadow_color: power_user.shadow_color,
         shadow_width: power_user.shadow_width,
+        border_color: power_user.border_color,
         font_scale: power_user.font_scale,
         fast_ui_mode: power_user.fast_ui_mode,
         waifuMode: power_user.waifuMode,
@@ -1945,6 +1954,12 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $("#border-color-picker").on('change', (evt) => {
+        power_user.border_color = evt.detail.rgba;
+        applyThemeColor('border');
+        saveSettingsDebounced();
+    });
+
     $("#themes").on('change', function () {
         const themeSelected = String($(this).find(':selected').val());
         power_user.theme = themeSelected;

public/style.css

@@ -51,6 +51,7 @@
     --SmartThemeBotMesBlurTintColor: rgba(60, 60, 60, 0.3);
     --SmartThemeBlurStrength: calc(var(--blurStrength) * 1px);
     --SmartThemeShadowColor: rgba(0, 0, 0, 0.5);
+    --SmartThemeBorderColor: rgba(0, 0, 0, 0.5);
 
 
     --sheldWidth: 50vw;
@@ -195,7 +196,7 @@ table.responsiveTable {
 
 .tokenGraph {
     border-radius: 10px;
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     max-height: 100%;
     overflow: hidden;
 }
@@ -335,7 +336,7 @@ code {
     font-family: Consolas, monospace;
     white-space: pre-wrap;
     /* word-wrap: break-word; */
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 5px;
     background-color: var(--black70a);
     padding: 0 3px;
@@ -346,7 +347,7 @@ code {
 
 
 hr {
-    background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent));
+    background-image: linear-gradient(90deg, var(--transparent), var(--SmartThemeBorderColor), var(--transparent));
     margin: 5px 0;
     height: 1px;
     min-height: 1px;
@@ -389,7 +390,7 @@ hr {
     display: inline-block;
     height: var(--bottomFormBlockSize);
     position: absolute;
-    border-bottom: 1px solid var(--grey30a);
+    border-bottom: 1px solid var(--SmartThemeBorderColor);
     box-shadow: 0 2px 20px 0 var(--black70a);
     backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--SmartThemeBlurTintColor);
@@ -432,7 +433,7 @@ hr {
     top: 0px;
     opacity: 0.5;
     cursor: grab;
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     cursor: -moz-grab;
     cursor: -webkit-grab;
     display: none;
@@ -480,9 +481,9 @@ hr {
     overflow-y: scroll;
     display: flex;
     bottom: 10px;
-    border-bottom: 1px solid var(--grey30a);
+    border-bottom: 1px solid var(--SmartThemeBorderColor);
-    border-left: 1px solid var(--grey30a);
+    border-left: 1px solid var(--SmartThemeBorderColor);
-    border-right: 1px solid var(--grey30a);
+    border-right: 1px solid var(--SmartThemeBorderColor);
     backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--SmartThemeBlurTintColor);
     -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
@@ -512,7 +513,7 @@ hr {
     align-items: center;
     width: 100%;
     margin: 0 auto 0 auto;
-    border: 1px solid var(--grey30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 0 0 10px 10px;
     background-color: var(--SmartThemeBlurTintColor);
     backdrop-filter: blur(var(--SmartThemeBlurStrength));
@@ -608,7 +609,7 @@ hr {
 .list-group {
     overflow: hidden;
     display: block;
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 10px;
     z-index: 2000;
     font-size: calc(var(--mainFontSize) * 1.1);
@@ -627,7 +628,7 @@ hr {
 .options-content hr {
     margin: 0;
     padding: 0;
-    border-top: 1px solid var(--white30a);
+    border-top: 1px solid var(--SmartThemeBorderColor);
     background: none;
 }
 
@@ -827,7 +828,7 @@ hr {
     height: 100%;
     object-fit: cover;
     object-position: center;
-    border: 1px solid var(--black30a);
+    border: 1px solid var(--SmartThemeBorderColor);
 }
 
 .hotswapAvatar .avatar {
@@ -846,7 +847,8 @@ hr {
     object-fit: cover;
     object-position: center center;
     border-radius: 50%;
-    border: 1px solid var(--black30a);
+    border: 1px solid var(--SmartThemeBorderColor);
+    /*--black30a*/
     box-shadow: 0 0 5px var(--black50a);
 }
 
@@ -881,7 +883,7 @@ textarea {
     display: block;
     background-color: var(--black30a);
     outline: none;
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 7px;
     color: var(--SmartThemeBodyColor);
     font-size: var(--mainFontSize);
@@ -971,7 +973,7 @@ select {
 .text_pole {
     background-color: var(--black30a);
     color: var(--SmartThemeBodyColor);
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 7px;
     font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
     padding: 3px 5px;
@@ -1193,7 +1195,7 @@ input[type="file"] {
     min-width: 100px;
     min-height: 100px;
     border-radius: 10px;
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     position: fixed;
     padding: 10px;
     padding-top: 25px;
@@ -1271,7 +1273,7 @@ select {
 
     padding: 3px 2px;
     background-color: var(--black30a);
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 7px;
     margin-bottom: 5px;
     height: min-content;
@@ -1515,7 +1517,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     background-size: cover;
     background-position: center;
     border-radius: 10px;
-    border: 1px solid var(--black50a);
+    border: 1px solid var(--SmartThemeBorderColor);
     box-shadow: 0 0 7px var(--black50a);
     margin: 5px;
     cursor: pointer;
@@ -1673,7 +1675,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     border-radius: 5px;
     font-weight: 500;
     color: var(--SmartThemeQuoteColor);
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 10px;
     cursor: pointer;
     transition: 0.2s;
@@ -1803,7 +1805,7 @@ grammarly-extension {
     transform: translateY(-50%);
     text-align: center;
     box-shadow: 0px 0px 14px var(--black70a);
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     padding: 4px;
     background-color: var(--black50a);
     border-radius: 10px;
@@ -1890,7 +1892,7 @@ grammarly-extension {
 .menu_button {
     color: var(--SmartThemeBodyColor);
     background-color: var(--black50a);
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 7px;
     padding: 3px 5px;
     width: min-content;
@@ -1969,7 +1971,7 @@ grammarly-extension {
     border-radius: 5px;
     color: var(--SmartThemeBodyColor);
     background-color: var(--black30a);
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     cursor: grab;
     transition: background-color 200ms ease-in-out;
     position: relative;
@@ -1985,7 +1987,7 @@ grammarly-extension {
 }
 
 .prompt_order>div:hover {
-    background-color: var(--grey30a);
+    background-color: var(--SmartThemeBorderColor);
 }
 
 .prompt_order>div::after {
@@ -2223,7 +2225,7 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
     display: block;
     cursor: text;
     background-color: var(--black30a);
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 5px;
     padding: 2px;
     flex: 1;
@@ -2489,7 +2491,7 @@ input[type="range"]::-webkit-slider-thumb {
     top: var(--topBarBlockSize);
     box-shadow: 0 0 20px var(--black70a);
     padding: 10px;
-    border: 1px solid var(--black30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 0 0 10px 10px;
     overflow-y: auto;
 }
@@ -2589,7 +2591,7 @@ h5 {
     background-color: var(--SmartThemeBlurTintColor);
     border-radius: 10px;
     overflow-y: auto;
-    border: 1px solid var(--grey30);
+    border: 1px solid var(--SmartThemeBorderColor);
 }
 
 #export_div {
@@ -2634,7 +2636,7 @@ h5 {
 .select_chat_block {
     border-radius: 10px;
     margin-top: 10px;
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     padding: 10px;
     display: grid;
     grid-template-columns: min-content auto;
@@ -2742,7 +2744,7 @@ body .ui-front {
 
 body .ui-widget-content {
     background-color: var(--SmartThemeBlurTintColor);
-    border: 1px solid var(--white30a) !important;
+    border: 1px solid var(--SmartThemeBorderColor) !important;
     border-radius: 10px;
     box-shadow: 0 0 5px black;
     text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
@@ -2921,7 +2923,7 @@ a {
     overflow: hidden;
     background-color: var(--SmartThemeBlurTintColor);
     backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2));
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 10px;
     box-shadow: 0 0 5px black;
     text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
@@ -2949,9 +2951,9 @@ a {
     background-color: var(--SmartThemeBlurTintColor);
     -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     z-index: 3000;
-    border: 0;
+
-    border-left: 1px solid var(--grey30a);
+    border: 1px solid var(--SmartThemeBorderColor);
-    border-bottom: 1px solid var(--grey30a);
+
     box-shadow: none;
     border-radius: 10px;
     overflow: hidden;
@@ -3046,7 +3048,7 @@ a {
     margin-bottom: 5px;
     border-radius: 10px;
     padding: 5px;
-    border: 1px solid var(--grey30);
+    border: 1px solid var(--SmartThemeBorderColor);
     transition: all 250ms;
 }
 
@@ -3158,7 +3160,7 @@ a {
     color: var(--SmartThemeBodyColor);
     border-radius: 10px;
     padding: 5px;
-    border: 1px solid var(--grey30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     box-shadow: 0 0 20px black;
     min-width: 450px;
     width: var(--sheldWidth);
@@ -3201,7 +3203,7 @@ a {
     border-radius: 10px;
     box-shadow: none;
     overflow: hidden;
-    border: 1px solid var(--grey30a);
+    border: 1px solid var(--SmartThemeBorderColor);
 }
 
 .scrollableInner {
@@ -3219,7 +3221,7 @@ a {
 }
 
 .settingsSectionWrap {
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 10px;
     padding: 5px;
 }
@@ -3383,7 +3385,7 @@ a {
     margin-top: 12px !important;
     border-radius: 5px;
     padding: 3px;
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
 }
 
 .neutral_warning {
@@ -3486,7 +3488,6 @@ a {
 }
 
 .zoomed_avatar img {
-    /* border: 1px solid var(--white50a); */
     border-radius: 20px;
     height: 100%;
     width: 100%;
@@ -3546,7 +3547,7 @@ a {
     padding: 0.05em 0.5em;
     text-decoration: none;
     color: var(--SmartThemeBodyColor);
-    border: 1px solid var(--white30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 5px;
     transition: opacity 0.2s;
     opacity: 0.8;
@@ -3631,4 +3632,4 @@ a {
         height: 100vh;
         z-index: 9999;
     }
-}
+}