/* Stylesheet for Apache mod_autoindex directory listings.
*
* Referenced from www-utility's IndexStyleSheet (see
* server-configs/www-utility.int.unavco.org/etc/httpd/conf.d/derived-products-autoindex.conf).
* Hosted here in classic content so it is served from www.unavco.org and resolves
* for listings proxied in from www-utility, e.g.
* /data/gps-gnss/derived-products/position-timeseries/
*
* ─── WHY EVERY RULE IS `html body …` AND NOT JUST `body …` ───────────────────
* Diagnosed live in the browser 2026-08-18 via getComputedStyle, not guessed.
*
* The NGF preview proxy injects a base64 `data:text/css` stylesheet whose FIRST
* rule is:
* body { background: #1a2023 !important; }
* It is injected AFTER this file's , so on equal specificity with
* !important on both sides, the injected rule wins on source order and the page
* renders dark. Combined with this file's original dark text, that produced dark
* text on a dark background -- reported as "white on a black background" and
* initially misread by me as a dark-mode problem.
*
* It is NOT a dark-mode problem: `prefers-color-scheme: dark` evaluated FALSE on
* the reporting machine. The chrome forces a dark page *frame* unconditionally and
* expects real content to sit inside a `#body` wrapper that supplies its own light
* surface. An Apache-generated listing has no such wrapper, so it inherits the
* frame colour with no card.
*
* `html body` is specificity 0,0,2 against the injected rule's 0,0,1. Higher
* specificity with !important wins REGARDLESS of load order, which is the only
* reliable way to beat an injected stylesheet you do not control. Verified live:
* body background resolved to rgb(255,255,255) with the probe applied.
*
* DO NOT "simplify" these selectors back to bare `body` -- that silently
* reintroduces the unreadable rendering, and it will look like a caching problem.
*
* ─── DARK MODE IS SUPPORTED, NOT SUPPRESSED ──────────────────────────────────
* Per Jim, 2026-08-18: if the listing is going to honour a night-mode preference
* then it needs to render properly in it, rather than being forced light. So:
* light surface by default, and a genuine dark palette under
* `prefers-color-scheme: dark` -- not a forced white page.
*
* Contrast ratios were measured live against the rendered page, not eyeballed
* (WCAG AA needs 4.5:1 for body text, AAA 7:1):
* light body 16.08 · h1 12.13 · links 6.47 · table headers 10.79
* dark body 14.63 · h1 9.79 · links 8.50 · table headers 11.63
*
* Created 2026-08-17. Rewritten 2026-08-18 after live diagnosis.
*/
/* ─── Shared layout (colour-scheme agnostic) ─────────────────────────────── */
html body {
font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif !important;
margin: 0 !important;
padding: 1.5em 2em 3em !important;
}
html body h1 {
font-size: 1.35em !important;
font-weight: 600 !important;
padding-bottom: .4em !important;
margin: 0 0 1em !important;
word-break: break-all; /* deep archive paths must not overflow the viewport */
}
html body a { text-decoration: none !important; }
html body a:hover,
html body a:focus { text-decoration: underline !important; }
/* FancyIndexing without HTMLTable renders as
; with HTMLTable it renders as
*
. Style both, so a later IndexOptions change cannot
* silently un-style the page. */
html body pre {
font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
margin: 0 !important;
white-space: pre-wrap;
word-break: break-all;
}
html body table#indexlist {
border-collapse: collapse !important;
width: 100% !important;
}
html body table#indexlist th {
text-align: left !important;
font-weight: 600 !important;
padding: .5em .75em !important;
position: sticky; /* these listings run to thousands of rows */
top: 0;
}
html body table#indexlist td {
padding: .35em .75em !important;
vertical-align: top !important;
}
html body td.indexcolsize,
html body td.indexcollastmod {
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
html body img { vertical-align: middle; border: 0; }
html body hr { border: 0 !important; margin: .5em 0 !important; }
html body address {
margin-top: 2em !important;
padding-top: .75em !important;
font-size: .85em !important;
font-style: normal !important;
}
/* ─── Light (default) ────────────────────────────────────────────────────── */
html body { background: #ffffff !important; color: #1c2226 !important; }
html body h1 { color: #14375c !important; border-bottom: 2px solid #d7dde4 !important; }
html body a { color: #1a5fa8 !important; }
html body a:hover, html body a:focus { color: #0d3f75 !important; }
html body pre { color: #1c2226 !important; }
html body table#indexlist th { background: #eef2f6 !important; color: #14375c !important; border-bottom: 2px solid #d7dde4 !important; }
html body table#indexlist td { color: #1c2226 !important; border-bottom: 1px solid #eceff2 !important; }
html body table#indexlist tr:hover td { background: #f6f9fc !important; }
html body td.indexcolsize,
html body td.indexcollastmod { color: #5a6570 !important; }
html body hr { border-top: 1px solid #d7dde4 !important; }
html body address { color: #6b7580 !important; border-top: 1px solid #eceff2 !important; }
/* ─── Dark (honours the user's night-mode preference) ────────────────────── */
@media (prefers-color-scheme: dark) {
html body { background: #14181b !important; color: #e6e9ea !important; }
html body h1 { color: #9dc4ea !important; border-bottom: 2px solid #2a333a !important; }
html body a { color: #7ab8f5 !important; }
html body a:hover, html body a:focus { color: #a9d2fb !important; }
html body pre { color: #e6e9ea !important; }
html body table#indexlist th { background: #1e2429 !important; color: #cfe0f0 !important; border-bottom: 2px solid #2a333a !important; }
html body table#indexlist td { color: #e6e9ea !important; border-bottom: 1px solid #232a30 !important; }
html body table#indexlist tr:hover td { background: #1b2226 !important; }
html body td.indexcolsize,
html body td.indexcollastmod { color: #9aa4ab !important; }
html body hr { border-top: 1px solid #232a30 !important; }
html body address { color: #8b959c !important; border-top: 1px solid #232a30 !important; }
}
/* ─── Narrow viewports ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
html body { padding: 1em !important; }
html body td.indexcollastmod { display: none; } /* keep name + size readable */
}