From 6402bd073274d32aa1a564e0792b4f155299a65d Mon Sep 17 00:00:00 2001 From: Thedro Neely Date: Wed, 1 Mar 2023 06:38:36 -0500 Subject: css: custom Add custom image and favicon. Slightly modernize interface with custom CSS style sheet. Adjust markdown filter. Highlight line number #id in code preview. --- cgit.c | 2 +- cgit.css | 393 ++++++++++++++++++++++++++-------------- cgit.png | Bin 1366 -> 873 bytes favicon.ico | Bin 1078 -> 4286 bytes filters/html-converters/md2html | 5 - ui-refs.c | 3 +- ui-shared.c | 2 +- ui-summary.c | 5 +- 8 files changed, 259 insertions(+), 151 deletions(-) diff --git a/cgit.c b/cgit.c index 57d7097..09aff89 100644 --- a/cgit.c +++ b/cgit.c @@ -622,7 +622,7 @@ static int prepare_repo_cmd(int nongit) cgit_print_pageheader(); cgit_print_error("Repository seems to be empty"); if (!strcmp(ctx.qry.page, "summary")) { - html("\n"); + html("
 
Clone
\n"); cgit_prepare_repo_env(ctx.repo); cgit_add_clone_urls(print_no_repo_clone_urls); html("
 
