diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--assets/cgit.css689
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;
Copyright © 2026 Bryce Kwon. All Rights Deprecated.