style(theming): complete theming

This commit is contained in:
Jip Fr 2021-07-15 18:41:51 +02:00
parent 32e1675617
commit 032331d7d7
7 changed files with 9 additions and 11 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -34,7 +34,7 @@ export function VideoElement({ streamUrl, loading }) {
return <VideoPlaceholder>Loading episode...</VideoPlaceholder> return <VideoPlaceholder>Loading episode...</VideoPlaceholder>
if (!streamUrl || streamUrl.length === 0) if (!streamUrl || streamUrl.length === 0)
return <videoPlaceholder>No video selected</videoPlaceholder> return <VideoPlaceholder>No video selected</VideoPlaceholder>
return ( return (
<video className="videoElement" ref={videoRef} controls autoPlay /> <video className="videoElement" ref={videoRef} controls autoPlay />

View File

@ -1,6 +1,4 @@
:root { :root {
/* TODO finish theming for entire css */
--theme-color: #E880C5; --theme-color: #E880C5;
--theme-color-text: var(--theme-color); --theme-color-text: var(--theme-color);
@ -11,6 +9,7 @@
--text: white; --text: white;
--text-secondary: #BCBECB; --text-secondary: #BCBECB;
--text-tertiary: #585A67;
--content: #36363e; --content: #36363e;
--content-hover: #3C3D44; --content-hover: #3C3D44;
@ -22,7 +21,6 @@
--choice: #2E2F37; --choice: #2E2F37;
--choice-hover: #45464D; --choice-hover: #45464D;
--choice-active: #45464D; --choice-active: #45464D;
} }
body, html { body, html {

View File

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