Move themes into one file, set by class on html element.

master
voussoir 2023-07-22 17:28:21 -07:00
parent 1d8ea14dd2
commit a68f76176f
18 changed files with 115 additions and 124 deletions

View File

@ -203,3 +203,105 @@ is hovered over.
{
flex: 2;
}
/******************************************************************************/
html.theme_slate
{
--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;
}
html.theme_slate button,
html.theme_slate button *
{
color: black;
}
/******************************************************************************/
html.theme_hotdogstand
{
--color_primary: yellow;
--color_secondary: red;
--color_text_normal: black;
--color_text_link: rebeccapurple;
--color_text_bubble: black;
--color_textfields: var(--color_secondary);
--color_text_placeholder: black;
--color_transparency: yellow;
--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: red;
--color_tag_card_fg: white;
}
html.theme_hotdogstand button,
html.theme_hotdogstand button *
{
color: black;
}
html.theme_hotdogstand .panel
{
border: 1px solid black;
}
/******************************************************************************/
html.theme_pearl
{
--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;
}
/******************************************************************************/
html.theme_turquoise
{
--color_primary: #00d8f4;
--color_secondary: #ffffd4;
--color_text_normal: black;
--color_text_link: blue;
--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: blue;
}

View File

@ -1,31 +0,0 @@
:root
{
--color_primary: yellow;
--color_secondary: red;
--color_text_normal: black;
--color_text_link: rebeccapurple;
--color_text_bubble: black;
--color_textfields: var(--color_secondary);
--color_text_placeholder: black;
--color_transparency: yellow;
--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: red;
--color_tag_card_fg: white;
}
button,
button *
{
color: black;
}
.panel
{
border: 1px solid black;
}

View File

@ -1,20 +0,0 @@
: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;
}

View File

@ -1,26 +0,0 @@
: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;
}

View File

@ -1,20 +0,0 @@
:root
{
--color_primary: #00d8f4;
--color_secondary: #ffffd4;
--color_text_normal: black;
--color_text_link: blue;
--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: blue;
}

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme_{{theme}}">
<head>
{% import "header.html" as header %}
<title>Admin control</title>
@ -8,7 +8,6 @@
<link rel="icon" href="/favicon.png" type="image/png"/>
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/etiquette.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>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme_{{theme}}">
{% macro shared_css() %}
<style>
@ -89,7 +89,6 @@
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/etiquette.css">
<link rel="stylesheet" href="/static/css/cards.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/cards.js"></script>
@ -146,7 +145,6 @@ const ALBUM_ID = undefined;
<link rel="stylesheet" href="/static/css/etiquette.css">
<link rel="stylesheet" href="/static/css/clipboard_tray.css">
<link rel="stylesheet" href="/static/css/cards.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/album_autocomplete.js"></script>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme_{{theme}}">
<head>
{% import "header.html" as header %}
{% import "cards.html" as cards %}
@ -10,7 +10,6 @@
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/etiquette.css">
<link rel="stylesheet" href="/static/css/cards.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/cards.js"></script>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme_{{theme}}">
<head>
{% import "header.html" as header %}
{% import "clipboard_tray.html" as clipboard_tray %}
@ -11,7 +11,6 @@
<link rel="stylesheet" href="/static/css/etiquette.css">
<link rel="stylesheet" href="/static/css/cards.css">
<link rel="stylesheet" href="/static/css/clipboard_tray.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/cards.js"></script>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme_{{theme}}">
<head>
{% import "header.html" as header %}
<title>Login/Register</title>
@ -8,7 +8,6 @@
<link rel="icon" href="/favicon.png" type="image/png"/>
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/etiquette.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>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme_{{theme}}">
<head>
{% import "header.html" as header %}
{% import "cards.html" as cards %}
@ -10,7 +10,6 @@
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/etiquette.css">
<link rel="stylesheet" href="/static/css/cards.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>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme_{{theme}}">
<head>
<title>Etiquette</title>
<meta charset="UTF-8">
@ -7,7 +7,6 @@
<link rel="icon" href="/favicon.png" type="image/png"/>
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/etiquette.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>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme_{{theme}}">
<head>
{% import "header.html" as header %}
{% import "cards.html" as cards %}
@ -12,7 +12,6 @@
<link rel="stylesheet" href="/static/css/etiquette.css">
<link rel="stylesheet" href="/static/css/cards.css">
<link rel="stylesheet" href="/static/css/clipboard_tray.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>

View File

@ -1,10 +1,9 @@
<!DOCTYPE html>
<html>
<html class="theme_{{theme}}">
<head>
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/etiquette.css">
<link rel="stylesheet" href="/static/css/cards.css">
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
<style>
body

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme_{{theme}}">
<head>
{% import "header.html" as header %}
{% import "clipboard_tray.html" as clipboard_tray %}
@ -11,7 +11,6 @@
<link rel="stylesheet" href="/static/css/etiquette.css">
<link rel="stylesheet" href="/static/css/cards.css">
<link rel="stylesheet" href="/static/css/clipboard_tray.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/cards.js"></script>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme_{{theme}}">
<head>
{% import "header.html" as header %}
{% import "cards.html" as cards %}
@ -14,7 +14,6 @@
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/etiquette.css">
<link rel="stylesheet" href="/static/css/cards.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/cards.js"></script>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme_{{theme}}">
<head>
{% import "header.html" as header %}
<title>Flasksite</title>
@ -8,7 +8,6 @@
<link rel="icon" href="/favicon.png" type="image/png"/>
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/etiquette.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>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="theme_{{theme}}">
<head>
{% import "header.html" as header %}
{% import "cards.html" as cards %}
@ -10,7 +10,6 @@
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/etiquette.css">
<link rel="stylesheet" href="/static/css/cards.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/editor.js"></script>