style: replace hardcoded color codes with css variablesv1.3.1+10

In order to: a) do custom theme simpler by just replacing necessary
vars, b) apply this theme to filters as well; the main cgit.css file now
defines CSS vars and uses them in color parameters.

1 files changed, 266 insertions, 133 deletions

diff --git a/cgit.css b/cgit.css
index d10a24d..e52d424 100644
--- a/cgit.css
+++ b/cgit.css
@@ -1,15 +1,88 @@
 div#cgit {
+	--bg: white;
+	--bg-zebra: #f7f7f7;
+	--bg-hl: #eee;
+	--bg-hl2: #ccc;
+	--fg: #333;
+	--fg-strong: #000;
+	--fg-mid: #444;
+	--fg-mute: #777;
+	--fg-dim: #888;
+	--fg-faint: #bbb;
+	--fg-faintest: #ccc;
+	--fg-on-tint: black;
+	--fg-linenum: gray;
+	--border: #ccc;
+	--border-mid: #aaa;
+	--border-dark: #777;
+	--border-strong: black;
+
+	--red: red;
+	--red-mid: #c00;
+	--red-dark: #800;
+	--green: green;
+	--green-mid: #080;
+	--green-dark: #040;
+	--blue: blue;
+	--blue-dark: #009;
+
+	--graph-col1: #a00;
+	--graph-col2: #0a0;
+	--graph-col3: #aa0;
+	--graph-col4: #00a;
+	--graph-col5: #a0a;
+	--graph-col6: #0aa;
+
+	--graph-add-bg: #5c5;
+	--graph-rem-bg: #c55;
+
+	--notes-bg: #ffd;
+	--notes-border: #ee9;
+	--add-bg: #cfc;
+	--add-bg-dark: #aca;
+	--del-bg: #fcc;
+	--del-bg-dark: #caa;
+	--changed-bg: #ffc;
+	--changed-bg-dark: #cca;
+	--hunk-bg: #ccf;
+
+	--deco-branch-bg: #8f8;
+	--deco-branch-border: #070;
+	--deco-tag-bg: #ff8;
+	--deco-tag-border: #770;
+	--deco-tag-annotated-bg: #fc8;
+	--deco-tag-annotated-border: #770;
+	--deco-remote-bg: #ccf;
+	--deco-remote-border: #007;
+	--deco-other-bg: #f88;
+	--deco-other-border: #700;
+
+    --syn-keyword: #000;
+    --syn-keyword-alt: #0057ae;
+    --syn-type: #010181;
+    --syn-string: #bf0303;
+    --syn-string-alt: #818100;
+    --syn-escape: #f0f;
+    --syn-comment: #838183;
+    --syn-number: #b07e00;
+    --syn-preproc: #008200;
+    --syn-operator: #000;
+    --syn-interpolation: #0057ae;
+    --syn-linenum: #555;
+    --syn-error: #bf0303;
+    --syn-mark-bg: #ffb;
+
 	padding: 0em;
 	margin: 0em;
 	font-family: sans-serif;
 	font-size: 10pt;
-	color: #333;
-	background: white;
+	color: var(--fg);
+	background: var(--bg);
 	padding: 4px;
 }
 
 div#cgit a {
-	color: blue;
+	color: var(--blue);
 	text-decoration: none;
 }
 
@@ -38,7 +111,7 @@ div#cgit table#header td.main {
 }
 
 div#cgit table#header td.main a {
-	color: #000;
+	color: var(--fg-strong);
 }
 
 div#cgit table#header td.form {
@@ -56,13 +129,13 @@ div#cgit table#header td.form select {
 }
 
 div#cgit table#header td.sub {
-	color: #777;
-	border-top: solid 1px #ccc;
+	color: var(--fg-mute);
+	border-top: solid 1px var(--border);
 	padding-left: 10px;
 }
 
 div#cgit table.tabs {
