Density with:

========================================================================== */ /* --- Tokens --------------------------------------------------------------- --nzll-ground page / panel background --nzll-field-tint field fill --nzll-field-border field border (transparent where a theme has none) --nzll-line hairlines, dividers, table rules --nzll-label-color field label colour --nzll-label-weight field label weight --nzll-value-color field value colour --nzll-value-weight field value weight --nzll-text-hi/mid/low general text ramp for everything else --nzll-accent status, focus ring, selection --nzll-accent-soft accent at low alpha, for chips and tints --nzll-font-ui label and chrome typeface --nzll-font-value value typeface --nzll-field-pad / --nzll-row-gap density, driven by data-nzll-density ------------------------------------------------------------------------ */ /* ---- oxb-03 · Oxblood ---------------------------------------------------- */ [data-nzll-theme='oxb-03'] { --nzll-ground: #1a0f11; --nzll-field-tint: #241416; --nzll-field-border: #4a2229; --nzll-line: #33191d; --nzll-label-color: #c2929a; --nzll-label-weight: 600; --nzll-value-color: #f3e4e5; --nzll-value-weight: 500; --nzll-text-hi: #f7ecec; --nzll-text-mid: #c9a8ab; --nzll-text-low: #8d6a6e; --nzll-accent: #e05a63; --nzll-accent-soft: rgba(224, 90, 99, 0.16); --nzll-font-ui: 'Saira Semi Condensed', 'Lato', sans-serif; --nzll-font-value: 'JetBrains Mono', ui-monospace, monospace; } /* ---- olv-03 · Olive ------------------------------------------------------ */ [data-nzll-theme='olv-03'] { --nzll-ground: #12140c; --nzll-field-tint: #1b1e12; --nzll-field-border: #3a4222; --nzll-line: #272c17; --nzll-label-color: #9daf72; --nzll-label-weight: 600; --nzll-value-color: #eef2e0; --nzll-value-weight: 500; --nzll-text-hi: #eef2e0; --nzll-text-mid: #b5c092; --nzll-text-low: #7c8760; --nzll-accent: #b9d24f; --nzll-accent-soft: rgba(185, 210, 79, 0.14); --nzll-font-ui: 'Oxanium', 'Lato', sans-serif; --nzll-font-value: 'Oxanium', 'Lato', sans-serif; } /* ---- tea-02 · Teal, daylight --------------------------------------------- */ [data-nzll-theme='tea-02'] { --nzll-ground: #eef4f4; --nzll-field-tint: #ffffff; --nzll-field-border: #c3d9d9; --nzll-line: #d9e6e6; --nzll-label-color: #5c7a7a; --nzll-label-weight: 600; --nzll-value-color: #0f2a2e; --nzll-value-weight: 500; --nzll-text-hi: #0f2a2e; --nzll-text-mid: #416065; --nzll-text-low: #7d9698; --nzll-accent: #0e7c86; --nzll-accent-soft: rgba(14, 124, 134, 0.12); --nzll-font-ui: 'Chakra Petch', 'Lato', sans-serif; --nzll-font-value: 'Chakra Petch', 'Lato', sans-serif; } /* ---- tea-03 · Teal, dim -------------------------------------------------- */ [data-nzll-theme='tea-03'] { --nzll-ground: #08161a; --nzll-field-tint: #0e2228; --nzll-field-border: #1d454e; --nzll-line: #143036; --nzll-label-color: #6fa8ad; --nzll-label-weight: 600; --nzll-value-color: #dff1f2; --nzll-value-weight: 500; --nzll-text-hi: #e6f6f6; --nzll-text-mid: #9dc4c7; --nzll-text-low: #63878b; --nzll-accent: #35c7c0; --nzll-accent-soft: rgba(53, 199, 192, 0.14); --nzll-font-ui: 'Chakra Petch', 'Lato', sans-serif; --nzll-font-value: 'JetBrains Mono', ui-monospace, monospace; } /* ---- gra-03 · Graphite (no field border, fill only) ---------------------- */ [data-nzll-theme='gra-03'] { --nzll-ground: #131518; --nzll-field-tint: #1d2126; --nzll-field-border: transparent; --nzll-line: #262b31; --nzll-label-color: #8b949e; --nzll-label-weight: 700; --nzll-value-color: #e6edf3; --nzll-value-weight: 500; --nzll-text-hi: #e6edf3; --nzll-text-mid: #9aa4ae; --nzll-text-low: #6b747d; --nzll-accent: #adbac7; --nzll-accent-soft: rgba(173, 186, 199, 0.12); --nzll-font-ui: 'Saira Semi Condensed', 'Lato', sans-serif; --nzll-font-value: 'Saira Semi Condensed', 'Lato', sans-serif; } /* ---- tea-05 · Teal, deep (no field border, fill only) -------------------- */ [data-nzll-theme='tea-05'] { --nzll-ground: #020a0c; --nzll-field-tint: #071a1e; --nzll-field-border: transparent; --nzll-line: #0e2b30; --nzll-label-color: #4e878c; --nzll-label-weight: 700; --nzll-value-color: #c9eef0; --nzll-value-weight: 400; --nzll-text-hi: #ddf7f8; --nzll-text-mid: #86b6b9; --nzll-text-low: #4c7276; --nzll-accent: #00e0d2; --nzll-accent-soft: rgba(0, 224, 210, 0.12); --nzll-font-ui: 'Oxanium', 'Lato', sans-serif; --nzll-font-value: 'JetBrains Mono', ui-monospace, monospace; } /* ---- ind-02 · Indigo, daylight ------------------------------------------- */ [data-nzll-theme='ind-02'] { --nzll-ground: #f0f0f7; --nzll-field-tint: #ffffff; --nzll-field-border: #ccccdf; --nzll-line: #dedeeb; --nzll-label-color: #5a5a8c; --nzll-label-weight: 600; --nzll-value-color: #1b1b3a; --nzll-value-weight: 500; --nzll-text-hi: #1b1b3a; --nzll-text-mid: #4a4a70; --nzll-text-low: #8686a8; --nzll-accent: #4b46c9; --nzll-accent-soft: rgba(75, 70, 201, 0.12); --nzll-font-ui: 'Chakra Petch', 'Lato', sans-serif; --nzll-font-value: 'Saira Semi Condensed', 'Lato', sans-serif; } /* --- Density -------------------------------------------------------------- Defaults live on :root, never on [data-nzll-theme]: density is set once on and has to reach the themed regions by inheritance, and a declaration on the region itself would out-rank what it inherits. ------------------------------------------------------------------------ */ :root { --nzll-field-pad: 10px 14px; --nzll-row-gap: 10px; } [data-nzll-density='comfortable'] { --nzll-field-pad: 10px 14px; --nzll-row-gap: 10px; } [data-nzll-density='compact'] { --nzll-field-pad: 6px 10px; --nzll-row-gap: 4px; } /* --- Layout --------------------------------------------------------------- Two ways to set a field row out, independent of which of the seven skins is on: gutter (default) — label in a right-aligned column outside the field, value left-aligned inside a fill sized to the content. Reads as a form. ledger — label and value share one full-width fill: label left and muted, value hard right in the accent colour. Reads as an instrument readout, and every row lines up because they are all the same width. ------------------------------------------------------------------------ */ [data-nzll-layout='ledger'] .nzll-field { flex-direction: row; align-items: center; gap: 12px; background: var(--nzll-field-tint); border: 1px solid var(--nzll-field-border); border-radius: 8px; padding: var(--nzll-field-pad); } [data-nzll-layout='ledger'] .nzll-field__label { flex-shrink: 0; } [data-nzll-layout='ledger'] .nzll-field__value, [data-nzll-layout='ledger'] .nzll-input { margin-left: auto; width: auto; min-width: 0; background: none; border: none; border-radius: 0; padding: 0; text-align: right; font-weight: 700; color: var(--nzll-accent); } [data-nzll-layout='ledger'] .nzll-input:focus { box-shadow: none; outline: 1px solid var(--nzll-accent); outline-offset: 3px; } [data-nzll-layout='ledger'] .nzll-field[data-readonly='true'] { background: none; border-color: var(--nzll-line); } [data-nzll-layout='ledger'] .nzll-field[data-readonly='true'] .nzll-field__value { color: var(--nzll-text-mid); } [data-nzll-layout='ledger'] .nzll-field[data-invalid='true'] { border-color: #e05a63; } /* --- Components ---------------------------------------------------------- Optional markup helpers. The React dashboard styles its own elements from the tokens above; these classes are here so plain HTML pages (the public forms, one-off tools) get the same skin without writing any CSS. ------------------------------------------------------------------------ */ .nzll-panel { background: var(--nzll-ground); border: 1px solid var(--nzll-line); border-radius: 10px; overflow: hidden; } .nzll-panel__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--nzll-line); font-family: var(--nzll-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nzll-text-mid); } .nzll-chip { font-family: var(--nzll-font-ui); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nzll-accent); background: var(--nzll-accent-soft); border-radius: 999px; padding: 2px 8px; } .nzll-fields { display: flex; flex-direction: column; gap: var(--nzll-row-gap); padding: 14px; background: var(--nzll-ground); } .nzll-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .nzll-field__label { font-family: var(--nzll-font-ui); font-size: 11px; font-weight: var(--nzll-label-weight); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nzll-label-color); } .nzll-field__value, .nzll-input { display: block; width: 100%; box-sizing: border-box; background: var(--nzll-field-tint); border: 1px solid var(--nzll-field-border); border-radius: 8px; padding: var(--nzll-field-pad); font-family: var(--nzll-font-value); font-size: 14px; font-weight: var(--nzll-value-weight); color: var(--nzll-value-color); } .nzll-input { outline: none; } .nzll-input:focus { border-color: var(--nzll-accent); box-shadow: 0 0 0 3px var(--nzll-accent-soft); } .nzll-input::selection, .nzll-field__value::selection { background: var(--nzll-accent-soft); } .nzll-field[data-readonly='true'] .nzll-field__value, .nzll-field[data-readonly='true'] .nzll-input { background: transparent; color: var(--nzll-text-mid); } .nzll-field[data-invalid='true'] .nzll-field__value, .nzll-field[data-invalid='true'] .nzll-input { border-color: #e05a63; box-shadow: 0 0 0 3px rgba(224, 90, 99, 0.15); } .nzll-table { width: 100%; border-collapse: collapse; background: var(--nzll-ground); font-family: var(--nzll-font-value); font-size: 13px; color: var(--nzll-value-color); } .nzll-table th { font-family: var(--nzll-font-ui); font-size: 10.5px; font-weight: var(--nzll-label-weight); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nzll-label-color); text-align: left; } .nzll-table th, .nzll-table td { padding: var(--nzll-field-pad); border-bottom: 1px solid var(--nzll-line); } .nzll-table tbody tr:hover { background: var(--nzll-accent-soft); }