misuzu/assets/less/main.less

@mio-font-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
@mio-font-mono: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@site-mobile-width: 800px;
@font-size: 12px;
@line-height: 20px;

:root {
    --site-max-width: 1200px;
    --site-logo: url('/images/logos/imouto-default.png');

    --header-height-desktop: 70px;
    --header-height-mobile: 50px;

    --background-image: initial;

    @background-colour: #111;
    --background-colour: @background-colour;
    --background-colour-translucent-1: fade(@background-colour, 10%);
    --background-colour-translucent-2: fade(@background-colour, 20%);
    --background-colour-translucent-3: fade(@background-colour, 30%);
    --background-colour-translucent-4: fade(@background-colour, 40%);
    --background-colour-translucent-5: fade(@background-colour, 50%);
    --background-colour-translucent-6: fade(@background-colour, 60%);
    --background-colour-translucent-7: fade(@background-colour, 70%);
    --background-colour-translucent-8: fade(@background-colour, 80%);
    --background-colour-translucent-9: fade(@background-colour, 90%);
    --background-colour-translucent: var(--background-colour-translucent-9); // switch to the numbered ones
    --background-pattern: url('/images/clouds.png') fixed;

    --text-colour: #fff;
    --text-colour-inverted: #000;

    --user-colour: inherit;
    --user-header: url('/images/pixel.png');
    --accent-colour: #8559a5;
    --header-accent-colour: var(--accent-colour);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    outline-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

html {
    scrollbar-color: var(--accent-colour) var(--background-colour);
}

.main {
    display: flex;
    flex-direction: column;
    background-image: var(--background-image);
    background-color: var(--background-colour);
    font: @font-size/@line-height @mio-font-regular;
    color: var(--text-colour);
    background-attachment: fixed;
    background-position: center center;

    &__wrapper {
        max-width: var(--site-max-width);
        width: 100%;
        margin: 0 auto;
        flex: 1 0 auto;
    }

    &--bg-blend {
        background-color: var(--accent-colour);
        background-blend-mode: multiply;
    }

    &--bg-slide {
        animation: background-slide infinite linear 2s;
    }

    &--bg-cover {
        background-size: cover;
    }

    &--bg-contain {
        background-size: contain;
    }

    &--bg-stretch {
        background-size: 100% 100%;
    }

    &--bg-tile {
        background-size: auto;
    }
}

// Misc
@import "animations";
@import "link";
@import "markdown";

// 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";

// Base styles
@import "classes/avatar";
@import "classes/container";
@import "classes/flag";
@import "classes/navigation";
@import "classes/pagination";
@import "classes/warning";
@import "classes/messagebox";

// Specific styles
@import "classes/auth";
@import "classes/header";
@import "classes/footer";
@import "classes/permissions";

// Main page styling
@import "classes/landing";

// Manage
@import "classes/manage/manage";
@import "classes/manage/navigation";
@import "classes/manage/blacklist";
@import "classes/manage/role-item";
@import "classes/manage/roles";
@import "classes/manage/user-item";
@import "classes/manage/users";
@import "classes/manage/user";

// Profile
@import "classes/profile/about";
@import "classes/profile/accounts";
@import "classes/profile/background-settings";
@import "classes/profile/birthdate";
@import "classes/profile/container";
@import "classes/profile/guidelines";
@import "classes/profile/header";
@import "classes/profile/pagination";
@import "classes/profile/profile";
@import "classes/profile/relations";
@import "classes/profile/signature";
@import "classes/profile/warning";

// Changelog
@import "classes/changelog/change";
@import "classes/changelog/container";
@import "classes/changelog/entry";
@import "classes/changelog/listing";
@import "classes/changelog/log";
@import "classes/changelog/pagination";
@import "classes/changelog-actions-tags"; // move this into something in the manage dir

// Settings
@import "classes/settings/wrapper";
@import "classes/settings/container";
@import "classes/settings/description";
@import "classes/settings/pagination";
@import "classes/settings/account";
@import "classes/settings/account-log";
@import "classes/settings/account-logs";
@import "classes/settings/login-attempt";
@import "classes/settings/login-attempts";
@import "classes/settings/session";
@import "classes/settings/sessions";
@import "classes/settings/role";

// News
@import "classes/news/container";
@import "classes/news/list";
@import "classes/news/preview";
@import "classes/news/sidebar";
@import "classes/news/post"; // post needs to be able to override sidebar

// Forums
@import "classes/forum/actions";
@import "classes/forum/categories";
@import "classes/forum/category";
@import "classes/forum/confirm";
@import "classes/forum/post";
@import "classes/forum/topic";
@import "classes/forum/topics";
@import "classes/forum/status";
@import "classes/forum/header";

// User stuff
@import "classes/usercard";
@import "classes/userlist";

// Comments
@import "classes/comment"; // entries
@import "classes/comments"; // listing