luminance.css

@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Fira+Code:wght@300..700&family=Roboto+Slab:wght@100..900&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap");

:root,
.light,
.dark .dark {
    --font: "DM Sans", sans-serif;
    --font-mono: "Fira Code", "Cascadia Code", monospace;
    --font-icons: "Material Symbols Rounded";
    --border-radius: 10px;
    --focus-outline: inset 0 0 0 3px var(--blue);
    --qtime: 0.2s;

    --fg: #fff;
    --bg: #e8e8e8;
    --fg-hover: #ddd;
    --half: #888;
    --text-hover: #333;
    --text: #111;

    --green: #4e7;
    --green-hover: #1b4;
    --blue: #47e;
    --blue-hover: #25c;
    --red: #e44;
    --red-hover: #b22;
    --yellow: #fb3;
    --yellow-hover: #d80;

    /* shadows only where contrast is needed */
    --shadow: 4px 4px 10px rgba(0, 0, 0, 0.05);
    --inset-shadow: inset var(--shadow);
}

.dark {
    --bg: #111;
    --fg: #222;
    --fg-hover: #333;
    --text-hover: #bbb;
    --text: #f8f8f8;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    transition: background var(--qtime),
        color var(--qtime),
        box-shadow var(--qtime);
    border: none;
    outline: none;
    box-decoration-break: clone;
}

*::selection {
    background-color: var(--text);
    color: var(--bg);
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
}

textarea:focus-visible {
    box-shadow: var(--focus-outline);
}

hr {
    border: 0;
    height: 0.2em;
    border-radius: 100px;
    background-color: var(--bg);
}

kbd {
    background: var(--bg);
    border-radius: var(--border-radius);
    padding: 0.1rem 0.3rem;
}

mark {
    background: linear-gradient(75deg,
            transparent 10px,
            #fc04 10px,
            #fc04 calc(100% - 10px),
            transparent calc(100% - 10px));
    color: inherit;
    z-index: 1;
    margin: 0 -10px;
    padding: 0 10px;
}

blockquote {
    background: var(--bg);
    border-radius: var(--border-radius);
    padding: 10px 20px;
    position: relative;

    &::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 5px;
        bottom: 5px;
        width: 4px;
        background-color: var(--half);
        border-radius: 1337px;
    }
}

table {
    width: 100%;
    border-collapse: collapse;

    th,
    td {
        padding: 10px;
        text-align: left;
    }

    th {
        background-color: var(--bg);
        border-bottom: 3px solid var(--fg);
    }

    td {
        background-color: var(--bg);
    }

    tr:first-child th:first-child {
        border-top-left-radius: var(--border-radius);
    }

    tr:first-child th:last-child {
        border-top-right-radius: var(--border-radius);
    }

    tr:last-child td:first-child {
        border-bottom-left-radius: var(--border-radius);
    }

    tr:last-child td:last-child {
        border-bottom-right-radius: var(--border-radius);
    }
}

button,
.button {
    background-color: var(--text);
    color: var(--fg);
    border-radius: var(--border-radius);
    font-size: 1em;
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--qtime),
        color var(--qtime),
        box-shadow var(--qtime);

    &.btn {
        padding: 10px 20px;
    }

    &.secondary {
        background-color: var(--bg);
        color: var(--text);

        @media (hover: hover) {
            &:hover {
                background-color: var(--fg-hover);
            }
        }
    }

    &.tertiary {
        background-color: var(--fg);
        color: var(--text);

        @media (hover: hover) {
            &:hover {
                background-color: var(--fg-hover);
            }
        }
    }

    &:disabled,
    &.disabled {
        background-color: var(--half);
        color: var(--bg);
        cursor: not-allowed;
        box-shadow: none;

        @media (hover: hover) {
            &:hover {
                background-color: var(--half);
            }
        }
    }

    &.pill {
        border-radius: 1337px;
    }

    &:focus-visible {
        box-shadow: var(--focus-outline);
    }

    @media (hover: hover) {
        &:hover {
            background-color: var(--text-hover);
        }
    }
}

a {
    text-decoration: none;
    color: var(--blue);

    @media (hover: hover) {
        &:hover {
            color: var(--blue-hover);
        }
    }
}

code {
    background: var(--bg);
    color: var(--red);
    font-family: var(--font-mono);
    padding: 2.5px 5px;
    border-radius: var(--border-radius);
    font-size: 1em;
}

pre code,
code.block {
    background-color: var(--bg);
    display: block;
    white-space: pre;
    color: var(--text);
    padding: 10px 20px;
    box-shadow: inset 105px 0 0 -100px var(--text);
    overflow-x: auto;
}

select {
    background-color: var(--bg);
    color: var(--text);
    border-radius: var(--border-radius);
    padding: 5px 15px;
    font-family: var(--font);
    font-size: 1em;
    cursor: pointer;

    &:focus-visible {
        box-shadow: var(--focus-outline);
    }
}

