Add Border Color Control

This commit is contained in:
RossAscends 2023-09-16 15:42:26 +09:00
parent 57de6229f9
commit 124658a006
11 changed files with 98 additions and 76 deletions

View File

@ -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-right: 1px solid var(--grey30);
border-bottom: 1px solid var(--grey30);
border-left: 1px solid var(--SmartThemeBorderColor);
border-right: 1px solid var(--SmartThemeBorderColor);
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-right: 1px solid var(--grey30);
border-bottom: 1px solid var(--grey30);
border-left: 1px solid var(--SmartThemeBorderColor);
border-right: 1px solid var(--SmartThemeBorderColor);
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;
}
}
}

View File

@ -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;

View File

@ -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);
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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>

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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;

View File

@ -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-left: 1px solid var(--grey30a);
border-right: 1px solid var(--grey30a);
border-bottom: 1px solid var(--SmartThemeBorderColor);
border-left: 1px solid var(--SmartThemeBorderColor);
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-bottom: 1px solid var(--grey30a);
border: 1px solid var(--SmartThemeBorderColor);
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;
}
}
}