rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

More small improvements on interactable styling

Browse Source
This commit is contained in:
Wolfsblvt
2024-06-08 07:13:52 +02:00
parent 61906d8dbe
commit d1824acee0
5 changed files with 53 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/scripts/dynamic-styles.js
View File

@ -60,7 +60,7 @@ function applyDynamicFocusStyles(styleSheet, { fromExtension = false } = {}) {
hoverRules.push({ baseSelector, rule });
} else if (selector.includes(':focus')) {
// We need to make sure that we both remember existing :focus and :focus-within rules
const baseSelector = selector.replace(':focus-within', PLACEHOLDER).replace(':focus', PLACEHOLDER).trim();
const baseSelector = selector.replace(':focus-within', PLACEHOLDER).replace(':focus-visible', PLACEHOLDER).replace(':focus', PLACEHOLDER).trim();
focusRules.add(baseSelector);
}
});
@ -92,7 +92,10 @@ function applyDynamicFocusStyles(styleSheet, { fromExtension = false } = {}) {
// Only initialize the dynamic stylesheet if needed
targetStyleSheet ??= getDynamicStyleSheet({ fromExtension });
const focusSelector = rule.selectorText.replace(/:hover/g, ':focus');
// The closest keyboard-equivalent to :hover styling is utilizing the :focus-within for keyboards
// So we take all :hover rules that don't have a manually defined focus rule yet, and create their
// :focus-within counterpart, which will make the styling work the same for keyboard and mouse
const focusSelector = rule.selectorText.replace(/:hover/g, ':focus-within');
const focusRule = `${focusSelector} { ${rule.style.cssText} }`;
try {