Panels¶

Four CSS-only variants. No nerv.js. Override color with --nerv-panel-color / --nerv-panel-color-rgb.

Basic¶

NERV BIOS v3.14 — MAGI SYSTEM CHECK Base Memory: 640K OK Extended Memory: 131072K OK

Spec: .nerv-panel is the bordered box. Background is --nerv-bg. Glow follows --nerv-panel-color.

<div class="nerv-panel">
  <p class="nerv-type-boot nerv-text-green">NERV BIOS v3.14 — MAGI SYSTEM CHECK</p>
</div>

EGO_BORDER: 0.83
CONTAMINATION: 0.02%
HARMONICS: +4.7σ

Spec: .nerv-panel-titled draws a title bar from data-title. Extra top padding leaves room for the bar.

<div class="nerv-panel-titled" data-title="PSYCHOGRAPHIC DISPLAY">
  <p class="nerv-type-data">EGO_BORDER: 0.83</p>
</div>

04:00:00

Spec: .nerv-panel-double adds a second ring with outline and outline-offset.

<div class="nerv-panel-double">
  <p class="nerv-type-segment">04:00:00</p>
</div>

CORE_TEMP: 227.4°C
S2_OUTPUT: 1.8×10⁹ J/s
AT_FIELD: PHASE-3 LOCK

Spec: .nerv-panel-inset is the recessed variant. Inset shadow and glow are one box-shadow declaration so they do not overwrite each other.

<div class="nerv-panel-inset">
  <p class="nerv-type-data">CORE_TEMP: 227.4°C</p>
</div>