Overhaul the stylesheet with tokens and dark mode

The old sheet had no overflow rules, so wide code, diff, blame and
stats blocks scrolled the whole page sideways on a phone. The classic
layout, badge colours and age shading are kept.

1 file changed, 465 insertions, 224 deletions

diff --git a/assets/cgit.css b/assets/cgit.css
index e02d551..73b61f1 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -1,15 +1,120 @@
+/*
+ * cgit.css: styling for the cgit web interface
+ *
+ * Colours are driven by CSS custom properties via light-dark(), so the
+ * whole theme follows the reader's system preference. All rules stay
+ * scoped under div#cgit so cgit can be embedded in another page.
+ */
+
 div#cgit {
-	padding: 0em;
+	color-scheme: light dark;
+
+	/* Palette: light-dark(light value, dark value) */
+	--bg:            light-dark(#ffffff, #1b1b1b);
+	--fg:            light-dark(#333333, #d6d6d6);
+	--muted:         light-dark(#777777, #9a9a9a);
+	--faint:         light-dark(#888888, #7f7f7f);
+	--footer-fg:     light-dark(#bbbbbb, #666666);
+	--link:          light-dark(#0053b3, #6ea8fe);
+
+	--border:        light-dark(#cccccc, #3a3a3a);
+	--border-mid:    light-dark(#aaaaaa, #4a4a4a);
+	--border-strong: light-dark(#666666, #6a6a6a);
+
+	--surface:       light-dark(#eeeeee, #2a2a2a);
+	--surface-2:     light-dark(#f7f7f7, #232323);
+	--row-hover:     light-dark(#ebebeb, #303030);
+	--tab-active-bg: light-dark(#cccccc, #3a3a3a);
+
+	--add:           light-dark(#007000, #6cc26c);
+	--del:           light-dark(#c00000, #e07070);
+	--upd:           light-dark(#0000cc, #6ea8fe);
+	--hunk:          light-dark(#000099, #7aa2f7);
+	--accent:        light-dark(#cc0000, #ff6b6b);
+
+	--notes-bg:      light-dark(#ffffdd, #33331a);
+	--notes-border:  light-dark(#eeee99, #55551f);
+
+	--ss-add-bg:     light-dark(#ccffcc, #24402a);
+	--ss-add-bg2:    light-dark(#aaccaa, #2e4a33);
+	--ss-del-bg:     light-dark(#ffcccc, #402424);
+	--ss-del-bg2:    light-dark(#ccaaaa, #4a2e2e);
+	--ss-chg-bg:     light-dark(#ffffcc, #40401f);
+	--ss-chg-bg2:    light-dark(#ccccaa, #4a4a2e);
+	--ss-lineno-bg:  light-dark(#eeeeee, #2a2a2a);
+	--ss-hunk-bg:    light-dark(#ccccff, #2a2a45);
+	--graph-add:     light-dark(#55cc55, #4a8f4a);
+	--graph-rem:     light-dark(#cc5555, #8f4a4a);
+
+	--age-mins:      light-dark(#008000, #5cb85c);
+	--age-hours:     light-dark(#008000, #5cb85c);
+	--age-days:      light-dark(#004400, #7cba7c);
+	--age-weeks:     light-dark(#444444, #a0a0a0);
+	--age-months:    light-dark(#888888, #8a8a8a);
+	--age-years:     light-dark(#bbbbbb, #6a6a6a);
+
+	--deco-fg:       light-dark(#000000, #f0f0f0);
+	--branch-bg:     light-dark(#88ff88, #1c5c2c);
+	--branch-bd:     light-dark(#007700, #2f8f3f);
+	--tag-bg:        light-dark(#ffff88, #5c5c1c);
+	--tag-bd:        light-dark(#777700, #8f8f2f);
+	--tag-ann-bg:    light-dark(#ffcc88, #6c4a1c);
+	--tag-ann-bd:    light-dark(#777700, #8f6f2f);
+	--remote-bg:     light-dark(#ccccff, #2c2c6c);
+	--remote-bd:     light-dark(#000077, #4a4a9f);
+	--head-bg:       light-dark(#ff8888, #6c1c1c);
+	--head-bd:       light-dark(#770000, #9f3f3f);
+
+	--col1:          light-dark(#aa0000, #ff6b6b);
+	--col2:          light-dark(#00aa00, #6cc26c);
+	--col3:          light-dark(#aaaa00, #cccc60);
+	--col4:          light-dark(#0000aa, #6ea8fe);
+	--col5:          light-dark(#aa00aa, #d06cd0);
+	--col6:          light-dark(#00aaaa, #6cd0d0);
+
+	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+		Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
+	--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
+		"Liberation Mono", "DejaVu Sans Mono", monospace;
+
+	/* Shared horizontal inset so every region lines up down the page. */
+	--gutter: 1.25rem;
+	/* Shared height so the toggle, dropdowns and fields all agree. */
+	--control-h: 2em;
+
+	padding: 0;
 	margin: 0em;
-	font-family: sans-serif;
-	font-size: 10pt;
-	color: #333;
-	background: white;
-	padding: 4px;
+	font-family: var(--font-sans);
+	font-size: 13px;
+	line-height: 1.4;
+	/* Hold the type size steady when a phone is turned to landscape. */
+	text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%;
+	color: var(--fg);
+	background: var(--bg);
+}
+
+/* On a standalone cgit page, paint the page background to match the app
+ * and drop the default body margin so the interface is part of the page
+ * rather than a card floating on a mismatched canvas. Scoped to the
+ * cgit-standalone class so an embedding host page is left alone; the
+ * toggle keeps the two in sync by setting color-scheme on <html>. */
+html.cgit-standalone {
+	color-scheme: light dark;
+	background: light-dark(#ffffff, #1b1b1b);
+}
+
+html.cgit-standalone,
+html.cgit-standalone body {
+	margin: 0;
+}
+
+div#cgit * {
+	box-sizing: border-box;
 }
 
 div#cgit a {
-	color: blue;
+	color: var(--link);
 	text-decoration: none;
 }
 
@@ -17,10 +122,70 @@ div#cgit a:hover {
 	text-decoration: underline;
 }
 
+div#cgit img {
+	border: none;
+	max-width: 100%;
+}
+
 div#cgit table {
 	border-collapse: collapse;
 }
 
+
+/* ---- Form controls ---------------------------------------------------- */
+
+div#cgit select,
+div#cgit input,
+div#cgit button {
+	font-family: inherit;
+	font-size: inherit;
+	height: var(--control-h);
+	color: var(--fg);
+	background-color: var(--surface);
+	border: solid 1px var(--border);
+	border-radius: 5px;
+	padding: 0 0.5em;
+	line-height: 1.3;
+	vertical-align: middle;
+}
+
+div#cgit input[type="search"],
+div#cgit input[type="text"] {
+	background-color: var(--bg);
+}
+
+div#cgit select {
+	appearance: none;
+	-webkit-appearance: none;
+	padding-right: 1.7em;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: right 0.55em center;
+	cursor: pointer;
+}
+
+div#cgit button,
+div#cgit input[type="submit"] {
+	cursor: pointer;
+}
+
+div#cgit select:hover,
+div#cgit button:hover,
+div#cgit input[type="submit"]:hover {
+	border-color: var(--border-mid);
+	color: var(--fg);
+}
+
+div#cgit select:focus-visible,
+div#cgit input:focus-visible,
+div#cgit button:focus-visible {
+	outline: 2px solid var(--link);
+	outline-offset: 1px;
+}
+
+
+/* ---- Masthead --------------------------------------------------------- */
+
 div#cgit #header {
 	display: grid;
 	grid-template-columns: auto 1fr auto;
@@ -30,7 +195,8 @@ div#cgit #header {
 	align-items: center;
 	column-gap: 10px;
 	width: 100%;
-	margin-bottom: 1em;
+	padding: 0.85rem var(--gutter) 0.55rem;
+	margin-bottom: 0;
 }
 
 div#cgit #header .logo {
@@ -52,21 +218,25 @@ div#cgit #header h1.main {
 }
 
 div#cgit #header h1.main a {
-	color: #000;
+	color: var(--fg);
 }
 
 div#cgit #header .branch-switch {
 	grid-area: switch;
 	justify-self: end;
-	align-self: end;
-	font-size: 90%;
+	align-self: center;
+}
+
+div#cgit #header .branch-switch select {
+	max-width: 40vw;
 }
 
 div#cgit #header .sub {
 	grid-area: desc;
 	margin: 0;
-	color: #777;
-	border-top: solid 1px #ccc;
+	color: var(--muted);
+	border-top: solid 1px var(--border);
+	overflow-wrap: anywhere;
 }
 
 div#cgit #header .owner {
@@ -75,33 +245,17 @@ div#cgit #header .owner {
 	text-align: right;
 }
 
-@media (max-width: 640px) {
-	div#cgit #header {
-		grid-template-columns: auto 1fr;
-		grid-template-areas:
-			"logo heading"
-			"desc desc"
-			"owner owner"
-			"switch switch";
-		row-gap: 4px;
-	}
-	div#cgit #header .branch-switch,
-	div#cgit #header .owner {
-		justify-self: start;
-		text-align: left;
-	}
-	div#cgit #header h1.main {
-		white-space: normal;
-	}
-}
+
+/* ---- Tab bar ---------------------------------------------------------- */
 
 div#cgit .tabs {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-end;
-	column-gap: 0.5em;
-	border-bottom: solid 3px #ccc;
-	margin-top: 2em;
+	gap: 0.15em 0.75em;
+	border-bottom: solid 2px var(--border);
+	padding: 0 var(--gutter);
+	margin-top: 0.5rem;
 }
 
 div#cgit .tabs ul {
@@ -109,6 +263,7 @@ div#cgit .tabs ul {
 	flex-wrap: wrap;
 	align-items: flex-end;
 	flex: 1 1 auto;
+	gap: 0.1em 0.15em;
 	list-style: none;
 	margin: 0;
 	padding: 0;
@@ -116,19 +271,25 @@ div#cgit .tabs ul {
 
 div#cgit .tabs li {
 	margin: 0;
-	padding: 0 1em;
 }
 
 div#cgit .tabs a {
 	display: inline-block;
-	padding: 2px 0.75em;
-	color: #777;
-	font-size: 110%;
+	padding: 0.3em 0.7em;
+	color: var(--muted);
+	font-size: 105%;
+	border-radius: 5px 5px 0 0;
+}
+
+div#cgit .tabs a:hover {
+	color: var(--fg);
+	background-color: var(--surface);
+	text-decoration: none;
 }
 
 div#cgit .tabs a.active {
-	color: #000;
-	background-color: #ccc;
+	color: var(--fg);
+	background-color: var(--tab-active-bg);
 }
 
 div#cgit .tabs a.external:after {
@@ -148,21 +309,31 @@ div#cgit .tabs .search select {
 	font-size: 90%;
 }
 
+div#cgit input.txt {
+	max-width: 12em;
+}
+
+
+/* ---- Page frame ------------------------------------------------------- */
+
 div#cgit .path {
 	margin: 0px;
-	padding: 5px 2em 2px 2em;
-	color: #000;
-	background-color: #eee;
+	padding: 0.45rem var(--gutter);
+	color: var(--fg);
+	background-color: var(--surface);
 	overflow-wrap: anywhere;
 }
 
 div#cgit .content {
 	margin: 0px;
-	padding: 2em;
-	border-bottom: solid 3px #ccc;
+	padding: 1.25rem var(--gutter);
+	border-bottom: solid 1px var(--border);
+	overflow-x: auto;
 }
 
 
+/* ---- Listing tables --------------------------------------------------- */
+
 div#cgit table.list {
 	width: 100%;
 	border: none;
@@ -170,126 +341,97 @@ div#cgit table.list {
 }
 
 div#cgit table.list tr {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.list tr.logheader {
-	background: #eee;
+	background: var(--surface);
 }
 
 div#cgit table.list tr:nth-child(even) {
-	background: #f7f7f7;
+	background: var(--surface-2);
 }
 
 div#cgit table.list tr:nth-child(odd) {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.list tr:hover {
-	background: #eee;
+	background: var(--row-hover);
 }
 
 div#cgit table.list tr.nohover {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.list tr.nohover:hover {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.list tr.nohover-highlight:hover:nth-child(even) {
-	background: #f7f7f7;
+	background: var(--surface-2);
 }
 
 div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.list th {
 	font-weight: bold;
-	/* color: #888;
-	border-top: dashed 1px #888;
-	border-bottom: dashed 1px #888;
-	*/
-	padding: 0.1em 0.5em 0.05em 0.5em;
+	padding: 0.35em 0.6em 0.3em 0.6em;
 	vertical-align: baseline;
 }
 
 div#cgit table.list td {
 	border: none;
-	padding: 0.1em 0.5em 0.1em 0.5em;
+	padding: 0.3em 0.6em 0.3em 0.6em;
 }
 
 div#cgit table.list td.commitgraph {
-	font-family: monospace;
+	font-family: var(--font-mono);
 	white-space: pre;
 }
 
-div#cgit table.list td.commitgraph .column1 {
-	color: #a00;
-}
-
-div#cgit table.list td.commitgraph .column2 {
-	color: #0a0;
-}
-
-div#cgit table.list td.commitgraph .column3 {
-	color: #aa0;
-}
-
-div#cgit table.list td.commitgraph .column4 {
-	color: #00a;
-}
-
-div#cgit table.list td.commitgraph .column5 {
-	color: #a0a;
-}
-
-div#cgit table.list td.commitgraph .column6 {
-	color: #0aa;
-}
+div#cgit table.list td.commitgraph .column1 { color: var(--col1); }
+div#cgit table.list td.commitgraph .column2 { color: var(--col2); }
+div#cgit table.list td.commitgraph .column3 { color: var(--col3); }
+div#cgit table.list td.commitgraph .column4 { color: var(--col4); }
+div#cgit table.list td.commitgraph .column5 { color: var(--col5); }
+div#cgit table.list td.commitgraph .column6 { color: var(--col6); }
 
 div#cgit table.list td.logsubject {
-	font-family: monospace;
+	font-family: var(--font-mono);
 	font-weight: bold;
 }
 
 div#cgit table.list td.logmsg {
-	font-family: monospace;
-	white-space: pre;
+	font-family: var(--font-mono);
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
 	padding: 0 0.5em;
 }
 
 div#cgit table.list td a {
-	color: black;
+	color: var(--fg);
 }
 
 div#cgit table.list td a.ls-dir {
 	font-weight: bold;
-	color: #00f;
+	color: var(--link);
 }
 
 div#cgit table.list td a:hover {
-	color: #00f;
+	color: var(--link);
 }
 
-div#cgit img {
-	border: none;
-}
 
-div#cgit input#switch-btn {
-	margin: 2px 0px 0px 0px;
-}
+/* ---- Repository index ------------------------------------------------- */
 
 div#cgit td#sidebar input.txt {
 	width: 100%;
 	margin: 2px 0px 0px 0px;
 }
 
-div#cgit table#grid {
-	margin: 0px;
-}
-
 div#cgit td#content {
 	vertical-align: top;
 	padding: 1em 2em 1em 1em;
@@ -301,83 +443,129 @@ div#cgit div#summary {
 	margin-bottom: 1em;
 }
 
