Merge pull request #10 from JipFr/master

Finish theming

src/components/InputBox.css

@@ -30,7 +30,7 @@
 .inputSearchButton {
     background-color: var(--button);
     border-width: 0;
-    color: var(--text);
+    color: var(--button-text, var(--text));
     padding: .5rem 2.1rem;
 
     font-weight: bold;

src/components/NumberSelector.css

@@ -43,6 +43,6 @@
 }
 
 .numberSelector .choice.selected {
-    color: var(--text);
+    color: var(--choice-active-text, var(--text));
-    background-color: var(--choice-hover);
+    background-color: var(--choice-active);
 }

src/components/Progress.css

@@ -24,7 +24,7 @@
 .progress .bar {
     width: 13rem;
     max-width: 100%;
-    background-color: #35363D;
+    background-color: var(--content);
     border-radius: 10px;
     height: 7px;
     display: inline-block;

src/components/Title.css

@@ -12,7 +12,7 @@
 }
 .title-size-small {
     font-size: 1.1rem;
-    color: #afb1b8;
+    color: var(--text-secondary);
 }
 
 .title-accent {

src/components/TypeSelector.css

@@ -13,7 +13,7 @@
     position: absolute;
     width: 100%;
     bottom: 0;
-    background-color: #3a3c46;
+    background-color: var(--content);
     height: 4px;
     border-radius: 2px;
 }
@@ -27,14 +27,14 @@
     align-items: center;
     text-align: center;
     box-sizing: border-box;
-    color: #585A67;
+    color: var(--text-tertiary);
     font-weight: bold;
     cursor: pointer;
     user-select: none;
 }
 
 .typeSelector .choice:hover { 
-    color: #afb1b8;
+    color: var(--text-secondary);
 }
 
 .typeSelector .choice.selected {

src/components/VideoElement.css

@@ -1,6 +1,6 @@
 .videoElement {
     width: 100%;
-    background-color: #111117;
+    background-color: var(--content);
     border-radius: 5px;
 }
 

src/components/VideoElement.js

@@ -27,8 +27,6 @@ export function VideoElement({ streamUrl, loading }) {
         hls.loadSource(streamUrl);
     }, [videoRef, streamUrl, loading])
 
-    // TODO make better loading/error/empty state
-
     if (error)
         return (<VideoPlaceholder>Your browser is not supported</VideoPlaceholder>)
 
@@ -36,7 +34,7 @@ export function VideoElement({ streamUrl, loading }) {
         return <VideoPlaceholder>Loading episode...</VideoPlaceholder>
     
     if (!streamUrl || streamUrl.length === 0)
-        return <videoPlaceholder>No video selected</videoPlaceholder>
+        return <VideoPlaceholder>No video selected</VideoPlaceholder>
 
     return (
         <video className="videoElement" ref={videoRef} controls autoPlay />

src/index.css

@@ -1,6 +1,4 @@
 :root {
-
-  /* TODO finish theming for entire css */
   --theme-color: #E880C5;
   --theme-color-text: var(--theme-color);
   
@@ -11,6 +9,7 @@
 
   --text: white;
   --text-secondary: #BCBECB;
+  --text-tertiary: #585A67;
 
   --content: #36363e;
   --content-hover: #3C3D44;
@@ -18,12 +17,36 @@
   --button: #A73B83;
   --button-hover: #9C3179;
   --button-active: #8b286a;
+  --button-text: var(--text);
 
   --choice: #2E2F37;
   --choice-hover: #45464D;
   --choice-active: #45464D;
-
 }
+/* @media (prefers-color-scheme: light) {
+  :root {
+    --theme-color: #457461;
+    
+    --body: white;
+    --card: #f8f9fa;
+    
+    --content: #eee;
+    --content-hover: #e7e7e7;
+  
+    --text: #333;
+    --text-secondary: #616161;
+    --text-tertiary: #aaa;
+
+    --button: #457461;
+    --button-hover: #4e836e;
+    --button-active: #437a64;
+    --button-text: white;
+
+    --choice: var(--content);
+    --choice-hover: var(--content-hover);
+    --choice-active: var(--content-hover);
+  }
+} */
 
 body, html {
   margin: 0;

src/views/Search.css

@@ -29,7 +29,7 @@
     margin: 0;
 }
 .topRightCredits a:hover, .topRightCredits a:active {
-    color: #f19fd6;
+    color: var(--theme-color);
     text-decoration: none;
 }