-	border-bottom: solid 3px #ccc;
+	border-bottom: solid 3px var(--border);
 	border-collapse: collapse;
 	margin-top: 2em;
 	margin-bottom: 0px;
@@ -76,13 +149,13 @@ div#cgit table.tabs td {
 
 div#cgit table.tabs td a {
 	padding: 2px 0.75em;
-	color: #777;
+	color: var(--fg-mute);
 	font-size: 110%;
 }
 
 div#cgit table.tabs td a.active {
-	color: #000;
-	background-color: #ccc;
+	color: var(--fg-strong);
+	background-color: var(--bg-hl2);
 }
 
 div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https://"]:after {
@@ -109,14 +182,14 @@ div#cgit table.tabs td.form select {
 div#cgit div.path {
 	margin: 0px;
 	padding: 5px 2em 2px 2em;
-	color: #000;
-	background-color: #eee;
+	color: var(--fg-strong);
+	background-color: var(--bg-hl);
 }
 
 div#cgit div.content {
 	margin: 0px;
 	padding: 2em;
-	border-bottom: solid 3px #ccc;
+	border-bottom: solid 3px var(--border);
 }
 
 
@@ -127,46 +200,46 @@ div#cgit table.list {
 }
 
 div#cgit table.list tr {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.list tr.logheader {
-	background: #eee;
+	background: var(--bg-hl);
 }
 
 div#cgit table.list tr:nth-child(even) {
-	background: #f7f7f7;
+	background: var(--bg-zebra);
 }
 
 div#cgit table.list tr:nth-child(odd) {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.list tr:hover {
-	background: #eee;
+	background: var(--bg-hl);
 }
 
 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(--bg-zebra);
 }
 
 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;
+	/* color: var(--fg-dim);
+	border-top: dashed 1px var(--fg-dim);
+	border-bottom: dashed 1px var(--fg-dim);
 	*/
 	padding: 0.1em 0.5em 0.05em 0.5em;
 	vertical-align: baseline;
@@ -183,27 +256,27 @@ div#cgit table.list td.commitgraph {
 }
 
 div#cgit table.list td.commitgraph .column1 {
-	color: #a00;
+	color: var(--graph-col1);
 }
 
 div#cgit table.list td.commitgraph .column2 {
-	color: #0a0;
+	color: var(--graph-col2);
 }
 
 div#cgit table.list td.commitgraph .column3 {
-	color: #aa0;
+	color: var(--graph-col3);
 }
 
 div#cgit table.list td.commitgraph .column4 {
-	color: #00a;
+	color: var(--graph-col4);
 }
 
 div#cgit table.list td.commitgraph .column5 {
-	color: #a0a;
+	color: var(--graph-col5);
 }
 
 div#cgit table.list td.commitgraph .column6 {
-	color: #0aa;
+	color: var(--graph-col6);
 }
 
 div#cgit table.list td.logsubject {
@@ -218,16 +291,16 @@ div#cgit table.list td.logmsg {
 }
 
 div#cgit table.list td a {
-	color: black;
+	color: var(--fg-strong);
 }
 
 div#cgit table.list td a.ls-dir {
 	font-weight: bold;
-	color: #00f;
+	color: var(--blue);
 }
 
 div#cgit table.list td a:hover {
-	color: #00f;
+	color: var(--blue);
 }
 
 div#cgit img {
@@ -261,21 +334,21 @@ div#cgit div#summary {
 div#cgit table#downloads {
 	float: right;
 	border-collapse: collapse;
-	border: solid 1px #777;
+	border: solid 1px var(--border-dark);
 	margin-left: 0.5em;
 	margin-bottom: 0.5em;
 }
 
 div#cgit table#downloads th {
-	background-color: #ccc;
+	background-color: var(--bg-hl2);
 }
 
 div#cgit div#blob {
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 }
 
 div#cgit div.error {
-	color: red;
+	color: var(--red);
 	font-weight: bold;
 	margin: 1em 2em;
 }
