From 8dc91b2ef734a2b0199cc50632652ee22e719675 Mon Sep 17 00:00:00 2001 From: Dejavu Moe Date: Sun, 14 May 2023 22:18:21 +0800 Subject: update cgit/cgit.css --- cgit/cgit.css | 142 +++++++++++++++++++++++++++++++++++----------------------- 1 file changed, 85 insertions(+), 57 deletions(-) diff --git a/cgit/cgit.css b/cgit/cgit.css index 6bb2f82..82e9c3f 100644 --- a/cgit/cgit.css +++ b/cgit/cgit.css @@ -1,15 +1,35 @@ +:root { + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace; + --body-bg: #faf6f2; + --hover-bg: #f4d2c1; + --table-lighter-bg: #eee; + --border-color: #8c7851; + --a-tag-color: #020826; + --a-hover-color: #020826; +} +body { + background: var(--body-bg); +} div#cgit { padding: 0em; margin: 0em; - font-family: sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, + Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, + 'Noto Sans SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'PingFang SC', + 'Source Han Sans SC', 'Hiragino Sans GB', 'Hiragino Sans', 'STHeitiSC-Light', + 'SimSun', 'WenQuanYi Zen Hei', 'LiHei Pro Medium', 'STXihei', + 'Noto Sans CJK SC', 'Meiryo UI', 'Malgun Gothic', sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', + 'Android Emoji', 'EmojiSymbols', 'EmojiOne'; font-size: 10pt; - color: #333; - background: white; + color: #171717; + background: var(--body-bg); padding: 4px; } div#cgit a { - color: blue; + color: var(--a-tag-color); text-decoration: none; } @@ -49,20 +69,28 @@ div#cgit table#header td.form { white-space: nowrap; } +/* All form elements styles */ +input, +select, +button { + background-color: var(--body-bg); + border: 1px solid var(--border-color); +} + div#cgit table#header td.form form, div#cgit table#header td.form input, div#cgit table#header td.form select { - font-size: 90%; + font-size: 100%; } div#cgit table#header td.sub { color: #777; - border-top: solid 1px #ccc; + border-top: solid 1px var(--border-color); padding-left: 10px; } div#cgit table.tabs { - border-bottom: solid 3px #ccc; + border-bottom: solid 3px var(--border-color); border-collapse: collapse; margin-top: 2em; margin-bottom: 0px; @@ -81,8 +109,8 @@ div#cgit table.tabs td a { } div#cgit table.tabs td a.active { - color: #000; - background-color: #ccc; + color: #fffffe; + background-color: var(--border-color); } div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https://"]:after @@ -98,26 +126,26 @@ div#cgit table.tabs td.form { div#cgit table.tabs td.form form { padding-bottom: 2px; - font-size: 90%; + font-size: 100%; white-space: nowrap; } div#cgit table.tabs td.form input, div#cgit table.tabs td.form select { - font-size: 90%; + font-size: 100%; } div#cgit div.path { margin: 0px; padding: 5px 2em 2px 2em; color: #000; - background-color: #eee; + background-color: var(--hover-bg); } div#cgit div.content { margin: 0px; padding: 2em; - border-bottom: solid 3px #ccc; + border-bottom: solid 3px var(--border-color); } div#cgit table.list { @@ -127,39 +155,39 @@ div#cgit table.list { } div#cgit table.list tr { - background: white; + background: var(--body-bg); } div#cgit table.list tr.logheader { - background: #eee; + background: var(--hover-bg); } div#cgit table.list tr:nth-child(even) { - background: #f7f7f7; + background: var(--table-lighter-bg); } div#cgit table.list tr:nth-child(odd) { - background: white; + background: var(--body-bg); } div#cgit table.list tr:hover { - background: #eee; + background: var(--hover-bg); } div#cgit table.list tr.nohover { - background: white; + background: var(--body-bg); } div#cgit table.list tr.nohover:hover { - background: white; + background: var(--body-bg); } div#cgit table.list tr.nohover-highlight:hover:nth-child(even) { - background: #f7f7f7; + background: var(--table-lighter-bg); } div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) { - background: white; + background: var(--body-bg); } div#cgit table.list th { @@ -178,7 +206,7 @@ div#cgit table.list td { } div#cgit table.list td.commitgraph { - font-family: monospace; + font-family: var(--font-mono); white-space: pre; } @@ -207,12 +235,12 @@ div#cgit table.list td.commitgraph .column6 { } 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; + font-family: var(--font-mono); white-space: pre; padding: 0 0.5em; } @@ -223,11 +251,11 @@ div#cgit table.list td a { div#cgit table.list td a.ls-dir { font-weight: bold; - color: #00f; + color: var(--a-hover-color); } div#cgit table.list td a:hover { - color: #00f; + color: var(--a-hover-color); } div#cgit img { @@ -267,7 +295,7 @@ div#cgit table#downloads { } div#cgit table#downloads th { - background-color: #ccc; + background-color: var(--border-color); } div#cgit div#blob { @@ -283,17 +311,17 @@ div#cgit div.error { 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; } @@ -351,11 +379,11 @@ div#cgit table.blame td.linenumbers div.alt { } div#cgit table.blame div.alt:nth-child(even) { - background: #eee; + background: var(--hover-bg); } div#cgit table.blame div.alt:nth-child(odd) { - background: white; + background: var(--body-bg); } div#cgit table.blame td.lines > div { @@ -378,14 +406,14 @@ div#cgit table.bin-blob { } div#cgit table.bin-blob th { - font-family: monospace; + font-family: var(--font-mono); white-space: pre; border: solid 1px #777; 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; padding: 0em 1em; @@ -408,7 +436,7 @@ div#cgit div.cgit-panel { div#cgit div.cgit-panel table { border-collapse: collapse; border: solid 1px #aaa; - background-color: #eee; + background-color: var(--hover-bg); } div#cgit div.cgit-panel th { @@ -448,7 +476,7 @@ div#cgit div.commit-subject { div#cgit div.commit-msg { white-space: pre; - font-family: monospace; + font-family: var(--font-mono); } div#cgit div.notes-header { @@ -458,7 +486,7 @@ div#cgit div.notes-header { div#cgit div.notes { white-space: pre; - font-family: monospace; + font-family: var(--font-mono); border: solid 1px #ee9; background-color: #ffd; padding: 0.3em 2em 0.3em 1em; @@ -477,7 +505,7 @@ div#cgit div.diffstat-header { div#cgit table.diffstat { border-collapse: collapse; border: solid 1px #aaa; - background-color: #eee; + background-color: var(--hover-bg); } div#cgit table.diffstat th { @@ -512,7 +540,7 @@ div#cgit table.diffstat td.del a { } div#cgit table.diffstat td.upd a { - color: blue; + color: var(--a-tag-color); } div#cgit table.diffstat td.graph { @@ -548,7 +576,7 @@ div#cgit table.diff { } div#cgit table.diff td { - font-family: monospace; + font-family: var(--font-mono); white-space: pre; } @@ -571,7 +599,7 @@ div#cgit table.diff td div.del { } div#cgit .oid { - font-family: monospace; + font-family: var(--font-mono); font-size: 90%; } @@ -665,23 +693,23 @@ div#cgit div.footer { margin-top: 0.5em; text-align: center; font-size: 80%; - color: #ccc; + color: var(--border-color); } div#cgit div.footer a { - color: #ccc; + color: var(--border-color); text-decoration: none; } div#cgit div.footer a:hover { - text-decoration: underline; + text-decoration: none; } div#cgit a.branch-deco { color: #000; margin: 0px 0.5em; padding: 0px 0.25em; - background-color: #88ff88; + background-color: #6ddc6d; border: solid 1px #007700; } @@ -705,7 +733,7 @@ div#cgit a.remote-deco { color: #000; margin: 0px 0.5em; padding: 0px 0.25em; - background-color: #ccccff; + background-color: var(--border-color) cff; border: solid 1px #000077; } @@ -713,7 +741,7 @@ div#cgit a.deco { color: #000; margin: 0px 0.5em; padding: 0px 0.25em; - background-color: #ff8888; + background-color: #ff6e6c; border: solid 1px #770000; } @@ -734,7 +762,7 @@ div#cgit table.stats { div#cgit table.stats th { text-align: left; padding: 1px 0.5em; - background-color: #eee; + background-color: var(--hover-bg); border: solid 1px black; } @@ -752,7 +780,7 @@ div#cgit table.stats td.total { div#cgit table.stats td.sum { color: #c00; font-weight: bold; - /* background-color: #eee; */ + /* background-color: var(--hover-bg); */ } div#cgit table.stats td.left { @@ -766,7 +794,7 @@ div#cgit table.vgraph { } div#cgit table.vgraph th { - background-color: #eee; + background-color: var(--hover-bg); font-weight: bold; border: solid 1px white; padding: 1px 0.5em; @@ -778,7 +806,7 @@ div#cgit table.vgraph td { } div#cgit table.vgraph div.bar { - background-color: #eee; + background-color: var(--hover-bg); } div#cgit table.hgraph { @@ -787,7 +815,7 @@ div#cgit table.hgraph { } div#cgit table.hgraph th { - background-color: #eee; + background-color: var(--hover-bg); font-weight: bold; border: solid 1px black; padding: 1px 0.5em; @@ -799,7 +827,7 @@ div#cgit table.hgraph td { } div#cgit table.hgraph div.bar { - background-color: #eee; + background-color: var(--hover-bg); height: 1em; } @@ -809,7 +837,7 @@ div#cgit table.ssdiff { 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; @@ -864,7 +892,7 @@ div#cgit table.ssdiff td.changed_dark { div#cgit table.ssdiff td.lineno { color: black; - background: #eee; + background: var(--hover-bg); text-align: right; width: 3em; min-width: 3em; @@ -928,6 +956,6 @@ div#cgit span.libravatar:hover > img.onhover { display: block; position: absolute; margin-left: 1.5em; - background-color: #eeeeee; + background-color: var(--hover-bg) eee; box-shadow: 5px 5px 3px #bbb; } -- cgit v1.2.3-54-g00ecf