From 624f9700a8f30d7edf0c3a03267d7373e2f32ce3 Mon Sep 17 00:00:00 2001
From: Martin Zimandl <martin.zimandl@gmail.com>
Date: Tue, 8 Aug 2023 17:47:09 +0200
Subject: [PATCH 1/2] add default style to base_document.html to prevent ugly
 flickering on load

---
 lib/action/theme.py          |   6 +-
 templates/base_document.html | 123 +++++++++++++++++++++++++++++++++++
 2 files changed, 128 insertions(+), 1 deletion(-)

diff --git a/lib/action/theme.py b/lib/action/theme.py
index b777443025..903493b3de 100644
--- a/lib/action/theme.py
+++ b/lib/action/theme.py
@@ -56,5 +56,9 @@ def apply_theme(data, app: Sanic, translate: Callable[[str], str]):
         logo_inline_css=settings.get('theme', 'logo_inline_css', ''),
         online_fonts=settings.get_list('theme', 'fonts'),
         favicon=theme_favicon,
-        favicon_type=theme_favicon_type
+        favicon_type=theme_favicon_type,
+        main_background=os.path.join(public_files_path, 'img/groovepaper2.jpg'),
+        color_default_text='#010101',
+        color_light_text='#8d8c8c',
+        color_default_green='#D1ECBF',
     )
diff --git a/templates/base_document.html b/templates/base_document.html
index 58def9c02d..c782aed913 100644
--- a/templates/base_document.html
+++ b/templates/base_document.html
@@ -31,6 +31,129 @@
 <link href='{{ font }}' rel='stylesheet' type='text/css'>
 {%- endfor -%}
 
+<style>
+    body {
+        font-family: "Roboto", "Segoe UI", Arial, sans-serif;
+        color: {{ theme.color_default_text }};
+        background-image: url("{{ theme.main_background }}");
+        font-size: 10pt;
+        margin: 0;
+        padding: 0;
+        height: 100%;
+    }
+
+    h1 {
+        font-size: 170%;
+        margin-top: 0;
+    }
+
+    h2 {
+        font-size: 140%;
+        margin: 0.5em auto 0.5em 0.5em;
+        font-weight: 500;
+    }
+
+    #viewport {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        top: 0;
+        width: 100%;
+        min-height: 100%;
+    }
+
+    #common-bar {
+        height: 40px;
+        overflow: hidden;
+        background-color: rgba(82, 80, 78, 0.199);
+        color: #000000;
+        width: 100%;
+    }
+
+    header#topbar {
+        padding: 0;
+        color: #000000;
+    }
+
+    header#topbar > * {
+        vertical-align: top;
+    }
+
+    header#topbar #menu-bar {
+        white-space: nowrap;
+    }
+
+    header#topbar .navig-wrapper {
+        display: inline-block;
+        padding: 2em 1em 0 0;
+    }
+
+    header#topbar a#logo-wrapper {
+        display: inline;
+        background-color: transparent;
+    }
+
+    header#topbar a#logo-wrapper img {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    #menu-bar {
+        margin: 0;
+        display: inline-block;
+        white-space: nowrap;
+        background-color: transparent;
+        font-size: 1.2em;
+        width: auto;
+        height: 3em;
+    }
+
+    #main-menu-mount {
+        box-sizing: border-box;
+        margin: 0 0 0 1em;
+        padding: 0 0.7em;
+        display: inline-block;
+        height: 100%;
+        vertical-align: middle;
+        background-color: transparent;
+        border: 2px solid transparent;
+        border-radius: 5px;
+    }
+
+    #main-menu-mount ul {
+        margin: 0;
+        padding: 0;
+        display: inline-block;
+        list-style-type: none;
+    }
+
+    #main-menu-mount ul li {
+        display: inline-block;
+        margin-top: 0;
+        padding: 0.6em 0.3em 0 0.3em;
+        line-height: 1.4em;
+        font-weight: normal;
+        border: 1px solid transparent;
+    }
+
+    #main-menu-mount ul li.disabled .menu-link {
+        color: {{ theme.color_light_text }};
+    }
+
+    #main-menu-mount ul li .menu-link {
+        display: block;
+        text-decoration: none;
+        color: {{ theme.color_default_text }};
+    }
+
+    #main-menu-mount ul li.active {
+        position: relative;
+        background-color: {{ theme.color_default_green }};
+        border: 1px solid {{ theme.color_default_green }};
+    }
+</style>
+
 <link rel="stylesheet" type="text/css" href="{{ files_path }}/dist/{{ page_model }}.css{{ deployment_suff }}" />
 {% for item in app_bar_css %}
 <link rel="stylesheet" type="text/css" href="{{ item.url }}" />

From 3091e7732502529e8475b9235d9e1c7b5c8e7fa5 Mon Sep 17 00:00:00 2001
From: Tomas Machalek <tomas@machalek.xyz>
Date: Wed, 9 Aug 2023 13:39:31 +0200
Subject: [PATCH 2/2] Make styles from rev f6138b0713 more compact

---
 templates/base_document.html | 138 +++++------------------------------
 1 file changed, 18 insertions(+), 120 deletions(-)