+div#cgit div#summary img,
+div#cgit div#summary video {
+	max-width: 100%;
+}
+
+div#cgit div#summary pre {
+	overflow-x: auto;
+}
+
 div#cgit table#downloads {
 	float: right;
 	border-collapse: collapse;
-	border: solid 1px #777;
+	border: solid 1px var(--border-strong);
 	margin-left: 0.5em;
 	margin-bottom: 0.5em;
 }
 
 div#cgit table#downloads th {
-	background-color: #ccc;
+	background-color: var(--surface);
 }
 
 div#cgit div#blob {
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 }
 
 div#cgit div.error {
-	color: red;
+	color: var(--accent);
 	font-weight: bold;
 	margin: 1em 2em;
 }
 
+div#cgit td.reposection {
+	font-style: italic;
+	color: var(--faint);
+}
+
+div#cgit table.list td.reposection {
+	font-style: italic;
+	color: var(--faint);
+}
+
+div#cgit td.toplevel-repo {
+}
+
+div#cgit table.list td.sublevel-repo {
+	padding-left: 1.5em;
+}
+
+
+/* ---- Directory / blob listings --------------------------------------- */
+
 div#cgit a.ls-blob, div#cgit a.ls-dir, div#cgit .ls-mod {
-	font-family: monospace;
+	font-family: var(--font-mono);
 }
 
 div#cgit td.ls-size {
 	text-align: right;
