Merge pull request #5992 from mzimandl/styling

add default styles to base_document.html to prevent ugly flickering on load
czcorpus · Aug 9, 2023 · 8e1a8c4 · 8e1a8c4
2 parents f1c89e9 + f6138b0
commit 8e1a8c4
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 1 deletion.
diff --git 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
@@ -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 }}" />