only two style files

This commit is contained in:
Lukas Heiligenbrunner 2020-07-26 18:17:29 +02:00
parent a3b63618b4
commit aa741c5a90
11 changed files with 63 additions and 41 deletions

View File

@ -83,21 +83,23 @@ class App extends React.Component {
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme; const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
// add the main theme to the page body
document.body.className += ' ' + themeStyle.backgroundcolor;
return ( return (
<div className="App"> <div className="App">
<div className={[style.navcontainer, themeStyle.navcontainer].join(' ')}> <div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
<div className={style.navbrand}>{this.state.mediacentername}</div> <div className={style.navbrand}>{this.state.mediacentername}</div>
<div className={[style.navitem, this.state.page === "default" ? style.navitemselected : {}].join(' ')} <div className={[style.navitem, themeStyle.navitem, this.state.page === "default" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "default"})}>Home onClick={() => this.setState({page: "default"})}>Home
</div> </div>
<div className={[style.navitem, this.state.page === "random" ? style.navitemselected : {}].join(' ')} <div className={[style.navitem, themeStyle.navitem, this.state.page === "random" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "random"})}>Random Video onClick={() => this.setState({page: "random"})}>Random Video
</div> </div>
<div className={[style.navitem, this.state.page === "categories" ? style.navitemselected : {}].join(' ')} <div className={[style.navitem, themeStyle.navitem, this.state.page === "categories" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "categories"})}>Categories onClick={() => this.setState({page: "categories"})}>Categories
</div> </div>
<div className={[style.navitem, this.state.page === "settings" ? style.navitemselected : {}].join(' ')} <div className={[style.navitem, themeStyle.navitem, this.state.page === "settings" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "settings"})}>Settings onClick={() => this.setState({page: "settings"})}>Settings
</div> </div>
</div> </div>

View File

@ -20,7 +20,6 @@
display: block; display: block;
width: 0; width: 0;
height: 2px; height: 2px;
background: #FFF;
transition: width .3s; transition: width .3s;
} }
@ -29,14 +28,18 @@
} }
.navitemselected{ .navitemselected {
opacity: 0.85; opacity: 0.85;
} }
.navcontainer { .navcontainer {
padding-top: 20px; padding-top: 20px;
width: 100%; width: 100%;
padding-bottom: 30px; padding-bottom: 40px;
border-width: 0;
border-style: dotted;
border-bottom-width: 2px;
} }
.navbrand { .navbrand {
@ -45,7 +48,7 @@
font-size: large; font-size: large;
font-weight: bold; font-weight: bold;
text-transform: capitalize; text-transform: capitalize;
float:left; float: left;
} }

View File

@ -1,8 +1,20 @@
.navcontainer{ .backgroundcolor{
background-color: #141520; background-color: #141520;
}
.textcolor{
color: white; color: white;
} }
.navitem::after { .navitem::after {
background: white; background: white;
} }
.hrcolor{
border-color: rgba(255,255,255,.1);
}
.previewhover:hover{
box-shadow: rgba(255, 255, 255, 0.7) 0 0 0 5px;
}

View File

@ -1,8 +1,19 @@
.navcontainer{
background-color: white;
color: black;
}
.navitem::after { .navitem::after {
background: black; background: black;
} }
.backgroundcolor {
background-color: white;
}
.textcolor {
color: black;
}
.hrcolor {
border-color: rgba(0, 0, 0, 0.1);
}
.previewhover:hover{
box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
}

View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import style from "./PageTitle.module.css" import style from "./PageTitle.module.css"
import darktheme from "./PageTitleDarkTheme.module.css" import darktheme from "../../AppDarkTheme.module.css"
import lighttheme from "./PageTitleLightTheme.module.css" import lighttheme from "../../AppLightTheme.module.css"
import StaticInfos from "../../GlobalInfos"; import StaticInfos from "../../GlobalInfos";
class PageTitle extends React.Component { class PageTitle extends React.Component {
@ -15,16 +15,15 @@ class PageTitle extends React.Component {
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme; const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
return ( return (
<div className={style.pageheader + ' ' + themeStyle.pageheader}> <div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
<span className={style.pageheadertitle + ' ' + themeStyle.pageheadertitle}>{this.props.title}</span> <span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
<span className={style.pageheadersubtitle}>{this.props.subtitle}</span> <span className={style.pageheadersubtitle + ' ' + themeStyle.textcolor}>{this.props.subtitle}</span>
<> <>
{this.props.children} {this.props.children}
</> </>
<hr/> <hr className={themeStyle.hrcolor}/>
</div> </div>
) );
;
} }
} }

View File

@ -1,8 +1,5 @@
.pageheader { .pageheader {
margin-top: 20px; padding: 20px 12% 20px 22%;
margin-bottom: 20px;
padding-left: 22%;
padding-right: 12%;
} }
.pageheadertitle { .pageheadertitle {

View File

@ -1,11 +0,0 @@
.pageheader {
background-color: #141520;
}
.pageheadertitle {
color:white;
}
.pageheadersubtitle {
color:white;
}

View File

@ -2,6 +2,9 @@ import React from "react";
import style from "./Preview.module.css"; import style from "./Preview.module.css";
import Player from "../../pages/Player/Player"; import Player from "../../pages/Player/Player";
import {Spinner} from "react-bootstrap"; import {Spinner} from "react-bootstrap";
import StaticInfos from "../../GlobalInfos";
import darktheme from "../../AppDarkTheme.module.css";
import lighttheme from "../../AppLightTheme.module.css";
class Preview extends React.Component { class Preview extends React.Component {
constructor(props, context) { constructor(props, context) {
@ -33,8 +36,9 @@ class Preview extends React.Component {
} }
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
return ( return (
<div className={style.videopreview} onClick={() => this.itemClick()}> <div className={style.videopreview + ' ' + themeStyle.previewhover} onClick={() => this.itemClick()}>
<div className={style.previewtitle}>{this.state.name}</div> <div className={style.previewtitle}>{this.state.name}</div>
<div className={style.previewpic}> <div className={style.previewpic}>
{this.state.previewpicture != null ? {this.state.previewpicture != null ?

View File

@ -45,7 +45,7 @@
.videopreview:hover { .videopreview:hover {
opacity: 1; opacity: 1;
box-shadow: rgba(2, 12, 27, 0.7) 0px 0px 0px 5px; /*box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;*/
transition: all 300ms; transition: all 300ms;
} }

View File

@ -1,10 +1,14 @@
import React from "react"; import React from "react";
import style from "./Player.module.css" import style from "./Player.module.css"
import darktheme from "../../AppDarkTheme.module.css"
import lighttheme from "../../AppLightTheme.module.css"
import {PlyrComponent} from 'plyr-react'; import {PlyrComponent} from 'plyr-react';
import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar"; import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag"; import Tag from "../../elements/Tag/Tag";
import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup"; import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
import PageTitle from "../../elements/PageTitle/PageTitle"; import PageTitle from "../../elements/PageTitle/PageTitle";
import StaticInfos from "../../GlobalInfos";
class Player extends React.Component { class Player extends React.Component {
@ -45,6 +49,7 @@ class Player extends React.Component {
} }
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
return ( return (
<div id='videocontainer'> <div id='videocontainer'>
<PageTitle <PageTitle
@ -53,7 +58,7 @@ class Player extends React.Component {
<SideBar> <SideBar>
<SideBarTitle>Infos:</SideBarTitle> <SideBarTitle>Infos:</SideBarTitle>
<hr/> <hr className={themeStyle.hrcolor}/>
<SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem> <SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
{this.state.quality !== 0 ? {this.state.quality !== 0 ?
<SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null} <SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}