-	font-family: monospace;
+	font-family: var(--font-mono);
 	width: 10em;
 }
 
 div#cgit td.ls-mode {
-	font-family: monospace;
+	font-family: var(--font-mono);
 	width: 10em;
 }
 
+
+/* ---- Source blob ------------------------------------------------------ */
+
 div#cgit table.blob {
 	margin-top: 0.5em;
-	border-top: solid 1px black;
+	border-top: solid 1px var(--border-strong);
+	display: block;
+	width: max-content;
+	max-width: 100%;
+	overflow-x: auto;
 }
 
 div#cgit table.blob td.hashes,
 div#cgit table.blob td.lines {
 	margin: 0; padding: 0 0 0 0.5em;
 	vertical-align: top;
-	color: black;
+	color: var(--fg);
 }
 
 div#cgit table.blob td.linenumbers {
 	margin: 0; padding: 0 0.5em 0 0.5em;
 	vertical-align: top;
 	text-align: right;
-	border-right: 1px solid gray;
+	border-right: 1px solid var(--border-mid);
 }
 
 div#cgit table.blob pre {
 	padding: 0; margin: 0;
+	font-family: var(--font-mono);
 }
 
 div#cgit table.blob td.linenumbers a,
 div#cgit table.ssdiff td.lineno a {
