aboutsummaryrefslogtreecommitdiff
path: root/cgit.css
diff options
context:
space:
mode:
Diffstat (limited to 'cgit.css')
-rw-r--r--cgit.css218
1 files changed, 142 insertions, 76 deletions
diff --git a/cgit.css b/cgit.css
index eb4dc13..71a2987 100644
--- a/cgit.css
+++ b/cgit.css
@@ -1,24 +1,91 @@
+:root {
+ --bg1: #dfdfdf;
+ --bg2: #fff;
+ --bg3: #afafaf;
+
+ --fg1: #232627;
+ --fg2: #232627;
+ --fg3: #2ed19b;
+ --fg-disabled: lightgray;
+
+ --accent1: #BF87D0;
+ --accent1rgb: rgb(191, 135, 208);
+ --accent1rgba7: rgba(191, 135, 208, 0.7);
+ --accent1rgba9: rgba(191, 135, 208, 0.9);
+
+ --red1: red;
+ --red2: #c00;
+ --red3: #a00;
+ --red4: #c55;
+
+ --green1: green;
+ --green2: #5c5;
+ --green3: #0a0;
+ --green4: #080;
+
+ --yellow1: #aa0;
+
+ --magenta1: #a0a;
+
+ --blue1: #00a;
+ --blue2: #009;
+
+ --cyan1: #0aa;
+
+ --gray1: #777;
+ --gray2: gray;
+ --gray3: #888;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --bg1: #232627;
+ --bg2: #161020;
+ --bg3: #151515;
+
+ --fg1: white;
+ --fg2: #232627;
+ --fg3: #2ed19b;
+ --fg-disabled: lightgray;
+
+ --accent1: #BF87D0;
+ --accent1rgb: rgb(191, 135, 208);
+ --accent1rgba7: rgba(191, 135, 208, 0.7);
+ --accent1rgba9: rgba(191, 135, 208, 0.9);
+
+ --red1: #e25b5b;
+ --green1: #46a446;
+ --blue2: #6957f3;
+ }
+}
+
+.ctrl select {
+ background-color: var(--bg1);
+ color: var(--fg1);
+ border: 1px solid var(--accent1);
+}
+
div#cgit {
padding: 0em;
margin: 0em;
font-family: sans-serif;
font-size: 10pt;
- color: white;
- background: #232627;
+ color: var(--fg1);
+ background: var(--bg1);
padding: 4px;
}
table.list tbody tr.nohover th a {
- color: blue;
+ color: var(--fg-disabled);
}
body {
- background-color: #161020;
- color: white;
+ background-color: var(--bg2);
+ color: var(--fg1);
}
div#cgit a {
- color: #2ed19b;
+ color: var(--fg3);
text-decoration: none;
}
@@ -47,7 +114,7 @@ div#cgit table#header td.main {
}
div#cgit table#header td.main a {
- color: white;
+ color: var(--fg1);
}
div#cgit table#header td.form {
@@ -61,24 +128,24 @@ div#cgit table#header td.form {
div#cgit table#header td.form form,
div#cgit table#header td.form input,
div#cgit table#header td.form select {
- background-color: #232627;
- color: white;
+ background-color: var(--bg1);
+ color: var(--fg1);
}
div#cgit table#header td.form input,
div#cgit table#header td.form select {
- border: 1px solid #bf87d0;
+ border: 1px solid var(--accent1);
padding: 0.2rem 0.8rem;
}
div#cgit table#header td.sub {
- color: white;
+ color: var(--fg1);
padding-left: 10px;
padding-top: 1rem;
}
div#cgit table.tabs {
- border-bottom: solid 3px #bf87d0;
+ border-bottom: solid 3px var(--accent1);
border-collapse: collapse;
margin-top: 2em;
margin-bottom: 0px;
@@ -92,13 +159,13 @@ div#cgit table.tabs td {
div#cgit table.tabs td a {
padding: 2px 0.75em;
- color: white;
+ color: var(--fg1);
font-size: 110%;
}
div#cgit table.tabs td a.active {
- color: #232627;
- background-color: #bf87d0;
+ color: var(--fg2);
+ background-color: var(--accent1);
}
div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https://"]:after {
@@ -120,22 +187,22 @@ div#cgit table.tabs td.form form {
div#cgit table.tabs td.form input,
div#cgit table.tabs td.form select {
padding: 0.2rem 0.8rem;
- background-color: #232627;
- color: white;
- border: 1px solid #bf87d0;
+ background-color: var(--bg1);
+ color: var(--fg1);
+ border: 1px solid var(--accent1);
}
div#cgit div.path {
margin: 0px;
padding: 5px 2em 2px 2em;
- color: white;
- background-color: #232627;
+ color: var(--fg1);
+ background-color: var(--bg1);
}
div#cgit div.content {
margin: 0px;
padding: 2em;
- border-bottom: solid 3px #bf87d0;
+ border-bottom: solid 3px var(--accent1);
}
@@ -146,48 +213,48 @@ div#cgit table.list {
}
div#cgit table.list tr {
- background-color: #232627;
+ background-color: var(--bg1);
}
div#cgit table.list tr.logheader {
- background: #232627;
+ background: var(--bg1);
}
div#cgit table.list tr:nth-child(even) {
- background: #151515;
+ background: var(--bg3);
}
div#cgit table.list tr:nth-child(odd) {
- background: #232627;
+ background: var(--bg1);
}
div#cgit table.list tr:hover {
- background-color: rgba(191, 135, 208, 0.7);
+ background-color: var(--accent1rgba7);
}
div#cgit table.list tr:hover td a {
- color: white;
+ color: var(--fg1);
}
div#cgit table.list tr.nohover {
- background-color: rgba(191, 135, 208, 0.9);
- color: #232627;
+ background-color: var(--accent1rgba9);
+ color: var(--bg1);
}
div#cgit table.list tr.nohover a {
- color: #161020;
+ color: var(--bg2);
}
div#cgit table.list tr.nohover:hover {
- background-color: rgb(191, 135, 208);
+ background-color: var(--accent1rgb);
}
div#cgit table.list tr.nohover-highlight:hover:nth-child(even) {
- background-color: rgba(191, 135, 208, 0.9);
+ background-color: var(--accent1rgba9);
}
div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) {
- background-color: rgba(191, 135, 208, 0.7);
+ background-color: var(--accent1rgba7);
}
div#cgit table.list th {
@@ -207,27 +274,27 @@ div#cgit table.list td.commitgraph {
}
div#cgit table.list td.commitgraph .column1 {
- color: #a00;
+ color: var(--red3);
}
div#cgit table.list td.commitgraph .column2 {
- color: #0a0;
+ color: var(--green3);
}
div#cgit table.list td.commitgraph .column3 {
- color: #aa0;
+ color: var(--yellow1);
}
div#cgit table.list td.commitgraph .column4 {
- color: #00a;
+ color: var(--blue1);
}
div#cgit table.list td.commitgraph .column5 {
- color: #a0a;
+ color: var(--magenta1);
}
div#cgit table.list td.commitgraph .column6 {
- color: #0aa;
+ color: var(--cyan1);
}
div#cgit table.list td.logsubject {
@@ -242,16 +309,16 @@ div#cgit table.list td.logmsg {
}
div#cgit table.list td a {
- color: white;
+ color: var(--fg1);
}
div#cgit table.list td a.ls-dir {
font-weight: bold;
- color: #bf87d0;
+ color: var(--accent1);
}
div#cgit table.list td a:hover {
- color: white;
+ color: var(--fg1);
}
div#cgit img {
@@ -285,13 +352,13 @@ div#cgit div#summary {
div#cgit table#downloads {
float: right;
border-collapse: collapse;
- border: solid 1px #777;
+ border: solid 1px var(--gray1);
margin-left: 0.5em;
margin-bottom: 0.5em;
}
div#cgit table#downloads th {
- background-color: #232627;
+ background-color: var(--bg1);
}
div#cgit div#blob {
@@ -299,7 +366,7 @@ div#cgit div#blob {
}
div#cgit div.error {
- color: red;
+ color: var(--red1);
font-weight: bold;
margin: 1em 2em;
}
@@ -328,14 +395,14 @@ div#cgit table.blob td.hashes,
div#cgit table.blob td.lines {
margin: 0; padding: 0 0 0 0.5em;
vertical-align: top;
- color: white;
+ color: var(--fg1);
}
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(--gray2);
}
div#cgit table.blob pre {
@@ -344,14 +411,14 @@ div#cgit table.blob pre {
div#cgit table.blob td.linenumbers a,
div#cgit table.ssdiff td.lineno a {
- color: gray;
+ color: var(--gray2);
text-align: right;
text-decoration: none;
}
div#cgit table.blob td.linenumbers a:hover,
div#cgit table.ssdiff td.lineno a:hover {
- color: white;
+ color: var(--fg1);
}
div#cgit table.blame td.hashes,
@@ -370,11 +437,11 @@ div#cgit table.blame td.linenumbers div.alt {
}
div#cgit table.blame div.alt:nth-child(even) {
- background: #151515;
+ background: var(--bg3);
}
div#cgit table.blame div.alt:nth-child(odd) {
- background: #232627;
+ background: var(--bg1);
}
div#cgit table.blame td.lines > div {
@@ -395,14 +462,14 @@ div#cgit table.bin-blob {
div#cgit table.bin-blob th {
font-family: monospace;
white-space: pre;
- border: solid 1px #777;
+ border: solid 1px var(--gray1);
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(--gray1);
padding: 0em 1em;
}
@@ -422,8 +489,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(--accent1);
+ background-color: var(--bg1);
}
div#cgit div.cgit-panel th {
@@ -491,8 +558,8 @@ div#cgit div.diffstat-header {
div#cgit table.diffstat {
border-collapse: collapse;
- border: solid 1px #aaa;
- background-color: #eee;
+ border: solid 1px var(--accent1);
+ background-color: var(--bg1);
}
div#cgit table.diffstat th {
@@ -515,19 +582,19 @@ div#cgit table.diffstat td.mode {
div#cgit table.diffstat td span.modechange {
padding-left: 1em;
- color: red;
+ color: var(--red1);
}
div#cgit table.diffstat td.add a {
- color: green;
+ color: var(--green1);
}
div#cgit table.diffstat td.del a {
- color: red;
+ color: var(--red1);
}
div#cgit table.diffstat td.upd a {
- color: blue;
+ color: var(--fg-disabled);
}
div#cgit table.diffstat td.graph {
@@ -546,15 +613,15 @@ div#cgit table.diffstat td.graph td {
}
div#cgit table.diffstat td.graph td.add {
- background-color: #5c5;
+ background-color: var(--green2);
}
div#cgit table.diffstat td.graph td.rem {
- background-color: #c55;
+ background-color: var(--red4);
}
div#cgit div.diffstat-summary {
- color: #888;
+ color: var(--gray3);
padding-top: 0.5em;
}
@@ -574,15 +641,15 @@ div#cgit table.diff td div.head {
}
div#cgit table.diff td div.hunk {
- color: #009;
+ color: var(--blue2);
}
div#cgit table.diff td div.add {
- color: green;
+ color: var(--green1);
}
div#cgit table.diff td div.del {
- color: red;
+ color: var(--red1);
}
div#cgit .sha1 {
@@ -600,7 +667,7 @@ div#cgit .right {
div#cgit table.list td.reposection {
font-style: italic;
- color: #888;
+ color: var(--gray3);
}
div#cgit a.button {
@@ -637,7 +704,7 @@ div#cgit ul.pager li {
}
div#cgit ul.pager a {
- color: #777;
+ color: var(--gray1);
}
div#cgit ul.pager .current {
@@ -646,11 +713,11 @@ div#cgit ul.pager .current {
div#cgit span.age-mins {
font-weight: bold;
- color: #080;
+ color: var(--green4);
}
div#cgit span.age-hours {
- color: #080;
+ color: var(--green4);
}
div#cgit span.age-days {
@@ -662,7 +729,7 @@ div#cgit span.age-weeks {
}
div#cgit span.age-months {
- color: #888;
+ color: var(--gray3);
}
div#cgit span.age-years {
@@ -670,7 +737,7 @@ div#cgit span.age-years {
}
div#cgit span.insertions {
- color: #080;
+ color: var(--green4);
}
div#cgit span.deletions {
@@ -765,7 +832,7 @@ div#cgit table.stats td.total {
}
div#cgit table.stats td.sum {
- color: #c00;
+ color: var(--red2);
font-weight: bold;
/* background-color: #eee; */
}
@@ -783,7 +850,7 @@ div#cgit table.vgraph {
div#cgit table.vgraph th {
background-color: #eee;
font-weight: bold;
- border: solid 1px white;
+ border: solid 1px var(--fg1);
padding: 1px 0.5em;
}
@@ -933,4 +1000,3 @@ div#cgit table.blob .kwa { color:#000000; font-weight:bold; }
div#cgit table.blob .kwb { color:#0057ae; }
div#cgit table.blob .kwc { color:#000000; font-weight:bold; }
div#cgit table.blob .kwd { color:#010181; }
-