Styling fixes.

assets/less/classes/auth.less

@@ -1,13 +1,20 @@
 .auth {
+    background: var(--background-colour);
     max-width: 400px;
     margin: 0 auto;
     margin-bottom: 2px;
 
     &__header {
-        display: flex;
+        background: var(--user-header) center / cover no-repeat, var(--background-pattern);
-        justify-content: center;
+        background-color: var(--accent-colour);
-        padding: 20px;
+        background-blend-mode: normal, multiply;
-        background-image: linear-gradient(0deg, #111, var(--accent-colour));
+
+        &__wrapper {
+            display: flex;
+            justify-content: center;
+            padding: 20px;
+            background-image: linear-gradient(0deg, var(--background-colour-translucent), transparent);
+        }
     }
 
     &__warning {

assets/less/classes/changelog.less

@@ -30,11 +30,11 @@
     // date header in public changelog
     &__date {
         display: block;
-        background-image: linear-gradient(0deg, var(--accent-colour), transparent);
-        font-weight: 700;
-        margin-bottom: 1px;
         text-decoration: none;
         padding: 1px 3px;
+        color: var(--accent-colour);
+        font-size: 1.2em;
+        line-height: 1.5em;
 
         &:hover {
             text-decoration: underline;
@@ -94,7 +94,7 @@
             margin-right: 0;
         }
 
-        &--light {
+        &--dark {
             color: var(--text-colour-inverted);
         }
     }

assets/less/classes/profile/header.less

@@ -6,13 +6,9 @@
     text-shadow: 0 1px 4px #111;
     box-shadow: 0 1px 4px #111;
 
-    --profile-header: initial; //url('/profile.php?u=1&m=background');
+    background: var(--user-header) center / cover no-repeat, var(--background-pattern);
-
     background-color: var(--accent-colour);
-    background-image: var(--profile-header);
+    background-blend-mode: normal, multiply;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: 50%;
 
     @media (max-width: @site-mobile-width) {
         height: auto;

assets/less/classes/usercard.less

@@ -5,10 +5,10 @@
     z-index: 1;
     color: #fff;
     text-shadow: 0 1px 4px #111;
-    box-shadow: 0 1px 2px #111;
+    box-shadow: 0 1px 2px #000;
 
     &:hover {
-        box-shadow: 0 1px 4px #111;
+        box-shadow: 0 1px 4px #000;
         z-index: 2;
     }
 
@@ -18,10 +18,9 @@
         top: 0;
         height: 100%;
         width: 100%;
+        background: var(--user-header) center / cover no-repeat, var(--background-pattern);
         background-color: var(--accent-colour);
-        background-size: cover;
+        background-blend-mode: normal, multiply;
-        background-repeat: no-repeat;
-        background-position: center;
     }
 
     &__container {
@@ -50,13 +49,13 @@
     &__main {
         display: flex;
         height: 70px;
-        background-image: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent);
+        background-image: linear-gradient(0deg, var(--background-colour-translucent), transparent);
     }
 
     &__actions {
         height: 30px;
         padding: 0 10px;
-        background-color: rgba(0, 0, 0, .9);
+        background-color: var(--background-colour-translucent);
         display: flex;
         align-items: center;
     }

assets/less/main.less

@@ -14,7 +14,8 @@
     --text-colour-inverted: #000;
 
     --user-colour: inherit;
-    --accent-colour: #9475b2;
+    --user-header: url('/images/pixel.png');
+    --accent-colour: #8559a5;
 }
 
 * {

templates/auth/macros.twig

@@ -6,8 +6,10 @@
         {{ 'login'|csrf|raw }}
 
         <div class="auth__header">
-            <div class="avatar auth__avatar" id="login-avatar"
+            <div class="auth__header__wrapper">
-                style="background-image:url('/profile.php?u=0&amp;m=avatar');"></div>
+                <div class="avatar auth__avatar" id="login-avatar"
+                    style="background-image:url('/profile.php?u=0&amp;m=avatar');"></div>
+            </div>
         </div>
 
         {% if message|length > 0 %}

templates/user/macros.twig

@@ -1,6 +1,6 @@
 {% macro user_card(user, profile_url, rank_url, actions) %}
-    <div class="usercard">
+    <div class="usercard" {% if user.user_colour is defined %}style="{{ user.user_colour|html_colour('--accent-colour') }}"{% endif %}>
-        <a  href="{{ profile_url|default('/profile.php?u=%d')|format(user.user_id) }}"
+        <a href="{{ profile_url|default('/profile.php?u=%d')|format(user.user_id) }}"
             class="usercard__background" title="{{ user.username }}"></a>
 
         <div class="usercard__container">
@@ -10,8 +10,7 @@
                 </div>
 
                 <div class="usercard__details">
-                    <div class="usercard__name"
+                    <div class="usercard__name">
-                        {% if user.user_colour is defined %}style="{{ user.user_colour|html_colour }}"{% endif %}>
                         {{ user.username }}
                     </div>