C S S V A R I A B L E S

assets/less/classes/changelog-actions-tags.less

@@ -23,7 +23,7 @@
     }
 
     &__entry {
-        color: inherit;
+        color: var(--user-colour);
         text-decoration: none;
         width: 200px;
         border: 1px solid var(--accent-colour);

assets/less/classes/changelog.less

@@ -49,7 +49,10 @@
     &__datetime,
     &__user,
     &__action {
-        color: inherit;
+        --action-colour: inherit;
+
+        background-color: var(--action-colour);
+        color: var(--user-colour);
         flex: 0 0 auto;
         margin-right: 1px;
         text-decoration: none;
@@ -170,6 +173,7 @@
         &__action {
             display: block;
             padding: 6px 2px;
+            background-color: var(--accent-colour);
             border-right: 1px solid var(--accent-colour);
             writing-mode: sideways-lr;
             text-orientation: sideways;
@@ -234,6 +238,7 @@
             }
 
             &__name {
+                color: var(--user-colour);
                 font-size: 1.5em;
                 line-height: 1.2em;
             }

assets/less/classes/comment.less

@@ -136,6 +136,7 @@
     }
 
     &__user {
+        color: var(--user-colour);
         font-weight: 700;
         text-decoration: none;
 

assets/less/classes/forum/listing.less

@@ -148,6 +148,7 @@
             }
 
             &__user {
+                color: var(--user-colour);
                 font-weight: 700;
                 text-decoration: none;
 

assets/less/classes/forum/post.less

@@ -103,6 +103,7 @@
         }
 
         &__username {
+            color: var(--user-colour);
             font-size: 1.5em;
             line-height: 1.7em;
         }

assets/less/classes/forum/topics.less

@@ -69,6 +69,7 @@
                 line-height: 1.2em;
 
                 &__name {
+                    color: var(--user-colour);
                     font-weight: 700;
                     text-decoration: none;
 

assets/less/classes/header.less

@@ -209,7 +209,8 @@
         }
 
         &__name {
-            color: inherit;
+            color: var(--user-colour);
+            text-shadow: 0 0 5px var(--user-colour);
             font-size: 1.4em;
             line-height: 1.4em;
             font-family: @mio-font-heading;

assets/less/classes/index.less

@@ -27,7 +27,7 @@
         }
 
         &__link {
-            color: inherit;
+            color: var(--user-colour);
             text-decoration: none;
 
             &:hover {

assets/less/classes/news/post.less

@@ -45,6 +45,7 @@
     }
 
     &__username {
+        color: var(--user-colour);
         flex-grow: 1;
         flex-shrink: 1;
         font-weight: 700;

assets/less/classes/news/preview.less

@@ -52,5 +52,10 @@
             width: 50px;
             margin-left: 4px;
         }
+
+        &__name {
+            color: var(--user-colour);
+            text-shadow: 0 0 5px var(--user-colour);
+        }
     }
 }

assets/less/classes/profile/header.less

@@ -88,6 +88,8 @@
     }
 
     &__username {
+        color: var(--user-colour);
+        text-shadow: 0 0 5px var(--user-colour);
         font-size: 2em;
         line-height: 1.5em;
     }

assets/less/classes/usercard.less

@@ -92,6 +92,8 @@
     }
 
     &__name {
+        color: var(--user-colour);
+        text-shadow: 0 0 5px var(--user-colour);
         font-size: 1.4em;
         line-height: 1.4em;
         text-overflow: ellipsis;

assets/less/main.less

@@ -15,6 +15,7 @@
     --site-background-meta: no-repeat center / cover fixed;
     --site-background-image: initial;
 
+    --user-colour: inherit;
     --accent-colour: @default-accent-colour;
     --text-colour: @default-text-colour;
     --text-colour-inverted: color(#fff - @default-text-colour);

src/comments.php

@@ -58,10 +58,7 @@ function comments_parse_for_display(string $text): string
         return sprintf(
             '<a href="/profile.php?u=%d" class="comment__mention", style="%s">@%s</a>',
             $info['user_id'],
-            html_colour($info['user_colour'], [
+            html_colour($info['user_colour']),
-                'color' => '%s',
-                'text-shadow' => '0 0 5px %s',
-            ]),
             $info['username']
         );
     }, $text);

templates/_layout/header.twig

@@ -50,17 +50,12 @@
 
             <div class="header__user__info">
                 {% if current_user is defined %}
-                    <a  href="/profile.php?u={{ current_user.user_id }}"
+                    <a  href="/profile.php?u={{ current_user.user_id }}" class="header__user__name"
-                        class="header__user__name"
+                        style="{{ current_user.user_colour|html_colour }}" title="{{ current_user.username }}">
-                        style="{{ current_user.user_colour|html_colour({
-                            'color': '%s',
-                            'text-shadow': '0 0 5px %s',
-                        }) }}" title="{{ current_user.username }}">
                         {{ current_user.username }}
                     </a>
                 {% else %}
-                    <a  href="/auth.php?m=login"
+                    <a href="/auth.php?m=login" class="header__user__name">
-                        class="header__user__name">
                         Guest
                     </a>
                 {% endif %}

templates/changelog/change.twig

@@ -19,9 +19,9 @@
             {% if is_valid %}
                 <div class="changelog__change" id="#c{{ change.change_id }}">
                     <div class="changelog__change__line"
-                        style="{{ change.action_colour|html_colour({'border-color':'%s'}) }}">
+                        style="{{ change.action_colour|html_colour('--accent-colour'}) }}">
                         <div class="changelog__change__action {{ change.action_class is defined and change.action_class is not null ? ' changelog__change__action--' ~ change.action_class : '' }} changelog__change__action--{{ change.action_colour|colour_get_css_contrast }}"
