bluelib/src/rules/skeleton.less

@{root} {
    // --- Globals ---

    --bluelib-color-r: 24;
    --bluelib-color-g: 24;
    --bluelib-color-b: 24;

    box-sizing: border-box;
    @{all} {
        box-sizing: border-box;
        color: rgb(
                var(--bluelib-color-r),
                var(--bluelib-color-g),
                var(--bluelib-color-b),
        );
    }

    // --- Containers ---

    @{container-main} {
        margin-left: auto;
        margin-right: auto;
        max-width: 1280px;
    }

    // --- Panels ---
    // Remember to use BOTH the panel AND the panel-* class when using a panel element!

    // Base panel
    @{panel} {
        margin: 8px 0;
        width: 100%;

        > @{element-paragraph}, @{element-title}, @{panel} {
            &:first-child {
                margin-top: 0;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    // A generic content panel
    @{panel-box} {
        padding: 8px;
        border-radius: 4px;
        border-width: 2px;
        border-style: solid;

        background-color: rgba(
            var(--bluelib-color-r),
            var(--bluelib-color-g),
            var(--bluelib-color-b),
            0.025
        );
        border-color: rgba(
            var(--bluelib-color-r),
            var(--bluelib-color-g),
            var(--bluelib-color-b),
            1
        );
    }

    // A box with a quote-like border
    @{panel-blockquote} {
        border-left-width: 2px;
        border-top-width: 0;
        border-bottom-width: 0;
        border-right-width: 0;
    }

    // A box with smaller text and no border
    @{panel-aside} {
        border-width: 0;
        font-size: smaller;
    }

    // Evenly split the panels contained inside
    @{panel-split} {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;

        > * {
            flex-grow: 1;
            flex-shrink: 0;
            flex-basis: 0;
        }

        > @{panel} {
            margin: 0;
        }
    }

    // --- Element status ---

    @{status-disabled} {
        cursor: not-allowed;
        opacity: 50%;
    }

    @{status-hoverable} {
        cursor: help;
    }

    @{status-clickable} {
        cursor: pointer;
    }

    // --- Spoilers ---

    @{spoiler} {
        filter: blur(5px);

        &:hover {
            filter: none;
        }
    }

    // --- Elements ---

    @{element-title} {
        text-align: center;
    }

    @{element-paragraph} {

    }

    @{element-separator} {
        border-width: 1px;
        border-color: dimgrey;
    }

    @{element-list-item} {
        margin: 10px 0;
    }

    @{element-anchor} {

    }

    // --- Alignment ---

    @{align-left} {
        text-align: left;
    }

    @{align-center} {
        text-align: center;
    }

    @{align-right} {
        text-align: right;
    }

    // --- Sizes ---

    @{size-xxl} {
        font-size: xx-large;
    }

    @{size-xl} {
        font-size: x-large;
    }

    @{size-l} {
        font-size: large;
    }

    @{size-m} {
        font-size: medium;
    }

    @{size-s} {
        font-size: small;
    }

    @{size-xs} {
        font-size: x-small;
    }

    @{size-xxs} {
        font-size: xx-small;
    }

    // --- Styles ---

    @{style-bold} {
        font-weight: bold;
    }

    @{style-italic} {
        font-style: italic;
    }

    @{style-underline} {
        text-decoration-line: underline;
    }

    @{style-strike} {
        text-decoration-line: line-through;
    }

    @{style-monospace} {
        font-family: monospace;
    }

    @{style-keyboard} {
        font-family: monospace;
        padding: 4px;
        border: 2px outset;
        border-radius: 4px;
    }

    // --- Colors ---

    @{color-red} {
        color: red;
    }

    @{color-orange} {
        color: orange;
    }

    @{color-yellow} {
        color: #dddd00;  // Pure yellow isn't readable on a white background
    }

    @{color-lime} {
        color: lime;
    }

    @{color-cyan} {
        color: cyan;
    }

    @{color-blue} {
        color: blue;
    }

    @{color-magenta} {
        color: magenta;
    }

    @{color-gray} {
        color: gray;
    }
}