-	color: gray;
+	color: var(--muted);
 	text-align: right;
 	text-decoration: none;
 }
 
 div#cgit table.blob td.linenumbers a:hover,
 div#cgit table.ssdiff td.lineno a:hover {
-	color: black;
+	color: var(--fg);
 }
 
 div#cgit table.blob td.linenumbers a:target:before {
-	color: red;
+	color: var(--accent);
 	content: "\2BA9";
 }
 
+/* ---- Blame ------------------------------------------------------------ */
+
+div#cgit table.blame {
+	display: block;
+	width: max-content;
+	max-width: 100%;
+	overflow-x: auto;
+}
+
 div#cgit table.blame td.hashes,
 div#cgit table.blame td.lines,
 div#cgit table.blame td.linenumbers {
@@ -394,11 +582,11 @@ div#cgit table.blame td.linenumbers div.alt {
 }
 
 div#cgit table.blame div.alt:nth-child(even) {
-	background: #eee;
+	background: var(--surface);
 }
 
 div#cgit table.blame div.alt:nth-child(odd) {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.blame td.lines > div {
@@ -409,31 +597,42 @@ div#cgit table.blame td.lines > div > pre {
 	padding: 0 0 0 0.5em;
 	position: absolute;
 	top: 0;
+	font-family: var(--font-mono);
 }
 
 div#cgit table.blame .oid {
 	font-size: 100%;
 }
 
