/*
* Edge Of Chaos Online — retro terminal theme.
*
* Every template (app/View/templates/**) is plain semantic HTML with no
* classes at all — headings, paragraphs, tables, forms, buttons, links.
* This is deliberately a pure element-selector stylesheet so linking it
* from a page's is the only change each template needs; nothing
* here depends on a class or wrapper div existing.
*
* Palette pulled from the original game's html/templates/*.css (dark
* background, #33FF00 links, #6600CC title accent) and from
* App\Domain\Radar\ScanDisplay's inline faction/hull colors (bright
* yellow/pink/orange/purple/green/blue/red) — those inline `style="color:
* ..."` attributes on scan-panel table cells can't be overridden from
* here (inline always wins), so the background stays dark specifically
* so those already-hardcoded bright colors stay legible instead of
* washing out against something lighter.
*/
:root {
--bg: #050a05;
--bg-raised: #0c140c;
--bg-inset: #081008;
--fg: #33ff33;
--fg-dim: #1f9c1f;
--accent: #b366ff;
--accent-dim: #6600cc;
--border: #1f5c1f;
--danger: #ff5555;
--font: "Consolas", "Courier New", ui-monospace, monospace;
}
* {
box-sizing: border-box;
}
/* Ship/sector/faction/pickup images (public/assets/*) - each ![]()
sets a
fixed `width` matching its category, no `height` (source dimensions
aren't uniform within every category, e.g. ships are 102x77 or 125x80),
so the browser preserves aspect ratio. This is just a safety net for
narrow viewports. */
img {
max-width: 100%;
height: auto;
border: 1px solid var(--border);
}
html {
background: var(--bg);
}
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font);
font-size: 15px;
line-height: 1.5;
max-width: 900px;
margin: 0 auto;
padding: 1.5rem 1rem 3rem;
}
h1, h2, h3 {
color: var(--accent);
font-weight: bold;
letter-spacing: 0.02em;
border-bottom: 1px solid var(--border);
padding-bottom: 0.3rem;
margin-top: 2rem;
}
h1 {
font-size: 1.5rem;
margin-top: 0;
}
h2 {
font-size: 1.15rem;
}
h3 {
font-size: 1rem;
}
p {
margin: 0.75rem 0;
}
a {
color: var(--fg);
text-decoration: none;
border-bottom: 1px dotted var(--fg-dim);
}
a:hover, a:focus {
color: var(--accent);
border-bottom-color: var(--accent);
}
a:visited {
color: var(--fg);
}
strong {
color: var(--accent);
}
hr {
border: none;
border-top: 1px solid var(--border);
margin: 1.5rem 0;
}
/* Tables (leaderboards, scan panels, inbox, etc.) - every table in the
templates is a plain , no classes. */
table {
border-collapse: collapse;
width: 100%;
margin: 1rem 0;
background: var(--bg-raised);
display: block;
overflow-x: auto;
white-space: nowrap;
}
th, td {
border: 1px solid var(--border);
padding: 0.4rem 0.6rem;
text-align: left;
}
th {
background: var(--bg-inset);
color: var(--accent);
font-weight: bold;
}
tr:hover td {
background: var(--bg-inset);
}
/* Forms */
form {
margin: 1rem 0;
}
label {
display: block;
margin: 0.6rem 0;
color: var(--fg-dim);
}
input, select, textarea {
font-family: var(--font);
font-size: 0.95rem;
background: var(--bg-inset);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 2px;
padding: 0.4rem 0.5rem;
margin-top: 0.2rem;
width: 100%;
max-width: 360px;
}
textarea {
max-width: 100%;
min-height: 6rem;
resize: vertical;
}
input[type="checkbox"], input[type="radio"] {
width: auto;
margin-right: 0.4rem;
vertical-align: middle;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--fg);
}
button, input[type="submit"] {
font-family: var(--font);
font-size: 0.95rem;
font-weight: bold;
background: transparent;
color: var(--fg);
border: 1px solid var(--fg);
border-radius: 2px;
padding: 0.45rem 1rem;
cursor: pointer;
margin-top: 0.4rem;
}
button:hover, input[type="submit"]:hover {
background: var(--fg);
color: #000;
}
button:disabled, input[type="submit"]:disabled {
color: var(--fg-dim);
border-color: var(--border);
cursor: not-allowed;
background: transparent;
}
/* A handful of templates set inline style="color:#RRGGBB" directly on
table cells (faction/hull-health colors) - intentionally left alone,
inline styles already win over anything here. */