Clone
\n"); diff --git a/cgit.css b/cgit.css index 1b848cf..230390a 100644 --- a/cgit.css +++ b/cgit.css @@ -1,15 +1,54 @@ +::selection { + background-color: #c4e3f3; + color: #000; +} + +::-webkit-selection { + background-color: #c4e3f3; + color: #000; +} + +::-moz-selection { + background-color: #c4e3f3; + color: #000; +} + +@media (prefers-color-scheme: dark) { + html { + filter: invert(0.9); + } +} + +html { + font-size: 14px; + background-color: #fff; + background-image: linear-gradient(#f9fafb 142px, #fff 143px); + background-repeat: no-repeat; + overflow-y: scroll; + box-sizing: border-box; + line-height: 1.5; +} + +code pre span { + background-color: transparent !important; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + div#cgit { - padding: 0em; - margin: 0em; - font-family: sans-serif; - font-size: 10pt; color: #333; - background: white; - padding: 4px; + font-family: sans-serif; + margin: 0 auto; + max-width: 1088px; + padding: 0 2em; } div#cgit a { - color: blue; + color: #024ca1; text-decoration: none; } @@ -19,73 +58,120 @@ div#cgit a:hover { div#cgit table { border-collapse: collapse; + border-spacing: 0; } -div#cgit table#header { - width: 100%; - margin-bottom: 1em; +div#cgit td, +div#cgit td th { + padding: 0; } -div#cgit table#header td.logo { - width: 96px; - vertical-align: top; +div#cgit table#header { + width: 100%; + margin-top: 1em; + white-space: nowrap; } div#cgit table#header td.main { - font-size: 250%; + font-size: 200%; padding-left: 10px; white-space: nowrap; } +div#cgit table#header td.sub { + padding-left: 10px; + color: #474747; +} + +div#cgit table#header td.logo { + width: 3em; +} + div#cgit table#header td.main a { - color: #000; + color: #024ca1; } div#cgit table#header td.form { text-align: right; - vertical-align: bottom; - padding-right: 1em; - padding-bottom: 2px; white-space: nowrap; } -div#cgit table#header td.form form, -div#cgit table#header td.form input, -div#cgit table#header td.form select { - font-size: 90%; +div#cgit input[type="submit"], +div#cgit select[name="qt"] { + text-transform: capitalize; +} + +div#cgit input[type="submit"], +div#cgit select { + cursor: pointer; +} + +div#cgit input, +div#cgit select { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background-color: #fff; + border-radius: 0.25em; + border: 1px solid #ccc; + box-shadow: 0 0.02em #aaa; + min-height: 1em; + padding: 0.4em 0.75em; +} + +div#cgit input[type="search"] { + background-color: #fff; } div#cgit table#header td.sub { - color: #777; - border-top: solid 1px #ccc; + color: #575757; padding-left: 10px; } div#cgit table.tabs { - border-bottom: solid 3px #ccc; - border-collapse: collapse; - margin-top: 2em; - margin-bottom: 0px; width: 100%; + margin-top: 1em; +} + +div#cgit table.tabs:after { + border-bottom: 1px solid #ccc; + content: ""; + left: 0; + position: absolute; + top: 142px; + width: 100%; + z-index: -1; } div#cgit table.tabs td { - padding: 0px 1em; + padding: 0.5em 0; vertical-align: bottom; + white-space: nowrap; } div#cgit table.tabs td a { - padding: 2px 0.75em; - color: #777; - font-size: 110%; + color: #575757; + margin-right: 1.25em; + padding: 0.8em 1em; + display: inline-block; +} + +div#cgit table.tabs td a:first-letter { + text-transform: uppercase; } div#cgit table.tabs td a.active { + background-color: white; + border-bottom: 1px solid #fff; + border-left: 1px solid #ccc; + border-radius: 0.3em 0.3em 0 0; + border-right: 1px solid #ccc; + border-top: 1px solid #ccc; color: #000; - background-color: #ccc; } -div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https://"]:after { +div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https://"]:after +{ content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgAhcJDQY+gm2TAAAAHWlUWHRDb21tZW50AAAAAABDcmVhdGVkIHdpdGggR0lNUGQuZQcAAABbSURBVAhbY2BABs4MU4CwhYHBh2Erww4wrGFQZHjI8B8IgUIscJWyDHcggltQhI4zGDCcRwhChPggHIggP1QoAVmQkSETrGoHsiAEsACtBYN0oDAMbgU6EBcAAL2eHUt4XUU4AAAAAElFTkSuQmCC); opacity: 0.5; margin: 0 0 0 5px; @@ -96,38 +182,35 @@ div#cgit table.tabs td.form { } div#cgit table.tabs td.form form { - padding-bottom: 2px; - font-size: 90%; + padding-bottom: 0.6em; white-space: nowrap; } -div#cgit table.tabs td.form input, -div#cgit table.tabs td.form select { - font-size: 90%; +div#cgit div.path { + margin-top: 1em; + margin-bottom: -0.75em; + padding: 0.75em 0; + color: #444; + font-weight: 700; } -div#cgit div.path { - margin: 0px; - padding: 5px 2em 2px 2em; - color: #000; - background-color: #eee; +div#cgit div.path a { + padding: 0 0.5em; + font-weight: 400; } div#cgit div.content { - margin: 0px; - padding: 2em; - border-bottom: solid 3px #ccc; + margin: 0 -0.5em; + padding: 1em 0.5em; } - div#cgit table.list { - width: 100%; - border: none; - border-collapse: collapse; + table-layout: fixed; } div#cgit table.list tr { background: white; + border: 1px solid #ddd; } div#cgit table.list tr.logheader { @@ -135,15 +218,19 @@ div#cgit table.list tr.logheader { } div#cgit table.list tr:nth-child(even) { - background: #f7f7f7; + background: #f9fafb; } div#cgit table.list tr:nth-child(odd) { - background: white; + background: #f5f5f5; +} + +div#cgit table.list tr.empty { + border: none; } div#cgit table.list tr:hover { - background: #eee; + background: #ffffd6; } div#cgit table.list tr.nohover { @@ -154,27 +241,17 @@ div#cgit table.list tr.nohover:hover { background: white; } -div#cgit table.list tr.nohover-highlight:hover:nth-child(even) { - background: #f7f7f7; -} - -div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) { - background: white; -} - 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; + font-weight: 400; + padding: 0.9em 1.5em; vertical-align: baseline; + background-color: #e5f2ff; + color: #000; } div#cgit table.list td { - border: none; - padding: 0.1em 0.5em 0.1em 0.5em; + padding: 0.75em 1.5em; + width: 1032px; } div#cgit table.list td.commitgraph { @@ -213,21 +290,37 @@ div#cgit table.list td.logsubject { div#cgit table.list td.logmsg { font-family: monospace; - white-space: pre; + white-space: pre-wrap; padding: 0 0.5em; + overflow: initial; } -div#cgit table.list td a { - color: black; +div#cgit table[summary="repository list"] tr td:nth-child(2) a, +div#cgit table[summary="repository list"] th:nth-child(2), +div#cgit table[summary="repository list"] th:nth-child(3), +div#cgit table[summary="repository list"] td:nth-child(2), +div#cgit table[summary="repository list"] td:nth-child(3) { + display: none; +} + +div#cgit table[summary="repository list"] td:last-child, +table[summary="repository list"] th:last-child { + border-right: 1px solid #ddd; +} + +div#cgit table.list td > a { + padding: 0.75em 0; + color: #333; + line-height: 1.8; } div#cgit table.list td a.ls-dir { font-weight: bold; - color: #00f; + color: #024ca1; } div#cgit table.list td a:hover { - color: #00f; + color: #024ca1; } div#cgit img { @@ -260,7 +353,6 @@ div#cgit div#summary { div#cgit table#downloads { float: right; - border-collapse: collapse; border: solid 1px #777; margin-left: 0.5em; margin-bottom: 0.5em; @@ -280,7 +372,9 @@ div#cgit div.error { margin: 1em 2em; } -div#cgit a.ls-blob, div#cgit a.ls-dir, div#cgit .ls-mod { +div#cgit a.ls-blob, +div#cgit a.ls-dir, +div#cgit .ls-mod { font-family: monospace; } @@ -296,38 +390,55 @@ div#cgit td.ls-mode { } div#cgit table.blob { - margin-top: 0.5em; - border-top: solid 1px black; + margin-top: 2em; } div#cgit table.blob td.hashes, div#cgit table.blob td.lines { - margin: 0; padding: 0 0 0 0.5em; + margin: 0; + padding: 0 0 0 0.5em; vertical-align: top; color: black; } div#cgit table.blob td.linenumbers { - margin: 0; padding: 0 0.5em 0 0.5em; + margin: 0; + padding: 0 0.5em 0 0.5em; vertical-align: top; text-align: right; - border-right: 1px solid gray; } div#cgit table.blob pre { - padding: 0; margin: 0; + padding: 0; + margin: 0; +} + +td.linenumbers a:focus { + font-weight: 700; + outline: 2px solid; } div#cgit table.blob td.linenumbers a, div#cgit table.ssdiff td.lineno a { - color: gray; + color: #024ca1; text-align: right; text-decoration: none; } div#cgit table.blob td.linenumbers a:hover, div#cgit table.ssdiff td.lineno a:hover { - color: black; + font-weight: 700; +} + +div#cgit table.blob a:target::before { + display: block; + content: ""; + height: 17.5px; + width: 100%; + z-index: -1; + position: absolute; + left: 0; + background: #e6f2d9; } div#cgit table.blame td.hashes, @@ -386,24 +497,17 @@ div#cgit table.bin-blob td { padding: 0em 1em; } -div#cgit table.nowrap td { - white-space: nowrap; -} - div#cgit table.commit-info { - border-collapse: collapse; margin-top: 1.5em; } div#cgit div.cgit-panel { float: right; margin-top: 1.5em; + text-transform: capitalize; } div#cgit div.cgit-panel table { - border-collapse: collapse; - border: solid 1px #aaa; - background-color: #eee; } div#cgit div.cgit-panel th { @@ -411,7 +515,7 @@ div#cgit div.cgit-panel th { } div#cgit div.cgit-panel td { - padding: 0.25em 0.5em; + padding: 0.4em 0; } div#cgit div.cgit-panel td.label { @@ -465,14 +569,15 @@ div#cgit div.notes-footer { } div#cgit div.diffstat-header { - font-weight: bold; - padding-top: 1.5em; + font-weight: 700; + padding-top: 1em; + padding-bottom: 0.5em; + font-family: monospace; + text-transform: uppercase; } div#cgit table.diffstat { - border-collapse: collapse; - border: solid 1px #aaa; - background-color: #eee; + font-family: monospace; } div#cgit table.diffstat th { @@ -495,11 +600,11 @@ div#cgit table.diffstat td.mode { div#cgit table.diffstat td span.modechange { padding-left: 1em; - color: red; + color: #b30000; } div#cgit table.diffstat td.add a { - color: green; + color: #006600; } div#cgit table.diffstat td.del a { @@ -507,7 +612,7 @@ div#cgit table.diffstat td.del a { } div#cgit table.diffstat td.upd a { - color: blue; + color: #024ca1; } div#cgit table.diffstat td.graph { @@ -534,8 +639,9 @@ div#cgit table.diffstat td.graph td.rem { } div#cgit div.diffstat-summary { - color: #888; + color: #575757; padding-top: 0.5em; + font-family: monospace; } div#cgit table.diff { @@ -544,13 +650,20 @@ div#cgit table.diff { div#cgit table.diff td { font-family: monospace; - white-space: pre; +} + +div#cgit table.diff td div { + word-break: break-all; + white-space: pre-wrap; } div#cgit table.diff td div.head { - font-weight: bold; - margin-top: 1em; + border-top: 1px solid #ccc; color: black; + margin-bottom: 1em; + margin-top: 1em; + padding-top: 1em; + font-weight: bold; } div#cgit table.diff td div.hunk { @@ -567,7 +680,6 @@ div#cgit table.diff td div.del { div#cgit .oid { font-family: monospace; - font-size: 90%; } div#cgit .left { @@ -579,12 +691,10 @@ div#cgit .right { } div#cgit table.list td.reposection { - font-style: italic; - color: #888; + color: #575757; } -div#cgit a.button { - font-size: 80%; +div#cgit table.list a.button { padding: 0em 0.5em; } @@ -597,11 +707,14 @@ div#cgit a.secondary { } div#cgit td.toplevel-repo { - } div#cgit table.list td.sublevel-repo { - padding-left: 1.5em; + padding: 0 2.5em; +} + +div#cgit table.list td.sublevel-repo > a { + display: block; } div#cgit ul.pager { @@ -617,7 +730,8 @@ div#cgit ul.pager li { } div#cgit ul.pager a { - color: #777; + color: #575757; + text-transform: uppercase; } div#cgit ul.pager .current { @@ -642,11 +756,11 @@ div#cgit span.age-weeks { } div#cgit span.age-months { - color: #888; + color: #555; } div#cgit span.age-years { - color: #bbb; + color: #666; } div#cgit span.insertions { @@ -658,14 +772,15 @@ div#cgit span.deletions { } div#cgit div.footer { + color: #575757; + font-size: 80%; margin-top: 0.5em; text-align: center; - font-size: 80%; - color: #ccc; + text-transform: uppercase; } div#cgit div.footer a { - color: #ccc; + font-weight: 700; text-decoration: none; } @@ -673,44 +788,52 @@ div#cgit div.footer a:hover { text-decoration: underline; } +div#cgit span.decoration { + margin-left: 0.5em; +} + +div#cgit span.decoration a { + margin-right: 0.5em; +} + div#cgit a.branch-deco { color: #000; - margin: 0px 0.5em; padding: 0px 0.25em; background-color: #88ff88; border: solid 1px #007700; + border-radius: 0.25em; } div#cgit a.tag-deco { color: #000; - margin: 0px 0.5em; padding: 0px 0.25em; background-color: #ffff88; border: solid 1px #777700; + border-radius: 0.25em; } div#cgit a.tag-annotated-deco { color: #000; - margin: 0px 0.5em; padding: 0px 0.25em; background-color: #ffcc88; border: solid 1px #777700; + border-radius: 0.25em; } div#cgit a.remote-deco { color: #000; - margin: 0px 0.5em; padding: 0px 0.25em; background-color: #ccccff; border: solid 1px #000077; + border-radius: 0.25em; } div#cgit a.deco { color: #000; - margin: 0px 0.5em; padding: 0px 0.25em; background-color: #ff8888; border: solid 1px #770000; + border-radius: 0.25em; } div#cgit div.commit-subject a.branch-deco, @@ -718,13 +841,11 @@ div#cgit div.commit-subject a.tag-deco, div#cgit div.commit-subject a.tag-annotated-deco, div#cgit div.commit-subject a.remote-deco, div#cgit div.commit-subject a.deco { - margin-left: 1em; font-size: 75%; } div#cgit table.stats { border: solid 1px black; - border-collapse: collapse; } div#cgit table.stats th { @@ -748,7 +869,7 @@ div#cgit table.stats td.total { div#cgit table.stats td.sum { color: #c00; font-weight: bold; -/* background-color: #eee; */ + /* background-color: #eee; */ } div#cgit table.stats td.left { @@ -756,7 +877,6 @@ div#cgit table.stats td.left { } div#cgit table.vgraph { - border-collapse: separate; border: solid 1px black; height: 200px; } @@ -801,15 +921,13 @@ div#cgit table.hgraph div.bar { div#cgit table.ssdiff { width: 100%; + margin-top: -1em; } div#cgit table.ssdiff td { - font-size: 75%; font-family: monospace; - white-space: pre; padding: 1px 4px 1px 4px; - border-left: solid 1px #aaa; - border-right: solid 1px #aaa; + word-break: break-all; } div#cgit table.ssdiff td.add { @@ -859,11 +977,8 @@ div#cgit table.ssdiff td.changed_dark { } div#cgit table.ssdiff td.lineno { - color: black; - background: #eee; - text-align: right; - width: 3em; - min-width: 3em; + color: #000; + word-break: normal; } div#cgit table.ssdiff td.hunk { @@ -874,8 +989,7 @@ div#cgit table.ssdiff td.hunk { } div#cgit table.ssdiff td.head { - border-top: solid 1px #aaa; - border-bottom: solid 1px #aaa; + padding-bottom: 1em; } div#cgit table.ssdiff td.head div.head { @@ -884,7 +998,6 @@ div#cgit table.ssdiff td.head div.head { } div#cgit table.ssdiff td.foot { - border-top: solid 1px #aaa; border-left: none; border-right: none; border-bottom: none; diff --git a/cgit.png b/cgit.png index 425528e..5e1b275 100644 Binary files a/cgit.png and b/cgit.png differ diff --git a/favicon.ico b/favicon.ico index 56ff593..386bcc2 100644 Binary files a/favicon.ico and b/favicon.ico differ diff --git a/filters/html-converters/md2html b/filters/html-converters/md2html index 59f43a8..19104db 100755 --- a/filters/html-converters/md2html +++ b/filters/html-converters/md2html @@ -66,7 +66,6 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div# } .markdown-body h2 { font-size: 24px; - border-bottom: 1px solid #ccc; color: #000; } .markdown-body h3 { @@ -269,13 +268,9 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div# background: transparent; } .markdown-body .highlight pre, .markdown-body pre { - background-color: #f8f8f8; - border: 1px solid #ccc; font-size: 13px; line-height: 19px; overflow: auto; - padding: 6px 10px; - border-radius: 3px; } .markdown-body pre code, .markdown-body pre tt { margin: 0; diff --git a/ui-refs.c b/ui-refs.c index 456f610..47df732 100644 --- a/ui-refs.c +++ b/ui-refs.c @@ -197,6 +197,7 @@ void cgit_print_tags(int maxcount) if (maxcount < list.count) print_refs_link("tags"); + html(" "); cgit_free_reflist_inner(&list); } @@ -211,7 +212,7 @@ void cgit_print_refs(void) cgit_print_tags(0); else { cgit_print_branches(0); - html(" "); + html(" "); cgit_print_tags(0); } html(""); diff --git a/ui-shared.c b/ui-shared.c index baea6f2..49bb668 100644 --- a/ui-shared.c +++ b/ui-shared.c @@ -1034,7 +1034,7 @@ static void print_header(void) html(""); if (ctx.repo) { cgit_index_link("index", NULL, NULL, NULL, NULL, 0, 1); - html(" : "); + html(" / "); cgit_summary_link(ctx.repo->name, NULL, NULL, NULL); if (ctx.env.authenticated) { html(""); diff --git a/ui-summary.c b/ui-summary.c index 947812a..b68ca20 100644 --- a/ui-summary.c +++ b/ui-summary.c @@ -27,7 +27,7 @@ static void print_url(const char *url) columns++; if (urls++ == 0) { - htmlf(" ", columns); + htmlf(" ", columns); htmlf("Clone\n", columns); } @@ -52,10 +52,9 @@ void cgit_print_summary(void) cgit_print_layout_start(); html(""); cgit_print_branches(ctx.cfg.summary_branches); - htmlf("", columns); + htmlf("", columns); cgit_print_tags(ctx.cfg.summary_tags); if (ctx.cfg.summary_log > 0) { - htmlf("", columns); cgit_print_log(ctx.qry.head, 0, ctx.cfg.summary_log, NULL, NULL, NULL, 0, 0, 0); } -- cgit v1.2.3