about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/styles
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2020-06-24 10:25:32 +0200
committerThibG <thib@sitedethib.com>2020-07-02 17:31:09 +0200
commit06309129be80c549aacf19a01e9b36bdcd47f9f2 (patch)
treed5d4b705ddcbb73f358a7730a1333766d1cd6553 /app/javascript/flavours/glitch/styles
parent1c5842083148121aa8eda3fe949f29d3f7bc1d11 (diff)
[Glitch] Fix audio/video/images/cards not reacting to window resizes in web UI
Port bb9ca8a587ee5a3ec8778e72828aca0ba8871327 to glitch-soc

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
-rw-r--r--app/javascript/flavours/glitch/styles/components/media.scss19
1 files changed, 14 insertions, 5 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index 88046a7a2..5f6eff808 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -612,7 +612,7 @@
     &.active {
       overflow: visible;
       width: 50px;
-      margin-right: 10px;
+      margin-right: 16px;
     }
 
     &::before {
@@ -649,10 +649,17 @@
       left: 0;
       margin-left: -6px;
       transform: translate(0, -50%);
-      transition: opacity .1s ease;
       background: lighten($ui-highlight-color, 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
-      pointer-events: none;
+      opacity: 0;
+
+      .no-reduce-motion & {
+        transition: opacity 100ms linear;
+      }
+    }
+
+    &.active &__handle {
+      opacity: 1;
     }
   }
 
@@ -712,10 +719,12 @@
       height: 12px;
       top: 6px;
       margin-left: -6px;
-      transition: opacity .1s ease;
       background: lighten($ui-highlight-color, 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
-      pointer-events: none;
+
+      .no-reduce-motion & {
+        transition: opacity .1s ease;
+      }
 
       &.active {
         opacity: 1;