First steps to merging manage with the main site.

assets/less/manage/classes/avatar.less

@@ -1,11 +0,0 @@
-.avatar {
-    flex-shrink: 0;
-    background-color: #333;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-    display: block;
-    border: 1px solid #444;
-    max-height: 200px;
-    max-width: 200px;
-}

assets/less/manage/classes/button.less

@@ -1,20 +0,0 @@
-.button {
-    display: inline-block;
-    font: 12px/20px @manage-font;
-    background-color: #666;
-    border: 1px solid #555;
-    border-radius: 2px;
-    text-decoration: none;
-    color: #111;
-    padding: 2px 5px;
-    cursor: pointer;
-    transition: background-color .2s;
-
-    &:hover {
-        background-color: #777;
-    }
-
-    &:active {
-        background-color: #666;
-    }
-}

assets/less/manage/classes/container.less

@@ -1,20 +0,0 @@
-.container {
-    max-width: 1200px;
-    margin: 2px auto;
-
-    &--center {
-        text-align: center;
-    }
-
-    &__title {
-        font-size: 2em;
-        line-height: 1.7em;
-        padding: 4px;
-    }
-
-    &__subtitle {
-        font-size: 1.5em;
-        line-height: 1.5em;
-        padding: 4px;
-    }
-}

assets/less/manage/classes/footer.less

@@ -1,13 +0,0 @@
-.footer {
-    text-align: center;
-    padding: 2px 0;
-
-    &__link {
-        text-decoration: none;
-        color: inherit;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-}

assets/less/manage/classes/form.less

@@ -2,13 +2,15 @@
 
     &__label {
         display: inline-block;
-        background-color: #222;
-        border: 1px solid #333;
         border-radius: 2px;
         min-width: 250px;
         margin: 2px;
         padding: 2px;
         min-height: 50px;
         vertical-align: top;
+
+        &__text {
+            font-size: .9em;
+        }
     }
 }

assets/less/manage/classes/header.less

