Restyled checkboxes.

assets/less/classes/comment.less

@@ -58,10 +58,6 @@
             text-decoration: underline;
         }
 
-        &--label {
-            cursor: pointer;
-        }
-
         &--post {
             margin-left: auto;
         }

assets/less/classes/input/checkbox.less

@@ -0,0 +1,50 @@
+.input__checkbox {
+    display: inline-flex;
+    margin: 1px 0;
+    cursor: pointer;
+
+    &__input {
+        display: inline-block;
+        position: absolute;
+        z-index: -1000;
+    }
+
+    &__display {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        border: 1px solid #222;
+        background: #222;
+        color: #fff;
+        border-radius: 2px;
+        box-shadow: inset 0 0 4px #111;
+        transition: border-color .2s;
+
+        &__icon {
+            background-color: var(--accent-colour);
+            background-size: 28px 28px;
+            background-image: radial-gradient(ellipse at center, fade(#fff, 20%) 0%, fade(#000, 40%) 100%);
+            box-shadow: 0 0 2px #111;
+            border-radius: 2px;
+            margin: 2px;
+            width: 14px;
+            height: 14px;
+            opacity: 0;
+            transition: opacity .2s;
+        }
+    }
+
+    &__input:checked ~ &__display &__display__icon {
+        opacity: 1;
+    }
+
+    &:hover &__display,
+    &__input:focus ~ &__display {
+        border-color: var(--accent-colour);
+    }
+
+    &__text {
+        display: inline-block;
+        margin-left: 4px;
+    }
+}

assets/less/main.less

@@ -74,6 +74,7 @@ body {
 @import "classes/input/text";
 @import "classes/input/textarea";
 @import "classes/input/upload";
+@import "classes/input/checkbox";
 
 // Base styles
 @import "classes/avatar";

templates/_layout/comments.twig

@@ -1,7 +1,7 @@
 {% macro comments_input(category, user, perms, reply_to) %}
     {% set reply_mode = reply_to is not null %}
 
-    {% from '_layout/input.twig' import input_hidden, input_csrf %}
+    {% from '_layout/input.twig' import input_hidden, input_csrf, input_checkbox %}
 
     <form class="comment comment--input{% if reply_mode %} comment--reply{% endif %}"
         method="post" action="/comments.php?m=create"
@@ -28,16 +28,10 @@
                 <div class="comment__actions">
                     {% if not reply_mode %}
                         {% if perms.can_pin %}
-                            <label class="comment__action comment__action--label">
+                            {{ input_checkbox('comment[pin]', 'Pin this comment', false, 'comment__action') }}
-                                <input type="checkbox" class="comment__action__checkbox" name="comment[pin]">
-                                Pin this comment
-                            </label>
                         {% endif %}
                         {% if perms.can_lock %}
-                            <label class="comment__action comment__action--label">
+                            {{ input_checkbox('comment[lock]', 'Toggle locked status', false, 'comment__action') }}
-                                <input type="checkbox" class="comment__action__checkbox" name="comment[lock]">
-                                Toggle locked status
-                            </label>
                         {% endif %}
                     {% endif %}
                     <button class="input__button comment__action comment__action--button comment__action--post">

templates/_layout/input.twig

@@ -4,7 +4,7 @@
 {% endspaceless %}
 {% endmacro %}
 
-{% macro input_csrf(realm, name) %} {# so we don't have to specify |raw every time #}
+{% macro input_csrf(realm, name) %}{# so we don't have to specify |raw every time #}
 {% spaceless %}
     {{ csrf_input(realm, name|default('csrf'))|raw }}
 {% endspaceless %}
@@ -22,3 +22,21 @@
         {% endfor %}>
 {% endspaceless %}
 {% endmacro %}
+
+{% macro input_checkbox(name, text, value, class) %}
+{% spaceless %}
+    <label class="input__checkbox{{ class|length > 0 ? ' ' ~ class : '' }}">
+        <input type="checkbox" class="input__checkbox__input"
+            {% if name|length > 0 %}name="{{ name }}"{% endif %}
+            {% if value %}checked{% endif %}>
+        <div class="input__checkbox__display">
+            <div class="input__checkbox__display__icon"></div>
+        </div>
+        {% if text|length > 0 %}
+            <div class="input__checkbox__text">
+                {{ text }}
+            </div>
+        {% endif %}
+    </label>
+{% endspaceless %}
+{% endmacro %}

templates/manage/changelog/action_edit.twig

@@ -1,6 +1,6 @@
 {% extends 'manage/changelog/master.twig' %}
 {% from 'macros.twig' import container_title %}
-{% from '_layout/input.twig' import input_csrf, input_text %}
+{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox %}
 
 {% block manage_content %}
     <div class="container">
@@ -28,7 +28,7 @@
             <label class="form__label">
                 <div class="form__label__text">Inherit Colour</div>
                 <div class="form__label__input">
-                    <input class="input" type="checkbox" name="action[colour][inherit]"{% if edit_action is defined and edit_action.action_colour|colour_get_inherit %} checked{% endif %}>
+                    {{ input_checkbox('action[colour][inherit]', '', edit_action is defined and edit_action.action_colour|colour_get_inherit) }}
                 </div>
             </label>
 

templates/manage/changelog/tag_edit.twig

@@ -1,6 +1,6 @@
 {% extends 'manage/changelog/master.twig' %}
 {% from 'macros.twig' import container_title %}
-{% from '_layout/input.twig' import input_csrf, input_text %}
+{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox %}
 
 {% block manage_content %}
     <div class="container">
@@ -26,7 +26,7 @@
             <label class="form__label">
                 <div class="form__label__text">Archived</div>
                 <div class="form__label__input">
-                    <input class="input" type="checkbox" name="tag[archived]"{% if edit_tag is defined and edit_tag.tag_archived is not null %} checked{% endif %}>
+                    {{ input_checkbox('tag[archived]', '', edit_tag is defined and edit_tag.tag_archived is not null) }}
                 </div>
             </label>
 

templates/manage/news/category.twig

@@ -1,6 +1,6 @@
 {% extends 'manage/news/master.twig' %}
 {% from 'macros.twig' import container_title %}
-{% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
+{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox %}
 
 {% set is_new = category|length < 1 %}
 
@@ -24,7 +24,7 @@
 
             <tr>
                 <td>Is Hidden</td>
-                <td><input type="checkbox" name="category[hidden]" {% if category.category_is_hidden|default(false) %}checked{% endif %}></td>
+                <td>{{ input_checkbox('category[hidden]', '', category.category_is_hidden|default(false)) }}</td>
             </tr>
         </table>
 

templates/manage/news/post.twig

@@ -1,6 +1,6 @@
 {% extends 'manage/news/master.twig' %}
 {% from 'macros.twig' import container_title %}
-{% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
+{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox %}
 
 {% set is_new = post|length < 1 %}
 
@@ -30,7 +30,7 @@
 
             <tr>
                 <td>Is Featured</td>
-                <td><input type="checkbox" name="post[featured]" {% if post.post_is_featured|default(false) %}checked{% endif %}></td>
+                <td>{{ input_checkbox('post[featured]', '', post.post_is_featured|default(false)) }}</td>
             </tr>
 
             <tr>

templates/manage/users/roles_create.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 %}
+{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox %}
 
 {% block manage_content %}
     <form action="?v=role{{ edit_role is defined ? '&r=' ~ edit_role.role_id : '' }}" method="post"{% if edit_role is defined %} style="{{ edit_role.role_colour|html_colour('--accent-colour') }}"{% endif %}>
@@ -20,7 +20,7 @@
             <label class="form__label">
                 <div class="form__label__text">Hide Rank</div>
                 <div class="form__label__input">
-                    <input class="input" type="checkbox" name="role[secret]"{% if edit_role is defined and edit_role.role_secret %} checked{% endif %}>
+                    {{ input_checkbox('role[secret]', '', edit_role is defined and edit_role.role_secret) }}
                 </div>
             </label>
 
@@ -46,7 +46,7 @@
             <label class="form__label">
                 <div class="form__label__text">Inherit Colour</div>
                 <div class="form__label__input">
-                    <input class="input" type="checkbox" name="role[colour][inherit]"{% if edit_role is defined and edit_role.role_colour|colour_get_inherit %} checked{% endif %}>
+                    {{ input_checkbox('role[colour][inherit]', '', edit_role is defined and edit_role.role_colour|colour_get_inherit) }}
                 </div>
             </label>
 

templates/manage/users/view.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 %}
+{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox %}
 
 {% set site_link = '/profile.php?u=' ~ view_user.user_id %}
 
@@ -83,7 +83,7 @@
                 <label class="form__label">
                     <div class="form__label__text">Delete Avatar</div>
                     <div class="form__label__input">
-                        <input class="input" type="checkbox" name="avatar[delete]">
+                        {{ input_checkbox('avatar[delete]') }}
                     </div>
                 </label>
             </div>
@@ -114,7 +114,7 @@
                 <label class="form__label">
                     <div class="form__label__text">Custom Colour</div>
                     <div class="form__label__input">
-                        <input class="input" type="checkbox" name="colour[enable]"{% if colour_is_defined %} checked{% endif %}>
+                        {{ input_checkbox('colour[enable]', '', colour_is_defined) }}
                     </div>
                 </label>
 

templates/user/profile.twig

@@ -1,6 +1,6 @@
 {% extends 'user/master.twig' %}
 {% from 'macros.twig' import container_title %}
-{% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
+{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox %}
 
 {% set image = '/profile.php?u=' ~ profile.user_id ~ '&m=avatar' %}
 {% set canonical_url = '/profile.php?u=' ~ profile.user_id %}
@@ -134,20 +134,9 @@
                                     {% endfor %}
                                 </select>
 
-                                <label>
+                                {{ input_checkbox('background[delete]', 'Delete') }}
-                                    <input type="checkbox" name="background[delete]">
+                                {{ input_checkbox('background[attr][blend]', 'Blend', profile.user_background_blend) }}
-                                    Delete
+                                {{ input_checkbox('background[attr][slide]', 'Slide', profile.user_background_slide) }}
-                                </label>
-
-                                <label>
-                                    <input type="checkbox" name="background[attr][blend]"{% if profile.user_background_blend %} checked{% endif %}>
-                                    Blend
-                                </label>
-
-                                <label>
-                                    <input type="checkbox" name="background[attr][slide]"{% if profile.user_background_slide %} checked{% endif %}>
-                                    Slide
-                                </label>
                             </div>
                         </div>
                     {% endif %}