🐛 fix: compact npv video styles

sanoojes · Nov 15, 2024 · e042d31 · e042d31
1 parent 587864f
commit e042d31
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 6 deletions.
diff --git a/src/user.css b/src/user.css
diff --git a/styles/cards/right-sidebar.scss b/styles/cards/right-sidebar.scss
@@ -16,6 +16,11 @@
     @include bg-none;
   }
 
+  &,
+  .main-nowPlayingView-coverArtContainer {
+    --media-container-height: calc(var(--panel-width, 420) * 1px) !important;
+  }
+
   .main-nowPlayingView-nowPlayingWidget {
     .main-nowPlayingView-contextItemInfo:before {
       @include bg-none;
@@ -39,6 +44,42 @@
     @include box-shadow-to-bottom;
     z-index: 1;
   }
+
+  /* CanvasNPV */
+  .E08D6ucrHuPJYzzGO7HG {
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 1) 75%,
+      rgba(0, 0, 0, 0) 100%
+    );
+    mask-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 1) 75%,
+      rgba(0, 0, 0, 0) 100%
+    );
+    &::after {
+      opacity: 0;
+    }
+    &::before {
+      background: none;
+    }
+  }
+
+  &:hover .E08D6ucrHuPJYzzGO7HG::after {
+    opacity: 1;
+  }
+
+  /* VideoNPV */
+  .KrBYgWLGb5aRHjoD_prX {
+    margin-top: 8px !important;
+  }
+
+  .ouiL5cH1WduxtprQ0Iig {
+    aspect-ratio: auto;
+    video {
+      height: 100% !important;
+    }
+  }
 }
 
 .compact-npv {
@@ -70,18 +111,24 @@
       transform-origin: bottom right;
     }
 
-    &:has(video) {
+    /* VideoNPV section */
+    &:has(.ouiL5cH1WduxtprQ0Iig) {
+      height: calc((var(--panel-width) * 1px) + 2.5rem);
+    }
+
+    .KrBYgWLGb5aRHjoD_prX {
+      margin-top: 0px !important;
+    }
+
+    /* CanvasNPV */
+    &:has(.canvasVideoContainerNPV) {
       height: calc((var(--panel-width) * 1px) + 10rem);
     }
 
     .os-scrollbar-horizontal {
       display: none;
     }
 
-    .main-nowPlayingView-coverArtContainer {
-      height: calc(var(--media-container-height) + 1.5rem);
-    }
-
     .main-nowPlayingView-contextItemInfo {
       padding-inline: 8px;
     }