From f78cfed41a8e6a18b89287abcc75991c72dc15da Mon Sep 17 00:00:00 2001
From: eli <mail@eliseuama.ro>
Date: Tue, 19 Oct 2021 20:33:01 +0100
Subject: [PATCH] [TWIG][CSS] Template refactoring, classes and their
 respective CSS is now more consistent. CSS variables are back.

---
 components/Left/templates/left/view.html.twig |  16 +-
 .../Right/templates/right/view.html.twig      |   6 +-
 plugins/Poll/templates/poll/newpoll.html.twig |   2 +-
 .../Poll/templates/poll/respondpoll.html.twig |   2 +-
 .../Poll/templates/poll/showpoll.html.twig    |   2 +-
 public/assets/default_theme/css/base.css      | 636 ++++++++++--------
 public/assets/default_theme/css/colors.css    | 447 ++++--------
 .../assets/default_theme/css/pages/feeds.css  | 213 ++++--
 public/components/Left/assets/css/view.css    |  27 +-
 public/components/Right/assets/css/view.css   |  16 +-
 templates/base.html.twig                      |  12 +-
 templates/cards/attachments/show.html.twig    |   2 +-
 templates/note/reply.html.twig                |   2 +-
 13 files changed, 708 insertions(+), 675 deletions(-)

diff --git a/components/Left/templates/left/view.html.twig b/components/Left/templates/left/view.html.twig
index bcdad88f4c..afca56c7e9 100644
--- a/components/Left/templates/left/view.html.twig
+++ b/components/Left/templates/left/view.html.twig
@@ -1,22 +1,24 @@
 {% block leftpanel %}
-<div class="panel panel-left">
-    <input type="checkbox" id="panel-left-toggle" aria-hidden="true" tabindex="-1">
-    <label id="panel-left-icon" for="panel-left-toggle" aria-hidden="true" tabindex="-1">{{ icon('menu', 'icon icon-left') | raw }}</label>
+<label class="panel-left-icon" for="panel-left-toggle" aria-hidden="true" tabindex="-1">{{ icon('menu', 'icon icon-left') | raw }}</label>
+<input type="checkbox" id="panel-left-toggle" aria-hidden="true" tabindex="-1">
 
+<section class="header-panel section-panel-left">
     <a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
     <aside class="panel-content accessibility-target">
         {% if app.user %}
             <section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
                 {% block profile_view %}{% include 'cards/profile/view.html.twig' with { actor: current_actor } %}{% endblock profile_view %}
                 {{ block("profile_current_actor", "cards/navigation/view.html.twig") }}
-            {% else %}
+            </section>
+        {% else %}
+            <section>
                 {{ block("profile_security", "cards/navigation/view.html.twig") }}
-            {% endif %}
-        </section>
+            </section>
+        {% endif %}
 
         {{ block("timeline", "cards/navigation/view.html.twig") }}
 
         {{ block("footer", "cards/navigation/view.html.twig") }}
     </aside>
-</div>
+</section>
 {% endblock leftpanel %}
diff --git a/components/Right/templates/right/view.html.twig b/components/Right/templates/right/view.html.twig
index ea2f1323b4..1fe397b326 100644
--- a/components/Right/templates/right/view.html.twig
+++ b/components/Right/templates/right/view.html.twig
@@ -1,8 +1,8 @@
 {% block rightpanel %}
-<div class="panel panel-right">
-    <input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">
-    <label id="panel-right-icon" for="panel-right-toggle" aria-hidden="true" tabindex="-1">{{ icon('notes', 'icon icon-right') | raw }}</label>
+<label class="panel-right-icon" for="panel-right-toggle" aria-hidden="true" tabindex="-1">{{ icon('notes', 'icon icon-right') | raw }}</label>
+<input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">
 
+<div class="header-panel section-panel-right">
     <a id="anchor-right-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
     <aside class="panel-content accessibility-target">
 
diff --git a/plugins/Poll/templates/poll/newpoll.html.twig b/plugins/Poll/templates/poll/newpoll.html.twig
index 868d45ec10..f14f3fafd4 100644
--- a/plugins/Poll/templates/poll/newpoll.html.twig
+++ b/plugins/Poll/templates/poll/newpoll.html.twig
@@ -28,7 +28,7 @@
 
 {% block body %}
   {{ parent() }}
-<div class="content">
+<div class="page">
     <div class="create-notice">
         <div class="create-poll-notice">
             {% block form %}
diff --git a/plugins/Poll/templates/poll/respondpoll.html.twig b/plugins/Poll/templates/poll/respondpoll.html.twig
index 4aa1af2abf..9c998ff6c1 100644
--- a/plugins/Poll/templates/poll/respondpoll.html.twig
+++ b/plugins/Poll/templates/poll/respondpoll.html.twig
@@ -3,7 +3,7 @@
 {% block title %}Poll{% endblock %}
 
 {% block body %}
-    <div class="content">
+    <div class="page">
         <div class="poll">
             <p class="poll-question">Q. {{ question }}</p>
             {% block form %}
diff --git a/plugins/Poll/templates/poll/showpoll.html.twig b/plugins/Poll/templates/poll/showpoll.html.twig
index ed56ef24e4..32319f3d30 100644
--- a/plugins/Poll/templates/poll/showpoll.html.twig
+++ b/plugins/Poll/templates/poll/showpoll.html.twig
@@ -26,7 +26,7 @@
 {% endblock %}
 
 {% block body %}
-    <div class="content">
+    <div class="page">
         <div class="poll">
             <p class="poll-question">Q. {{ poll.question }}</p>
             <ul>
diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css
index 7a986769e4..afe26337b3 100644
--- a/public/assets/default_theme/css/base.css
+++ b/public/assets/default_theme/css/base.css
@@ -4,165 +4,261 @@
 @import url("widgets/sections.css");
 @import url("colors.css");
 
