gmx.css/src/_base.css

A micro Material Design 3 based CSS-only framework.

@media (prefers-color-scheme: light) {

    :root,
    ::backdrop {
        --m3-scheme-primary: rgb(101, 85, 143);
        --m3-scheme-on-primary: rgb(255, 255, 255);
        --m3-scheme-primary-container: rgb(233, 221, 255);
        --m3-scheme-on-primary-container: rgb(32, 16, 71);
        --m3-scheme-inverse-primary: rgb(207, 189, 254);
        --m3-scheme-secondary: rgb(98, 91, 113);
        --m3-scheme-on-secondary: rgb(255, 255, 255);
        --m3-scheme-secondary-container: rgb(232, 222, 248);
        --m3-scheme-on-secondary-container: rgb(30, 25, 43);
        --m3-scheme-tertiary: rgb(126, 82, 96);
        --m3-scheme-on-tertiary: rgb(255, 255, 255);
        --m3-scheme-tertiary-container: rgb(255, 217, 227);
        --m3-scheme-on-tertiary-container: rgb(49, 16, 29);
        --m3-scheme-error: rgb(186, 26, 26);
        --m3-scheme-on-error: rgb(255, 255, 255);
        --m3-scheme-error-container: rgb(255, 218, 214);
        --m3-scheme-on-error-container: rgb(65, 0, 2);
        --m3-scheme-background: rgb(253, 247, 255);
        --m3-scheme-on-background: rgb(29, 27, 32);
        --m3-scheme-surface: rgb(253, 247, 255);
        --m3-scheme-on-surface: rgb(29, 27, 32);
        --m3-scheme-surface-variant: rgb(231, 224, 235);
        --m3-scheme-on-surface-variant: rgb(73, 69, 78);
        --m3-scheme-inverse-surface: rgb(50, 47, 53);
        --m3-scheme-inverse-on-surface: rgb(245, 239, 247);
        --m3-scheme-outline: rgb(122, 117, 127);
        --m3-scheme-outline-variant: rgb(202, 196, 207);
        --m3-scheme-shadow: rgb(0, 0, 0);
        --m3-scheme-scrim: rgb(0, 0, 0);
        --m3-scheme-surface-dim: rgb(222, 216, 224);
        --m3-scheme-surface-bright: rgb(253, 247, 255);
        --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
        --m3-scheme-surface-container-low: rgb(248, 242, 250);
        --m3-scheme-surface-container: rgb(242, 236, 244);
        --m3-scheme-surface-container-high: rgb(236, 230, 238);
        --m3-scheme-surface-container-highest: rgb(230, 224, 233);
        --m3-scheme-surface-tint: rgb(101, 85, 143);
    }
}

:root {
    --m3-util-elevation-0: none;
    --m3-util-elevation-1: 0px 3px 1px -2px rgb(from var(--m3-scheme-shadow) r g b / 20%), 0px 2px 2px 0px rgb(from var(--m3-scheme-shadow) r g b / 14%), 0px 1px 5px 0px rgb(from var(--m3-scheme-shadow) r g b / 12%);
    --m3-util-elevation-2: 0px 2px 4px -1px rgb(from var(--m3-scheme-shadow) r g b / 20%), 0px 4px 5px 0px rgb(from var(--m3-scheme-shadow) r g b / 14%), 0px 1px 10px 0px rgb(from var(--m3-scheme-shadow) r g b / 12%);
    --m3-util-elevation-3: 0px 5px 5px -3px rgb(from var(--m3-scheme-shadow) r g b / 20%), 0px 8px 10px 1px rgb(from var(--m3-scheme-shadow) r g b / 14%), 0px 3px 14px 2px rgb(from var(--m3-scheme-shadow) r g b / 12%);
    --m3-util-elevation-4: 0px 5px 5px -3px rgb(from var(--m3-scheme-shadow) r g b / 20%), 0px 8px 10px 1px rgb(from var(--m3-scheme-shadow) r g b / 14%), 0px 3px 14px 2px rgb(from var(--m3-scheme-shadow) r g b / 12%);
    --m3-util-elevation-5: 0px 8px 10px -6px rgb(from var(--m3-scheme-shadow) r g b / 20%), 0px 16px 24px 2px rgb(from var(--m3-scheme-shadow) r g b / 14%), 0px 6px 30px 5px rgb(from var(--m3-scheme-shadow) r g b / 12%);
    --m3-util-bottom-offset: 0;
    --m3-util-rounding-none: 0;
    --m3-util-rounding-extra-small: .25rem;
    --m3-util-rounding-small: .5rem;
    --m3-util-rounding-medium: .75rem;
    --m3-util-rounding-large: 1rem;
    --m3-util-rounding-extra-large: 1.75rem;
    --m3-util-rounding-full: 100rem;
    --m3-font: Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Noto Sans, Arial, sans-serif;
}

:root {
    --m3-snackbar-shape: var(--m3-util-rounding-extra-small);
    --m3-segmented-button-shape: var(--m3-util-rounding-full);
    --m3-button-shape: var(--m3-util-rounding-full);
    --m3-chip-shape: var(--m3-util-rounding-small);
    --m3-textfield-outlined-shape: var(--m3-util-rounding-extra-small);
    --m3-textfield-filled-shape: var(--m3-util-rounding-extra-small);
    --m3-datefield-shape: var(--m3-util-rounding-extra-small);
    --m3-date-picker-shape: var(--m3-util-rounding-large);
    --m3-slider-track-out-shape: .5rem;
    --m3-slider-track-in-shape: .125rem;
    --m3-slider-thumb-shape: var(--m3-util-rounding-full);
    --m3-menu-shape: var(--m3-util-rounding-extra-small);
    --m3-linear-progress-shape: var(--m3-util-rounding-full);
    --m3-bottom-sheet-shape: var(--m3-util-rounding-extra-large);
    --m3-card-shape: var(--m3-util-rounding-medium);
    --m3-fab-small-shape: var(--m3-util-rounding-small);
    --m3-fab-normal-shape: var(--m3-util-rounding-large);
    --m3-fab-large-shape: var(--m3-util-rounding-extra-large);
    --m3-dialog-shape: var(--m3-util-rounding-extra-large);
    --m3-checkbox-shape: .175rem;
    --m3-radio-shape: var(--m3-util-rounding-full);
    --m3-switch-track-shape: var(--m3-util-rounding-full);
    --m3-switch-handle-shape: var(--m3-util-rounding-full);
}

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    max-width: 100%;
}

[disabled],
.segmented input:disabled+label {
    color: rgb(from var(--m3-scheme-on-surface) r g b / 38%);
    pointer-events: none;
}

img[width][height] {
    height: auto;
}

summary {
    cursor: pointer;
}

a {
    text-decoration: none;
}

iconify-icon:not(aside iconify-icon, iconify-icon[width][height]) {
    display: inline-block;
    width: 1em;
    height: 1em;
}

.switch input,
.chip input,
.tabs input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

html,
body {
    margin: 0;
}

body {
    font-family: var(--m3-font);
    font-size: 1rem;
    letter-spacing: .03125rem;
    line-height: 1.5rem;
    background: var(--m3-scheme-background);
    color: var(--m3-scheme-on-background);
    min-height: 100vh;
}

main {
    display: flex;
    min-height: 100vh;
}