@@ -297,21 +370,21 @@ div#cgit td.ls-mode {
 
 div#cgit table.blob {
 	margin-top: 0.5em;
-	border-top: solid 1px black;
+	border-top: solid 1px var(--border-strong);
 }
 
 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-strong);
 }
 
 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(--fg-linenum);
 }
 
 div#cgit table.blob pre {
@@ -320,18 +393,18 @@ div#cgit table.blob pre {
 
 div#cgit table.blob td.linenumbers a,
 div#cgit table.ssdiff td.lineno a {
-	color: gray;
+	color: var(--fg-linenum);
 	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-strong);
 }
 
 div#cgit table.blob td.linenumbers a:target:before {
-	color: red;
+	color: var(--red);
 	content: "\2BA9";
 }
 
@@ -351,11 +424,11 @@ div#cgit table.blame td.linenumbers div.alt {
 }
 
 div#cgit table.blame div.alt:nth-child(even) {
-	background: #eee;
+	background: var(--bg-hl);
 }
 
 div#cgit table.blame div.alt:nth-child(odd) {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.blame td.lines > div {
@@ -374,20 +447,20 @@ div#cgit table.blame .oid {
 
 div#cgit table.bin-blob {
 	margin-top: 0.5em;
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 }
 
 div#cgit table.bin-blob th {
 	font-family: monospace;
 	white-space: pre;
-	border: solid 1px #777;
+	border: solid 1px var(--border-dark);
 	padding: 0.5em 1em;
 }
 
 div#cgit table.bin-blob td {
 	font-family: monospace;
 	white-space: pre;
-	border-left: solid 1px #777;
+	border-left: solid 1px var(--border-dark);
 	padding: 0em 1em;
 }
 
@@ -407,8 +480,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(--bg-hl);
 }
 
 div#cgit div.cgit-panel th {
@@ -459,8 +532,8 @@ div#cgit div.notes-header {
 div#cgit div.notes {
 	white-space: pre;
 	font-family: monospace;
-	border: solid 1px #ee9;
-	background-color: #ffd;
+	border: solid 1px var(--notes-border);
+	background-color: var(--notes-bg);
 	padding: 0.3em 2em 0.3em 1em;
 	float: left;
 }
@@ -476,8 +549,8 @@ 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(--bg-hl);
 }
 
 div#cgit table.diffstat th {
@@ -500,19 +573,19 @@ div#cgit table.diffstat td.mode {
 
 div#cgit table.diffstat td span.modechange {
 	padding-left: 1em;
-	color: red;
+	color: var(--red);
 }
 
 div#cgit table.diffstat td.add a {
-	color: green;
+	color: var(--green);
 }
 
 div#cgit table.diffstat td.del a {
-	color: red;
+	color: var(--red);
 }
 
 div#cgit table.diffstat td.upd a {
-	color: blue;
+	color: var(--blue);
 }
 
 div#cgit table.diffstat td.graph {
@@ -531,15 +604,15 @@ div#cgit table.diffstat td.graph td {
 }
 
 div#cgit table.diffstat td.graph td.add {
-	background-color: #5c5;
+	background-color: var(--graph-add-bg);
 }
 
 div#cgit table.diffstat td.graph td.rem {
-	background-color: #c55;
+	background-color: var(--graph-rem-bg);
 }
 
 div#cgit div.diffstat-summary {
-	color: #888;
+	color: var(--fg-dim);
 	padding-top: 0.5em;
 }
 
@@ -555,19 +628,19 @@ div#cgit table.diff td {
 div#cgit table.diff td div.head {
 	font-weight: bold;
 	margin-top: 1em;
-	color: black;
+	color: var(--fg-strong);
 }
 
 div#cgit table.diff td div.hunk {
-	color: #009;
+	color: var(--blue-dark);
 }
 
 div#cgit table.diff td div.add {
-	color: green;
+	color: var(--green);
 }
 
 div#cgit table.diff td div.del {
