Update video style

basecamp · Oct 3, 2024 · 96ea6d2 · 96ea6d2
1 parent 1c963c1
commit 96ea6d2
Showing 1 changed file with 8 additions and 20 deletions.
diff --git a/_sass/modules/_video.scss b/_sass/modules/_video.scss
@@ -2,33 +2,26 @@
 
   display: flex;
   flex-direction: column;
-  padding-left: var(--space-medium);
-  padding-right: var(--space-medium);
-  padding-top: var(--space-large);
+  padding: var(--space-large) var(--space-medium) 0 var(--space-medium);
 
   &__content {
 
+    border-radius: 0.2em;
     display: flex;
     margin-inline: auto;
+    overflow: hidden;
     position: relative;
     width: min(100%, 35em);
 
     video {
-      border-radius: 0.3em;
       display: block;
-      overflow: hidden;
     }
 
     button {
 
-      border-radius: 0.3em;
       cursor: pointer;
-      height: 100%;
-      left: 0;
+      inset: 0;
       position: absolute;
-      overflow: hidden;
-      top: 0;
-      width: 100%;
       z-index: 1;
 
       &:before {
@@ -39,34 +32,29 @@
         );
         border-radius: 0.3em;
         content: '';
-        height: 100%;
-        left: 0;
-        overflow: hidden;
+        inset: 0;
         pointer-events: none;
         position: absolute;
-        top: 0;
         transition: opacity var(--transition-slow);
-        width: 100%;
       }
 
       span {
         backdrop-filter: blur(5px);
         -webkit-backdrop-filter: blur(5px);
-        background: url('../images/play.svg') center center no-repeat rgba(var(--rgb-white), 0.7);
-        background-size: 0.8em 0.8em;
+        background: url('../images/play.svg') center center / 0.65em auto no-repeat rgba(var(--rgb-white), 0.8);
         border-radius: 100%;
         box-shadow:
           0 20px 30px -20px rgba(var(--rgb-black), 0.3),
           0 10px 20px -10px rgba(var(--rgb-black), 0.5)
         ;
         display: inline-flex;
-        height: 2.3em;
+        height: 2.2em;
         position: relative;
         transition:
           background-color var(--transition-slow),
           transform var(--transition-slow)
         ;
-        width: 2.3em;
+        width: 2.2em;
         will-change: transform;
       }