glitch: quick status hover hack

2022-11-06 13:32:33 -08:00
1 changed files with 21 additions and 16 deletions
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@ -285,23 +285,28 @@
  }
 }

+
+@mixin focusable {
+  outline: 0;
+  background: lighten($ui-base-color, 4%);
+
+  &.status.status-direct {
+    background: lighten($ui-base-color, 12%);
+
+    &.muted {
+      background: transparent;
+    }
+  }
+
+  .detailed-status,
+  .detailed-status__action-bar {
+    background: lighten($ui-base-color, 8%);
+  }
+}
 .focusable {
-  &:focus {
-    outline: 0;
-    background: lighten($ui-base-color, 4%);
-
-    &.status.status-direct {
-      background: lighten($ui-base-color, 12%);
-
-      &.muted {
-        background: transparent;
-      }
-    }
-
-    .detailed-status,
-    .detailed-status__action-bar {
-      background: lighten($ui-base-color, 8%);
-    }
+  &:focus,
+  &:hover {
+    @include focusable;
  }
 }