-	color: red;
+	color: var(--red);
 }
 
 div#cgit .oid {
@@ -585,7 +658,7 @@ div#cgit .right {
 
 div#cgit table.list td.reposection {
 	font-style: italic;
-	color: #888;
+	color: var(--fg-dim);
 }
 
 div#cgit a.button {
@@ -622,7 +695,7 @@ div#cgit ul.pager li {
 }
 
 div#cgit ul.pager a {
-	color: #777;
+	color: var(--fg-mute);
 }
 
 div#cgit ul.pager .current {
@@ -631,46 +704,46 @@ div#cgit ul.pager .current {
 
 div#cgit span.age-mins {
 	font-weight: bold;
-	color: #080;
+	color: var(--green-mid);
 }
 
 div#cgit span.age-hours {
-	color: #080;
+	color: var(--green-mid);
 }
 
 div#cgit span.age-days {
-	color: #040;
+	color: var(--green-dark);
 }
 
 div#cgit span.age-weeks {
-	color: #444;
+	color: var(--fg-mid);
 }
 
 div#cgit span.age-months {
-	color: #888;
+	color: var(--fg-dim);
 }
 
 div#cgit span.age-years {
-	color: #bbb;
+	color: var(--fg-faint);
 }
 
 div#cgit span.insertions {
-	color: #080;
+	color: var(--green-mid);
 }
 
 div#cgit span.deletions {
-	color: #800;
+	color: var(--red-dark);
 }
 
 div#cgit div.footer {
 	margin-top: 0.5em;
 	text-align: center;
 	font-size: 80%;
-	color: #ccc;
+	color: var(--fg-faintest);
 }
 
 div#cgit div.footer a {
-	color: #ccc;
+	color: var(--fg-faintest);
 	text-decoration: none;
 }
 
@@ -679,47 +752,47 @@ div#cgit div.footer a:hover {
 }
 
 div#cgit a.branch-deco {
-	color: #000;
+	color: var(--fg-strong);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #88ff88;
-	border: solid 1px #007700;
+	background-color: var(--deco-branch-bg);
+	border: solid 1px var(--deco-branch-border);
 	border-radius: 2px;
 }
 
 div#cgit a.tag-deco {
-	color: #000;
+	color: var(--fg-strong);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ffff88;
-	border: solid 1px #777700;
+	background-color: var(--deco-tag-bg);
+	border: solid 1px var(--deco-tag-border);
 	border-radius: 2px;
 }
 
 div#cgit a.tag-annotated-deco {
-	color: #000;
+	color: var(--fg-strong);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ffcc88;
-	border: solid 1px #777700;
+	background-color: var(--deco-tag-annotated-bg);
+	border: solid 1px var(--deco-tag-annotated-border);
 	border-radius: 2px;
 }
 
 div#cgit a.remote-deco {
-	color: #000;
+	color: var(--fg-strong);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ccccff;
-	border: solid 1px #000077;
+	background-color: var(--deco-remote-bg);
+	border: solid 1px var(--deco-remote-border);
 	border-radius: 2px;
 }
 
 div#cgit a.deco {
-	color: #000;
+	color: var(--fg-strong);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ff8888;
-	border: solid 1px #770000;
+	background-color: var(--deco-other-bg);
+	border: solid 1px var(--deco-other-border);
 	border-radius: 2px;
 }
 
@@ -733,21 +806,21 @@ div#cgit div.commit-subject a.deco {
 }
 
 div#cgit table.stats {
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 	border-collapse: collapse;
 }
 
 div#cgit table.stats th {
 	text-align: left;
 	padding: 1px 0.5em;
-	background-color: #eee;
-	border: solid 1px black;
+	background-color: var(--bg-hl);
+	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 {
@@ -756,9 +829,9 @@ div#cgit table.stats td.total {
 }
 
 div#cgit table.stats td.sum {
-	color: #c00;
+	color: var(--red-mid);
 	font-weight: bold;
