Add style on hover over focused popup button

- 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

public/css/popup.css

@@ -100,6 +100,10 @@ dialog {
     gap: 20px;
 }
 
+.popup-controls .menu_button:focus-within {
+    outline: 1px solid var(--white100);
+}
+
 .menu_button.menu_button_default {
     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 */
     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);
+}
+

public/scripts/dynamic-styles.js

@@ -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
                 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();
                         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
                         const baseSelector = selector.replace(':focus-within', PLACEHOLDER).replace(':focus-visible', PLACEHOLDER).replace(':focus', PLACEHOLDER).trim();
                         focusRules.add(baseSelector);