Add theme css files and theme cookie.
This commit is contained in:
parent
f2129b0522
commit
53bcaf76d1
10 changed files with 233 additions and 55 deletions
|
@ -3,6 +3,7 @@ Do not execute this file directly.
|
|||
Use ycdl_flask_dev.py or ycdl_flask_prod.py.
|
||||
'''
|
||||
import flask; from flask import request
|
||||
import functools
|
||||
import threading
|
||||
import time
|
||||
|
||||
|
@ -65,6 +66,29 @@ def after_request(response):
|
|||
response = flasktools.gzip_response(request, response)
|
||||
return response
|
||||
|
||||
site.route = flasktools.decorate_and_route(
|
||||
flask_app=site,
|
||||
decorators=[
|
||||
flasktools.ensure_response_type,
|
||||
functools.partial(
|
||||
flasktools.give_theme_cookie,
|
||||
cookie_name='ycdl_theme',
|
||||
default_theme='slate',
|
||||
),
|
||||
],
|
||||
)
|
||||
|
||||
def render_template(request, template_name, **kwargs):
|
||||
theme = request.cookies.get('ycdl_theme', None)
|
||||
|
||||
response = flask.render_template(
|
||||
template_name,
|
||||
request=request,
|
||||
theme=theme,
|
||||
**kwargs,
|
||||
)
|
||||
return response
|
||||
|
||||
####################################################################################################
|
||||
|
||||
# These functions will be called by the launcher, flask_dev, flask_prod.
|
||||
|
|
|
@ -6,7 +6,7 @@ site = common.site
|
|||
|
||||
@site.route('/')
|
||||
def root():
|
||||
return flask.render_template('root.html')
|
||||
return common.render_template(request, 'root.html')
|
||||
|
||||
@site.route('/favicon.ico')
|
||||
@site.route('/favicon.png')
|
||||
|
|
|
@ -31,7 +31,7 @@ def get_all_channel_names():
|
|||
@site.route('/channels')
|
||||
def get_channels():
|
||||
channels = common.ycdldb.get_channels()
|
||||
return flask.render_template('channels.html', channels=channels)
|
||||
return common.render_template(request, 'channels.html', channels=channels)
|
||||
|
||||
def _render_videos_listing(videos, channel, state, orderby):
|
||||
search_terms = request.args.get('q', '').lower().strip().replace('+', ' ').split()
|
||||
|
@ -55,7 +55,8 @@ def _render_videos_listing(videos, channel, state, orderby):
|
|||
|
||||
all_states = common.ycdldb.get_all_states()
|
||||
|
||||
return flask.render_template(
|
||||
return common.render_template(
|
||||
request,
|
||||
'channel.html',
|
||||
all_states=all_states,
|
||||
channel=channel,
|
||||
|
|
71
frontends/ycdl_flask/static/css/theme_onyx.css
Normal file
71
frontends/ycdl_flask/static/css/theme_onyx.css
Normal file
|
@ -0,0 +1,71 @@
|
|||
:root
|
||||
{
|
||||
--color_primary: #000;
|
||||
--color_secondary: #3b4d5d;
|
||||
|
||||
--color_text_normal: #ccc;
|
||||
--color_text_link: #1edeff;
|
||||
--color_text_bubble: black;
|
||||
|
||||
--color_textfields: var(--color_primary);
|
||||
--color_text_placeholder: gray;
|
||||
|
||||
--color_selection: rgba(0, 0, 255, 0.5);
|
||||
--color_transparency: rgba(0, 0, 0, 0.0);
|
||||
--color_dropshadow: rgba(0, 0, 0, 0.25);
|
||||
--color_shadow: rgba(0, 0, 0, 0.5);
|
||||
--color_highlight: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
button,
|
||||
button *
|
||||
{
|
||||
color: black;
|
||||
}
|
||||
|
||||
.tab_buttons button
|
||||
{
|
||||
color: var(--color_text_normal);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
.nice_link,
|
||||
.panel
|
||||
{
|
||||
border: 1px solid var(--color_text_normal);
|
||||
}
|
||||
|
||||
.channel_card
|
||||
{
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.video_card:hover
|
||||
{
|
||||
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
|
||||
}
|
||||
.channel_card_pending,
|
||||
.video_card_pending
|
||||
{
|
||||
border: 2px solid #ffffaa;
|
||||
background-color: rgba(255, 255, 170, 0.25);
|
||||
}
|
||||
.video_card_ignored
|
||||
{
|
||||
border: 2px solid #ffc886;
|
||||
background-color: rgba(255, 200, 134, 0.25);
|
||||
}
|
||||
.video_card_selected
|
||||
{
|
||||
border: 2px solid #13f4ff !important;
|
||||
background-color: rgba(19, 244, 255, 0.25) !important;
|
||||
}
|
||||
.channel_card_no_pending,
|
||||
.video_card_downloaded
|
||||
{
|
||||
border: 2px solid #aaffaa;
|
||||
background-color: rgba(170, 255, 170, 0.25);
|
||||
}
|
62
frontends/ycdl_flask/static/css/theme_pearl.css
Normal file
62
frontends/ycdl_flask/static/css/theme_pearl.css
Normal file
|
@ -0,0 +1,62 @@
|
|||
:root
|
||||
{
|
||||
--color_primary: #f6ffff;
|
||||
--color_secondary: #aad7ff;
|
||||
|
||||
--color_text_normal: black;
|
||||
--color_text_link: #00f;
|
||||
--color_text_bubble: black;
|
||||
|
||||
--color_textfields: white;
|
||||
--color_text_placeholder: gray;
|
||||
|
||||
--color_transparency: rgba(0, 0, 0, 0.1);
|
||||
--color_dropshadow: rgba(0, 0, 0, 0.25);
|
||||
--color_shadow: rgba(0, 0, 0, 0.5);
|
||||
--color_highlight: rgba(255, 255, 255, 0.5);
|
||||
|
||||
--color_tag_card_bg: #fff;
|
||||
--color_tag_card_fg: black;
|
||||
}
|
||||
|
||||
.channel_card
|
||||
{
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.channel_card_pending
|
||||
{
|
||||
background-color: #ffffaa;
|
||||
}
|
||||
|
||||
.channel_card_no_pending
|
||||
{
|
||||
background-color: #aaffaa;
|
||||
}
|
||||
|
||||
.video_card
|
||||
{
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.video_card:hover
|
||||
{
|
||||
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
|
||||
}
|
||||
.video_card_pending
|
||||
{
|
||||
background-color: #ffffaa;
|
||||
}
|
||||
.video_card_ignored
|
||||
{
|
||||
background-color: #ffc886;
|
||||
}
|
||||
.video_card_selected
|
||||
{
|
||||
background-color: #13f4ff !important;
|
||||
}
|
||||
.video_card_downloaded
|
||||
{
|
||||
background-color: #aaffaa;
|
||||
}
|
65
frontends/ycdl_flask/static/css/theme_slate.css
Normal file
65
frontends/ycdl_flask/static/css/theme_slate.css
Normal file
|
@ -0,0 +1,65 @@
|
|||
:root
|
||||
{
|
||||
--color_primary: #222;
|
||||
--color_secondary: #3b4d5d;
|
||||
|
||||
--color_text_normal: #efefef;
|
||||
--color_text_link: #1edeff;
|
||||
--color_text_bubble: black;
|
||||
|
||||
--color_textfields: var(--color_secondary);
|
||||
--color_text_placeholder: gray;
|
||||
|
||||
--color_transparency: rgba(255, 255, 255, 0.05);
|
||||
--color_dropshadow: rgba(0, 0, 0, 0.25);
|
||||
--color_shadow: rgba(0, 0, 0, 0.5);
|
||||
--color_highlight: rgba(255, 255, 255, 0.5);
|
||||
|
||||
--color_tag_card_bg: #e6e6e6;
|
||||
--color_tag_card_fg: black;
|
||||
}
|
||||
|
||||
button,
|
||||
button *
|
||||
{
|
||||
color: black;
|
||||
}
|
||||
|
||||
.tab_buttons button
|
||||
{
|
||||
color: var(--color_text_normal);
|
||||
}
|
||||
|
||||
.channel_card
|
||||
{
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.video_card:hover
|
||||
{
|
||||
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
|
||||
}
|
||||
.channel_card_pending,
|
||||
.video_card_pending
|
||||
{
|
||||
border: 2px solid #ffffaa;
|
||||
background-color: rgba(255, 255, 170, 0.25);
|
||||
}
|
||||
.video_card_ignored
|
||||
{
|
||||
border: 2px solid #ffc886;
|
||||
background-color: rgba(255, 200, 134, 0.25);
|
||||
}
|
||||
.video_card_selected
|
||||
{
|
||||
border: 2px solid #13f4ff !important;
|
||||
background-color: rgba(19, 244, 255, 0.25) !important;
|
||||
}
|
||||
.channel_card_no_pending,
|
||||
.video_card_downloaded
|
||||
{
|
||||
border: 2px solid #aaffaa;
|
||||
background-color: rgba(170, 255, 170, 0.25);
|
||||
}
|
|
@ -2,22 +2,9 @@
|
|||
This file contains styles that apply to all pages within YCDL, but don't
|
||||
belong in common.css because they are specifically for this project.
|
||||
*/
|
||||
|
||||
:root
|
||||
html
|
||||
{
|
||||
--color_primary: white;
|
||||
|
||||
--color_text_normal: black;
|
||||
--color_text_link: blue;
|
||||
--color_text_bubble: var(--color_text_normal);
|
||||
|
||||
--color_textfields: white;
|
||||
--color_text_placeholder: gray;
|
||||
|
||||
--color_transparency: rgba(0, 0, 0, 0.1);
|
||||
--color_dropshadow: rgba(0, 0, 0, 0.25);
|
||||
--color_shadow: rgba(0, 0, 0, 0.5);
|
||||
--color_highlight: rgba(255, 255, 255, 0.5);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.navigation_link:hover
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
<link rel="icon" href="/favicon.png" type="image/png"/>
|
||||
<link rel="stylesheet" href="/static/css/common.css"/>
|
||||
<link rel="stylesheet" href="/static/css/ycdl.css"/>
|
||||
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
|
||||
<script src="/static/js/common.js"></script>
|
||||
<script src="/static/js/api.js"></script>
|
||||
<script src="/static/js/hotkeys.js"></script>
|
||||
|
@ -41,27 +42,6 @@
|
|||
padding: 8px;
|
||||
|
||||
border-radius: 4px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.video_card:hover
|
||||
{
|
||||
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
|
||||
}
|
||||
.video_card_pending
|
||||
{
|
||||
background-color: #ffffaa;
|
||||
}
|
||||
.video_card_ignored
|
||||
{
|
||||
background-color: #ffc886;
|
||||
}
|
||||
.video_card_selected
|
||||
{
|
||||
background-color: #13f4ff !important;
|
||||
}
|
||||
.video_card_downloaded
|
||||
{
|
||||
background-color: #aaffaa;
|
||||
}
|
||||
|
||||
.video_thumbnail
|
||||
|
@ -409,10 +389,6 @@ function deselect_all()
|
|||
video_card_first_selected = null;
|
||||
for (const video_card of Array.from(video_card_selections))
|
||||
{
|
||||
if (video_card.classList.contains("hidden"))
|
||||
{
|
||||
continue;
|
||||
}
|
||||
video_card.classList.remove("video_card_selected");
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
<link rel="icon" href="/favicon.png" type="image/png"/>
|
||||
<link rel="stylesheet" href="/static/css/common.css">
|
||||
<link rel="stylesheet" href="/static/css/ycdl.css">
|
||||
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
|
||||
<script src="/static/js/common.js"></script>
|
||||
<script src="/static/js/api.js"></script>
|
||||
<script src="/static/js/http.js"></script>
|
||||
|
@ -31,17 +32,6 @@
|
|||
{
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.channel_card_pending
|
||||
{
|
||||
background-color: #ffffaa;
|
||||
}
|
||||
|
||||
.channel_card_no_pending
|
||||
{
|
||||
background-color: #aaffaa;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
@ -7,9 +7,10 @@
|
|||
<link rel="icon" href="/favicon.png" type="image/png"/>
|
||||
<link rel="stylesheet" href="/static/css/common.css">
|
||||
<link rel="stylesheet" href="/static/css/ycdl.css">
|
||||
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
|
||||
|
||||
<style>
|
||||
body, a
|
||||
body
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -24,6 +25,7 @@ body, a
|
|||
<a href="/channels">Manage channels</a>
|
||||
<a href="/videos/pending?limit=100">New videos</a>
|
||||
<a href="/videos/pending?limit=100&orderby=random">Random videos</a>
|
||||
<span><a href="/?theme=pearl">Pearl</a> <a href="/?theme=slate">Slate</a> <a href="/?theme=onyx">Onyx</a></span>
|
||||
</body>
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue