Browse Source

fix: fullscreen styling fixes

Sven 9 months ago
parent
commit
4c3b071ee2
4 changed files with 29 additions and 6 deletions
  1. 13 3
      dist/BetterYTM.css
  2. 9 3
      src/features/layout.css
  3. 4 0
      src/features/volume.css
  4. 3 0
      src/siteEvents.ts

+ 13 - 3
dist/BetterYTM.css

@@ -1708,14 +1708,20 @@ ytmusic-app-layout[player-ui-state=FULLSCREEN] .bytm-vote-label {
 /* Increase specificity to override YTM's default styles without having to use !important */
 :root body.bytm-dom-ytm ytmusic-app-layout[player-ui-state=FULLSCREEN] ytmusic-player-bar[slot=player-bar] {
   width: 100%;
-  background: rgba(0, 0, 0, 0.2);
-  backdrop-filter: blur(8px) brightness(85%);
+  background: rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(10px) brightness(90%);
 }
 
-:root body.bytm-dom-ytm ytmusic-app-layout[player-ui-state=FULLSCREEN] ytmusic-player-bar[slot=player-bar] .ytmusic-menu-renderer svg path {
+:root body.bytm-dom-ytm ytmusic-app-layout[player-ui-state=FULLSCREEN] ytmusic-player-bar[slot=player-bar] .ytmusic-menu-renderer svg path,
+:root body.bytm-dom-ytm ytmusic-app-layout[player-ui-state=FULLSCREEN] ytmusic-player-bar[slot=player-bar] tp-yt-paper-icon-button svg path
+{
   fill: #fff;
 }
 
+:root body.bytm-dom-ytm ytmusic-app-layout[player-ui-state=FULLSCREEN] ytmusic-player-bar[slot=player-bar] .time-info {
+  color: #fff;
+}
+
 :root {
   --bytm-auto-like-btn-color: #bf87f0;
 }
@@ -1944,6 +1950,10 @@ ytmusic-responsive-list-item-renderer.bytm-has-queue-btns:focus-within .bytm-gen
   opacity: 1;
 }
 
+:root body.bytm-dom-ytm ytmusic-app-layout[player-ui-state=FULLSCREEN] #bytm-vol-slider-label {
+  color: #fff;
+}
+
 #bytm-vol-slider-shared {
   display: flex;
   flex-direction: row;

+ 9 - 3
src/features/layout.css

@@ -407,10 +407,16 @@ ytmusic-app-layout[player-ui-state=FULLSCREEN] .bytm-vote-label {
 /* Increase specificity to override YTM's default styles without having to use !important */
 :root body.bytm-dom-ytm ytmusic-app-layout[player-ui-state=FULLSCREEN] ytmusic-player-bar[slot=player-bar] {
   width: 100%;
-  background: rgba(0, 0, 0, 0.2);
-  backdrop-filter: blur(8px) brightness(85%);
+  background: rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(10px) brightness(90%);
 }
 
-:root body.bytm-dom-ytm ytmusic-app-layout[player-ui-state=FULLSCREEN] ytmusic-player-bar[slot=player-bar] .ytmusic-menu-renderer svg path {
+:root body.bytm-dom-ytm ytmusic-app-layout[player-ui-state=FULLSCREEN] ytmusic-player-bar[slot=player-bar] .ytmusic-menu-renderer svg path,
+:root body.bytm-dom-ytm ytmusic-app-layout[player-ui-state=FULLSCREEN] ytmusic-player-bar[slot=player-bar] tp-yt-paper-icon-button svg path
+{
   fill: #fff;
 }
+
+:root body.bytm-dom-ytm ytmusic-app-layout[player-ui-state=FULLSCREEN] ytmusic-player-bar[slot=player-bar] .time-info {
+  color: #fff;
+}

+ 4 - 0
src/features/volume.css

@@ -35,6 +35,10 @@
   opacity: 1;
 }
 
+:root body.bytm-dom-ytm ytmusic-app-layout[player-ui-state=FULLSCREEN] #bytm-vol-slider-label {
+  color: #fff;
+}
+
 #bytm-vol-slider-shared {
   display: flex;
   flex-direction: row;

+ 3 - 0
src/siteEvents.ts

@@ -222,6 +222,9 @@ function checkWatchIdChange(watchId?: string | null) {
 
 /** Periodically called to check for changes in the URL and emit associated siteEvents */
 export function runIntervalChecks() {
+  if(!lastWatchId)
+    checkWatchIdChange();
+
   if(location.pathname !== lastPathname) {
     emitSiteEvent("pathChanged", String(location.pathname), lastPathname);
     lastPathname = String(location.pathname);