-/*	background-color: #eee; */
+/*	background-color: var(--bg-hl); */
 }
 
 div#cgit table.stats td.left {
@@ -767,14 +840,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(--bg-hl);
 	font-weight: bold;
-	border: solid 1px white;
+	border: solid 1px var(--bg);
 	padding: 1px 0.5em;
 }
 
@@ -784,18 +857,18 @@ div#cgit table.vgraph td {
 }
 
 div#cgit table.vgraph div.bar {
-	background-color: #eee;
+	background-color: var(--bg-hl);
 }
 
 div#cgit table.hgraph {
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 	width: 800px;
 }
 
 div#cgit table.hgraph th {
-	background-color: #eee;
+	background-color: var(--bg-hl);
 	font-weight: bold;
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 	padding: 1px 0.5em;
 }
 
@@ -805,7 +878,7 @@ div#cgit table.hgraph td {
 }
 
 div#cgit table.hgraph div.bar {
-	background-color: #eee;
+	background-color: var(--bg-hl);
 	height: 1em;
 }
 
@@ -818,83 +891,83 @@ div#cgit table.ssdiff td {
 	font-family: monospace;
 	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-on-tint);
+	background: var(--add-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.add_dark {
-	color: black;
-	background: #aca;
+	color: var(--fg-on-tint);
+	background: var(--add-bg-dark);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff span.add {
-	background: #cfc;
+	background: var(--add-bg);
 	font-weight: bold;
 }
 
 div#cgit table.ssdiff td.del {
-	color: black;
-	background: #fcc;
+	color: var(--fg-on-tint);
+	background: var(--del-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.del_dark {
-	color: black;
-	background: #caa;
+	color: var(--fg-on-tint);
+	background: var(--del-bg-dark);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff span.del {
-	background: #fcc;
+	background: var(--del-bg);
 	font-weight: bold;
 }
 
 div#cgit table.ssdiff td.changed {
-	color: black;
-	background: #ffc;
+	color: var(--fg-on-tint);
+	background: var(--changed-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.changed_dark {
-	color: black;
-	background: #cca;
+	color: var(--fg-on-tint);
+	background: var(--changed-bg-dark);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.lineno {
-	color: black;
-	background: #eee;
+	color: var(--fg-on-tint);
+	background: var(--bg-hl);
 	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-on-tint);
+	background: var(--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-on-tint);
 }
 
 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;
@@ -907,3 +980,63 @@ div#cgit table.ssdiff td.space {
 div#cgit table.ssdiff td.space div {
 	min-height: 3em;
 }
+
+div#cgit .hl.kwa,
+div#cgit .hl.kwc {
+  color: var(--syn-keyword);
+  font-weight: bold;
+}
+
+div#cgit .hl.kwb {
+  color: var(--syn-keyword-alt);
+}
+
+div#cgit .hl.kwd {
+  color: var(--syn-type);
+}
+
+div#cgit .hl.str {
+  color: var(--syn-string);
+}
+
+div#cgit .hl.dstr,
+div#cgit .hl.pps {
+  color: var(--syn-string-alt);
+}
+
+div#cgit .hl.esc {
+  color: var(--syn-escape);
+}
+
+div#cgit .hl.com,
+div#cgit .hl.slc {
+  color: var(--syn-comment);
+  font-style: italic;
+}
+
+div#cgit .hl.num {
+  color: var(--syn-number);
+}
+
+div#cgit .hl.dir,
+div#cgit .hl.ppc {
+  color: var(--syn-preproc);
+}
+
+div#cgit .hl.opt,
+div#cgit .hl.sym {
+  color: var(--syn-operator);
+}
+
+div#cgit .hl.ipl {
+  color: var(--syn-interpolation);
+}
+
+div#cgit .hl.lin,
+div#cgit .hl.line {
+  color: var(--syn-linenum);
+}
+
+div#cgit .hl.mark {
+  background-color: var(--syn-mark-bg);
+}