fix(videodetail): fix icon shadow and overlay gradient

jwplayer · Jun 24, 2021 · f899f5d · f899f5d
1 parent aab58bb
commit f899f5d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
@@ -54,6 +54,8 @@
   > svg {
     width: 28px;
     height: 28px;
+    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4)); /* stylelint-disable-line */
+    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));
   }
   &.hidden {
     opacity: 0;

diff --git a/src/components/Video/Video.module.scss b/src/components/Video/Video.module.scss
@@ -236,8 +236,9 @@
   top: 0;
   left: 0;
   width: 100%;
+  min-height: 100px;
   padding: 24px 56px;
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.4) 100%);
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.25) 100%);
   pointer-events: none;
 
   @include responsive.mobile-only() {
@@ -262,6 +263,8 @@
   > svg {
     width: 36px;
     height: 36px;
+    -webkit-filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.4)); /* stylelint-disable-line */
+    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.4));
   }
 }