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

Add style on hover over focused popup button

Browse Source 
- Add CSS styling rule to still highlight a button on hover when it is being focused already (Otherwise you won't get any effect on hovering and clicking on the default button if a popup has just opened)
- Dynamic styles extended to ignore rules where both hover and focus is used
This commit is contained in:
Wolfsblvt
2024-06-16 23:33:07 +02:00
parent 316df6ed17
commit fca626d246
2 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/css/popup.css
View File

@@ -100,6 +100,10 @@ dialog {
gap: 20px; gap: 20px;
} }
.popup-controls .menu_button:focus-within {
outline: 1px solid var(--white100);
}
.menu_button.menu_button_default { .menu_button.menu_button_default {
box-shadow: 0 0 5px var(--white20a); box-shadow: 0 0 5px var(--white20a);
} }
@@ -117,3 +121,15 @@ dialog {
/* 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; width: unset;
} }
.popup-controls .menu_button {
/* Fix weird animation issue with fonts on brightness filter */
backface-visibility: hidden;
transform: translateZ(0);
-webkit-font-smoothing: subpixel-antialiased;
}
.popup-controls .menu_button:hover:focus-within {
filter: brightness(1.3) saturate(1.3);
}

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

@@ -55,10 +55,14 @@ function applyDynamicFocusStyles(styleSheet, { fromExtension = false } = {}) {
// We collect all hover and focus rules to be able to later decide which hover rules don't have a matching focus rule // We collect all hover and focus rules to be able to later decide which hover rules don't have a matching focus rule
selectors.forEach(selector => { selectors.forEach(selector => {
if (selector.includes(':hover')) { const isHover = selector.includes(':hover'), isFocus = selector.includes(':focus');
if (isHover && isFocus) {
// We currently do nothing here. Rules containing both hover and focus are very specific and should never be automatically touched
}
else if (isHover) {
const baseSelector = selector.replace(':hover', PLACEHOLDER).trim(); const baseSelector = selector.replace(':hover', PLACEHOLDER).trim();
hoverRules.push({ baseSelector, rule }); hoverRules.push({ baseSelector, rule });
} else if (selector.includes(':focus')) { } else if (isFocus) {
// We need to make sure that we both remember existing :focus and :focus-within rules // We need to make sure that we both remember existing :focus and :focus-within rules
const baseSelector = selector.replace(':focus-within', PLACEHOLDER).replace(':focus-visible', PLACEHOLDER).replace(':focus', PLACEHOLDER).trim(); const baseSelector = selector.replace(':focus-within', PLACEHOLDER).replace(':focus-visible', PLACEHOLDER).replace(':focus', PLACEHOLDER).trim();
focusRules.add(baseSelector); focusRules.add(baseSelector);