+
+/* ---- Binary blob ------------------------------------------------------ */
+
 div#cgit table.bin-blob {
 	margin-top: 0.5em;
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
+	display: block;
+	width: max-content;
+	max-width: 100%;
+	overflow-x: auto;
 }
 
 div#cgit table.bin-blob th {
-	font-family: monospace;
+	font-family: var(--font-mono);
 	white-space: pre;
-	border: solid 1px #777;
+	border: solid 1px var(--border-mid);
 	padding: 0.5em 1em;
 }
 
 div#cgit table.bin-blob td {
-	font-family: monospace;
+	font-family: var(--font-mono);
 	white-space: pre;
-	border-left: solid 1px #777;
+	border-left: solid 1px var(--border-mid);
 	padding: 0em 1em;
 }
 
+
+/* ---- Commit / tag ----------------------------------------------------- */
+
 div#cgit table.nowrap td {
 	white-space: nowrap;
 }
@@ -450,8 +649,8 @@ div#cgit div.cgit-panel {
 
 div#cgit div.cgit-panel table {
 	border-collapse: collapse;
-	border: solid 1px #aaa;
-	background-color: #eee;
+	border: solid 1px var(--border-mid);
+	background-color: var(--surface);
 }
 
 div#cgit div.cgit-panel th {
@@ -480,6 +679,7 @@ div#cgit table.commit-info th {
 div#cgit table.commit-info td {
 	font-weight: normal;
 	padding: 0.1em 1em 0.1em 0.1em;
+	overflow-wrap: anywhere;
 }
 
 div#cgit div.commit-subject {
@@ -487,11 +687,13 @@ div#cgit div.commit-subject {
 	font-size: 125%;
 	margin: 1.5em 0em 0.5em 0em;
 	padding: 0em;
