voussoir/ycdl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add theme css files and theme cookie.

Browse source
This commit is contained in:
voussoir 2023-06-24 12:01:11 -07:00
parent f2129b0522
commit 53bcaf76d1
10 changed files with 233 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontends/ycdl_flask/backend/common.py
View file

@ -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.

2
frontends/ycdl_flask/backend/endpoints/basic_endpoints.py
View file

@ -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')

5
frontends/ycdl_flask/backend/endpoints/channel_endpoints.py
View file

@ -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
View 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
View 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
View 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);
}

17
frontends/ycdl_flask/static/css/ycdl.css
View file

@ -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

26
frontends/ycdl_flask/templates/channel.html
View file

@ -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");
}
}

12
frontends/ycdl_flask/templates/channels.html
View file

@ -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>

4
frontends/ycdl_flask/templates/root.html
View file

@ -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>