-:link,
-:visited {
-    text-decoration: none;
-    color: currentColor;
-}
-a:hover {
-    text-decoration: underline;
+/* Sizes vars */
+:root {
+    --smaller: 0.6rem;
+    --default: 1rem;
+    --small: 1.3rem;
+    --medium: 1.62rem;
+    --big: 3rem;
 }
 
-hr {
-    all: unset;
-    display: block;
-    height: 1px;
-}
-
-ol,
-ul {
-    list-style: none;
-}
-
-blockquote,
-body,
-fieldset,
-form,
-html,
-input,
-pre,
-textarea {
-    margin: 0;
-    padding: 0;
-    border: none;
-}
-:link img,
-:visited img,
-a img {
-    border: none;
-}
-
-address {
-    font-style: normal;
-}
-
-:focus {
-    outline: none;
-}
-
-::-moz-focus-inner {
-    border: 0;
-}
-
-details summary > * {
-    margin: unset;
-    padding: unset;
-}
-
-details > summary {
-    list-style: none;
-}
-
-details > summary::-webkit-details-marker {
-    display: none;
-}
-@supports not (-ms-ime-align: auto) {
-    details summary {
-        cursor: pointer;
+/* RESET START */
+    :link,
+    :visited {
+        text-decoration: none;
+        color: currentColor;
+    }
+    a:hover {
+        text-decoration: underline;
     }
-}
 
-[hidden] {
-    display: none;
-}
+    hr {
+        all: unset;
+        display: block;
+        height: 1px;
+    }
 
-* {
-    -webkit-box-sizing: border-box !important;
-    -moz-box-sizing: border-box !important;
-    box-sizing: border-box !important;
-}
+    ol,
+    ul {
+        list-style: none;
+    }
 
-body,
-html {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background-attachment: fixed;
-    font-family: 'Open Sans', sans-serif;
-    font-size: 1rem;
-}
+    blockquote,
+    body,
+    fieldset,
+    form,
+    html,
+    input,
+    pre,
+    textarea {
+        margin: 0;
+        padding: 0;
+        border: none;
+    }
+    :link img,
+    :visited img,
+    a img {
+        border: none;
+    }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    all: unset;
-    display: block;
-    font-family: 'Poppins', sans-serif;
-}
+    address {
+        font-style: normal;
+    }
 
-h1 {
-    font-size: 1.62rem;
-    font-weight: 700;
-    margin-bottom: 16.2px;
-}
+    :focus {
+        outline: none;
+    }
 
-h2 {
-    font-size: 1.3rem;
-    font-weight: 600;
-    margin-bottom: 13px;
-}
+    ::-moz-focus-inner {
+        border: 0;
+    }
 
-h3 {
-    font-size: 1rem;
-    font-weight: 600;
-    margin-bottom: 10px;
-}
+    details summary > * {
+        margin: unset;
+        padding: unset;
+    }
 
-h4,
-h5 {
-    font-size: 1rem;
-    font-weight: 400;
-    margin-bottom: 6.1px;
-}
+    details > summary {
+        list-style: none;
+    }
 
-p {
-    font-family: 'Open Sans', sans-serif;
-    font-size: 1rem;
-    font-weight: 400;
-    margin: unset;
-}
-p:first-line {
-    padding-left: 1rem;
-}
-p:first-line {
-    margin-top: 0;
-    margin-bottom: 10px;
-}
-p:not(:first-line) {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
+    details > summary::-webkit-details-marker {
+        display: none;
+    }
 
-input[type=password],
-input[type=text],
-textarea {
-    font-family: 'Open Sans', sans-serif;
-    font-weight: 400;
-    padding: 4px 6px;
-}
+    /* Internet Explorer <details> graceful degradation */
+    @supports not (-ms-ime-align: auto) {
+        details summary {
+            cursor: pointer;
+        }
+    }
 
-ul {
-    text-decoration: none;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
+    [hidden] {
+        display: none;
+    }
 
-li {
-    margin: 0;
-    padding: 0;
+    * {
+        -webkit-box-sizing: border-box !important;
+        -moz-box-sizing: border-box !important;
+        box-sizing: border-box !important;
+    }
+
+    body,
+    html {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        background-attachment: fixed;
+        font-family: 'Open Sans', sans-serif;
+        font-size: var(--default);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        all: unset;
+        display: block;
+        font-family: 'Poppins', sans-serif;
+    }
+
+    h1 {
+        font-size: var(--medium);
+        font-weight: 700;
+        margin-bottom: 16.2px;
+    }
+
+    h2 {
+        font-size: var(--small);
+        font-weight: 600;
+        margin-bottom: 13px;
+    }
+
+    h3 {
+        font-size: var(--default);
+        font-weight: 600;
+        margin-bottom: 10px;
+    }
+
+    h4,
+    h5 {
+        font-size: var(--default);
+        font-weight: 400;
+        margin-bottom: 6.1px;
+    }
+
+    p {
+        font-family: 'Open Sans', sans-serif;
+        font-size: var(--default);
+        font-weight: 400;
+        margin: unset;
+    }
+    p:first-line {
+        padding-left: var(--default);
+    }
+    p:first-line {
+        margin-top: 0;
+        margin-bottom: 10px;
+    }
+    p:not(:first-line) {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+    input[type=password],
+    input[type=text],
+    textarea {
+        font-family: 'Open Sans', sans-serif;
+        font-weight: 400;
+        padding: 4px 6px;
+    }
+
+    ul {
+        text-decoration: none;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    li {
+        margin: 0;
+        padding: 0;
+    }
+/* RESET END */
+
+/* DARK AND LIGHT COLOUR SCHEMES START */
+    @media (prefers-color-scheme: dark) {
+        /* Colour vars */
+        :root {
+            --foreground: #FFF;
+            --background-hard: #242434;
+            --background-soft: #46465E;
+            --background-checkerboard: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
+            --accent: #8081BA;
+            --translucent: #24243466;
+            --shadow: 0 0 16px 0 #00000016;
+            --shadow-light: 0 0 16px 0 #FFFFFF16;
+            --shadow-inset-accent: inset 0 0 0 2px #8081BA;
+            --gradient: linear-gradient(to right, var(--translucent), transparent) !important;
+            --tneidarg: linear-gradient(to left, var(--translucent), transparent) !important;
+        }
+
+        /* The page background image itself */
+        .background-image {
+            background-image: url("../images/background_dark.png");
+        }
+        /* Select element custom dropdown arrow */
+        select {
+            background-image: url("../images/select_drop_dark.png") !important;
+        }
+    }
+
+    @media (prefers-color-scheme: light) {
+        /* Colour vars */
+        :root {
+            --foreground: #242434;
+            --background-hard: #eceff4;
+            --background-soft: #4c566a66;
+            --accent: #4c566a;
+            --translucent: #FFFFFFAA;
+            --shadow: 0 0 16px 0 #FFFFFF16;
+            --shadow-light: 0 0 16px 0 #00000016;
+            --shadow-inset-accent: inset 0 0 0 2px #4c566a;
+            --gradient: linear-gradient(to right, #FFFFFFAA, transparent) !important;
+            --tneidarg: linear-gradient(to left, #FFFFFFAA, transparent) !important;
+        }
+
+        /* The page background image itself */
+        .background-image {
+            background-image: url("../images/background_light.png");
+        }
+
+        /* Select element custom dropdown arrow */
+        select {
+            background-image: url("../images/select_drop_light.png") !important;
+        }
+    }
+/* DARK AND LIGHT COLOUR SCHEMES END */
+
+/* MISCELLANEOUS START */
+    /* Align all icon .svg to center */
+    .icon {
+        align-self: center;
+    }
+
+    /* All active links should pop up, the user should be aware where it is */
+    .active {
+        font-weight: bold;
+    }
+
+    /* Hide all anchors used for accesskey shortcuts */
+    .anchor-hidden {
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+    }
+/* MISCELLANEOUS END */
+
+/* Background image and noise (Firefox-based browsers present banding without it) */
+.background-image {
+    background-position: center;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    -moz-background-size: 100% 100%;
+    -o-background-size: 100% 100%;
+    background-size: 100% 100%;
 }
 
 body:after {
@@ -177,35 +273,6 @@ body:after {
 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
     opacity: 21%;
 }
-
-html {
-    scroll-margin-top: 3rem;
-}
-
-.bg {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-}
-
-.h-entry img {
-    background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
-}
-
-.icon {
-    align-self: center;
-}
-
-.active {
-    font-weight: bold;
-}
-
-.anchor-hidden {
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-}
-
 .accessibility-menu {
     display: block;
     position: absolute;
@@ -214,31 +281,35 @@ html {
     left: -90%;
     width: 30%;
     height: min-content;
-    padding: 0.6rem;
-    border-radius: 0.6rem;
+    padding: var(--smaller);
+    border-radius: var(--smaller);
 }
 
 .accessibility-menu ul {
     list-style-type: disc;
-    margin-left: 1.3rem;
+    margin-left: var(--small);
 }
 .accessibility-menu:focus-within:not(:active) {
-    top: 0.6rem;
-    left: 0.6rem;
+    top: var(--smaller);
+    left: var(--smaller);
 }
 
-#header {
+.page-header {
     z-index: 1;
     font-family: 'Poppins', sans-serif;
-    font-size: 1.62rem;
-    height: 3rem;
+    font-size: var(--medium);
+    height: var(--big);
     display: flex;
     justify-content: center;
     position: fixed;
     top: 0;
     width: 100%;
     align-items: center;
-    padding: 0.6rem;
+    padding: var(--smaller);
+}
+/* Allow scrolling all the way to the top ("page-header" has a height of 3rem) */
+html {
+    scroll-margin-top: var(--big);
 }
 
 .header-instance {
@@ -254,39 +325,41 @@ html {
     margin: unset;
 }
 
-.header-extra-forms {
+.header-extra-actions {
     justify-self: flex-end;
     margin-left: auto;
 }
-.header-extra-forms[open] > *:not(summary) {
+.header-extra-actions[open] > *:not(summary) {
     z-index: 2;
     position: absolute;
     top: 100%;
     right: 0;
     width: 19vw;
-    font-size: 1rem;
-    border-radius: 0 0 0.6rem 0.6rem;
-    padding: 0.6rem;
+    font-size: var(--default);
+    border-radius: 0 0 var(--smaller) var(--smaller);
+    padding: var(--smaller);
+    background: var(--background-hard);
+    box-shadow: var(--shadow);
 }
 
-.content-wrapper {
+.page-content-wrapper {
     position: relative;
     margin-left: auto;
     margin-right: auto;
     justify-content: center;
-    padding: 0.6rem 0.6rem 0;
+    padding: var(--smaller) var(--smaller) 0;
 }
 
-.content {
+.page-content {
     display: flex;
     flex-direction: column;
-    padding: 0.6rem 0.6rem 0;
+    padding: var(--smaller) var(--smaller) 0;
     width: 100%;
 }
 
 .markdown-blocks {
-    border-radius: 0 0 0.6rem 0.6rem;
-    padding: 0.6rem;
+    border-radius: 0 0 var(--smaller) var(--smaller);
+    padding: var(--smaller);
 }
 
 .markdown-blocks ul {
@@ -299,62 +372,72 @@ html {
 }
 
 .doc-navigation {
-    border-radius: 0.6rem 0.6rem 0 0;
+    border-radius: var(--smaller) var(--smaller) 0 0;
     border-bottom: none;
-    padding: 0.6rem;
+    padding: var(--smaller);
 }
 
 .doc-navigation ul {
     display: flex;
     justify-content: space-evenly;
-    font-size: 1.62rem;
+    font-size: var(--medium);
 }
 
 #replyform {
-    padding: 0.6rem;
-    margin-top: 0.6rem;
-    border-radius: 0.6rem;
+    padding: var(--smaller);
+    margin-top: var(--smaller);
+    border-radius: var(--smaller);
     display: flex;
     flex-direction: column;
-    font-size: 1rem;
+    font-size: var(--default);
 }
 
 #replyform textarea {
     width: 100%;
     resize: vertical;
-    margin-top: 0.6rem;
-    padding: 0.6rem;
+    margin-top: var(--smaller);
+    padding: var(--smaller);
 }
 
-.content-wrapper {
-    top: 3rem;
+.page-content-wrapper {
+    top: var(--big);
     width: 62vw;
 }
 
-.panel .panel-content {
+.header-panel {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    -moz-box-orient: vertical;
+    -moz-box-direction: normal;
+    -ms-flex-direction: column;
     flex-direction: column;
     font-family: 'Open Sans', sans-serif;
-    font-size: 1rem;
+    font-size: var(--default);
     position: fixed;
     top: 0;
-    margin-top: 3rem;
-    height: calc(100% - 3rem);
-    padding: 0.6rem;
+    margin-top: var(--big);
+    height: -webkit-calc(100% - var(--big));
+    height: -moz-calc(100% - var(--big));
+    height: calc(100% - var(--big));
+    padding: var(--smaller);
     overflow-y: auto;
 }
 
-#panel-right-icon {
-    margin-left: 12px !important;
-}
 @media only screen and (min-width: 1281px) {
-    .content {
-        padding: 0.6rem 1.62rem 0;
+    .page-content {
+        padding: var(--smaller) var(--medium) 0;
     }
 
-    .panel .panel-content {
+    .header-panel {
         width: 19vw;
     }
+
     a[id|="anchor"]:target + .accessibility-target {
         -webkit-animation-name: highlight;
         -moz-animation-name: highlight;
@@ -371,22 +454,24 @@ html {
     }
 }
 @media only screen and (max-width: 1280px) {
-    .content-wrapper {
+    .page-content-wrapper {
         width: 100%;
     }
 
-    .content {
+    .page-content {
         max-width: 100%;
     }
-    .header-extra-forms[open] > *:not(summary) {
+
+    .header-extra-actions[open] > *:not(summary) {
         width: 100%;
     }
-    #panel-left-toggle:not(:checked) ~ .panel-content,
-    #panel-right-toggle:not(:checked) ~ .panel-content {
+
+    #panel-left-toggle:not(:checked) + .header-panel,
+    #panel-right-toggle:not(:checked) + .header-panel {
         display: none;
     }
-    #panel-left-toggle:checked ~ .panel-content,
-    #panel-right-toggle:checked ~ .panel-content,
+    #panel-left-toggle:checked + .header-panel,
+    #panel-right-toggle:checked + .header-panel,
     a[id|="anchor"]:target ~ .panel-content {
         display: -webkit-box;
         display: -webkit-flex;
@@ -400,21 +485,24 @@ html {
         background-size: 100% 100%;
         z-index: auto;
     }
+
     @media (prefers-color-scheme: dark) {
-        #panel-left-toggle:checked ~ .panel-content,
-        #panel-right-toggle:checked ~ .panel-content,
+        #panel-left-toggle:checked + .header-panel,
+        #panel-right-toggle:checked + .header-panel,
         a[id|="anchor"]:target ~ .panel-content {
             background-image: url("../images/background_dark.png");
         }
     }
+
     @media (prefers-color-scheme: light) {
-        #panel-left-toggle checked ~ .panel-content,
-        #panel-right-toggle checked ~ .panel-content,
+        #panel-left-toggle:checked + .header-panel,
+        #panel-right-toggle:checked + .header-panel,
         a[id|="anchor"]:target ~ .panel-content {
             background-image: url("../images/background_light.png");
         }
     }
 }
+
 @-webkit-keyframes fadeIn {
     0% {
         opacity: 0;
@@ -524,12 +612,12 @@ html {
         0% {
             -webkit-box-shadow: initial;
             box-shadow: initial;
-            -webkit-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -webkit-border-radius: var(--smaller);
+            border-radius: var(--smaller);
         }
         50% {
-            -webkit-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -webkit-border-radius: var(--smaller);
+            border-radius: var(--smaller);
             -webkit-box-shadow: inset 0 20px 40px #FFF;
             box-shadow: inset 0 20px 40px #FFF;
             -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
@@ -542,20 +630,20 @@ html {
         100% {
             -webkit-box-shadow: initial;
             box-shadow: initial;
-            -webkit-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -webkit-border-radius: var(--smaller);
+            border-radius: var(--smaller);
         }
     }
     @-moz-keyframes highlight {
         0% {
             -moz-box-shadow: initial;
             box-shadow: initial;
-            -moz-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -moz-border-radius: var(--smaller);
+            border-radius: var(--smaller);
         }
         50% {
-            -moz-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -moz-border-radius: var(--smaller);
+            border-radius: var(--smaller);
             -moz-box-shadow: inset 0 20px 40px #FFF;
             box-shadow: inset 0 20px 40px #FFF;
             -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
@@ -568,17 +656,17 @@ html {
         100% {
             -moz-box-shadow: initial;
             box-shadow: initial;
-            -moz-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -moz-border-radius: var(--smaller);
+            border-radius: var(--smaller);
         }
     }
     @-o-keyframes highlight {
         0% {
             box-shadow: initial;
-            border-radius: 0.6rem;
+            border-radius: var(--smaller);
         }
         50% {
-            border-radius: 0.6rem;
+            border-radius: var(--smaller);
             box-shadow: inset 0 20px 40px #FFF;
             -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
             transition: -webkit-box-shadow 0.3s ease-in-out;
@@ -589,7 +677,7 @@ html {
         }
         100% {
             box-shadow: initial;
-            border-radius: 0.6rem;
+            border-radius: var(--smaller);
         }
     }
     @keyframes highlight {
@@ -597,14 +685,14 @@ html {
             -webkit-box-shadow: initial;
             -moz-box-shadow: initial;
             box-shadow: initial;
-            -webkit-border-radius: 0.6rem;
-            -moz-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -webkit-border-radius: var(--smaller);
+            -moz-border-radius: var(--smaller);
+            border-radius: var(--smaller);
         }
         50% {
-            -webkit-border-radius: 0.6rem;
-            -moz-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -webkit-border-radius: var(--smaller);
+            -moz-border-radius: var(--smaller);
+            border-radius: var(--smaller);
             -webkit-box-shadow: inset 0 20px 40px #FFF;
             -moz-box-shadow: inset 0 20px 40px #FFF;
             box-shadow: inset 0 20px 40px #FFF;
@@ -619,9 +707,9 @@ html {
             -webkit-box-shadow: initial;
             -moz-box-shadow: initial;
             box-shadow: initial;
-            -webkit-border-radius: 0.6rem;
-            -moz-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -webkit-border-radius: var(--smaller);
+            -moz-border-radius: var(--smaller);
+            border-radius: var(--smaller);
         }
     }
 }
@@ -630,12 +718,12 @@ html {
         0% {
             -webkit-box-shadow: initial;
             box-shadow: initial;
-            -webkit-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -webkit-border-radius: var(--smaller);
+            border-radius: var(--smaller);
         }
         50% {
-            -webkit-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -webkit-border-radius: var(--smaller);
+            border-radius: var(--smaller);
             -webkit-box-shadow: inset 0 20px 40px #000;
             box-shadow: inset 0 20px 40px #000;
             -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
@@ -648,20 +736,20 @@ html {
         100% {
             -webkit-box-shadow: initial;
             box-shadow: initial;
-            -webkit-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -webkit-border-radius: var(--smaller);
+            border-radius: var(--smaller);
         }
     }
     @-moz-keyframes highlight {
         0% {
             -moz-box-shadow: initial;
             box-shadow: initial;
-            -moz-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -moz-border-radius: var(--smaller);
+            border-radius: var(--smaller);
         }
         50% {
-            -moz-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -moz-border-radius: var(--smaller);
+            border-radius: var(--smaller);
             -moz-box-shadow: inset 0 20px 40px #000;
             box-shadow: inset 0 20px 40px #000;
             -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
@@ -674,17 +762,17 @@ html {
         100% {
             -moz-box-shadow: initial;
             box-shadow: initial;
-            -moz-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -moz-border-radius: var(--smaller);
+            border-radius: var(--smaller);
         }
     }
     @-o-keyframes highlight {
         0% {
             box-shadow: initial;
-            border-radius: 0.6rem;
+            border-radius: var(--smaller);
         }
         50% {
-            border-radius: 0.6rem;
+            border-radius: var(--smaller);
             box-shadow: inset 0 20px 40px #000;
             -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
             transition: -webkit-box-shadow 0.3s ease-in-out;
@@ -695,7 +783,7 @@ html {
         }
         100% {
             box-shadow: initial;
-            border-radius: 0.6rem;
+            border-radius: var(--smaller);
         }
     }
     @keyframes highlight {
@@ -703,14 +791,14 @@ html {
             -webkit-box-shadow: initial;
             -moz-box-shadow: initial;
             box-shadow: initial;
-            -webkit-border-radius: 0.6rem;
-            -moz-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -webkit-border-radius: var(--smaller);
+            -moz-border-radius: var(--smaller);
+            border-radius: var(--smaller);
         }
         50% {
-            -webkit-border-radius: 0.6rem;
-            -moz-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -webkit-border-radius: var(--smaller);
+            -moz-border-radius: var(--smaller);
+            border-radius: var(--smaller);
             -webkit-box-shadow: inset 0 20px 40px #000;
             -moz-box-shadow: inset 0 20px 40px #000;
             box-shadow: inset 0 20px 40px #000;
@@ -725,9 +813,9 @@ html {
             -webkit-box-shadow: initial;
             -moz-box-shadow: initial;
             box-shadow: initial;
-            -webkit-border-radius: 0.6rem;
-            -moz-border-radius: 0.6rem;
-            border-radius: 0.6rem;
+            -webkit-border-radius: var(--smaller);
+            -moz-border-radius: var(--smaller);
+            border-radius: var(--smaller);
         }
     }
 }
diff --git a/public/assets/default_theme/css/colors.css b/public/assets/default_theme/css/colors.css
index 2f2b65cfcf..dc81add238 100644
--- a/public/assets/default_theme/css/colors.css
+++ b/public/assets/default_theme/css/colors.css
@@ -1,334 +1,149 @@
-@media (prefers-color-scheme: dark) {
-    button:focus,
-    button:hover,
-    input:focus,
-    input:hover,
-    select:focus,
-    select:hover,
-    textarea:focus,
-    textarea:hover {
-        -webkit-box-shadow: inset 0 0 0 2px #8081BA !important;
-        -moz-box-shadow: inset 0 0 0 2px #8081BA !important;
-        box-shadow: inset 0 0 0 2px #8081BA !important;
-    }
-    *:focus {
-        -webkit-box-shadow: inset 0 0 0 2px #8081BA;
-        -moz-box-shadow: inset 0 0 0 2px #8081BA;
-        box-shadow: inset 0 0 0 2px #8081BA;
-    }
-    #header,
-    .accessibility-menu,
-    .header-extra-forms-open,
-    .section-title-details,
-    .set-background-color-hard,
-    input[type=checkbox]:checked ~ .panel-content,
-    input[type=radio] {
-        background-color: #242434 !important;
-    }
 
-    .button-container,
-    .note-actions-set,
-    .set-background-color-soft,
-    hr,
-    input[type=checkbox] {
-        background-color: #46465E !important;
-    }
 
-    #replyform,
-    .doc-navigation,
-    .h-entry,
-    .markdown-blocks,
-    .profile,
-    .section-attachments,
-    .section-settings,
-    .section-settings ul,
-    .section-widget,
-    .set-background-color-alpha,
-    button,
-    input,
-    select,
-    textarea {
-        background-color: #1A1A2666 !important;
-    }
-    .set-background-color-gradient,
-    button:not(.button-container),
-    input[type=file] {
-        background: -webkit-gradient(linear, left top, left bottom, from(#46465E), to(transparent)) !important;
-        background: -webkit-linear-gradient(top, #46465E, transparent) !important;
-        background: -moz-linear-gradient(top, #46465E, transparent) !important;
-        background: -o-linear-gradient(top, #46465E, transparent) !important;
-        background: linear-gradient(180deg, #46465E, transparent) !important;
-    }
-
-    .note-info {
-        background: -webkit-gradient(linear, right top, left top, from(#1A1A2666), to(transparent)) !important;
-        background: -webkit-linear-gradient(right, #1A1A2666, transparent) !important;
-        background: -moz-linear-gradient(right, #1A1A2666, transparent) !important;
-        background: -o-linear-gradient(right, #1A1A2666, transparent) !important;
-        background: linear-gradient(to left, #1A1A2666, transparent) !important;
-    }
-
-    .section-settings hr {
-        background-image: -webkit-gradient(linear, left top, right top, from(#1A1A2666), color-stop(90%, transparent));
-        background-image: -webkit-linear-gradient(left, #1A1A2666, transparent 90%);
-        background-image: -moz-linear-gradient(left, #1A1A2666, transparent 90%);
-        background-image: -o-linear-gradient(left, #1A1A2666, transparent 90%);
-        background-image: linear-gradient(to right, #1A1A2666, transparent 90%);
-    }
-
-    .form .separator {
-        background-image: -webkit-gradient(linear, left top, left bottom, from(#1A1A2666), color-stop(90%, transparent));
-        background-image: -webkit-linear-gradient(top, #1A1A2666, transparent 90%);
-        background-image: -moz-linear-gradient(top, #1A1A2666, transparent 90%);
-        background-image: -o-linear-gradient(top, #1A1A2666, transparent 90%);
-        background-image: linear-gradient(to bottom, #1A1A2666, transparent 90%);
-    }
-    .button-container:focus,
-    .button-container:hover,
-    .set-background-color-accent,
-    input[type=checkbox],
-    input[type=checkbox]:focus,
-    input[type=checkbox]:hover,
-    input[type=radio]:focus,
-    input[type=radio]:hover {
-        background-color: #8081BA !important;
-    }
-
-    .note-actions-set,
-    .set-background-color-foreground {
-        background-color: #FFF !important;
-    }
-
-    ::-webkit-file-upload-button {
-        color: #FFF;
-        fill: #FFF;
-    }
-
-    ::file-selector-button {
-        color: #FFF;
-        fill: #FFF;
-    }
-
-    body,
-    input,
-    textarea,
-    select {
-        color: #FFF;
-        fill: #FFF;
-    }
-
-    .accessibility-menu,
-    .set-border-accent {
-        border: 2px solid #8081BA;
-    }
-    .doc-navigation,
-    .h-entry,
-    .markdown-blocks,
-    .section-settings,
-    .section-settings ul,
-    .section-widget,
-    .set-border-soft,
-    button,
-    input,
-    select,
-    textarea {
-        border: 2px solid #46465E !important;
-    }
-
-    #header,
-    .h-entry,
-    .header-extra-forms-open,
-    .profile,
-    .set-shadow-dark,
-    button,
-    input,
-    select,
-    textarea {
-        -webkit-box-shadow: 0 0 16px 0 #00000016;
-        -moz-box-shadow: 0 0 16px 0 #00000016;
-        box-shadow: 0 0 16px 0 #00000016;
-    }
-
-    .set-shadow-light {
-        -webkit-box-shadow: 0 0 16px 0 #FFFFFF16;
-        -moz-box-shadow: 0 0 16px 0 #FFFFFF16;
-        box-shadow: 0 0 16px 0 #FFFFFF16;
-    }
-
-    .bg {
-        background-image: url("../images/background_dark.png");
-    }
-
-    select {
-        background-image: url("../images/select_drop_dark.png") !important;
-    }
+/* Focus and hover (inset shadow is used in alternative to a border to prevent further redraws) */
+button:focus,
+button:hover,
+input:focus,
+input:hover,
+select:focus,
+select:hover,
+textarea:focus,
+textarea:hover {
+    -webkit-box-shadow: var(--shadow-inset-accent) !important;
+    -moz-box-shadow: var(--shadow-inset-accent) !important;
+    box-shadow: var(--shadow-inset-accent) !important;
 }
-@media (prefers-color-scheme: light) {
-    button:focus,
-    button:hover,
-    input:focus,
-    input:hover,
-    select:focus,
-    select:hover,
-    textarea:focus,
-    textarea:hover {
-        -webkit-box-shadow: inset 0 0 0 2px #2e3440 !important;
-        -moz-box-shadow: inset 0 0 0 2px #2e3440 !important;
-        box-shadow: inset 0 0 0 2px #2e3440 !important;
-    }
-    *:focus {
-        -webkit-box-shadow: inset 0 0 0 2px #2e3440;
-        -moz-box-shadow: inset 0 0 0 2px #2e3440;
-        box-shadow: inset 0 0 0 2px #2e3440;
-    }
-    #header,
-    .accessibility-menu,
-    .header-extra-forms-open,
-    .section-title-details,
-    .set-background-color-hard,
-    input[type=checkbox]:checked ~ .panel-content,
-    input[type=radio] {
-        background-color: #eceff4 !important;
-    }
 
-    .note-actions-set,
-    .set-background-color-soft,
-    hr,
-    input[type=checkbox] {
-        background-color: #4c566a66 !important;
-    }
+*:focus {
+    -webkit-box-shadow: var(--shadow-inset-accent);
+    -moz-box-shadow: var(--shadow-inset-accent);
+    box-shadow: var(--shadow-inset-accent);
+}
 
-    #replyform,
-    .doc-navigation,
-    .h-entry,
-    .markdown-blocks,
-    .profile,
-    .section-attachments,
-    .section-settings,
-    .section-settings ul,
-    .section-widget,
-    .set-background-color-alpha,
-    button,
-    input,
-    select,
-    textarea {
-        background-color: #eceff488 !important;
-    }
-    .set-background-color-gradient,
-    button:not(.button-container),
-    input[type=file] {
-        background: -webkit-gradient(linear, left top, left bottom, from(#d8dee966), to(transparent)) !important;
-        background: -webkit-linear-gradient(top, #d8dee966, transparent) !important;
-        background: -moz-linear-gradient(top, #d8dee966, transparent) !important;
-        background: -o-linear-gradient(top, #d8dee966, transparent) !important;
-        background: linear-gradient(180deg, #d8dee966, transparent) !important;
-    }
+.page-header,
+.accessibility-menu,
+.header-extra-forms-open,
+.set-background-color-hard,
+input[type=checkbox]:checked~.panel-content,
+input[type=radio] {
+    background-color: var(--background-hard) !important;
+}
 
-    .note-info {
-        background: -webkit-gradient(linear, right top, left top, from(#eceff488), to(transparent)) !important;
-        background: -webkit-linear-gradient(right, #eceff488, transparent) !important;
-        background: -moz-linear-gradient(right, #eceff488, transparent) !important;
-        background: -o-linear-gradient(right, #eceff488, transparent) !important;
-        background: linear-gradient(to left, #eceff488, transparent) !important;
-    }
+.button-container,
+.note-actions-set,
+.set-background-color-soft,
+hr,
+input[type=checkbox] {
+    background-color: var(--background-soft) !important;
+}
 
-    .section-settings hr {
-        background-image: -webkit-gradient(linear, left top, right top, from(#d8dee966), color-stop(90%, transparent));
-        background-image: -webkit-linear-gradient(left, #d8dee966, transparent 90%);
-        background-image: -moz-linear-gradient(left, #d8dee966, transparent 90%);
-        background-image: -o-linear-gradient(left, #d8dee966, transparent 90%);
-        background-image: linear-gradient(to right, #d8dee966, transparent 90%);
-    }
+#replyform,
+.doc-navigation,
+.h-entry,
+.markdown-blocks,
+.profile,
+.section-title-details,
+.section-attachments,
+.section-settings,
+.section-settings ul,
+.section-widget,
+.set-background-color-alpha,
+button,
+input,
+select,
+textarea {
+    background-color: var(--translucent) !important;
+}
 
-    .form .separator {
-        background-image: -webkit-gradient(linear, left top, left bottom, from(#d8dee966), color-stop(90%, transparent));
-        background-image: -webkit-linear-gradient(top, #d8dee966, transparent 90%);
-        background-image: -moz-linear-gradient(top, #d8dee966, transparent 90%);
-        background-image: -o-linear-gradient(top, #d8dee966, transparent 90%);
-        background-image: linear-gradient(to bottom, #d8dee966, transparent 90%);
-    }
-    .button-container:focus,
-    .button-container:hover,
-    .set-background-color-accent,
-    input[type=checkbox]:focus,
-    input[type=checkbox]:hover,
-    input[type=radio]:focus,
-    input[type=radio]:hover {
-        background-color: #2e3440 !important;
-    }
+.set-background-color-gradient,
+button:not(.button-container),
+input[type=file] {
+    background: var(--gradient) !important;
+}
 
-    .note-actions-unset {
-        background-color: #2e344055 !important;
-    }
-    .note-actions-set,
-    .set-background-color-foreground,
-    input[type=checkbox]:checked,
-    input[type=radio]:checked {
-        background-color: #2e3440 !important;
-    }
+.note-info {
+    background: var(--tneidarg) !important;
+}
 
-    ::-webkit-file-upload-button {
-        color: #2e3440;
-        fill: #2e3440;
-    }
+.section-settings hr {
+    background: var(--background-soft) !important;
+}
 
-    ::file-selector-button {
-        color: #2e3440;
-        fill: #2e3440;
-    }
+.button-container:focus,
+.button-container:hover,
+.set-background-color-accent,
+input[type=checkbox],
+input[type=checkbox]:focus,
+input[type=checkbox]:hover,
+input[type=radio]:focus,
+input[type=radio]:hover {
+    background-color: var(--accent) !important;
+}
 
-    body,
-    input,
-    textarea,
-    select {
-        color: #2e3440;
-        fill: #2e3440;
-    }
+.note-actions-set,
+.set-background-color-foreground {
+    background-color: var(--foreground) !important;
+}
 
-    .accessibility-menu,
-    .set-border-accent {
-        border: 2px solid #2e3440;
-    }
+::-webkit-file-upload-button {
+    color: var(--foreground);
+    fill: var(--foreground);
+}
 
-    .doc-navigation,
-    .h-entry,
-    .markdown-blocks,
-    .section-settings,
-    .section-settings ul,
-    .section-widget,
-    .set-border-soft,
-    button,
-    input,
-    select,
-    textarea {
-        border: 2px solid #4c566a66 !important;
-    }
+::file-selector-button {
+    color: var(--foreground);
+    fill: var(--foreground);
+}
 
-    #header,
-    .h-entry,
-    .header-extra-forms-open,
-    .profile,
-    .set-shadow-dark,
-    button,
-    input,
-    select,
-    textarea {
-        -webkit-box-shadow: 0 0 16px 0 #00000016;
-        -moz-box-shadow: 0 0 16px 0 #00000016;
-        box-shadow: 0 0 16px 0 #00000016;
-    }
+::file-selector-button {
+    color: var(--foreground);
+    fill: var(--foreground);
+}
 
-    .set-shadow-light {
-        -webkit-box-shadow: 0 0 16px 0 #FFFFFF16;
-        -moz-box-shadow: 0 0 16px 0 #FFFFFF16;
-        box-shadow: 0 0 16px 0 #FFFFFF16;
-    }
+body,
+input,
+textarea,
+select {
+    color: var(--foreground);
+    fill: var(--foreground);
+}
 
-    .bg {
-        background-image: url("../images/background_light.png");
-    }
+.accessibility-menu,
+.set-border-accent {
+    border: 2px solid var(--accent);
+}
+
+.doc-navigation,
+.h-entry,
+.markdown-blocks,
+.section-settings,
+.section-settings ul,
+.section-widget,
+.set-border-soft,
+button,
+input,
+select,
+textarea {
+    border: 2px solid var(--background-soft) !important;
+}
+
+#header,
+.h-entry,
+.header-extra-forms-open,
+.profile,
+.set-shadow-dark,
+button,
+input,
+select,
+textarea {
+    -webkit-box-shadow: var(--shadow);
+    -moz-box-shadow: var(--shadow);
+    box-shadow: var(--shadow);
+}
+
+.set-shadow-light {
+    -webkit-box-shadow: var(--shadow-light);
+    -moz-box-shadow: var(--shadow-light);
+    box-shadow: var(--shadow-light);
+}
 
-    select {
-        background-image: url("../images/select_drop_light.png") !important;
-    }
-}
\ No newline at end of file
diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index f25cf9b3c2..c21f040946 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -1,85 +1,170 @@
+
+
 .notes hr {
-    margin-top: 6px
+    margin-top: var(--smaller)
 }
+
 .note-wrapper {
     width: 100%;
     height: inherit
 }
+
 .note-sidebar {
-    padding: 0.6rem
+    padding: var(--smaller)
 }
+
 .note-sidebar * {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    -moz-box-orient: vertical;
+    -moz-box-direction: normal;
+    -ms-flex-direction: column;
     flex-direction: column;
     margin-left: auto;
     margin-right: auto;
     max-height: 100%
 }
+
 .note-sidebar .avatar {
-    width: 3rem;
+    width: var(--big);
     height: auto;
     background: unset;
-    margin-bottom: 0.6rem;
+    margin-bottom: var(--smaller);
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
     border-radius: 2px
 }
+
 .h-entry:not(:first-child) {
-    margin-top: 0.6rem
+    margin-top: var(--smaller)
 }
+
+.h-entry img {
+    background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
+}
+
 .h-entry .embed {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    -moz-box-orient: vertical;
+    -moz-box-direction: normal;
+    -ms-flex-direction: column;
     flex-direction: column;
-    padding: 0.6rem;
+    padding: var(--smaller);
     border: unset;
     width: 100%
 }
+
 .h-entry .embed[class*="p-"] {
-    padding: unset !important
+    padding: unset
 }
+
 .h-entry a:focus {
     text-decoration: underline
 }
+
 .h-entry .embed header img {
     padding: unset;
+    max-width: -webkit-min-content;
+    max-width: -moz-min-content;
     max-width: min-content;
+    max-height: -webkit-min-content;
+    max-height: -moz-min-content;
     max-height: min-content
 }
+
 .h-entry {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
     display: flex;
-    border-radius: 0.6rem
+    -webkit-border-radius: var(--smaller);
+    -moz-border-radius: var(--smaller);
+    border-radius: var(--smaller)
 }
+
 .h-entry figure {
     margin: unset;
+    -o-object-fit: cover;
     object-fit: cover
 }
+
 .h-entry .replies .h-entry {
     background-color: unset;
-    padding: 0 0.6rem 0.6rem 0;
-    margin-left: 1.3rem
+    padding: 0 var(--smaller) var(--smaller) 0;
+    margin-left: var(--small)
 }
+
 .note-info {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
     justify-content: space-between;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -moz-box-align: center;
+    -ms-flex-align: center;
     align-items: center;
-    max-height: 3rem;
+    max-height: var(--big);
     border-bottom: unset;
-    border-radius: 0.6rem 0.6rem 0 0;
-    font-size: 1.3rem;
+    -webkit-border-radius: var(--smaller) var(--smaller) 0 0;
+    -moz-border-radius: var(--smaller) var(--smaller) 0 0;
+    border-radius: var(--smaller) var(--smaller) 0 0;
+    font-size: var(--small);
     padding: 6px 10px 6px 0
 }
+
 .note-author {
-    font-size: 1rem;
+    font-size: var(--default);
     font-weight: bold;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -moz-box-align: center;
+    -ms-flex-align: center;
     align-items: center;
+    -webkit-align-self: center;
+    -ms-flex-item-align: center;
+    -ms-grid-row-align: center;
     align-self: center
 }
+
 .note-actions {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
     display: flex;
     vertical-align: middle
 }
+
 .note-actions .form-group {
     all: unset
 }
+
 .button-container {
     border: none !important;
     -webkit-border-radius: unset !important;
@@ -89,62 +174,100 @@
     mask-repeat: no-repeat !important;
     -webkit-mask-size: cover !important;
     mask-size: cover !important;
-    margin-left: 0.6rem;
-    width: 1rem;
-    height: 1rem;
-}
+    margin-left: var(--smaller);
+    width: var(--default);
+    height: var(--default);
 }
+
 .button-container:hover,
 .button-container:focus {
-    border: none !important
+    border: none
 }
+
 .favourite-button-container {
-    -webkit-mask-image: url("../../icons/heart.svg") !important;
-    -o-mask-image: url("../../icons/heart.svg") !important;
-    -moz-mask-image: url("../../icons/heart.svg") !important;
-    mask-image: url("../../icons/heart.svg") !important
+    -webkit-mask-image: url("../../icons/heart.svg");
+    -o-mask-image: url("../../icons/heart.svg");
+    -moz-mask-image: url("../../icons/heart.svg");
+    mask-image: url("../../icons/heart.svg")
 }
+
 .reply-button-container {
-    -webkit-mask-image: url("../../icons/reply.svg") !important;
-    -o-mask-image: url("../../icons/reply.svg") !important;
-    -moz-mask-image: url("../../icons/reply.svg") !important;
-    mask-image: url("../../icons/reply.svg") !important
+    -webkit-mask-image: url("../../icons/reply.svg");
+    -o-mask-image: url("../../icons/reply.svg");
+    -moz-mask-image: url("../../icons/reply.svg");
+    mask-image: url("../../icons/reply.svg")
 }
+
 .repeat-button-container {
-    -webkit-mask-image: url("../../icons/repeat.svg") !important;
-    -o-mask-image: url("../../icons/repeat.svg") !important;
-    -moz-mask-image: url("../../icons/repeat.svg") !important;
-    mask-image: url("../../icons/repeat.svg") !important
+    -webkit-mask-image: url("../../icons/repeat.svg");
+    -o-mask-image: url("../../icons/repeat.svg");
+    -moz-mask-image: url("../../icons/repeat.svg");
+    mask-image: url("../../icons/repeat.svg")
 }
+
 .delete-button-container {
-    -webkit-mask-image: url("../../icons/delete.svg") !important;
-    -o-mask-image: url("../../icons/delete.svg") !important;
-    -moz-mask-image: url("../../icons/delete.svg") !important;
-    mask-image: url("../../icons/delete.svg") !important;
-    background: #FF634766 !important
+    -webkit-mask-image: url("../../icons/delete.svg");
+    -o-mask-image: url("../../icons/delete.svg");
+    -moz-mask-image: url("../../icons/delete.svg");
+    mask-image: url("../../icons/delete.svg");
+    background: #FF634766
 }
+
 .note-content {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    -moz-box-orient: vertical;
+    -moz-box-direction: normal;
+    -ms-flex-direction: column;
     flex-direction: column;
-    border-radius: 0 0 0.6rem 0.6rem;
-    padding: 1rem
+    -webkit-border-radius: 0 0 var(--smaller) var(--smaller);
+    -moz-border-radius: 0 0 var(--smaller) var(--smaller);
+    border-radius: 0 0 var(--smaller) var(--smaller);
+    padding: var(--default)
 }
+
 .note-text {
-    margin-bottom: 0.6rem
+    margin-bottom: var(--smaller)
 }
+
 .section-attachments {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
+    max-width: -webkit-max-content;
+    max-width: -moz-max-content;
     max-width: max-content;
-    border-radius: 0.6rem;
-    padding: 0.6rem;
+    -webkit-border-radius: var(--smaller);
+    -moz-border-radius: var(--smaller);
+    border-radius: var(--smaller);
+    padding: var(--smaller);
+    -webkit-align-self: flex-start;
+    -ms-flex-item-align: start;
     align-self: flex-start
 }
+
 .note-attachments:not(:only-child) {
-    margin-right: 0.6rem
+    margin-right: var(--smaller)
 }
-.note-attachments > figure figcaption {
+
+.note-attachments>figure figcaption {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
     display: flex;
     word-break: break-all;
-    margin-bottom: 0.6rem
-}
\ No newline at end of file
+    margin-bottom: var(--smaller)
+}
+
diff --git a/public/components/Left/assets/css/view.css b/public/components/Left/assets/css/view.css
index 46f399948e..4478fb2c8a 100644
--- a/public/components/Left/assets/css/view.css
+++ b/public/components/Left/assets/css/view.css
@@ -1,4 +1,6 @@
-.panel-left .panel-content {
+
+
+.section-panel-left {
     left: 0;
 }
 
@@ -8,7 +10,7 @@
     top: -100%;
 }
 
-#panel-left-icon {
+.panel-left-icon {
     cursor: pointer !important;
     border: 2px solid transparent;
 }
@@ -18,9 +20,10 @@
     flex-direction: column;
 }
 
+
 /* TIMELINE NAVIGATION / PLUGINS */
 .timeline-nav {
-    margin-bottom: var(--main-size);
+    margin-bottom: var(--medium);
 }
 
 .timeline-nav a {
@@ -29,14 +32,15 @@
 
 .timeline-nav hr {
     flex: 1;
-    background: linear-gradient(90deg, var(--bg3), transparent);
+    background: linear-gradient(90deg, var(--accent), transparent);
 }
+
 .timeline-nav a {
-    color: var(--white);
+    color: var(--foreground);
 }
 
 .timeline-nav .active {
-    color: var(--white);
+    color: var(--foreground);
 }
 
 .main-nav a {
@@ -46,13 +50,12 @@
 
 .footer {
     margin-top: auto;
-    font-size: var(--small-size);
+    font-size: var(--default);
 }
 
-@media only screen
-and (min-width : 1281px) {
-
-    #panel-left-icon {
+@media only screen and (min-width: 1281px) {
+    .panel-left-icon {
         display: none;
     }
-}
\ No newline at end of file
+}
+
diff --git a/public/components/Right/assets/css/view.css b/public/components/Right/assets/css/view.css
index 4251f076b1..cb3041f2e4 100644
--- a/public/components/Right/assets/css/view.css
+++ b/public/components/Right/assets/css/view.css
@@ -1,4 +1,6 @@
-.panel-right .panel-content {
+
+
+.section-panel-right {
     right: 0;
 }
 
@@ -8,15 +10,15 @@
     top: -100%;
 }
 
-#panel-right-icon {
-    margin-left: var(--unit-size);
+.panel-right-icon {
+    margin-left: var(--small) !important;
     cursor: pointer !important;
     border: 2px solid transparent;
 }
 
-@media only screen
-and (min-width: 1281px) {
-    #panel-right-icon {
+@media only screen and (min-width: 1281px) {
+    .panel-right-icon {
         display: none;
     }
-}
\ No newline at end of file
+}
+
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 28ca329ef6..5a9165e1a3 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -28,7 +28,7 @@
     {% endfor %}
 </head>
 
-<body class="bg set-background-color-1">
+<body class="background-image set-background-color-1">
 
 <aside class="accessibility-menu set-background-color-1">
     <h2 class="accessibility-menu-title" tabindex="0">{{ 'Accessibility menu.' | trans }}</h2>
@@ -66,7 +66,7 @@
 {% block header %}
     {% set extra_header_forms = handle_event('AddExtraHeaderForms', request) %}
 
-    <header id="header">
+    <header class="page-header">
         {{ block("leftpanel", "stdgrid.html.twig") }}
 
         <a id="anchor-main-page" class="anchor-hidden" title="{{ 'Press tab to access instance\'s main page.' | trans }}"></a>
@@ -74,11 +74,11 @@
             <h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1>
         </a>
 
-        <details class="header-extra-forms">
+        <details class="header-extra-actions">
             <summary>
               {{ icon('kebab', 'icon icon-details-open') | raw }}
             </summary>
-            <div class="header-extra-forms-open">
+            <div class="header-extra-actions-open">
                 {% for extra_form in extra_header_forms %}
                     {{ form(extra_form) }}
                 {% endfor %}
@@ -91,9 +91,9 @@
     </header>
 {% endblock header %}
 
-<div class="content-wrapper">
+<div class="page-content-wrapper">
     <a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden" title="{{ 'Press tab to access main content.' | trans }}"></a>
-    <div class='content accessibility-target'>
+    <div class='page-content accessibility-target'>
         {% block nav %}{% endblock %}
         {% block body %}{% endblock %}
         {% block javascripts %}{% endblock javascripts %}
diff --git a/templates/cards/attachments/show.html.twig b/templates/cards/attachments/show.html.twig
index a802f0bc34..ac36bade0b 100644
--- a/templates/cards/attachments/show.html.twig
+++ b/templates/cards/attachments/show.html.twig
@@ -1,7 +1,7 @@
 {% extends 'stdgrid.html.twig' %}
 
 {% block body %}
-    <div class="content">
+    <div class="page">
         <section class="section-widget section-widget-padded">
 
             {% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %}
diff --git a/templates/note/reply.html.twig b/templates/note/reply.html.twig
index 6e6474d960..716b15d31b 100644
--- a/templates/note/reply.html.twig
+++ b/templates/note/reply.html.twig
@@ -16,7 +16,7 @@
 
 {% block body %}
     {{ parent() }}
-    <div class="content">
+    <div class="page">
         <div class="main">
             {% include '/cards/note/view.html.twig' with {'note': note} only %}
             {{ form(reply) }}