+	overflow-wrap: anywhere;
 }
 
 div#cgit div.commit-msg {
-	white-space: pre;
-	font-family: monospace;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	font-family: var(--font-mono);
 }
 
 div#cgit div.notes-header {
@@ -500,10 +702,11 @@ div#cgit div.notes-header {
 }
 
 div#cgit div.notes {
-	white-space: pre;
-	font-family: monospace;
-	border: solid 1px #ee9;
-	background-color: #ffd;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	font-family: var(--font-mono);
+	border: solid 1px var(--notes-border);
+	background-color: var(--notes-bg);
 	padding: 0.3em 2em 0.3em 1em;
 	float: left;
 }
@@ -512,6 +715,9 @@ div#cgit div.notes-footer {
 	clear: left;
 }
 
+
+/* ---- Diffstat --------------------------------------------------------- */
+
 div#cgit div.diffstat-header {
 	font-weight: bold;
 	padding-top: 1.5em;
@@ -519,8 +725,9 @@ div#cgit div.diffstat-header {
 
 div#cgit table.diffstat {
 	border-collapse: collapse;
-	border: solid 1px #aaa;
-	background-color: #eee;
+	border: solid 1px var(--border-mid);
+	background-color: var(--surface);
+	max-width: 100%;
 }
 
 div#cgit table.diffstat th {
@@ -543,28 +750,30 @@ div#cgit table.diffstat td.mode {
 
 div#cgit table.diffstat td span.modechange {
 	padding-left: 1em;
-	color: red;
+	color: var(--del);
 }
 
 div#cgit table.diffstat td.add a {
-	color: green;
+	color: var(--add);
 }
 
 div#cgit table.diffstat td.del a {
-	color: red;
+	color: var(--del);
 }
 
 div#cgit table.diffstat td.upd a {
-	color: blue;
+	color: var(--upd);
 }
 
 div#cgit table.diffstat td.graph {
 	width: 500px;
+	max-width: 40vw;
 	vertical-align: middle;
 }
 
 div#cgit table.diffstat td.graph table {
 	border: none;
+	width: 100%;
 }
 
 div#cgit table.diffstat td.graph td {
@@ -574,48 +783,54 @@ div#cgit table.diffstat td.graph td {
 }
 
 div#cgit table.diffstat td.graph td.add {
-	background-color: #5c5;
+	background-color: var(--graph-add);
 }
 
 div#cgit table.diffstat td.graph td.rem {
-	background-color: #c55;
+	background-color: var(--graph-rem);
 }
 
 div#cgit div.diffstat-summary {
-	color: #888;
+	color: var(--faint);
 	padding-top: 0.5em;
 }
 
+
+/* ---- Unified diff ----------------------------------------------------- */
+
 div#cgit table.diff {
 	width: 100%;
 }
 
 div#cgit table.diff td {
-	font-family: monospace;
+	font-family: var(--font-mono);
 	white-space: pre;
 }
 
 div#cgit table.diff td div.head {
 	font-weight: bold;
 	margin-top: 1em;
-	color: black;
+	color: var(--fg);
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
 }
 
 div#cgit table.diff td div.hunk {
-	color: #009;
+	color: var(--hunk);
 }
 
 div#cgit table.diff td div.add {
-	color: green;
+	color: var(--add);
 }
 
 div#cgit table.diff td div.del {
-	color: red;
+	color: var(--del);
 }
 
 div#cgit .oid {
-	font-family: monospace;
+	font-family: var(--font-mono);
 	font-size: 90%;
+	overflow-wrap: anywhere;
 }
 
 div#cgit .left {
@@ -626,10 +841,8 @@ div#cgit .right {
 	text-align: right;
 }
 
-div#cgit table.list td.reposection {
-	font-style: italic;
-	color: #888;
-}
+
+/* ---- Buttons / pager -------------------------------------------------- */
 
 div#cgit a.button {
 	font-size: 80%;
@@ -644,14 +857,6 @@ div#cgit a.secondary {
 	font-size: 90%;
 }
 
-div#cgit td.toplevel-repo {
-
-}
-
-div#cgit table.list td.sublevel-repo {
-	padding-left: 1.5em;
-}
-
 div#cgit ul.pager {
 	list-style-type: none;
 	text-align: center;
@@ -665,55 +870,70 @@ div#cgit ul.pager li {
 }
 
 div#cgit ul.pager a {