progress {
    height: 20px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: var(--border-radius);
    background-color: var(--bg);
    overflow: hidden;

    &::-webkit-progress-bar {
        background-color: var(--bg);
    }

    &::-webkit-progress-value {
        background-color: var(--text);
        transition: width var(--qtime) ease-in-out;
    }

    &::-moz-progress-bar {
        background-color: var(--text);
        transition: width var(--qtime) ease-in-out;
    }
}

details {
    width: 100%;
    background-color: var(--bg);
    border-radius: var(--border-radius);
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    position: relative;

    summary {
        cursor: pointer;
        user-select: none;
        padding: 5px;

        &::marker {
            color: transparent;
        }

        &::after {
            position: absolute;
            content: 'expand_more';
            font-family: var(--font-icons);
            font-variation-settings:
                'FILL' 1,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24;
            left: 15px;
            top: 0.4em;
            transform: rotate(-90deg);
            transition: transform var(--qtime) ease-in-out;
            font-size: 1.5em;
        }
    }

    &[open] {
        &::details-content {
            background-color: var(--fg);
            border-radius: var(--border-radius);
            padding: 15px;
        }

        summary::after {
            transform: rotate(0deg);
        }
    }
}

/* all inputs that generally look like text */
input[type='text'],
input[type='number'],
input[type='email'],
input[type='password'],
input[type='url'],
input[type='tel'],
input[type='search'],
input[type='datetime-local'],
input[type='date'],
input[type='time'],
input[type='month'],
input[type='week'],
textarea {
    background-color: var(--bg);
    color: var(--text);
    border-radius: var(--border-radius);
    padding: 10px 20px;
    font-size: 1em;
    font-family: var(--font);

    &::placeholder {
        color: var(--half);
    }

    &:focus-visible {
        box-shadow: var(--focus-outline);
    }
}

input[type="checkbox"] {
    &.switch {
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        border: none;
        margin: 0;
        padding: 0;
        background-color: var(--bg);
        width: 4em;
        height: 2em;
        border-radius: 1337px;
        position: relative;
        cursor: pointer;
        transition: background-color var(--qtime) ease-in-out;
        box-shadow: var(--inset-shadow);

        &:checked {
            background-color: var(--text);

            &::after {
                left: calc(50% + 2px);
                background-color: var(--fg);
                right: 2px;
                transition: left 0.3s ease-in-out, right 0.2s ease-in-out;
            }
        }

        &::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            bottom: 2px;
            right: calc(50% + 2px);
            background-color: #fff;
            border-radius: 1337px;
            transition: left 0.2s ease-in-out,
                right 0.3s ease-in-out,
                box-shadow var(--qtime) ease-in-out,
                background-color var(--qtime) ease-in-out;
            box-shadow: var(--shadow);
        }

        @media (hover: hover) {
            &:hover {
                background-color: var(--fg-hover);
            }

            &:checked:hover {
                background-color: var(--text-hover);
            }
        }
    }

    &:not(.switch) {
        position: relative;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        background: none;
        border: none;
        margin: 0;
        padding: 0;
        background-color: var(--bg);
        width: 20px;
        height: 20px;
        border-radius: calc(var(--border-radius) / 2);
        /* Checkbox is so small, we have to use a smaller radius */
        cursor: pointer;
        transition: background-color var(--qtime) ease-in-out, box-shadow var(--qtime) ease-in-out;
        box-shadow: var(--inset-shadow);

        &::after {
            content: 'check';
            color: transparent;
            font-family: var(--font-icons);
            font-size: 24px;
            position: absolute;
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        &:checked {
            background-color: var(--text);
            box-shadow: var(--shadow);

            &::after {
                color: var(--fg);
            }
        }

        @media (hover: hover) {
            &:hover {
                background-color: var(--fg-hover);
            }

            &:checked:hover {
                background-color: var(--text-hover);
            }
        }
    }

    &:focus-visible {
        box-shadow: var(--focus-outline);
    }
}

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    background-color: var(--bg);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    box-shadow: var(--inset-shadow);
    transition: background-color var(--qtime) ease-in-out, box-shadow var(--qtime) ease-in-out;

    &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        width: 10px;
        height: 10px;
        background-color: var(--fg);
        border-radius: 50%;
        transition: transform var(--qtime) ease-in-out;
    }

    &:checked {
        background-color: var(--text);
        box-shadow: var(--shadow);

        &::after {
            transform: translate(-50%, -50%) scale(1);
        }
    }

    @media (hover: hover) {
        &:hover {
            background-color: var(--fg-hover);
        }

        &:checked:hover {
            background-color: var(--text-hover);
        }
    }

    &:focus-visible {
        box-shadow: var(--focus-outline);
    }
}

