rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ensure checkboxes have contrast

This commit is contained in:
LenAnderson 2023-11-21 01:26:43 +00:00
parent 1c725879d8
commit 9f16b329c5
2 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/scripts/power-user.js
View File

@ -917,6 +917,11 @@ function applyChatWidth(type) {
async function applyThemeColor(type) {
if (type === 'main') {
document.documentElement.style.setProperty('--SmartThemeBodyColor', power_user.main_text_color);
const color = power_user.main_text_color.split('(')[1].split(')')[0].split(',');
document.documentElement.style.setProperty('--SmartThemeCheckboxBgColorR', color[0]);
document.documentElement.style.setProperty('--SmartThemeCheckboxBgColorG', color[1]);
document.documentElement.style.setProperty('--SmartThemeCheckboxBgColorB', color[2]);
document.documentElement.style.setProperty('--SmartThemeCheckboxBgColorA', color[3]);
}
if (type === 'italics') {
document.documentElement.style.setProperty('--SmartThemeEmColor', power_user.italics_text_color);

21
public/style.css
View File

@ -58,6 +58,25 @@
--SmartThemeBlurStrength: calc(var(--blurStrength) * 1px);
--SmartThemeShadowColor: rgba(0, 0, 0, 0.5);
--SmartThemeBorderColor: rgba(0, 0, 0, 0.5);
--SmartThemeCheckboxBgColorR: 220;
--SmartThemeCheckboxBgColorG: 220;
--SmartThemeCheckboxBgColorB: 210;
--SmartThemeCheckboxTickColorValue: calc(
(
(
(
(var(--SmartThemeCheckboxBgColorR) * 299) +
(var(--SmartThemeCheckboxBgColorG) * 587) +
(var(--SmartThemeCheckboxBgColorB) * 114)
) / 1000
) - 128
) * -1000
);
--SmartThemeCheckboxTickColor: rgb(
var(--SmartThemeCheckboxTickColorValue),
var(--SmartThemeCheckboxTickColorValue),
var(--SmartThemeCheckboxTickColorValue)
);
--sheldWidth: 50vw;
@ -2242,7 +2261,7 @@ input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
height: 0.65em;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(--SmartThemeBlurTintColor);
box-shadow: inset 1em 1em var(--SmartThemeCheckboxTickColor);
transform-origin: bottom left;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}