From c8659cc44bad4ee8e8ead3a87c1fd39788848b87 Mon Sep 17 00:00:00 2001
From: infinite-persistence
 <64950861+infinite-persistence@users.noreply.github.com>
Date: Fri, 21 May 2021 03:20:01 +0800
Subject: [PATCH] More theme color fixes (#6095)

## Issue
- Closes 5998 Theme color problems
  - "_Seeing the theme go blue when a modal pops up. There's a change in color on Odysee branch also when this happens (but not as apparent)_"

##
1. Fix overlay background color back to gray theme.
2. Also, fixed the Active Toggle Button back to primary colors.
3. Fix hard-to-read "videojs time tooltip". Using the primary colors is a nice touch, but people have complained in Discord that it's too dim given it's transparent background. Just use 'white' instead. Don't use '--color-white' since that's a bit dimmed down.
4. Fix odd highlight in the volume slider (the bright primary color was used in the background).
---
 ui/scss/component/_videojs.scss | 22 +++++++++-------------
 ui/scss/themes/dark.scss        |  5 ++---
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/ui/scss/component/_videojs.scss b/ui/scss/component/_videojs.scss
index 78dde5394..38b9b9d39 100644
--- a/ui/scss/component/_videojs.scss
+++ b/ui/scss/component/_videojs.scss
@@ -13,7 +13,7 @@
       height: 5rem;
       width: 100%;
       background: rgba(20, 20, 20, 0.45);
-      background: linear-gradient(0deg, rgba(0,0,0,.85) 10%, rgba(0,0,0,0) 100%);
+      background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 10%, rgba(0, 0, 0, 0) 100%);
     }
   }
 
@@ -29,7 +29,7 @@
     // Circle play head
     .vjs-play-progress::before {
       transform: scale(0);
-      transition: transform .3s;
+      transition: transform 0.3s;
     }
 
     &:hover {
@@ -57,7 +57,7 @@
 
   // Primary Color Progress
   .vjs-slider-bar {
-    background-color: var(--color-primary);
+    background-color: var(--color-gray-5);
   }
 
   // Inner Progress Bar
@@ -87,24 +87,23 @@
   // Volume slider
   .vjs-volume-panel {
     &.vjs-control {
-      transition: .2s;
+      transition: 0.2s;
     }
 
     .vjs-volume-control.vjs-volume-horizontal {
-      transition: .2s;
+      transition: 0.2s;
     }
   }
 }
 
-
 // Tooltip
 .vjs-mouse-display .vjs-time-tooltip {
-  color: var(--color-primary);
+  color: white;
 }
 
 // Tooltip
 .video-js {
-  .vjs-progress-control{
+  .vjs-progress-control {
     .vjs-play-progress {
       .vjs-time-tooltip {
         display: none;
@@ -113,29 +112,26 @@
   }
 }
 
-
 // Transitions control bar between active / inactive
 .vjs-has-started {
   .vjs-control-bar {
     opacity: 1;
-    transition: .1s;
+    transition: 0.1s;
   }
 
   &.vjs-user-inactive.vjs-playing {
     .vjs-control-bar {
       opacity: 0;
-      transition: .3s;
+      transition: 0.3s;
     }
   }
 
   &.vjs-user-active.vjs-playing {
     .vjs-control-bar {
-
     }
   }
 }
 
-
 // Button glow
 .video-js {
   .vjs-control,
diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss
index 5662f185d..cbeaaabed 100644
--- a/ui/scss/themes/dark.scss
+++ b/ui/scss/themes/dark.scss
@@ -11,7 +11,7 @@
 
   // Structure
   --color-background: var(--color-gray-9);
-  --color-background-overlay: #11182795;
+  --color-background-overlay: #21252999;
   --color-border: var(--color-gray-7);
   --color-card-background: var(--color-gray-8);
   --color-card-background-highlighted: var(--color-gray-9);
@@ -45,8 +45,7 @@
   --color-button-alt-bg-hover: var(--color-gray-6);
   --color-button-alt-text: var(--color-gray-1);
   --color-button-border: var(--color-gray-5);
-  --color-button-toggle-bg: var(--color-secondary);
-  --color-button-toggle-text: var(--color-text);
+  --color-button-toggle-text: var(--color-gray-1);
   --color-link: var(--color-primary-alt-3);
   --color-link-hover: var(--color-text);
   --color-link-focus-bg: var(--color-gray-7);