Fix styling on Safari

src/_mixins.scss

@@ -0,0 +1,17 @@
+@mixin unfocused-style {
+  @content;
+
+  &:focus:not(:focus-visible):not(:hover) {
+    @content;
+  }
+}
+
+@mixin focused-style {
+  &:hover, &:focus {
+    @content;
+  }
+
+  &:focus-visible {
+    @content;
+  }
+}

src/components/extra_buttons/extra_buttons.vue

@@ -151,6 +151,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .ExtraButtons {
   /* override of popover internal stuff */
@@ -168,12 +169,13 @@
       color: var(--text, $fallback--text);
     }
 
-    .focus-marker,
+    @include unfocused-style {
-    &:focus:not(:focus-visible):not(:hover) .focus-marker {
+      .focus-marker {
-      visibility: hidden;
+        visibility: hidden;
+      }
     }
 
-    &:hover, &:focus, &:focus-visible {
+    @include focused-style {
       .focus-marker {
         visibility: visible;
       }

src/components/favorite_button/favorite_button.vue

@@ -53,6 +53,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .FavoriteButton {
   display: flex;
@@ -78,19 +79,21 @@
       color: var(--cOrange, $fallback--cOrange);
     }
 
-    .focus-marker,
+    @include unfocused-style {
-    &:focus:not(:focus-visible):not(:hover) .focus-marker {
+      .focus-marker {
-      visibility: hidden;
+        visibility: hidden;
+      }
+
+      .active-marker {
+        visibility: visible;
+      }
     }
 
-    &:focus:not(:focus-visible):not(:hover) .active-marker {
+    @include focused-style {
-      visibility: visible;
-    }
-
-    &:hover, &:focus, &:focus-visible {
       .focus-marker {
         visibility: visible;
       }
+
       .active-marker {
         visibility: hidden;
       }

src/components/react_button/react_button.vue

@@ -74,6 +74,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .ReactButton {
   .reaction-picker-filter {
@@ -141,12 +142,13 @@
       color: var(--text, $fallback--text);
     }
 
-    .focus-marker,
+    @include unfocused-style {
-    &:focus:not(:focus-visible):not(:hover) .focus-marker {
+      .focus-marker {
-      visibility: hidden;
+        visibility: hidden;
+      }
     }
 
-    &:hover, &:focus, &:focus-visible {
+    @include focused-style {
       .focus-marker {
         visibility: visible;
       }

src/components/reply_button/reply_button.vue

@@ -46,6 +46,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .ReplyButton {
   display: flex;
@@ -67,12 +68,13 @@
       color: var(--cBlue, $fallback--cBlue);
     }
 
-    .focus-marker,
+    @include unfocused-style {
-    &:focus:not(:focus-visible):not(:hover) .focus-marker {
+      .focus-marker {
-      visibility: hidden;
+        visibility: hidden;
+      }
     }
 
-    &:hover, &:focus, &:focus-visible {
+    @include focused-style {
       .focus-marker {
         visibility: visible;
       }

src/components/retweet_button/retweet_button.vue

@@ -60,6 +60,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .RetweetButton {
   display: flex;
@@ -85,19 +86,21 @@
       color: var(--cGreen, $fallback--cGreen);
     }
 
-    .focus-marker,
+    @include unfocused-style {
-    &:focus:not(:focus-visible):not(:hover) .focus-marker {
+      .focus-marker {
-      visibility: hidden;
+        visibility: hidden;
+      }
+
+      .active-marker {
+        visibility: visible;
+      }
     }
 
-    &:focus:not(:focus-visible):not(:hover) .active-marker {
+    @include focused-style {
-      visibility: visible;
-    }
-
-    &:hover, &:focus, &:focus-visible {
       .focus-marker {
         visibility: visible;
       }
+
       .active-marker {
         visibility: hidden;
       }