diff --git a/templates/base_document.html b/templates/base_document.html
index c782aed913..61f44c3d41 100644
--- a/templates/base_document.html
+++ b/templates/base_document.html
@@ -32,126 +32,24 @@
 {%- endfor -%}
 
 <style>
-    body {
-        font-family: "Roboto", "Segoe UI", Arial, sans-serif;
-        color: {{ theme.color_default_text }};
-        background-image: url("{{ theme.main_background }}");
-        font-size: 10pt;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-    }
-
-    h1 {
-        font-size: 170%;
-        margin-top: 0;
-    }
-
-    h2 {
-        font-size: 140%;
-        margin: 0.5em auto 0.5em 0.5em;
-        font-weight: 500;
-    }
-
-    #viewport {
-        position: absolute;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        top: 0;
-        width: 100%;
-        min-height: 100%;
-    }
-
-    #common-bar {
-        height: 40px;
-        overflow: hidden;
-        background-color: rgba(82, 80, 78, 0.199);
-        color: #000000;
-        width: 100%;
-    }
-
-    header#topbar {
-        padding: 0;
-        color: #000000;
-    }
-
-    header#topbar > * {
-        vertical-align: top;
-    }
-
-    header#topbar #menu-bar {
-        white-space: nowrap;
-    }
-
-    header#topbar .navig-wrapper {
-        display: inline-block;
-        padding: 2em 1em 0 0;
-    }
-
-    header#topbar a#logo-wrapper {
-        display: inline;
-        background-color: transparent;
-    }
-
-    header#topbar a#logo-wrapper img {
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-    #menu-bar {
-        margin: 0;
-        display: inline-block;
-        white-space: nowrap;
-        background-color: transparent;
-        font-size: 1.2em;
-        width: auto;
-        height: 3em;
-    }
-
-    #main-menu-mount {
-        box-sizing: border-box;
-        margin: 0 0 0 1em;
-        padding: 0 0.7em;
-        display: inline-block;
-        height: 100%;
-        vertical-align: middle;
-        background-color: transparent;
-        border: 2px solid transparent;
-        border-radius: 5px;
-    }
-
-    #main-menu-mount ul {
-        margin: 0;
-        padding: 0;
-        display: inline-block;
-        list-style-type: none;
-    }
-
-    #main-menu-mount ul li {
-        display: inline-block;
-        margin-top: 0;
-        padding: 0.6em 0.3em 0 0.3em;
-        line-height: 1.4em;
-        font-weight: normal;
-        border: 1px solid transparent;
-    }
-
-    #main-menu-mount ul li.disabled .menu-link {
-        color: {{ theme.color_light_text }};
-    }
-
-    #main-menu-mount ul li .menu-link {
-        display: block;
-        text-decoration: none;
-        color: {{ theme.color_default_text }};
-    }
-
-    #main-menu-mount ul li.active {
-        position: relative;
-        background-color: {{ theme.color_default_green }};
-        border: 1px solid {{ theme.color_default_green }};
-    }
+    body {font-family: "Roboto", "Segoe UI", Arial, sans-serif;color: {{ theme.color_default_text }};background-image: url("{{ theme.main_background }}");font-size: 10pt;margin: 0;padding: 0;height: 100%;}
+    h1 {font-size: 170%;margin-top: 0;}
+    h2 {font-size: 140%;margin: 0.5em auto 0.5em 0.5em;font-weight: 500;}
+    #viewport {position: absolute;display: flex;flex-direction: column;flex-wrap: nowrap;top: 0;width: 100%;min-height: 100%;}
+    #common-bar {height: 40px;overflow: hidden;background-color: rgba(82, 80, 78, 0.199);color: #000000;width: 100%;}
+    header#topbar {padding: 0;color: #000000;}
+    header#topbar > * {vertical-align: top;}
+    header#topbar #menu-bar {white-space: nowrap;}
+    header#topbar .navig-wrapper {display: inline-block;padding: 2em 1em 0 0;}
+    header#topbar a#logo-wrapper {display: inline;background-color: transparent;}
+    header#topbar a#logo-wrapper img {display: inline-block;vertical-align: middle;}
+    #menu-bar {margin: 0;display: inline-block;white-space: nowrap;background-color: transparent;font-size: 1.2em;width: auto;height: 3em;}
+    #main-menu-mount {box-sizing: border-box;margin: 0 0 0 1em;padding: 0 0.7em;display: inline-block;height: 100%;vertical-align: middle;background-color: transparent;border: 2px solid transparent;border-radius: 5px;}
+    #main-menu-mount ul {margin: 0;padding: 0;display: inline-block;list-style-type: none;}
+    #main-menu-mount ul li {display: inline-block;margin-top: 0;padding: 0.6em 0.3em 0 0.3em;line-height: 1.4em;font-weight: normal;border: 1px solid transparent;}
+    #main-menu-mount ul li.disabled .menu-link {color: {{ theme.color_light_text }};}
+    #main-menu-mount ul li .menu-link {display: block;text-decoration: none;color: {{ theme.color_default_text }};}
+    #main-menu-mount ul li.active {position: relative;background-color: {{ theme.color_default_green }};border: 1px solid {{ theme.color_default_green }};}
 </style>
 
 <link rel="stylesheet" type="text/css" href="{{ files_path }}/dist/{{ page_model }}.css{{ deployment_suff }}" />