Turn styled colour input into a global control.

assets/less/classes/input/colour.less

@@ -0,0 +1,38 @@
+.input__colour {
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+    overflow: hidden;
+    border: 1px solid #222;
+    background: #222;
+    border-radius: 2px;
+    transition: border-color .2s;
+    cursor: pointer;
+
+    &:hover,
+    &:focus,
+    &:focus-within {
+        border-color: var(--accent-colour);
+    }
+
+    &__overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 20;
+        background-image: radial-gradient(ellipse at center, fade(#fff, 20%) 0%, fade(#000, 40%) 100%);
+        background-size: 80px 40px;
+    }
+
+    &__control {
+        border-width: 0;
+        position: absolute;
+        top: -5px;
+        left: -5px;
+        width: 100px;
+        height: 100px;
+        z-index: 10;
+    }
+}

assets/less/classes/manage/user.less

@@ -21,23 +21,4 @@
     &__input {
         width: 100%;
     }
-
-    &__colour {
-        display: block;
-        overflow: hidden;
-        width: 40px;
-        height: 20px;
-
-        &__control {
-            border-width: 0;
-            position: absolute;
-            top: -5px;
-            left: -5px;
-            right: -1px;
-            bottom: -1px;
-            width: 100px;
-            height: 100px;
-            cursor: pointer;
-        }
-    }
 }

assets/less/main.less

@@ -104,11 +104,12 @@ html {
 
 // Input elements
 @import "classes/input/button";
+@import "classes/input/checkbox";
+@import "classes/input/colour";
 @import "classes/input/select";
 @import "classes/input/text";
 @import "classes/input/textarea";
 @import "classes/input/upload";
-@import "classes/input/checkbox";
 
 // Base styles
 @import "classes/avatar";

templates/_layout/input.twig

@@ -105,3 +105,12 @@
     </select>
 {% endspaceless %}
 {% endmacro %}
+
+{% macro input_colour(name, class, value) %}
+{% spaceless %}
+    <label class="input__colour{% if class %} {{ class }}{% endif %}">
+        <div class="input__colour__overlay"></div>
+        <input type="color" name="{{ name }}" value="{{ value }}" class="input__colour__control">
+    </label>
+{% endspaceless %}
+{% endmacro %}

templates/manage/users/user.twig

@@ -1,7 +1,7 @@
 {% extends 'manage/users/master.twig' %}
 {% from 'macros.twig' import container_title %}
 {% from 'manage/macros.twig' import permissions_table %}
-{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox, input_file, input_select %}
+{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox, input_file, input_select, input_colour %}
 
 {% set site_link = '/profile.php?u=' ~ manage_user.user_id %}
 
@@ -103,9 +103,7 @@
                         </div>
                     </label>
 
-                    <label class="manage__user__colour">
-                        <input type="color" name="colour[hex]" class="manage__user__colour__control" value="{{ manage_user.user_colour|default(0)|colour_hex }}">
-                    </label>
+                    {{ input_colour('colour[hex]', '', manage_user.user_colour|default(0)|colour_hex) }}
                 </div>
 
                 <div class="manage__user__buttons">