9f3df4899f
When a <pre> section (commit message, blob, diff) has a very long line, today it makes the entire page very wide, causing usability issues. This patch makes <pre> have a horizontal scroll in those cases, which is easier to use.
289 lines
4.2 KiB
CSS
289 lines
4.2 KiB
CSS
/*
|
|
* git-arr style sheet
|
|
*/
|
|
body {
|
|
font-family: sans-serif;
|
|
padding: 0 1em 1em 1em;
|
|
}
|
|
|
|
h1 {
|
|
background: #ddd;
|
|
padding: 0.3em;
|
|
}
|
|
|
|
h2, h3 {
|
|
border-bottom: 1px solid #ccc;
|
|
padding-bottom: 0.3em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
background-color: #e3e3e3;
|
|
height: 1px;
|
|
}
|
|
|
|
|
|
/* By default, use implied links, more discrete for increased readability. */
|
|
a {
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
color: #800;
|
|
}
|
|
|
|
|
|
/* Explicit links */
|
|
a.explicit {
|
|
color: #038;
|
|
}
|
|
|
|
a.explicit:hover, a.explicit:active {
|
|
color: #880000;
|
|
}
|
|
|
|
|
|
/* 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: #eee;
|
|
}
|
|
|
|
|
|
/* Table for commits. */
|
|
table.commits td.date {
|
|
font-style: italic;
|
|
color: gray;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
table.commits td.subject {
|
|
min-width: 32em;
|
|
}
|
|
}
|
|
|
|
table.commits td.author {
|
|
color: gray;
|
|
}
|
|
|
|
|
|
/* 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: gray;
|
|
}
|
|
|
|
|
|
/* Reference annotations. */
|
|
span.refs {
|
|
margin: 0px 0.5em;
|
|
padding: 0px 0.25em;
|
|
border: solid 1px gray;
|
|
}
|
|
|
|
span.head {
|
|
background-color: #88ff88;
|
|
}
|
|
|
|
span.tag {
|
|
background-color: #ffff88;
|
|
}
|
|
|
|
|
|
/* Projects table */
|
|
table.projects td.name a {
|
|
color: #038;
|
|
}
|
|
|
|
|
|
/* Age of an object.
|
|
* Note this is hidden by default as we rely on javascript to show it. */
|
|
span.age {
|
|
display: none;
|
|
color: gray;
|
|
font-size: smaller;
|
|
}
|
|
|
|
span.age-band0 {
|
|
color: darkgreen;
|
|
}
|
|
|
|
span.age-band1 {
|
|
color: green;
|
|
}
|
|
|
|
span.age-band2 {
|
|
color: seagreen;
|
|
}
|
|
|
|
|
|
/* 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: green;
|
|
}
|
|
|
|
table.changed-files span.lines-deleted {
|
|
color: red;
|
|
}
|
|
|
|
|
|
/* Pagination. */
|
|
div.paginate {
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
div.paginate span.inactive {
|
|
color: gray;
|
|
}
|
|
|
|
|
|
/* 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: gray;
|
|
}
|
|
|
|
|
|
/* 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: darkgray;
|
|
border-right: 1px solid #eee;
|
|
}
|
|
|
|
table.blob-binary tr.etc {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* Pygments overrides. */
|
|
div.linenodiv {
|
|
padding-right: 0.5em;
|
|
font-size: larger;
|
|
/* must match div.source_code */
|
|
}
|
|
|
|
div.linenodiv a {
|
|
color: gray;
|
|
}
|
|
|
|
div.source_code {
|
|
background: inherit;
|
|
font-size: larger;
|
|
}
|
|
|
|
|
|
/* 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: gray;
|
|
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: #038;
|
|
}
|
|
|
|
div.markdown a:hover, div.markdown a:active {
|
|
color: #880000;
|
|
}
|
|
|
|
|
|
/* Restrict max width for readability */
|
|
div.markdown {
|
|
max-width: 55em;
|
|
}
|