-                            style="{{ change.action_colour|html_colour({'background-color':'%s','border-color':'%s'}) }}">
+                            style="{{ change.action_colour|html_colour('--accent-colour') }}">
                             {{ change.action_name }}
                         </div>
 

templates/changelog/macros.twig

@@ -49,7 +49,7 @@
 
             <a class="changelog__action{{ change.action_class is defined and change.action_class is not null ? ' changelog__action--' ~ change.action_class : '' }} changelog__action--{{ change.action_colour|colour_get_css_contrast }}"
                 href="{{ change_url|format(change.change_id) }}"
-                {% if change.action_colour is defined %}style="{{ change.action_colour|html_colour({'background-color':'%s'}) }}"{% endif %}>
+                {% if change.action_colour is defined %}style="{{ change.action_colour|html_colour('--action-colour') }}"{% endif %}>
                 <div class="changelog__action__text">
                     {{ change.action_name|default('Unknown') }}
                 </div>

templates/forum/macros.twig

@@ -98,8 +98,7 @@
                             </div>
                             <div class="forum__listing__entry__activity__info">
                                 {% if forum.recent_post_user_id is not null %}
-                                    by <a
+                                    by <a href="/profile.php?u={{ forum.recent_post_user_id }}"
-                                        href="/profile.php?u={{ forum.recent_post_user_id }}"
                                         style="{{ forum.recent_post_user_colour|html_colour }}"
                                         class="forum__listing__entry__activity__user">{{ forum.recent_post_username }}</a>,
                                 {% endif %}

templates/manage/changelog/action_edit.twig

@@ -5,7 +5,7 @@
         <form action="?v=action{{ edit_action is defined ? '&a=' ~ edit_action.action_id : '' }}" method="post">
             <h1 class="container__title">
                 {% if edit_action is defined %}
-                    Editing <span style="{{ edit_action.action_colour|html_colour }}">{{ edit_action.action_name }}</span> ({{ edit_action.action_id }})
+                    Editing <span style="{{ edit_action.action_colour|html_colour }};color:var(--user-colour)">{{ edit_action.action_name }}</span> ({{ edit_action.action_id }})
                 {% else %}
                     Adding a new action
                 {% endif %}

templates/manage/changelog/actions_tags.twig

@@ -34,7 +34,7 @@
                 <div class="changelog-actions-tags__list">
                     {% for action in changelog_actions %}
                         <a href="?v=action&amp;a={{ action.action_id }}" class="changelog-actions-tags__entry"
-                            style="{{ action.action_colour|html_colour({'border-color':'%s'}) }}">
+                            style="{{ action.action_colour|html_colour('border-color') }}">
                             <div class="listing__entry__content changelog-tags__content">
                                 <div class="changelog-tags__text">
                                     {{ action.action_name }} ({{ action.action_count }})

templates/manage/users/roles.twig

@@ -15,7 +15,7 @@
 
                     <div class="usercard__container">
                         <div class="avatar usercard__avatar"
-                            style="{{ role.role_colour|html_colour({'background-color':'%s'}) }}">
+                            style="{{ role.role_colour|html_colour('background-color') }}">
                         </div>
 
                         <div class="usercard__content">

templates/news/macros.twig

@@ -13,10 +13,7 @@
                 {% if post.user_id is not null %}
                     <a class="news__preview__user" href="/profile.php?u={{ post.user_id }}">
                         <div class="avatar news__preview__user__avatar" style="background-image:url('/profile.php?u={{ post.user_id }}&amp;m=avatar')"></div>
-                        <div class="news__preview__user__name" style="{{ post.user_colour|html_colour({
+                        <div class="news__preview__user__name" style="{{ post.user_colour|html_colour }}">
-                            'color': '%s',
-                            'text-shadow': '0 0 5px %s',
-                        }) }}">
                             {{ post.username }}
                         </div>
                     </a>

templates/user/_layout/header.twig

@@ -3,10 +3,7 @@
         <div class="avatar avatar--new profile__header__avatar" style="background-image:url('{{ image }}')"></div>
 
         <div class="profile__header__details__content">
-            <div class="profile__header__username" style="{{ profile.user_colour|html_colour({
+            <div class="profile__header__username" style="{{ profile.user_colour|html_colour }}">
-                'color': '%s',
-                'text-shadow': '0 0 5px %s',
-            }) }}">
                 {{ profile.username }}
             </div>
 

templates/user/macros.twig

@@ -11,10 +11,7 @@
 
                 <div class="usercard__details">
                     <div class="usercard__name"
-                        {% if user.user_colour is defined %}style="{{ user.user_colour|html_colour({
+                        {% if user.user_colour is defined %}style="{{ user.user_colour|html_colour }}"{% endif %}>
-                            'color': '%s',
-                            'text-shadow': '0 0 5px %s',
-                        }) }}"{% endif %}>
                         {{ user.username }}
                     </div>
 

utility.php

@@ -346,12 +346,21 @@ function html_link(string $url, ?string $content = null, $attributes = []): stri
     return $html;
 }
 
-function html_colour(?int $colour, array $attribs = []): string
+function html_colour(?int $colour, $attribs = '--user-colour'): string
 {
     $colour = $colour ?? colour_none();
 
+    if (is_string($attribs)) {
+        $attribs = [
+            $attribs => '%s',
+        ];
+    }
+
     if (!$attribs) {
-        $attribs['color'] = '%s';
+        $attribs = [
+            'color' => '%s',
+            '--user-colour' => '%s',
+        ];
     }
 
     $css = '';