From 8b85b77867edf0f392b8ba23136f76e8c118c88b Mon Sep 17 00:00:00 2001
From: Thanh Vu <thanhvc.198@gmail.com>
Date: Tue, 26 Apr 2022 13:25:37 +0700
Subject: [PATCH] fix: fix controller style

---
 package.json            |   2 +-
 src/styles/content.scss | 120 +++++++++++++++++++++-------------------
 2 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/package.json b/package.json
index 8e6a912..bfdb52c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "youtube-shorts-controller",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Youtube Shorts Controller",
   "main": "index.js",
   "repository": "https://github.com/misa198/youtube-shorts-controller/tree/master",
diff --git a/src/styles/content.scss b/src/styles/content.scss
index 69b8b63..bbd4022 100644
--- a/src/styles/content.scss
+++ b/src/styles/content.scss
@@ -2,82 +2,86 @@
   opacity: 0 !important;
 }
 
-.reel-video-in-sequence.style-scope.ytd-shorts > #player-container {
-  position: relative !important;
+.reel-video-in-sequence.style-scope.ytd-shorts {
+  #player-container {
+    position: relative !important;
 
-  .mute-button {
-    width: 36px;
-    height: 36px;
-    position: absolute !important;
-    top: 16px;
-    right: 16px;
-    z-index: 11;
-    cursor: pointer;
-
-    svg {
+    .mute-button {
       width: 36px;
       height: 36px;
-      fill: #fff;
+      position: absolute !important;
+      top: 16px;
+      right: 16px;
+      z-index: 11;
+      cursor: pointer;
+
+      svg {
+        width: 36px;
+        height: 36px;
+        fill: #fff;
+      }
     }
-  }
 
-  .processbar {
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 477px;
-    height: 3px;
+    .processbar {
+      position: absolute !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: var(--ytd-shorts-player-width);
+      min-width: var(--ytd-shorts-min-width);
+      height: 3px;
 
-    &__container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-    }
+      &__container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
 
-    &__thumb {
-      position: absolute;
-      height: 100%;
-      background-color: #c00;
-      transition: width 0.1s;
+      &__thumb {
+        position: absolute;
+        height: 100%;
+        background-color: #c00;
+        transition: width 0.1s;
+      }
     }
-  }
 
-  #shorts-controller-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 10;
-    width: 477px;
-    height: 848px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-
-    .shorts-controller {
-      width: 100%;
+    #shorts-controller-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 10;
+      width: var(--ytd-shorts-player-width);
+      min-width: var(--ytd-shorts-min-width);
+      height: 848px;
       display: flex;
       justify-content: center;
+      align-items: center;
+      opacity: 0;
+      transition: opacity 0.3s ease-in-out;
 
-      &__buttons {
+      .shorts-controller {
         width: 100%;
         display: flex;
         justify-content: center;
-        align-items: center;
-      }
 
-      &__button {
-        width: 60px;
-        height: 60px;
-        margin-left: 10px;
-        margin-right: 10px;
+        &__buttons {
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        &__button {
+          width: 60px;
+          height: 60px;
+          margin-left: 10px;
+          margin-right: 10px;
+        }
       }
     }
-  }
 
-  &:hover #shorts-controller-overlay {
-    opacity: 1;
+    &:hover #shorts-controller-overlay {
+      opacity: 1;
+    }
   }
 }