dff4ff6757
Pygments 2.12 changes the element layout slightly, adding a wrapper <div> that was accidentally removed before: https://github.com/pygments/pygments/issues/632. This patch adds a workaround, so the styling is consistent on both 2.11 and 2.12.
338 lines
5.9 KiB
CSS
338 lines
5.9 KiB
CSS
/*
|
|
* git-arr style sheet
|
|
*/
|
|
:root {
|
|
--body-bg: white;
|
|
--text-fg: black;
|
|
--h1-bg: #ddd;
|
|
--hr-bg: #e3e3e3;
|
|
--text-lowcontrast-fg: grey;
|
|
--a-fg: #800;
|
|
--a-explicit-fg: #038;
|
|
--table-hover-bg: #eee;
|
|
--head-bg: #88ff88;
|
|
--tag-bg: #ffff88;
|
|
--age-fg0: darkgreen;
|
|
--age-fg1: green;
|
|
--age-fg2: seagreen;
|
|
--diff-added-fg: green;
|
|
--diff-deleted-fg: red;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--body-bg: #121212;
|
|
--text-fg: #c9d1d9;
|
|
--h1-bg: #2f2f2f;
|
|
--hr-bg: #e3e3e3;
|
|
--text-lowcontrast-fg: grey;
|
|
--a-fg: #d4b263;
|
|
--a-explicit-fg: #44b4ec;
|
|
--table-hover-bg: #313131;
|
|
--head-bg: #020;
|
|
--tag-bg: #333000;
|
|
--age-fg0: #51a552;
|
|
--age-fg1: #468646;
|
|
--age-fg2: #2f722f;
|
|
--diff-added-fg: #00A000;
|
|
--diff-deleted-fg: #A00000;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
padding: 0 1em 1em 1em;
|
|
color: var(--text-fg);
|
|
background: var(--body-bg);
|
|
}
|
|
|
|
h1 {
|
|
background: var(--h1-bg);
|
|
padding: 0.3em;
|
|
}
|
|
|
|
h2, h3 {
|
|
border-bottom: 1px solid #ccc;
|
|
padding-bottom: 0.3em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
background-color: var(--hr-bg);
|
|
height: 1px;
|
|
}
|
|
|
|
|
|
/* By default, use implied links, more discrete for increased readability. */
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--text-fg);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--a-fg);
|
|
}
|
|
|
|
|
|
/* Explicit links */
|
|
a.explicit {
|
|
color: var(--a-explicit-fg);
|
|
}
|
|
|
|
a.explicit:hover, a.explicit:active {
|
|
color: var(--a-fg);
|
|
}
|
|
|
|
|
|
/* Normal table, for listing things like repositories, branches, etc. */
|
|
table.nice {
|
|
text-align: left;
|
|
}
|
|
|
|
table.nice td {
|
|
padding: 0.15em 0.5em;
|
|
}
|
|
|
|
table.nice td.links {
|
|
}
|
|
|
|
table.nice td.main {
|
|
min-width: 10em;
|
|
}
|
|
|
|
table.nice tr:hover {
|
|
background: var(--table-hover-bg);
|
|
}
|
|
|
|
|
|
/* Table for commits. */
|
|
table.commits td.date {
|
|
font-style: italic;
|
|
color: var(--text-lowcontrast-fg);
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
table.commits td.subject {
|
|
min-width: 32em;
|
|
}
|
|
}
|
|
|
|
table.commits td.author {
|
|
color: var(--text-lowcontrast-fg);
|
|
}
|
|
|
|
|
|
/* Table for commit information. */
|
|
table.commit-info tr:hover {
|
|
background: inherit;
|
|
}
|
|
|
|
table.commit-info td {
|
|
vertical-align: top;
|
|
}
|
|
|
|
table.commit-info span.date, span.email {
|
|
color: var(--text-lowcontrast-fg);
|
|
}
|
|
|
|
|
|
/* Reference annotations. */
|
|
span.refs {
|
|
margin: 0px 0.5em;
|
|
padding: 0px 0.25em;
|
|
border: solid 1px var(--text-lowcontrast-fg);
|
|
}
|
|
|
|
span.head {
|
|
background-color: var(--head-bg);
|
|
}
|
|
|
|
span.tag {
|
|
background-color: var(--tag-bg);
|
|
}
|
|
|
|
|
|
/* Projects table */
|
|
table.projects td.name a {
|
|
color: var(--a-explicit-fg);
|
|
}
|
|
|
|
|
|
/* Age of an object.
|
|
* Note this is hidden by default as we rely on javascript to show it. */
|
|
span.age {
|
|
display: none;
|
|
color: var(--text-lowcontrast-fg);
|
|
font-size: smaller;
|
|
}
|
|
|
|
span.age-band0 {
|
|
color: var(--age-fg0);
|
|
}
|
|
|
|
span.age-band1 {
|
|
color: var(--age-fg1);
|
|
}
|
|
|
|
span.age-band2 {
|
|
color: var(--age-fg2);
|
|
}
|
|
|
|
|
|
/* Toggable titles */
|
|
div.toggable-title {
|
|
font-weight: bold;
|
|
margin-bottom: 0.3em;
|
|
}
|
|
|
|
pre {
|
|
/* Sometimes, <pre> elements (commit messages, diffs, blobs) have very
|
|
* long lines. In those case, use automatic overflow, which will
|
|
* introduce a horizontal scroll bar for this element only (more
|
|
* comfortable than stretching the page, which is the default). */
|
|
overflow: auto;
|
|
}
|
|
|
|
|
|
/* Commit message and diff. */
|
|
pre.commit-message {
|
|
font-size: large;
|
|
padding: 0.2em 0.5em;
|
|
}
|
|
|
|
pre.diff-body {
|
|
/* Note this is only used as a fallback if pygments is not available. */
|
|
}
|
|
|
|
table.changed-files {
|
|
font-family: monospace;
|
|
}
|
|
|
|
table.changed-files span.lines-added {
|
|
color: var(--diff-added-fg);
|
|
}
|
|
|
|
table.changed-files span.lines-deleted {
|
|
color: var(--diff-deleted-fg);
|
|
}
|
|
|
|
|
|
/* Pagination. */
|
|
div.paginate {
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
div.paginate span.inactive {
|
|
color: var(--text-lowcontrast-fg);
|
|
}
|
|
|
|
|
|
/* Directory listing. */
|
|
@media (min-width: 600px) {
|
|
table.ls td.name {
|
|
min-width: 20em;
|
|
}
|
|
}
|
|
|
|
table.ls {
|
|
font-family: monospace;
|
|
font-size: larger;
|
|
}
|
|
|
|
table.ls tr.blob td.size {
|
|
color: var(--text-lowcontrast-fg);
|
|
}
|
|
|
|
|
|
/* Blob. */
|
|
pre.blob-body {
|
|
/* Note this is only used as a fallback if pygments is not available. */
|
|
}
|
|
|
|
table.blob-binary pre {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
table.blob-binary .offset {
|
|
text-align: right;
|
|
font-size: x-small;
|
|
color: var(--text-lowcontrast-fg);
|
|
border-right: 1px solid var(--text-lowcontrast-fg);
|
|
}
|
|
|
|
table.blob-binary tr.etc {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* Pygments overrides. */
|
|
div.colorized-src {
|
|
font-size: larger;
|
|
}
|
|
|
|
div.colorized-src .source_code {
|
|
/* Ignore pygments style's background. */
|
|
background: var(--body-bg);
|
|
}
|
|
|
|
td.code > div.source_code {
|
|
/* This is a workaround, in pygments 2.11 there's a bug where the wrapper
|
|
* div is inside the table, so we need to override the descendant (because
|
|
* the style sets it on ".source_code" and the most specific value wins).
|
|
* Once we no longer support 2.11, we can remove this. */
|
|
background: var(--body-bg);
|
|
}
|
|
|
|
div.linenodiv {
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
div.linenodiv a {
|
|
color: var(--text-lowcontrast-fg);
|
|
}
|
|
|
|
|
|
/* Repository information table. */
|
|
table.repo_info tr:hover {
|
|
background: inherit;
|
|
}
|
|
|
|
table.repo_info td.category {
|
|
font-weight: bold;
|
|
/* So we can copy-paste rows and preserve spaces, useful for the row:
|
|
* git clone | url */
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
table.repo_info td {
|
|
vertical-align: top;
|
|
}
|
|
|
|
span.ctrlchr {
|
|
color: var(--text-lowcontrast-fg);
|
|
padding: 0 0.2ex 0 0.1ex;
|
|
margin: 0 0.2ex 0 0.1ex;
|
|
}
|
|
|
|
|
|
/*
|
|
* Markdown overrides
|
|
*/
|
|
|
|
/* Colored links (same as explicit links above) */
|
|
div.markdown a {
|
|
color: var(--a-explicit-fg);
|
|
}
|
|
|
|
div.markdown a:hover, div.markdown a:active {
|
|
color: var(--a-fg);
|
|
}
|
|
|
|
|
|
/* Restrict max width for readability */
|
|
div.markdown {
|
|
max-width: 55em;
|
|
}
|