input[type="file"] {
    background-color: var(--bg);
    border-radius: var(--border-radius);
    padding: 10px;
    font-size: 1em;
    font-family: var(--font);
    cursor: pointer;

    &:focus-visible {
        box-shadow: var(--focus-outline);
    }

    &::file-selector-button {
        background-color: var(--text);
        color: var(--fg);
        border: none;
        border-radius: var(--border-radius);
        padding: 10px 20px;
        font-family: var(--font);
        cursor: pointer;
        transition: background-color var(--qtime),
            color var(--qtime),
            box-shadow var(--qtime);
    }
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;

    &::-webkit-slider-runnable-track {
        height: 8px;
        background-color: var(--bg);
        border-radius: 1337px;
    }

    &::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
        background-color: var(--text);
        border-radius: 50%;
        cursor: pointer;
        -webkit-appearance: none;
        border: none;
        outline: none;
        margin-top: -4px;
    }

    &::-moz-range-progress {
        height: 8px;
        background-color: var(--text);
        border-radius: 1337px 0 0 1337px;
    }

    &::-moz-range-track {
        height: 8px;
        background-color: var(--bg);
        border-radius: 1337px;
    }

    &::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background-color: var(--text);
        border-radius: 1337px;
        border: none;
        outline: none;
        cursor: pointer;
    }

    &::-moz-range-thumb:hover {
        background-color: var(--text-hover);
    }

    &:focus-visible::-moz-range-thumb {
        background-color: var(--blue);
    }

    &:focus-visible::-moz-range-thumb:hover {
        background-color: var(--blue-hover);
    }
}

input[type="color"] {
    background-color: var(--bg);
    border-radius: var(--border-radius);
    padding: 0;
}

/* generic classes */

.icon {
    font-family: var(--font-icons) !important;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.hidden {
    display: none !important;
}

.no-transitions *,
.no-transitions *:before,
.no-transitions *:after {
    transition: none !important;
}

.flex {
    display: flex;
    flex-direction: inherit;
    gap: 15px;
    align-items: center;

    &.start {
        align-items: flex-start;
    }

    &.end {
        align-items: flex-end;
    }

    &.center {
        align-items: center;
    }

    &.stretch {
        align-items: stretch;
    }
}

.padded {
    padding: 20px;
}

.very-padded {
    padding: 50px;
}

.wide {
    width: 100%;
}

.screen-center {
    display: flex;
    min-height: 100dvh;
    align-items: center;
}

.viewport {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    border-radius: var(--border-radius);
}

.col {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
}

.rel {
    position: relative;
}

.spacer {
    flex: 1;
}

.sans {
    --font: "DM Sans", Arial, sans-serif;
    font-family: var(--font);
}

.serif {
    --font: "Bitter", "Georgia", serif;
    font-family: var(--font);
}

.slab {
    --font: "Roboto Slab", "Georgia", serif;
    font-family: var(--font);
}

.mono {
    --font: "Fira Code", "Cascadia Code", monospace;
    font-family: var(--font);
}

.card {
    background-color: var(--fg);
    border-radius: var(--border-radius);

    &.anti {
        background-color: var(--bg);
    }
}

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

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

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

.reading-width {
    max-width: 65ch;

    &.padded {
        max-width: calc(65ch + 40px);
    }
}

.space-between {
    justify-content: space-between;
}

.labelled-input {
    position: relative;
    display: flex;

    label {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--half);
        pointer-events: none;
        transition: all var(--qtime) ease;
        padding: 0 5px;
        user-select: none;
    }

    &:focus-within label,
    input:not(:placeholder-shown)~label {
        left: 10px;
        top: 0;
        transform: translateY(-50%) scale(0.9);
        background-color: var(--fg);
        color: var(--text);
        border-radius: var(--border-radius);
    }

    input {
        width: 100%;

        &::placeholder {
            color: transparent;
        }
    }
}

/* popup */

.popup-background {
    position: fixed;
    inset: 0;
    padding: 5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #0005;
    backdrop-filter: blur(1.5px);

    .popup-content {
        background-color: var(--fg);
        border-radius: 20px;
        min-width: 20em;
        padding: 30px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        position: relative;
        animation: fadeInZoom .05s ease;
    }
}

/* scrollbar */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: #0000;
    cursor: auto;
}

::-webkit-scrollbar-thumb {
    background-color: var(--text-hover);
    border-radius: 5px;
    width: 3px;
    transition: all var(--qtime);
    border: 2px solid var(--bg);
    cursor: auto;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--text);
}

textarea::-webkit-resizer,
::-webkit-resizer {
    background-color: var(--bg);
}

/* animations */

@keyframes fadeInZoom {
    0% {
        opacity: .5;
        transform: scale(.90);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}