722247c2be
In the index, if the descriptions are too long, it can make the table quite awkward to read. This patch makes them truncate automatically.
347 lines
6.1 KiB
CSS
347 lines
6.1 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);
|
|
}
|
|
|
|
|
|
/* Truncate long descriptions based on the viewport width. */
|
|
table.projects td.desc {
|
|
max-width: 50vw;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
/* 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;
|
|
}
|