758 lines
15 KiB
Text
758 lines
15 KiB
Text
:root {
|
|
--font-mono: "Share Tech Mono", "Courier New", monospace;
|
|
--color-primary: #5abf00;
|
|
--color-bright: #a8ff40;
|
|
--color-brighter: #d4ff80;
|
|
--color-brightest: #c4ff00;
|
|
--color-red: #ff4040;
|
|
--color-dark: #0a0a00;
|
|
--color-border: #4a7a00;
|
|
--color-border-dark: #2a4a00;
|
|
--color-border-bright: #7dff40;
|
|
--color-border-medium: #8abf00;
|
|
--shadow-text: 0 0 5px rgba(90, 191, 0, 0.3);
|
|
--shadow-text-bright: 0 0 6px rgba(140, 255, 60, 0.4);
|
|
--shadow-text-h1:
|
|
0 0 10px rgba(140, 255, 60, 0.55), 0 0 22px rgba(140, 255, 60, 0.2);
|
|
--shadow-glow-light: 0 0 6px rgba(140, 255, 60, 0.6);
|
|
--shadow-glow-optimum: 0 0 6px rgba(140, 255, 60, 0.5);
|
|
--shadow-glow-suboptimum: 0 0 6px rgba(196, 255, 0, 0.5);
|
|
--shadow-glow-bad: 0 0 6px rgba(255, 64, 64, 0.5);
|
|
--shadow-input-text: 0 0 4px rgba(120, 255, 60, 0.3);
|
|
--shadow-button-inset-rest:
|
|
inset 0 0 8px rgba(100, 200, 0, 0.05), 0 0 6px rgba(100, 200, 0, 0.1);
|
|
--shadow-button-inset-hover:
|
|
inset 0 0 12px rgba(100, 200, 0, 0.1), 0 0 10px rgba(100, 200, 0, 0.2);
|
|
--color-placeholder: #315b00;
|
|
--color-bg-button-hover: rgba(100, 200, 0, 0.08);
|
|
}
|
|
|
|
* {
|
|
font-family: var(--font-mono);
|
|
color: var(--color-primary);
|
|
text-shadow: var(--shadow-text);
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
line-height: 1.85;
|
|
}
|
|
|
|
/* scanlines */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
transparent 0px,
|
|
transparent 2px,
|
|
rgba(0, 0, 0, 0.18) 2px,
|
|
rgba(0, 0, 0, 0.18) 4px
|
|
);
|
|
|
|
animation: scanline 2s linear infinite;
|
|
}
|
|
|
|
/* vignette */
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 9998;
|
|
background: radial-gradient(
|
|
ellipse at center,
|
|
transparent 55%,
|
|
rgba(0, 0, 0, 0.65) 100%
|
|
);
|
|
}
|
|
|
|
nav {
|
|
border-bottom: 1px solid #2a4a00;
|
|
padding: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: var(--color-dark);
|
|
z-index: 1000;
|
|
}
|
|
|
|
nav ul {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
nav a {
|
|
text-transform: uppercase;
|
|
font-size: 0.8rem;
|
|
border-bottom: none;
|
|
}
|
|
|
|
nav a:hover {
|
|
color: var(--color-brighter);
|
|
text-shadow: var(--shadow-text-bright);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
h1 {
|
|
font: 2rem;
|
|
color: var(--color-bright);
|
|
text-shadow: var(--shadow-text-h1);
|
|
animation: flicker 8s infinite;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: var(--color-dark);
|
|
padding: 2rem 0;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
fieldset {
|
|
padding: 0.5rem;
|
|
padding-top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
legend {
|
|
font: 0.6rem;
|
|
text-transform: uppercase;
|
|
color: var(--color-bright);
|
|
text-shadow: var(--shadow-text-bright);
|
|
}
|
|
|
|
a {
|
|
border-bottom: 1px solid var(--color-border);
|
|
text-decoration: none;
|
|
color: var(--color-bright);
|
|
text-shadow: var(--shadow-text-bright);
|
|
}
|
|
|
|
a:hover {
|
|
border-color: var(--color-border-medium);
|
|
color: var(--color-brighter);
|
|
}
|
|
|
|
button {
|
|
background-color: transparent;
|
|
border: 1px solid var(--color-border);
|
|
padding: 1.25rem 0.5rem;
|
|
font: 0.6rem;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
font-family: var(--font-mono);
|
|
color: var(--color-bright);
|
|
text-shadow: var(--shadow-text-bright);
|
|
box-shadow: var(--shadow-button-inset-rest);
|
|
}
|
|
|
|
button::before {
|
|
content: "▶\00a0";
|
|
font: 0.7rem;
|
|
color: var(--color-border);
|
|
}
|
|
|
|
button:hover {
|
|
box-shadow: var(--shadow-button-inset-hover);
|
|
background: var(--color-bg-button-hover);
|
|
border-color: var(--color-border-bright);
|
|
}
|
|
|
|
button[type="reset"]::before {
|
|
content: "↺\00a0";
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.actions button {
|
|
flex: 1;
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
background-color: transparent;
|
|
border: none;
|
|
border-bottom: 1px solid var(--color-border-dark);
|
|
padding: 0.24rem 0;
|
|
font: 0.6rem;
|
|
outline: none;
|
|
font-family: var(--font-mono);
|
|
color: var(--color-border-bright);
|
|
caret-color: var(--color-bright);
|
|
text-shadow: var(--shadow-input-text);
|
|
width: 100%;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--color-border-bright);
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--color-placeholder);
|
|
}
|
|
|
|
textarea {
|
|
border: 1px solid var(--color-border-dark);
|
|
padding: 0.5rem;
|
|
resize: vertical;
|
|
}
|
|
|
|
select {
|
|
border: 1px solid var(--color-border);
|
|
padding: 0.25rem;
|
|
background-color: transparent;
|
|
}
|
|
|
|
select option {
|
|
background-color: var(--color-dark);
|
|
}
|
|
|
|
/* checkboxes & radios */
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
background-color: transparent;
|
|
border: 1px solid var(--color-border-bright);
|
|
accent-color: var(--color-bright);
|
|
width: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.field label:has(input[type="radio"]),
|
|
.field label:has(input[type="checkbox"]) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
input[type="number"]::-webkit-outer-spin-button,
|
|
input[type="number"]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
/* range slider */
|
|
input[type="range"] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 2px;
|
|
background: var(--color-border-dark);
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--color-bright);
|
|
box-shadow: var(--shadow-glow-light);
|
|
cursor: pointer;
|
|
border-radius: 0;
|
|
}
|
|
|
|
input[type="range"]::-moz-range-thumb {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--color-bright);
|
|
box-shadow: var(--shadow-glow-light);
|
|
cursor: pointer;
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* color swatch */
|
|
input[type="color"] {
|
|
border: 1px solid var(--color-border);
|
|
padding: 0.15rem;
|
|
height: 1.6rem;
|
|
width: 3rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* file input */
|
|
input[type="file"] {
|
|
border: 1px dashed var(--color-border);
|
|
padding: 0.4rem;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
input[type="file"]::file-selector-button {
|
|
background-color: transparent;
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-bright);
|
|
font-family: var(--font-mono);
|
|
text-transform: uppercase;
|
|
font-size: 0.7rem;
|
|
padding: 0.3rem 0.5rem;
|
|
margin-right: 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="file"]::file-selector-button:hover {
|
|
background: var(--color-bg-button-hover);
|
|
border-color: var(--color-border-bright);
|
|
}
|
|
|
|
/* datalist-backed input keeps default text styling, no change needed */
|
|
|
|
meter {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 0.6rem;
|
|
border: 1px solid var(--color-border);
|
|
background: transparent;
|
|
}
|
|
|
|
meter::-webkit-meter-bar {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
meter::-webkit-meter-optimum-value {
|
|
background: var(--color-bright);
|
|
box-shadow: var(--shadow-glow-optimum);
|
|
}
|
|
|
|
meter::-webkit-meter-suboptimum-value {
|
|
background: var(--color-brightest);
|
|
box-shadow: var(--shadow-glow-suboptimum);
|
|
}
|
|
|
|
meter::-webkit-meter-even-less-good-value {
|
|
background: var(--color-red);
|
|
box-shadow: var(--shadow-glow-bad);
|
|
}
|
|
|
|
/* Firefox: color applied via pseudo-class on the meter itself */
|
|
meter:-moz-meter-optimum::-moz-meter-bar {
|
|
background: var(--color-bright);
|
|
box-shadow: var(--shadow-glow-optimum);
|
|
}
|
|
|
|
meter:-moz-meter-sub-optimum::-moz-meter-bar {
|
|
background: var(--color-brightest);
|
|
box-shadow: var(--shadow-glow-suboptimum);
|
|
}
|
|
|
|
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
|
|
background: var(--color-red);
|
|
box-shadow: var(--shadow-glow-bad);
|
|
}
|
|
|
|
/* output element */
|
|
output {
|
|
font-size: 0.6rem;
|
|
color: var(--color-bright);
|
|
text-shadow: var(--shadow-text-bright);
|
|
}
|
|
|
|
/* details/summary */
|
|
details {
|
|
border: 1px solid var(--color-border-dark);
|
|
padding: 0.4rem 0.5rem;
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
color: var(--color-bright);
|
|
text-transform: uppercase;
|
|
text-shadow: var(--shadow-text-bright);
|
|
}
|
|
|
|
summary:hover {
|
|
color: var(--color-brighter);
|
|
}
|
|
|
|
details p {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.6rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
min-width: 400px;
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
/* ── Profile header ─────────────────────────────────────── */
|
|
|
|
.profile {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
figure {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
figcaption {
|
|
font-size: 0.55rem;
|
|
text-transform: uppercase;
|
|
color: var(--color-border);
|
|
text-shadow: none;
|
|
}
|
|
|
|
img {
|
|
border: 1px solid var(--color-border);
|
|
padding: 0.25rem;
|
|
box-shadow:
|
|
0 0 8px rgba(90, 191, 0, 0.2),
|
|
0 0 20px rgba(90, 191, 0, 0.07);
|
|
display: block;
|
|
}
|
|
|
|
.profile-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.1rem;
|
|
}
|
|
|
|
.profile-info h2 {
|
|
color: var(--color-bright);
|
|
text-shadow: var(--shadow-text-bright);
|
|
font-size: 1.1rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* ── Shared section headings ────────────────────────────── */
|
|
|
|
section > h2,
|
|
aside > h2 {
|
|
color: var(--color-bright);
|
|
text-shadow: var(--shadow-text-bright);
|
|
text-transform: uppercase;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.5rem;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* ── HR divider ─────────────────────────────────────────── */
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 1px solid var(--color-border-dark);
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
/* ── Table ──────────────────────────────────────────────── */
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid var(--color-border-dark);
|
|
padding: 0.3rem 0.5rem;
|
|
text-align: left;
|
|
}
|
|
|
|
thead th {
|
|
color: var(--color-bright);
|
|
text-shadow: var(--shadow-text-bright);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
tfoot td {
|
|
color: var(--color-border);
|
|
text-shadow: none;
|
|
font-size: 0.7rem;
|
|
border-color: var(--color-border-dark);
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background: rgba(90, 191, 0, 0.04);
|
|
}
|
|
|
|
/* ── Badges ─────────────────────────────────────────────── */
|
|
|
|
.badge {
|
|
font-size: 0.6rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: 0.1rem 0.35rem;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.badge--ok {
|
|
color: var(--color-bright);
|
|
border-color: var(--color-border);
|
|
text-shadow: var(--shadow-glow-optimum);
|
|
}
|
|
|
|
.badge--warn {
|
|
color: var(--color-brightest);
|
|
border-color: #6a7a00;
|
|
text-shadow: var(--shadow-glow-suboptimum);
|
|
}
|
|
|
|
.badge--crit {
|
|
color: var(--color-red);
|
|
border-color: #7a2000;
|
|
text-shadow: var(--shadow-glow-bad);
|
|
animation: flicker 3s infinite;
|
|
}
|
|
|
|
/* ── Mission log ────────────────────────────────────────── */
|
|
|
|
ol {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
padding: 0;
|
|
}
|
|
|
|
article {
|
|
border: 1px solid var(--color-border-dark);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
article header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
border-bottom: 1px solid var(--color-border-dark);
|
|
margin-bottom: 0.4rem;
|
|
padding-bottom: 0.2rem;
|
|
}
|
|
|
|
article header h3 {
|
|
font-size: 0.7rem;
|
|
color: var(--color-bright);
|
|
text-shadow: var(--shadow-text-bright);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
article header p {
|
|
font-size: 0.6rem;
|
|
color: var(--color-border);
|
|
text-shadow: none;
|
|
}
|
|
|
|
article > p {
|
|
font-size: 0.7rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
article footer {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
mark {
|
|
background: rgba(168, 255, 64, 0.15);
|
|
color: var(--color-bright);
|
|
text-shadow: var(--shadow-glow-optimum);
|
|
padding: 0 0.2rem;
|
|
}
|
|
|
|
del {
|
|
color: var(--color-border);
|
|
text-shadow: none;
|
|
text-decoration-color: var(--color-border);
|
|
}
|
|
|
|
ins {
|
|
color: var(--color-red);
|
|
text-shadow: var(--shadow-glow-bad);
|
|
text-decoration: none;
|
|
}
|
|
|
|
ins::before {
|
|
content: "→ ";
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ── Definition list ────────────────────────────────────── */
|
|
|
|
dl {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
gap: 0.15rem 1rem;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
dt {
|
|
color: var(--color-border-medium);
|
|
text-shadow: none;
|
|
text-transform: uppercase;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.05em;
|
|
align-self: center;
|
|
}
|
|
|
|
dd {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
dd meter {
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
/* ── Aside / blockquote ─────────────────────────────────── */
|
|
|
|
aside {
|
|
border: 1px solid var(--color-border);
|
|
padding: 0.5rem;
|
|
box-shadow:
|
|
inset 0 0 12px rgba(90, 191, 0, 0.04),
|
|
0 0 8px rgba(90, 191, 0, 0.08);
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 2px solid var(--color-border);
|
|
padding-left: 0.75rem;
|
|
}
|
|
|
|
blockquote p {
|
|
font-size: 0.7rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
blockquote footer {
|
|
margin-top: 0.35rem;
|
|
font-size: 0.7rem;
|
|
color: var(--color-border);
|
|
text-shadow: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* ── Inline semantics ───────────────────────────────────── */
|
|
|
|
strong {
|
|
color: var(--color-bright);
|
|
text-shadow: var(--shadow-text-bright);
|
|
}
|
|
|
|
em {
|
|
color: var(--color-primary);
|
|
font-style: normal;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
small {
|
|
font-size: 0.7rem;
|
|
color: var(--color-border);
|
|
text-shadow: none;
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
abbr {
|
|
text-decoration: underline dotted var(--color-border);
|
|
cursor: help;
|
|
}
|
|
|
|
code {
|
|
color: var(--color-brightest);
|
|
text-shadow: var(--shadow-glow-suboptimum);
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
time {
|
|
color: var(--color-border-medium);
|
|
text-shadow: none;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
sup,
|
|
sub {
|
|
font-size: 0.7rem;
|
|
color: var(--color-border-medium);
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* ── Section spacing ────────────────────────────────────── */
|
|
|
|
section,
|
|
aside {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
@keyframes flicker {
|
|
0%,
|
|
95%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
96% {
|
|
opacity: 0.85;
|
|
}
|
|
97% {
|
|
opacity: 1;
|
|
}
|
|
98% {
|
|
opacity: 0.9;
|
|
}
|
|
99% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes scanline {
|
|
from {
|
|
background-position: 0 0;
|
|
}
|
|
to {
|
|
background-position: 0 -10px;
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|