-	color: #777;
+	color: var(--muted);
 }
 
 div#cgit ul.pager .current {
 	font-weight: bold;
 }
 
+
+/* ---- Ages / line counts ----------------------------------------------- */
+
+div#cgit span.age-mins,
+div#cgit span.age-hours,
+div#cgit span.age-days,
+div#cgit span.age-weeks,
+div#cgit span.age-months,
+div#cgit span.age-years {
+	white-space: nowrap;
+}
+
 div#cgit span.age-mins {
 	font-weight: bold;
-	color: #080;
+	color: var(--age-mins);
 }
 
 div#cgit span.age-hours {
-	color: #080;
+	color: var(--age-hours);
 }
 
 div#cgit span.age-days {
-	color: #040;
+	color: var(--age-days);
 }
 
 div#cgit span.age-weeks {
-	color: #444;
+	color: var(--age-weeks);
 }
 
 div#cgit span.age-months {
-	color: #888;
+	color: var(--age-months);
 }
 
 div#cgit span.age-years {
-	color: #bbb;
+	color: var(--age-years);
 }
 
 div#cgit span.insertions {
-	color: #080;
+	color: var(--add);
 }
 
 div#cgit span.deletions {
-	color: #800;
+	color: var(--del);
 }
 
+
+/* ---- Footer ----------------------------------------------------------- */
+
 div#cgit .footer {
-	margin-top: 0.5em;
+	padding: 0.85rem var(--gutter);
 	text-align: center;
 	font-size: 80%;
-	color: #ccc;
+	color: var(--footer-fg);
 }
 
 div#cgit .footer a {
-	color: #ccc;
+	color: var(--footer-fg);
 	text-decoration: none;
 }
 
@@ -721,48 +941,59 @@ div#cgit .footer a:hover {
 	text-decoration: underline;
 }
 
+
+/* ---- Ref decorations -------------------------------------------------- */
+
+div#cgit a.branch-deco,
+div#cgit a.tag-deco,
+div#cgit a.tag-annotated-deco,
+div#cgit a.remote-deco,
+div#cgit a.deco {
+	white-space: nowrap;
+}
+
 div#cgit a.branch-deco {
-	color: #000;
+	color: var(--deco-fg);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #88ff88;
-	border: solid 1px #007700;
+	background-color: var(--branch-bg);
+	border: solid 1px var(--branch-bd);
 	border-radius: 2px;
 }
 
 div#cgit a.tag-deco {
-	color: #000;
+	color: var(--deco-fg);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ffff88;
-	border: solid 1px #777700;
+	background-color: var(--tag-bg);
+	border: solid 1px var(--tag-bd);
 	border-radius: 2px;
 }
 
 div#cgit a.tag-annotated-deco {
-	color: #000;
+	color: var(--deco-fg);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ffcc88;
-	border: solid 1px #777700;
+	background-color: var(--tag-ann-bg);
+	border: solid 1px var(--tag-ann-bd);
 	border-radius: 2px;
 }
 
 div#cgit a.remote-deco {
-	color: #000;
+	color: var(--deco-fg);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ccccff;
-	border: solid 1px #000077;
+	background-color: var(--remote-bg);
+	border: solid 1px var(--remote-bd);
 	border-radius: 2px;
 }
 
 div#cgit a.deco {
-	color: #000;
+	color: var(--deco-fg);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ff8888;
-	border: solid 1px #770000;
+	background-color: var(--head-bg);
+	border: solid 1px var(--head-bd);
 	border-radius: 2px;
 }
 
@@ -775,22 +1006,29 @@ div#cgit div.commit-subject a.deco {
 	font-size: 75%;
 }
 
+
+/* ---- Statistics ------------------------------------------------------- */
+
 div#cgit table.stats {
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 	border-collapse: collapse;
+	display: block;
+	width: max-content;
+	max-width: 100%;
+	overflow-x: auto;
 }
 
 div#cgit table.stats th {
 	text-align: left;
 	padding: 1px 0.5em;
-	background-color: #eee;
-	border: solid 1px black;
+	background-color: var(--surface);
+	border: solid 1px var(--border-strong);
 }
 
 div#cgit table.stats td {
 	text-align: right;
 	padding: 1px 0.5em;
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 }
 
 div#cgit table.stats td.total {
