hiqlite 0.14.0

Hiqlite - highly-available, embeddable, raft-based SQLite + cache
Documentation
/*
Once deployed into production, depending on your Cache-Control settings, CDN, ...
you might not change anything in this file without incrementing the counter
to avoid cache problems.
*/

body {
    --col-mid: hsl(256, 5%, 44%);
    --col-mid-a: hsla(256, 5%, 44%, 80%);

    --col-p: hsl(45, 70%, 56%);
    --col-p-a: hsla(45, 70%, 56%, 80%);
    --col-s: hsl(37, 72%, 54%);
    --col-s-a: hsl(37, 72%, 54%, 80%);

    --col-ok: hsl(112, 83%, 50%);
    --col-ok-a: hsla(112, 83%, 50%, 80%);
    --col-err: hsl(355, 67%, 50%);
    --col-err-a: hsla(355, 67%, 50%, 80%);

    --col-text: hsl(265, 11%, 22%);
    --col-text-a: hsl(265, 11%, 22%, 80%);
    --col-bg: hsl(300, 3%, 89%);
    --col-bg-a: hsl(300, 3%, 89%, 80%);

    --col-btn: var(--col-p);
    --col-btn-text: var(--col-text);

    --col-tabs-sel: var(--col-text);
    --col-tabs-bg: var(--col-text);

    --col-input-hover: hsla(45, 81%, 85%, 0.8);
    --col-input-focus: hsla(45, 78%, 81%, 0.8);

    --width-health: 10rem;
    --width-tables: 18rem;
    --width-inner: calc(100dvw - var(--width-health) - var(--width-tables) - 1rem - 2px);
}

/* Dark theme colors */
body.dark-theme {
    --col-text: hsl(270, 3%, 75%);
    --col-text-a: hsl(270, 3%, 75%, 80%);
    --col-bg: hsl(265, 11%, 22%);
    --col-bg-a: hsl(265, 11%, 22%, 80%);

    --col-btn: var(--col-p);
    --col-btn-text: var(--col-bg);

    --col-input-hover: hsla(45, 89%, 29%, 0.1);
    --col-input-focus: hsla(45, 89%, 29%, 0.15);

    --col-tabs-sel: var(--col-bg);
    --col-tabs-bg: hsl(268, 10%, 30%);
}

/* Styles for users who prefer dark mode at the OS level */
@media (prefers-color-scheme: dark) {
    /* defaults to dark theme */
    body {
        /* Default colors */
        --col-mid: hsl(256, 5%, 44%);
        --col-mid-a: hsla(256, 5%, 44%, 80%);

        --col-p: hsl(45, 70%, 56%);
        --col-p-a: hsla(45, 70%, 56%, 80%);
        --col-s: hsl(37, 72%, 54%);
        --col-s-a: hsl(37, 72%, 54%, 80%);

        --col-ok: hsl(112, 83%, 50%);
        --col-ok-a: hsla(112, 83%, 50%, 80%);
        --col-err: hsl(355, 67%, 50%);
        --col-err-a: hsla(355, 67%, 50%, 80%);

        --col-text: hsl(270, 3%, 75%);
        --col-text-a: hsl(270, 3%, 75%, 80%);
        --col-bg: hsl(265, 11%, 22%);
        --col-bg-a: hsl(265, 11%, 22%, 80%);

        --col-btn: var(--col-p);
        --col-btn-text: var(--col-bg);

        --col-input-hover: hsla(45, 89%, 29%, 0.1);
        --col-input-focus: hsla(45, 89%, 29%, 0.15);

        --col-tabs-sel: var(--col-bg);
        --col-tabs-bg: hsl(268, 10%, 30%);
    }

    /* Override dark mode with light mode styles if the user decides to swap */
    body.light-theme {
        --col-text: hsl(265, 11%, 22%);
        --col-text-a: hsl(265, 11%, 22%, 80%);
        --col-bg: hsl(300, 3%, 89%);
        --col-bg-a: hsl(300, 3%, 89%, 80%);

        --col-btn: var(--col-p);
        --col-btn-text: var(--col-text);

        --col-input-hover: hsla(45, 81%, 85%, 0.8);
        --col-input-focus: hsla(45, 78%, 81%, 0.8);

        --col-tabs-sel: var(--col-text);
        --col-tabs-bg: var(--col-text);

    }
}

body {
    width: 100dvw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
    line-height: 1.5rem;
    color: var(--col-text);
    background: var(--col-bg);
    scroll-behavior: smooth;

    display: flex;
}

.font-label {
    font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT',
    'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
}

.font-mono {
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
    'DejaVu Sans Mono', monospace;
}

.err {
    color: var(--col-err);
}

.ok {
    color: var(--col-ok);
}

.noselect {
    user-select: none;
}

span[aria-label="required"] {
    color: var(--col-err);
}

input {
    width: 100%;
    margin: .33rem 0;
    padding: .25rem .5rem;
    background: var(--col-bg);
    border: none;
    border-bottom: 1px solid var(--col-text);
    color: var(--col-text);
    font-size: 1.05rem;
    outline: none;
}

input:valid {
    border-bottom: 1px solid var(--col-ok);
}

input:invalid {
    border-bottom: 1px solid var(--col-err);
}

input:disabled {
    background: var(--col-mid);
}

input:hover {
    background: var(--col-input-hover);
}

input:focus {
    background: var(--col-input-focus);
}