From 75b90179b8ff4a4c9e29d27fd43401ac301ad256 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 18 Aug 2022 19:59:17 -0700
Subject: [PATCH] Experiment with some custom player styling. For #1899

---
 web/components/video/player.scss | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/web/components/video/player.scss b/web/components/video/player.scss
index d5d0a6242..58d3ad01b 100644
--- a/web/components/video/player.scss
+++ b/web/components/video/player.scss
@@ -1,16 +1,37 @@
 /* Change all text and icon colors in the player. */
 .vjs-owncast.video-js {
-  color: var(--theme-unknown-2);
+  color: var(--theme-text-secondary);
 }
 
 .vjs-owncast .vjs-big-play-button {
   z-index: 10;
-  border-color: var(--theme-unknown) !important;
+  color: var(--theme-text-secondary);
+  font-size: 15rem !important;
+  border-color: transparent !important;
   border-radius: var(--theme-rounded-corners) !important;
+  background-color: transparent !important;
+  text-shadow: 2px 3px 4px #0000005f;
+
+  :hover {
+    transition: all 0.2s ease-in-out;
+    font-size: 20rem;
+    text-shadow: 2px 5px 4px #00000093;
+  }
+}
+
+.vjs-owncast .vjs-loading-spinner {
+  z-index: 10;
+  display: block;
+  color: var(--theme-text-secondary);
 }
 
 .vjs-owncast .vjs-control-bar {
-  background-color: var(--theme-unknown) !important;
+  color: var(--theme-text-secondary);
+  background-color: var(--theme-background-primary) !important;
+}
+
+.vjs-owncast .vjs-control {
+  color: var(--theme-text-secondary);
 }
 
 .vjs-airplay .vjs-icon-placeholder::before {