@@ -799,9 +1037,8 @@ div#cgit table.stats td.total {
 }
 
 div#cgit table.stats td.sum {
-	color: #c00;
+	color: var(--accent);
 	font-weight: bold;
-/*	background-color: #eee; */
 }
 
 div#cgit table.stats td.left {
@@ -810,14 +1047,14 @@ div#cgit table.stats td.left {
 
 div#cgit table.vgraph {
 	border-collapse: separate;
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 	height: 200px;
 }
 
 div#cgit table.vgraph th {
-	background-color: #eee;
+	background-color: var(--surface);
 	font-weight: bold;
-	border: solid 1px white;
+	border: solid 1px var(--bg);
 	padding: 1px 0.5em;
 }
 
@@ -827,18 +1064,19 @@ div#cgit table.vgraph td {
 }
 
 div#cgit table.vgraph div.bar {
-	background-color: #eee;
+	background-color: var(--surface);
 }
 
 div#cgit table.hgraph {
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 	width: 800px;
+	max-width: 100%;
 }
 
 div#cgit table.hgraph th {
-	background-color: #eee;
+	background-color: var(--surface);
 	font-weight: bold;
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 	padding: 1px 0.5em;
 }
 
@@ -848,96 +1086,99 @@ div#cgit table.hgraph td {
 }
 
 div#cgit table.hgraph div.bar {
-	background-color: #eee;
+	background-color: var(--surface);
 	height: 1em;
 }
 
+
+/* ---- Side-by-side diff ------------------------------------------------ */
+
 div#cgit table.ssdiff {
 	width: 100%;
 }
 
 div#cgit table.ssdiff td {
 	font-size: 75%;
-	font-family: monospace;
+	font-family: var(--font-mono);
 	white-space: pre;
 	padding: 1px 4px 1px 4px;
-	border-left: solid 1px #aaa;
-	border-right: solid 1px #aaa;
+	border-left: solid 1px var(--border-mid);
+	border-right: solid 1px var(--border-mid);
 }
 
 div#cgit table.ssdiff td.add {
-	color: black;
-	background: #cfc;
+	color: var(--fg);
+	background: var(--ss-add-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.add_dark {
-	color: black;
-	background: #aca;
+	color: var(--fg);
+	background: var(--ss-add-bg2);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff span.add {
-	background: #cfc;
+	background: var(--ss-add-bg);
 	font-weight: bold;
 }
 
 div#cgit table.ssdiff td.del {
-	color: black;
-	background: #fcc;
+	color: var(--fg);
+	background: var(--ss-del-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.del_dark {
-	color: black;
-	background: #caa;
+	color: var(--fg);
+	background: var(--ss-del-bg2);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff span.del {
-	background: #fcc;
+	background: var(--ss-del-bg);
 	font-weight: bold;
 }
 
 div#cgit table.ssdiff td.changed {
-	color: black;
-	background: #ffc;
+	color: var(--fg);
+	background: var(--ss-chg-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.changed_dark {
-	color: black;
-	background: #cca;
+	color: var(--fg);
+	background: var(--ss-chg-bg2);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.lineno {
-	color: black;
-	background: #eee;
+	color: var(--fg);
+	background: var(--ss-lineno-bg);
 	text-align: right;
 	width: 3em;
 	min-width: 3em;
 }
 
 div#cgit table.ssdiff td.hunk {
-	color: black;
-	background: #ccf;
-	border-top: solid 1px #aaa;
-	border-bottom: solid 1px #aaa;
+	color: var(--fg);
+	background: var(--ss-hunk-bg);
+	border-top: solid 1px var(--border-mid);
+	border-bottom: solid 1px var(--border-mid);
 }
 
 div#cgit table.ssdiff td.head {
-	border-top: solid 1px #aaa;
-	border-bottom: solid 1px #aaa;
+	border-top: solid 1px var(--border-mid);
+	border-bottom: solid 1px var(--border-mid);
 }
 
 div#cgit table.ssdiff td.head div.head {
 	font-weight: bold;
-	color: black;
+	color: var(--fg);
 }
 
 div#cgit table.ssdiff td.foot {
-	border-top: solid 1px #aaa;
+	border-top: solid 1px var(--border-mid);
 	border-left: none;
 	border-right: none;
 	border-bottom: none;