Layout: Add themes
This commit is contained in:
parent
609244e34f
commit
e9b16ef71f
@ -78,6 +78,12 @@ For security reasons, enabling this is not recommended.''',
|
||||
'comment': '',
|
||||
}),
|
||||
|
||||
('theme', {
|
||||
'type': int,
|
||||
'default': 0,
|
||||
'comment': '',
|
||||
}),
|
||||
|
||||
('gather_googlevideo_domains', {
|
||||
'type': bool,
|
||||
'default': False,
|
||||
|
@ -1,7 +1,22 @@
|
||||
import flask
|
||||
import settings
|
||||
yt_app = flask.Flask(__name__)
|
||||
yt_app.url_map.strict_slashes = False
|
||||
|
||||
@yt_app.route('/')
|
||||
def homepage():
|
||||
return flask.render_template('home.html', title="Youtube local")
|
||||
|
||||
|
||||
theme_names = {
|
||||
0: 'light_theme',
|
||||
1: 'gray_theme',
|
||||
2: 'dark_theme',
|
||||
}
|
||||
|
||||
@yt_app.context_processor
|
||||
def inject_theme_preference():
|
||||
return {
|
||||
'theme_path': '/youtube.com/static/' + theme_names[settings.theme] + '.css',
|
||||
}
|
||||
|
||||
|
@ -69,7 +69,7 @@
|
||||
display:grid;
|
||||
grid-template-columns: auto auto 100px 1fr;
|
||||
grid-template-rows: 0fr 0fr 0fr 0fr;
|
||||
background-color: #dadada;
|
||||
background-color: var(--interface-color);
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
@ -102,8 +102,6 @@
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
white-space: nowrap;
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
21
youtube/static/dark_theme.css
Normal file
21
youtube/static/dark_theme.css
Normal file
@ -0,0 +1,21 @@
|
||||
body{
|
||||
--interface-color: #333333;
|
||||
--text-color: #cccccc;
|
||||
--background-color: #000000;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #22aaff;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: ##7755ff;
|
||||
}
|
||||
|
||||
a:not([href]){
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.comment .permalink{
|
||||
color: #ffffff;
|
||||
}
|
9
youtube/static/gray_theme.css
Normal file
9
youtube/static/gray_theme.css
Normal file
@ -0,0 +1,9 @@
|
||||
body{
|
||||
--interface-color: #dadada;
|
||||
--text-color: #222222;
|
||||
--background-color: #bcbcbc;
|
||||
}
|
||||
|
||||
.comment .permalink{
|
||||
color: #000000;
|
||||
}
|
9
youtube/static/light_theme.css
Normal file
9
youtube/static/light_theme.css
Normal file
@ -0,0 +1,9 @@
|
||||
body{
|
||||
--interface-color: #ffffff;
|
||||
--text-color: #222222;
|
||||
--background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.comment .permalink{
|
||||
color: #000000;
|
||||
}
|
@ -11,10 +11,10 @@ address{
|
||||
body{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
color:#222;
|
||||
color:var(--text-color);
|
||||
|
||||
|
||||
background-color:#bcbcbc;
|
||||
background-color:var(--background-color);
|
||||
|
||||
min-height:100vh;
|
||||
display: flex;
|
||||
@ -111,7 +111,7 @@ body{
|
||||
}
|
||||
.dropdown-content{
|
||||
display:none;
|
||||
background-color: #e9e9e9;
|
||||
background-color: var(--interface-color);
|
||||
}
|
||||
.dropdown:hover .dropdown-content{
|
||||
/* For some reason, if this is just grid, it will insist on being 0px wide just like its 0px by 0px parent */
|
||||
@ -151,7 +151,7 @@ body{
|
||||
.horizontal-item-box{
|
||||
}
|
||||
.item{
|
||||
background-color:#dadada;
|
||||
background-color:var(--interface-color);
|
||||
text-decoration:none;
|
||||
font-size: 12px;
|
||||
color: #767676;
|
||||
@ -225,7 +225,7 @@ body{
|
||||
max-height:3.6em;
|
||||
overflow:hidden;
|
||||
|
||||
color: #333;
|
||||
color: var(--text-color);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration:initial;
|
||||
@ -284,14 +284,14 @@ body{
|
||||
height: 40px;
|
||||
}
|
||||
.page-button{
|
||||
background-color: #e9e9e9;
|
||||
background-color: var(--interface-color);
|
||||
border-style: outset;
|
||||
border-width: 2px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.sort-button{
|
||||
background-color: #dadada;
|
||||
background-color: var(--interface-color);
|
||||
padding: 2px;
|
||||
justify-self: start;
|
||||
}
|
||||
|
@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<title>{{ page_title }}</title>
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; script-src 'none'; media-src 'self' https://*.googlevideo.com">
|
||||
<link href="{{ theme_path }}" type="text/css" rel="stylesheet">
|
||||
<link href="/youtube.com/static/shared.css" type="text/css" rel="stylesheet">
|
||||
<link href="/youtube.com/static/comments.css" type="text/css" rel="stylesheet">
|
||||
<link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon">
|
||||
|
@ -31,7 +31,7 @@
|
||||
grid-auto-flow: column;
|
||||
justify-content:start;
|
||||
|
||||
background-color: #aaaaaa;
|
||||
background-color: var(--interface-color);
|
||||
padding: 3px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
@ -44,7 +44,6 @@
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
padding-left: 6px;
|
||||
background-color: #bababa;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#number-of-results{
|
||||
|
@ -2,7 +2,7 @@
|
||||
{% extends "base.html" %}
|
||||
{% block style %}
|
||||
ul {
|
||||
background-color: #dadada;
|
||||
background-color: var(--interface-color);
|
||||
padding: 20px;
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
|
@ -7,7 +7,7 @@
|
||||
margin: auto;
|
||||
}
|
||||
main form{
|
||||
background-color: #dadada;
|
||||
background-color: var(--interface-color);
|
||||
padding: 10px;
|
||||
margin-top:20px;
|
||||
display:grid;
|
||||
@ -24,7 +24,7 @@
|
||||
margin-top:20px;
|
||||
}
|
||||
#tor-note{
|
||||
background-color: #dadada;
|
||||
background-color: var(--interface-color);
|
||||
padding: 10px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
@ -4,7 +4,7 @@
|
||||
{% import "comments.html" as comments %}
|
||||
{% block style %}
|
||||
details > summary{
|
||||
background-color: #dadada;
|
||||
background-color: var(--interface-color);
|
||||
border-style: outset;
|
||||
border-width: 2px;
|
||||
font-weight: bold;
|
||||
@ -22,7 +22,7 @@
|
||||
width: {{ theater_video_target_width }}px;
|
||||
max-height: {{ video_height }}px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #bcbcbc;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.related-videos-outer{
|
||||
grid-row: 2 /span 3;
|
||||
@ -62,7 +62,7 @@
|
||||
min-width: 0;
|
||||
}
|
||||
.video-info > .is-unlisted{
|
||||
background-color: #dadada;
|
||||
background-color: var(--interface-color);
|
||||
justify-self:start;
|
||||
padding-left:2px;
|
||||
padding-right:2px;
|
||||
@ -99,7 +99,7 @@
|
||||
grid-column: 2;
|
||||
}
|
||||
.video-info > .description{
|
||||
background-color:#dadada;
|
||||
background-color:var(--interface-color);
|
||||
margin-top:8px;
|
||||
white-space: pre-wrap;
|
||||
min-width: 0;
|
||||
@ -111,7 +111,7 @@
|
||||
.music-list{
|
||||
grid-row:8;
|
||||
grid-column: 1 / span 2;
|
||||
background-color: #dadada;
|
||||
background-color: var(--interface-color);
|
||||
}
|
||||
.music-list table,th,td{
|
||||
border: 1px solid;
|
||||
@ -165,7 +165,7 @@
|
||||
}
|
||||
|
||||
.download-dropdown-content{
|
||||
background-color: #dadada;
|
||||
background-color: var(--interface-color);
|
||||
padding: 10px;
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
|
Loading…
x
Reference in New Issue
Block a user