Apply active FreeTube theme to shaka-player menus (#5986)

* Apply active FreeTube theme to shaka-player menus

* Add primary color override for range containers with the Hot Pink theme

src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css

@@ -43,6 +43,31 @@
   flex-direction: column-reverse;
 }
 
+/*
+  Apply the active FreeTube base theme to shaka-player's menus.
+  Usually we go for classes and not element names,
+  however as we need to override shaka-player's CSS
+  we need to use the same selectors that they do.
+*/
+
+:deep(.shaka-overflow-menu),
+:deep(.shaka-settings-menu) {
+  background: var(--card-bg-color) !important;
+}
+
+:deep(.shaka-overflow-menu button),
+:deep(.shaka-settings-menu button) {
+  color: var(--primary-text-color) !important;
+}
+
+:deep(.shaka-overflow-menu button:hover),
+:deep(.shaka-settings-menu button:hover) {
+  background: var(--side-nav-hover-color) !important;
+  color: var(--side-nav-hover-text-color) !important;
+}
+
+/* End of theming code */
+
 .sixteenByNine {
   aspect-ratio: 16 / 9;
 }

src/renderer/themes.css

@@ -73,6 +73,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
   text-decoration: underline;
 }
 
+.hotPink .shaka-range-container {
+  --primary-color: #fff;
+}
+
 
 /*************** DARK THEME ADJUSTMENTS ***************/