From 4ce57f5ec9498ed92e91f593f2f684dba6f89309 Mon Sep 17 00:00:00 2001 From: Bryce Kwon Date: Wed, 15 Jul 2026 10:32:42 -1000 Subject: 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. --- assets/cgit.css | 689 ++++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 465 insertions(+), 224 deletions(-) (limited to 'assets/cgit.css') 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.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; -- cgit v2.8.0