@@ -1,7 +1,8 @@
-.header {
+.manage-header {
     background-color: #111;
     background-image: linear-gradient(0deg, #222, #333);
     font-size: 1.5em;
+    color: #fff;
 
     &__wrapper {
         display: flex;
@@ -71,12 +72,12 @@
         &__state {
             display: none;
 
-            &:checked ~ .header__menu__toggle {
+            &:checked ~ .manage-header__menu__toggle {
                 background-color: #333;
                 min-width: 150px;
             }
 
-            &:checked ~ .header__menu__options {
+            &:checked ~ .manage-header__menu__options {
                 max-height: 250px;
             }
         }

assets/less/manage/classes/input.less

@@ -1,9 +0,0 @@
-.input {
-    background: #333;
-    border: 1px solid #444;
-    border-radius: 2px;
-    padding: 2px;
-    color: #fff;
-    width: 100%;
-    vertical-align: top;
-}

assets/less/manage/classes/pagination.less

@@ -1,55 +0,0 @@
-.pagination {
-    display: inline-flex;
-    list-style: none;
-    justify-content: center;
-    box-shadow: 0 1px 5px 0 fade(#444, 80%);
-    background: #333;
-    color: #fff;
-    font-size: 1.2em;
-    margin: 2px;
-
-    &__option {
-        transition: box-shadow .2s, background-color .2s;
-
-        &:not(&--disabled):hover {
-            background-color: #444;
-            box-shadow: 0 1px 5px 0 fade(#555, 80%);
-        }
-
-        &:not(&--disabled)&--active,
-        &:not(&--disabled)&:active {
-            background-color: #444;
-        }
-
-        &--disabled {
-            opacity: .5;
-        }
-    }
-
-    &__separator {
-        width: 1px;
-        background-color: #444;
-    }
-
-    &__link {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        color: inherit;
-        text-decoration: none;
-        min-width: 40px;
-        min-height: 40px;
-
-        &--first,
-        &--last,
-        &--prev,
-        &--next {
-            font-size: 2em;
-        }
-    }
-
-    &__option--disabled &__link {
-        cursor: default;
-    }
-}

assets/less/manage/main.less

@@ -1,33 +1,6 @@
-@manage-font: 'Open Sans', sans-serif;
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    position: relative;
-}
-
-html,
-body {
-    width: 100%;
-    height: 100%;
-}
-
-.manage {
-    background-color: #222;
-    font: 12px/20px @manage-font;
-    color: #fff;
-}
-
-@import "classes/avatar";
-@import "classes/button";
-@import "classes/container";
-@import "classes/footer";
 @import "classes/form";
 @import "classes/header";
-@import "classes/input";
 @import "classes/listing";
-@import "classes/pagination";
 
 @import "classes/user-listing";
 @import "classes/permissions";

assets/less/mio/classes/header.less

@@ -51,6 +51,10 @@
         height: 60px;
         font-size: 0;
 
+        &--manage {
+            background-image: url('https://static.flash.moe/images/imouto-broom.png');
+        }
+
         @media (max-width: @mio-header-mobile) {
             width: 40px;
             height: 40px;

public/manage/users.php

@@ -21,7 +21,7 @@ switch ($_GET['v'] ?? null) {
             break;
         }
 
-        $usersTake = 32;
+        $usersTake = 33;
         $manageUsersCount = Database::query('
             SELECT COUNT(`user_id`)
             FROM `msz_users`

templates/_layout/header.twig

@@ -3,7 +3,7 @@
         <div class="header__icons">
             <label class="header__icon header__icon--menu" for="toggle-mobile-header-menu"></label>
 
-            <a class="header__logo" href="/">
+            <a class="header__logo{% if is_manage|default(false) %} header__logo--manage{% endif %}" href="/">
                 {{ globals.site_name }}
             </a>
 

templates/forum/macros.twig

@@ -331,7 +331,7 @@
             </div>
 
             <div class="forum__posting__buttons">
-                <button class="input__button" name="csrf" value="{{ csrf_token() }}">Submit</button>
+                <button input__text name="csrf" value="{{ csrf_token() }}">Submit</button>
             </div>
         </div>
     </form>

templates/manage/changelog/action_edit.twig

@@ -14,14 +14,14 @@
             <label class="form__label">
                 <div class="form__label__text">Name</div>
                 <div class="form__label__input">
-                    <input class="input input--text" type="text" value="{{ edit_action is defined ? edit_action.action_name : '' }}" name="action[name]" maxlength="50">
+                    <input class="input__text" type="text" value="{{ edit_action is defined ? edit_action.action_name : '' }}" name="action[name]" maxlength="50">
                 </div>
             </label>
 
             <label class="form__label">
                 <div class="form__label__text">Class</div>
                 <div class="form__label__input">
-                    <input class="input input--text" type="text" value="{{ edit_action is defined ? edit_action.action_class : '' }}" name="action[class]" maxlength="20">
+                    <input class="input__text" type="text" value="{{ edit_action is defined ? edit_action.action_class : '' }}" name="action[class]" maxlength="20">
                 </div>
             </label>
 
@@ -56,7 +56,7 @@
             </label>
 
             <div>
-                <button class="button" name="csrf" value="{{ csrf_token() }}">Save</button>
+                <button class="input__button" name="csrf" value="{{ csrf_token() }}">Save</button>
             </div>
         </form>
     </div>

templates/manage/changelog/actions.twig

@@ -3,7 +3,7 @@
 
 {% block content %}
     <div class="container">
-        <a href="?v=action" class="button">Create new action</a>
+        <a href="?v=action" class="input__button">Create new action</a>
     </div>
 
     <div class="container listing changelog-tags">

templates/manage/changelog/change_edit.twig

@@ -14,14 +14,14 @@
             <label class="form__label" style="width:100%">
                 <div class="form__label__text">Log</div>
                 <div class="form__label__input">
-                    <input class="input input--text" type="text" value="{{ edit_change is defined ? edit_change.change_log : '' }}" name="change[log]" maxlength="255">
+                    <input class="input__text" type="text" value="{{ edit_change is defined ? edit_change.change_log : '' }}" name="change[log]" maxlength="255">
                 </div>
             </label>
 
             <label class="form__label" style="width:100%">
                 <div class="form__label__text">Text</div>
                 <div class="form__label__input">
-                    <textarea class="input input--textarea" name="change[text]" maxlength="65535">{{ edit_change is defined ? edit_change.change_text : '' }}</textarea>
+                    <textarea class="input__textarea" name="change[text]" maxlength="65535">{{ edit_change is defined ? edit_change.change_text : '' }}</textarea>
                 </div>
             </label>
 
@@ -41,19 +41,19 @@
             <label class="form__label">
                 <div class="form__label__text">Contributor Id</div>
                 <div class="form__label__input">
-                    <input class="input input--text" type="number" value="{{ edit_change is defined ? edit_change.user_id : current_user.user_id }}" name="change[user]" min="1">
+                    <input class="input__text" type="number" value="{{ edit_change is defined ? edit_change.user_id : current_user.user_id }}" name="change[user]" min="1">
                 </div>
             </label>
 
             <label class="form__label">
                 <div class="form__label__text">Created</div>
                 <div class="form__label__input">
-                    <input class="input input--text" type="text" value="{{ edit_change is defined ? edit_change.change_created : ''|date('Y-m-d H:i:s') }}" name="change[created]">
+                    <input class="input__text" type="text" value="{{ edit_change is defined ? edit_change.change_created : ''|date('Y-m-d H:i:s') }}" name="change[created]">
                 </div>
             </label>
 
             <div>
-                <button class="button" name="csrf" value="{{ csrf_token() }}">Save</button>
+                <button class="input__button" name="csrf" value="{{ csrf_token() }}">Save</button>
             </div>
         </form>
 
@@ -78,7 +78,7 @@
                     </label>
 
                     <div>
-                        <button class="button" name="csrf" value="{{ csrf_token() }}">Remove</button>
+                        <button class="input__button" name="csrf" value="{{ csrf_token() }}">Remove</button>
                     </div>
                 </form>
             {% endif %}
@@ -99,7 +99,7 @@
                     </label>
 
                     <div>
-                        <button class="button" name="csrf" value="{{ csrf_token() }}">Add</button>
+                        <button class="input__button" name="csrf" value="{{ csrf_token() }}">Add</button>
                     </div>
                 </form>
             {% endif %}

templates/manage/changelog/changes.twig

@@ -3,7 +3,7 @@
 
 {% block content %}
     <div class="container">
-        <a href="?v=change" class="button">Create new change</a>
+        <a href="?v=change" class="input__button">Create new change</a>
     </div>
 
     <div class="container listing">

templates/manage/changelog/tag_edit.twig

@@ -14,14 +14,14 @@
             <label class="form__label" style="width:100%">
                 <div class="form__label__text">Name</div>
                 <div class="form__label__input">
-                    <input class="input input--text" type="text" value="{{ edit_tag is defined ? edit_tag.tag_name : '' }}" name="tag[name]" maxlength="255">
+                    <input class="input__text" type="text" value="{{ edit_tag is defined ? edit_tag.tag_name : '' }}" name="tag[name]" maxlength="255">
                 </div>
             </label>
 
             <label class="form__label" style="width:100%">
                 <div class="form__label__text">Description</div>
                 <div class="form__label__input">
-                    <textarea class="input input--textarea" name="tag[description]" maxlength="65535">{{ edit_tag is defined ? edit_tag.tag_description : '' }}</textarea>
+                    <textarea class="input__textarea" name="tag[description]" maxlength="65535">{{ edit_tag is defined ? edit_tag.tag_description : '' }}</textarea>
                 </div>
             </label>
 
@@ -36,13 +36,13 @@
                 <label class="form__label">
                     <div class="form__label__text">Created</div>
                     <div class="form__label__input">
-                        <input class="input input--text" type="text" value="{{ edit_tag.tag_created }}" readonly>
+                        <input class="input__text" type="text" value="{{ edit_tag.tag_created }}" readonly>
                     </div>
                 </label>
             {% endif %}
 
             <div>
-                <button class="button" name="csrf" value="{{ csrf_token() }}">Save</button>
+                <button class="input__button" name="csrf" value="{{ csrf_token() }}">Save</button>
             </div>
         </form>
 
@@ -67,7 +67,7 @@
                     </label>
 
                     <div>
-                        <button class="button" name="csrf" value="{{ csrf_token() }}">Remove</button>
+                        <button class="input__button" name="csrf" value="{{ csrf_token() }}">Remove</button>
                     </div>
                 </form>
             {% endif %}
@@ -88,7 +88,7 @@
                     </label>
 
                     <div>
-                        <button class="button" name="csrf" value="{{ csrf_token() }}">Add</button>
+                        <button class="input__button" name="csrf" value="{{ csrf_token() }}">Add</button>
                     </div>
                 </form>
             {% endif %}

templates/manage/changelog/tags.twig

@@ -3,7 +3,7 @@
 
 {% block content %}
     <div class="container">
-        <a href="?v=tag" class="button">Create new tag</a>
+        <a href="?v=tag" class="input__button">Create new tag</a>
     </div>
 
     <div class="container listing changelog-tags">

templates/manage/general/overview.twig

@@ -2,6 +2,9 @@
 
 {% block content %}
     <div class="container">
-        <p>Welcome to Manage, here you can manage things.</p>
+        <div class="container__title">The Broom Closet</div>
+        <div class="container__content">
+            Welcome to Manage, here you can manage things.
+        </div>
     </div>
 {% endblock %}

templates/manage/master.twig

@@ -1,83 +1,51 @@
-<!DOCTYPE html>
+{% extends 'master.twig' %}
-<html>
+{% set title = 'Broom Closet' %}
-    <head>
+{% set is_manage = true %}
-        <meta charset="utf-8">
-        <title>{{ globals.site_name|default('The') }} Broom Closet</title>
-        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
-        <link href="{{ '/css/manage.css'|asset_url }}" rel="stylesheet">
-        <link href="{{ '/css/libraries.css'|asset_url }}" rel="stylesheet">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-    </head>
-    <body class="manage">
-        <div class="wrapper">
-            <nav class="header">
-                <div class="header__wrapper">
-                    <a class="header__logo" href="/manage/index.php">
-                        Broom Closet
-                    </a>
 
-                    <div class="header__navigation">
+{% block before_content %}
-                        {% for name, menu in manage_menu %}
+    <nav class="manage-header">
-                            <div class="header__menu">
+        <div class="manage-header__wrapper">
-                                <input type="checkbox" id="menu-{{ name|lower }}-state" class="header__menu__state">
+            <a class="manage-header__logo" href="/manage/index.php">
-                                <label for="menu-{{ name|lower }}-state" class="header__menu__toggle">{{ name }}</label>
+                Broom Closet
-                                <div class="header__menu__options">
+            </a>
-                                    <div class="header__menu__section">
+
-                                    {% for title, link in menu %}
+            <div class="manage-header__navigation">
-                                        {% if link == '_' %}
+                {% for name, menu in manage_menu %}
-                                    </div>
+                    <div class="manage-header__menu">
-                                    <div class="header__menu__section">
+                        <input type="checkbox" id="menu-{{ name|lower }}-state" class="manage-header__menu__state">
-                                        {% else %}
+                        <label for="menu-{{ name|lower }}-state" class="manage-header__menu__toggle">{{ name }}</label>
-                                        <a class="header__menu__link" href="{{ link }}">{{ title }}</a>
+                        <div class="manage-header__menu__options">
-                                        {% endif %}
+                            <div class="manage-header__menu__section">
-                                    {% endfor %}
+                            {% for title, link in menu %}
-                                    </div>
+                                {% if link == '_' %}
-                                </div>
                             </div>
-                        {% endfor %}
+                            <div class="manage-header__menu__section">
-                    </div>
+                                {% else %}
-
+                                <a class="manage-header__menu__link" href="{{ link }}">{{ title }}</a>
-                    <div class="header__user">
+                                {% endif %}
-                        <div class="header__menu">
+                            {% endfor %}
-                            <input type="checkbox" id="menu-user-state" class="header__menu__state">
-                            <label for="menu-user-state" class="header__menu__toggle header__menu__toggle--profile" style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');{{ current_user.user_colour|html_colour }}">{{ current_user.username }}</label>
-                            <div class="header__menu__options header__menu__options--user">
-                                <div class="header__menu__section">
-                                    <a class="header__menu__link" href="/profile.php?u={{ current_user.user_id }}">Profile</a>
-                                    <a class="header__menu__link" href="/settings.php">Settings</a>
-                                </div>
-                                <div class="header__menu__section">
-                                    <a class="header__menu__link" href="/">Return</a>
-                                    <a class="header__menu__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">Logout</a>
-                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
+                {% endfor %}
-            </nav>
+            </div>
 
-            {% block content %}
+            <div class="manage-header__user">
-                <div class="container">
+                <div class="manage-header__menu">
-                    <p>This page has no content.</p>
+                    <input type="checkbox" id="menu-user-state" class="manage-header__menu__state">
+                    <label for="menu-user-state" class="manage-header__menu__toggle manage-header__menu__toggle--profile" style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');{{ current_user.user_colour|html_colour }}">{{ current_user.username }}</label>
+                    <div class="manage-header__menu__options manage-header__menu__options--user">
+                        <div class="manage-header__menu__section">
+                            <a class="manage-header__menu__link" href="/profile.php?u={{ current_user.user_id }}">Profile</a>
+                            <a class="manage-header__menu__link" href="/settings.php">Settings</a>
+                        </div>
+                        <div class="manage-header__menu__section">
+                            <a class="manage-header__menu__link" href="/">Return</a>
+                            <a class="manage-header__menu__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">Logout</a>
+                        </div>
+                    </div>
                 </div>
-            {% endblock %}
+            </div>
-
-            <footer class="footer">
-                {{ 'https://flash.moe'|html_link('Flashwave', 'footer__link')|raw }} 2013-{{
-                ''|date('Y') }} /
-                {{ ('https://github.com/flashwave/misuzu/tree/' ~ git_branch())|html_link(git_branch(), 'footer__link')|raw }}
-                # {{ ('https://github.com/flashwave/misuzu/commit/' ~ git_commit_hash(true))|html_link(git_commit_hash(), 'footer__link')|raw }}
-                {% if query_count is defined %}
-                    / SQL Queries: {{ query_count|number_format }}
-                {% endif %}
-            </footer>
         </div>
-        <script src="{{ '/js/libraries.js'|asset_url }}" charset="utf-8"></script>
+    </nav>
-        <script>
+{% endblock %}
-            window.addEventListener('load', () => {
-                timeago().render(document.querySelectorAll('time'));
-                hljs.initHighlighting();
-            });
-        </script>
-    </body>
-</html>

templates/manage/users/listing.twig

@@ -2,7 +2,7 @@
 {% from 'manage/macros.twig' import pagination %}
 
 {% block content %}
-    <div class="container listing user-listing">
+    <div class="listing user-listing">
         {% for user in manage_users %}
             <a href="?v=view&amp;u={{ user.user_id }}" class="listing__entry user-listing__entry"{% if not user.user_colour|colour_get_inherit %} style="{{ user.user_colour|html_colour({'border-color':'%s'}) }}"{% endif %}>
                 <div class="listing__entry__content user-listing__entry__content">
@@ -17,7 +17,5 @@
         {% endfor %}
     </div>
 
-    <div class="container container--center">
+    {{ pagination(manage_users_count, manage_users_range, manage_users_offset, '?v=listing') }}
-        {{ pagination(manage_users_count, manage_users_range, manage_users_offset, '?v=listing') }}
-    </div>
 {% endblock %}

templates/manage/users/roles.twig

@@ -4,7 +4,7 @@
 {% block content %}
     {% if can_manage_roles %}
         <div class="container">
-            <a href="?v=role" class="button">Create new Role</a>
+            <a href="?v=role" class="input__button">Create new Role</a>
         </div>
     {% endif %}
 

templates/manage/users/roles_create.twig

@@ -15,7 +15,7 @@
             <label class="form__label">
                 <div class="form__label__text">Role Name</div>
                 <div class="form__label__input">
-                    <input class="input input--text" type="text" value="{{ edit_role is defined ? edit_role.role_name : '' }}" name="role[name]" maxlength="255">
+                    <input class="input__text" type="text" value="{{ edit_role is defined ? edit_role.role_name : '' }}" name="role[name]" maxlength="255">
                 </div>
             </label>
 
@@ -36,7 +36,7 @@
             <label class="form__label">
                 <div class="form__label__text">Title</div>
                 <div class="form__label__input">
-                    <input class="input input--text" type="text" value="{{ edit_role is defined ? edit_role.role_title : '' }}" name="role[title]" maxlength="64">
+                    <input class="input__text" type="text" value="{{ edit_role is defined ? edit_role.role_title : '' }}" name="role[title]" maxlength="64">
                 </div>
             </label>
 
@@ -75,7 +75,7 @@
             <label class="form__label">
                 <div class="form__label__text">Description</div>
                 <div class="form__label__input">
-                    <textarea class="input input--textarea" name="role[description]" maxlength="1000">{{ edit_role is defined ? edit_role.role_description : '' }}</textarea>
+                    <textarea class="input__textarea" name="role[description]" maxlength="1000">{{ edit_role is defined ? edit_role.role_description : '' }}</textarea>
                 </div>
             </label>
         </div>
@@ -88,7 +88,7 @@
         {% endif %}
 
         <div class="container">
-            <button class="button" name="csrf" value="{{ csrf_token() }}">{{ edit_role is defined ? 'Update role' : 'Create role' }}</button>
+            <button class="input__button" name="csrf" value="{{ csrf_token() }}">{{ edit_role is defined ? 'Update role' : 'Create role' }}</button>
         </div>
     </form>
 {% endblock %}

templates/manage/users/view.twig

@@ -5,74 +5,74 @@
     {% if can_manage_users %}
         <form method="post" enctype="multipart/form-data" action="">
             <div class="container">
-                <h1 class="container__title">
+                <div class="container__title">
                     Viewing <span style="{{ view_user.colour|html_colour }}">{{ view_user.username }}</span> ({{ view_user.user_id }})
-                </h1>
+                </div>
 
                 <label class="form__label">
                     <div class="form__label__text">Username</div>
                     <div class="form__label__input">
-                        <input class="input input--text" type="text" value="{{ view_user.username }}" name="user[username]" maxlength="16">
+                        <input class="input__text" type="text" value="{{ view_user.username }}" name="user[username]" maxlength="16">
                     </div>
                 </label>
 
                 <label class="form__label">
                     <div class="form__label__text">E-mail address</div>
                     <div class="form__label__input">
-                        <input class="input input--text" type="text" value="{{ view_user.email }}" name="user[email]" maxlength="255">
+                        <input class="input__text" type="text" value="{{ view_user.email }}" name="user[email]" maxlength="255">
                     </div>
                 </label>
 
                 <label class="form__label">
                     <div class="form__label__text">Title</div>
                     <div class="form__label__input">
-                        <input class="input input--text" type="text" value="{{ view_user.user_title }}" name="user[title]" maxlength="64">
+                        <input class="input__text" type="text" value="{{ view_user.user_title }}" name="user[title]" maxlength="64">
                     </div>
                 </label>
 
                 <label class="form__label">
                     <div class="form__label__text">Joined</div>
                     <div class="form__label__input">
-                        <input class="input input--text" readonly type="text" value="{{ view_user.created_at }}">
+                        <input class="input__text" readonly type="text" value="{{ view_user.created_at }}">
                     </div>
                 </label>
 
                 <label class="form__label">
                     <div class="form__label__text">Last online</div>
                     <div class="form__label__input">
-                        <input class="input input--text" readonly type="text" value="{{ view_user.last_seen }}">
+                        <input class="input__text" readonly type="text" value="{{ view_user.last_seen }}">
                     </div>
                 </label>
 
                 <label class="form__label">
                     <div class="form__label__text">Register IP</div>
                     <div class="form__label__input">
-                        <input class="input input--text" readonly type="text" value="{{ view_user.register_ip_decoded }}">
+                        <input class="input__text" readonly type="text" value="{{ view_user.register_ip_decoded }}">
                     </div>
                 </label>
 
                 <label class="form__label">
                     <div class="form__label__text">Last IP</div>
                     <div class="form__label__input">
-                        <input class="input input--text" readonly type="text" value="{{ view_user.last_ip_decoded }}">
+                        <input class="input__text" readonly type="text" value="{{ view_user.last_ip_decoded }}">
                     </div>
                 </label>
 
                 <label class="form__label">
                     <div class="form__label__text">Country</div>
                     <div class="form__label__input">
-                        <input class="input input--text" type="text" value="{{ view_user.user_country }}" name="user[country]" maxlength="2">
+                        <input class="input__text" type="text" value="{{ view_user.user_country }}" name="user[country]" maxlength="2">
                     </div>
                 </label>
             </div>
 
             <div class="container">
-                <h2 class="container__subtitle">Avatar</h2>
+                <div class="container__title">Avatar</div>
 
                 <label class="form__label">
                     <div class="form__label__text">New Avatar</div>
                     <div class="form__label__input">
-                        <input class="input input--text" type="file" name="avatar[file]">
+                        <input class="input__text" type="file" name="avatar[file]">
                     </div>
                 </label>
 
@@ -85,77 +85,79 @@
             </div>
 
             <div class="container">
-                <h2 class="container__subtitle">Password</h2>
+                <div class="container__title">Password</div>
 
                 <label class="form__label">
                     <div class="form__label__text">New Password</div>
                     <div class="form__label__input">
-                        <input class="input input--text" type="password" name="password[new]">
+                        <input class="input__text" type="password" name="password[new]">
                     </div>
                 </label>
 
                 <label class="form__label">
                     <div class="form__label__text">Confirm Password</div>
                     <div class="form__label__input">
-                        <input class="input input--text" type="password" name="password[confirm]">
+                        <input class="input__text" type="password" name="password[confirm]">
                     </div>
                 </label>
             </div>
 
             <div class="container">
-                <h2 class="container__subtitle">Profile fields</h2>
+                <div class="container__title">Profile fields</div>
 
                 {% for name, props in profile_fields %}
                     <label class="form__label">
                         <div class="form__label__text">{{ props.name }}</div>
                         <div class="form__label__input">
-                            <input class="input input--text" type="{{ props.type|default('text') }}" value="{{ view_user['user_' ~ name] }}" name="profile[{{ name }}]">
+                            <input class="input__text" type="{{ props.type|default('text') }}" value="{{ view_user['user_' ~ name] }}" name="profile[{{ name }}]">
                         </div>
                     </label>
                 {% endfor %}
             </div>
 
-            <h2 class="container__subtitle">Colour</h2>
+            <div class="container">
+                <div class="container__title">Colour</div>
 
-            {% set colour_is_defined = view_user is defined and view_user.user_colour is not null and not view_user.user_colour|colour_get_inherit %}
+                {% set colour_is_defined = view_user is defined and view_user.user_colour is not null and not view_user.user_colour|colour_get_inherit %}
 
-            <label class="form__label">
+                <label class="form__label">
-                <div class="form__label__text">Custom Colour</div>
+                    <div class="form__label__text">Custom Colour</div>
-                <div class="form__label__input">
+                    <div class="form__label__input">
-                    <input class="input" type="checkbox" name="colour[enable]"{% if colour_is_defined %} checked{% endif %}>
+                        <input class="input" type="checkbox" name="colour[enable]"{% if colour_is_defined %} checked{% endif %}>
-                </div>
+                    </div>
-            </label>
+                </label>
 
-            <label class="form__label">
+                <label class="form__label">
-                <div class="form__label__text">Red</div>
+                    <div class="form__label__text">Red</div>
-                <div class="form__label__input">
+                    <div class="form__label__input">
-                    <input class="input input--number" type="number" value="{{ colour_is_defined ? view_user.user_colour|colour_get_red : '0' }}" min="0" max="255" name="colour[red]">
+                        <input class="input input--number" type="number" value="{{ colour_is_defined ? view_user.user_colour|colour_get_red : '0' }}" min="0" max="255" name="colour[red]">
-                </div>
+                    </div>
-            </label>
+                </label>
 
-            <label class="form__label">
+                <label class="form__label">
-                <div class="form__label__text">Green</div>
+                    <div class="form__label__text">Green</div>
-                <div class="form__label__input">
+                    <div class="form__label__input">
-                    <input class="input input--number" type="number" value="{{ colour_is_defined ? view_user.user_colour|colour_get_green : '0' }}" min="0" max="255" name="colour[green]">
+                        <input class="input input--number" type="number" value="{{ colour_is_defined ? view_user.user_colour|colour_get_green : '0' }}" min="0" max="255" name="colour[green]">
-                </div>
+                    </div>
-            </label>
+                </label>
 
-            <label class="form__label">
+                <label class="form__label">
-                <div class="form__label__text">Blue</div>
+                    <div class="form__label__text">Blue</div>
-                <div class="form__label__input">
+                    <div class="form__label__input">
-                    <input class="input input--number" type="number" value="{{ colour_is_defined ? view_user.user_colour|colour_get_blue : '0' }}" min="0" max="255" name="colour[blue]">
+                        <input class="input input--number" type="number" value="{{ colour_is_defined ? view_user.user_colour|colour_get_blue : '0' }}" min="0" max="255" name="colour[blue]">
-                </div>
+                    </div>
-            </label>
+                </label>
+            </div>
 
             {% if can_manage_perms %}
                 <div class="container">
-                    <h2 class="container__subtitle">Permissions</h2>
+                    <div class="container__title">Permissions</div>
                     {{ permissions_table(permissions) }}
                 </div>
             {% endif %}
 
             <div class="container">
-                <button class="button" name="csrf" value="{{ csrf_token() }}">Update</button>
+                <button class="input__button" name="csrf" value="{{ csrf_token() }}">Update</button>
             </div>
         </form>
     {% endif %}
@@ -164,7 +166,7 @@
         <div class="container">
             {% if has_roles|length > 0 %}
                 <form method="post" action="" style="display:inline-block">
-                    <h2 class="container__subtitle">Manage Roles</h2>
+                    <div class="container__title">Manage Roles</div>
 
                     <input type="hidden" name="csrf" value="{{ csrf_token() }}">
 
@@ -182,15 +184,15 @@
                     </label>
 
                     <div>
-                        <button class="button" name="manage_roles[mode]" value="display">Set Display</button>
+                        <button class="input__button" name="manage_roles[mode]" value="display">Set Display</button>
-                        <button class="button" name="manage_roles[mode]" value="remove">Remove</button>
+                        <button class="input__button" name="manage_roles[mode]" value="remove">Remove</button>
                     </div>
                 </form>
             {% endif %}
 
             {% if available_roles|length > 0 %}
                 <form method="post" action="" style="display:inline-block">
-                    <h2 class="container__subtitle">Add Role</h2>
+                    <div class="container__title">Add Role</div>
 
                     <label class="form__label">
                         <div class="form__label__text">Available Roles</div>
@@ -206,7 +208,7 @@
                     </label>
 
                     <div>
-                        <button class="button" name="csrf" value="{{ csrf_token() }}">Add</button>
+                        <button class="input__button" name="csrf" value="{{ csrf_token() }}">Add</button>
                     </div>
                 </form>
             {% endif %}

templates/master.twig

@@ -6,11 +6,15 @@
         {% include '_layout/meta.twig' %}
         <link href="{{ '/css/mio.css'|asset_url }}" rel="stylesheet">
         <link href="{{ '/css/libraries.css'|asset_url }}" rel="stylesheet">
+        {% if is_manage|default(false) %}
+            <link href="{{ '/css/manage.css'|asset_url }}" rel="stylesheet">
+        {% endif %}
     </head>
     <body class="main">
         {% include '_layout/header.twig' %}
 
         <div class="main__wrapper">
+            {% block before_content %}{% endblock %}
             {% block content %}
                 <div class="container">
                     <div class="container__title">Hello!</div>

templates/settings/account.twig

@@ -30,7 +30,7 @@
                             <div class="settings__account__column">
                                 <div class="settings__account__title">E-mail and Password changing</div>
                                 <div class="settings__account__disabled">
-                                    <a class="input__button" href="https://flashii.net/settings.php?m=account">Go to main site</a>
+                                    <a input__text href="https://flashii.net/settings.php?m=account">Go to main site</a>
                                 </div>
                             </div>
                         </div>
@@ -114,8 +114,8 @@
 
             {% if settings_perms.edit_profile or not settings_disable_account_options %}
                 <div class="settings__account__row settings__account__row--buttons">
-                    <button class="input__button">Update</button>
+                    <button class="input__button"Update</button>
-                    <button class="input__button" type="reset">Reset</button>
+                    <button input__text type="reset">Reset</button>
                 </div>
             {% endif %}
         </form>

templates/user/listing.twig

@@ -50,7 +50,7 @@
         </select>
 
         <noscript>
-            <button class="input__button">Go</button>
+            <button class="input__button"Go</button>
         </noscript>
     </form>