Diff options
Diffstat (limited to 'assets/cgit.css')
| -rw-r--r-- | assets/cgit.css | 1609 |
1 file changed, 826 insertions, 783 deletions
diff --git a/assets/cgit.css b/assets/cgit.css index 4b793cf..6bef114 100644 --- a/assets/cgit.css +++ b/assets/cgit.css @@ -8,142 +8,139 @@ */ div#cgit { - color-scheme: light dark; - - /* Palette: light-dark(light value, dark value) */ - --bg: light-dark(#ffffff, #1b1b1b); - --fg: light-dark(#333333, #d6d6d6); - --muted: light-dark(#777777, #9a9a9a); - --faint: light-dark(#888888, #7f7f7f); - --footer-fg: light-dark(#bbbbbb, #666666); - --link: light-dark(#0053b3, #6ea8fe); - - --border: light-dark(#cccccc, #3a3a3a); - --border-mid: light-dark(#aaaaaa, #4a4a4a); - --border-strong: light-dark(#666666, #6a6a6a); - - --surface: light-dark(#eeeeee, #2a2a2a); - --surface-2: light-dark(#f7f7f7, #232323); - --row-hover: light-dark(#ebebeb, #303030); - --tab-active-bg: light-dark(#cccccc, #3a3a3a); - - --add: light-dark(#007000, #6cc26c); - --del: light-dark(#c00000, #e07070); - --upd: light-dark(#0000cc, #6ea8fe); - --hunk: light-dark(#000099, #7aa2f7); - --accent: light-dark(#cc0000, #ff6b6b); - /* Faded yellow wash for the fragment-targeted source line. Kept - * translucent so it reads over any token colour in both themes. */ - --line-hl: light-dark(rgba(212, 167, 44, 0.18), rgba(224, 192, 80, 0.14)); - - --notes-bg: light-dark(#ffffdd, #33331a); - --notes-border: light-dark(#eeee99, #55551f); - - --ss-add-bg: light-dark(#ccffcc, #24402a); - --ss-add-bg2: light-dark(#aaccaa, #2e4a33); - --ss-del-bg: light-dark(#ffcccc, #402424); - --ss-del-bg2: light-dark(#ccaaaa, #4a2e2e); - --ss-chg-bg: light-dark(#ffffcc, #40401f); - --ss-chg-bg2: light-dark(#ccccaa, #4a4a2e); - --ss-lineno-bg: light-dark(#eeeeee, #2a2a2a); - --ss-hunk-bg: light-dark(#ccccff, #2a2a45); - --graph-add: light-dark(#55cc55, #4a8f4a); - --graph-rem: light-dark(#cc5555, #8f4a4a); - - --age-mins: light-dark(#008000, #5cb85c); - --age-hours: light-dark(#008000, #5cb85c); - --age-days: light-dark(#004400, #7cba7c); - --age-weeks: light-dark(#444444, #a0a0a0); - --age-months: light-dark(#888888, #8a8a8a); - --age-years: light-dark(#bbbbbb, #6a6a6a); - - --deco-fg: light-dark(#000000, #f0f0f0); - --branch-bg: light-dark(#88ff88, #1c5c2c); - --branch-bd: light-dark(#007700, #2f8f3f); - --tag-bg: light-dark(#ffff88, #5c5c1c); - --tag-bd: light-dark(#777700, #8f8f2f); - --tag-ann-bg: light-dark(#ffcc88, #6c4a1c); - --tag-ann-bd: light-dark(#777700, #8f6f2f); - --remote-bg: light-dark(#ccccff, #2c2c6c); - --remote-bd: light-dark(#000077, #4a4a9f); - --head-bg: light-dark(#ff8888, #6c1c1c); - --head-bd: light-dark(#770000, #9f3f3f); - - --col1: light-dark(#aa0000, #ff6b6b); - --col2: light-dark(#00aa00, #6cc26c); - --col3: light-dark(#aaaa00, #cccc60); - --col4: light-dark(#0000aa, #6ea8fe); - --col5: light-dark(#aa00aa, #d06cd0); - --col6: light-dark(#00aaaa, #6cd0d0); - - --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; - --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, - "Liberation Mono", "DejaVu Sans Mono", monospace; - - /* Shared horizontal inset so every region lines up down the page. */ - --gutter: 1.25rem; - /* Shared height so the toggle, dropdowns and fields all agree. */ - --control-h: 2em; - /* Corner radii, one size for controls and blocks, smaller for - * inline code, smallest for ref badges. */ - --radius: 5px; - --radius-s: 3px; - --radius-xs: 2px; - - padding: 0; - margin: 0em; - font-family: var(--font-sans); - font-size: 13px; - line-height: 1.4; - /* Hold the type size steady when a phone is turned to landscape. */ - text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - color: var(--fg); - background: var(--bg); -} - -/* Explicit theme choices made through the header toggle. The marker is on - * <html> rather than div#cgit so the script can set it before the body is - * parsed, which is what keeps the first paint from showing the other theme. */ -html[data-theme="light"] div#cgit { color-scheme: light; } -html[data-theme="dark"] div#cgit { color-scheme: dark; } - -/* On a standalone cgit page, paint the page background to match the app - * and drop the default body margin so the interface is part of the page - * rather than a card floating on a mismatched canvas. Scoped to the - * cgit-standalone class so an embedding host page is left alone; the - * toggle keeps the two in sync by setting color-scheme on <html>. */ + color-scheme: light dark; + + /* Palette: light-dark(light value, dark value) */ + --bg: light-dark(#ffffff, #1b1b1b); + --fg: light-dark(#333333, #d6d6d6); + --muted: light-dark(#777777, #9a9a9a); + --faint: light-dark(#888888, #7f7f7f); + --footer-fg: light-dark(#bbbbbb, #666666); + --link: light-dark(#0053b3, #6ea8fe); + + --border: light-dark(#cccccc, #3a3a3a); + --border-mid: light-dark(#aaaaaa, #4a4a4a); + --border-strong: light-dark(#666666, #6a6a6a); + + --surface: light-dark(#eeeeee, #2a2a2a); + --surface-2: light-dark(#f7f7f7, #232323); + --row-hover: light-dark(#ebebeb, #303030); + --tab-active-bg: light-dark(#cccccc, #3a3a3a); + + --add: light-dark(#007000, #6cc26c); + --del: light-dark(#c00000, #e07070); + --upd: light-dark(#0000cc, #6ea8fe); + --hunk: light-dark(#000099, #7aa2f7); + --accent: light-dark(#cc0000, #ff6b6b); + /* Faded wash over the fragment targeted source line. */ + --line-hl: light-dark(rgba(212, 167, 44, 0.18), rgba(224, 192, 80, 0.14)); + + --notes-bg: light-dark(#ffffdd, #33331a); + --notes-border: light-dark(#eeee99, #55551f); + + --ss-add-bg: light-dark(#ccffcc, #24402a); + --ss-add-bg2: light-dark(#aaccaa, #2e4a33); + --ss-del-bg: light-dark(#ffcccc, #402424); + --ss-del-bg2: light-dark(#ccaaaa, #4a2e2e); + --ss-chg-bg: light-dark(#ffffcc, #40401f); + --ss-chg-bg2: light-dark(#ccccaa, #4a4a2e); + --ss-lineno-bg: light-dark(#eeeeee, #2a2a2a); + --ss-hunk-bg: light-dark(#ccccff, #2a2a45); + --graph-add: light-dark(#55cc55, #4a8f4a); + --graph-rem: light-dark(#cc5555, #8f4a4a); + + --age-mins: light-dark(#008000, #5cb85c); + --age-hours: light-dark(#008000, #5cb85c); + --age-days: light-dark(#004400, #7cba7c); + --age-weeks: light-dark(#444444, #a0a0a0); + --age-months: light-dark(#888888, #8a8a8a); + --age-years: light-dark(#bbbbbb, #6a6a6a); + + --deco-fg: light-dark(#000000, #f0f0f0); + --branch-bg: light-dark(#88ff88, #1c5c2c); + --branch-bd: light-dark(#007700, #2f8f3f); + --tag-bg: light-dark(#ffff88, #5c5c1c); + --tag-bd: light-dark(#777700, #8f8f2f); + --tag-ann-bg: light-dark(#ffcc88, #6c4a1c); + --tag-ann-bd: light-dark(#777700, #8f6f2f); + --remote-bg: light-dark(#ccccff, #2c2c6c); + --remote-bd: light-dark(#000077, #4a4a9f); + --head-bg: light-dark(#ff8888, #6c1c1c); + --head-bd: light-dark(#770000, #9f3f3f); + + --col1: light-dark(#aa0000, #ff6b6b); + --col2: light-dark(#00aa00, #6cc26c); + --col3: light-dark(#aaaa00, #cccc60); + --col4: light-dark(#0000aa, #6ea8fe); + --col5: light-dark(#aa00aa, #d06cd0); + --col6: light-dark(#00aaaa, #6cd0d0); + + --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; + --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, + "Liberation Mono", "DejaVu Sans Mono", monospace; + + /* Shared horizontal inset so every region lines up down the page. */ + --gutter: 1.25rem; + /* Shared height so the toggle, dropdowns and fields all agree. */ + --control-h: 2em; + + --radius: 5px; + --radius-s: 3px; + --radius-xs: 2px; + + padding: 0; + margin: 0em; + font-family: var(--font-sans); + font-size: 13px; + line-height: 1.4; + /* Hold the type size steady when a phone is turned to landscape. */ + text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + color: var(--fg); + background: var(--bg); +} + +/* Set on <html> by the script before the body parses. */ +html[data-theme="light"] div#cgit { + color-scheme: light; +} + +html[data-theme="dark"] div#cgit { + color-scheme: dark; +} + +/* Scoped so an embedding host page is left alone. */ html.cgit-standalone { - color-scheme: light dark; - background: light-dark(#ffffff, #1b1b1b); + color-scheme: light dark; + background: light-dark(#ffffff, #1b1b1b); } html.cgit-standalone, html.cgit-standalone body { - margin: 0; + margin: 0; } div#cgit * { - box-sizing: border-box; + box-sizing: border-box; } div#cgit a { - color: var(--link); - text-decoration: none; + color: var(--link); + text-decoration: none; } div#cgit a:hover { - text-decoration: underline; + text-decoration: underline; } div#cgit img { - border: none; - max-width: 100%; + border: none; + max-width: 100%; } div#cgit table { - border-collapse: collapse; + border-collapse: collapse; } /* Form controls */ @@ -151,392 +148,397 @@ div#cgit table { div#cgit select, div#cgit input, div#cgit button { - font-family: inherit; - font-size: inherit; - height: var(--control-h); - color: var(--fg); - background-color: var(--surface); - border: solid 1px var(--border); - border-radius: var(--radius); - padding: 0 0.5em; - line-height: 1.3; - vertical-align: middle; + font-family: inherit; + font-size: inherit; + height: var(--control-h); + color: var(--fg); + background-color: var(--surface); + border: solid 1px var(--border); + border-radius: var(--radius); + padding: 0 0.5em; + line-height: 1.3; + vertical-align: middle; } div#cgit input[type="search"], div#cgit input[type="text"] { - background-color: var(--bg); + background-color: var(--bg); } div#cgit select { - appearance: none; - -webkit-appearance: none; - padding-right: 1.7em; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 0.55em center; - cursor: pointer; + appearance: none; + -webkit-appearance: none; + padding-right: 1.7em; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 0.55em center; + cursor: pointer; } div#cgit button, div#cgit input[type="submit"] { - cursor: pointer; + cursor: pointer; } div#cgit select:hover, div#cgit button:hover, div#cgit input[type="submit"]:hover { - border-color: var(--border-mid); - color: var(--fg); + border-color: var(--border-mid); + color: var(--fg); } div#cgit select:focus-visible, div#cgit input:focus-visible, div#cgit button:focus-visible { - outline: 2px solid var(--link); - outline-offset: 1px; + outline: 2px solid var(--link); + outline-offset: 1px; } /* Masthead */ div#cgit #header { - display: grid; - grid-template-columns: auto 1fr auto auto; - /* The owner spans the switcher and toggle columns so it right-aligns - * to the same edge as the toggle above it. Confined to the switcher - * column alone it stopped short by the toggle's width plus the gap. */ - grid-template-areas: - "logo heading switch theme" - "logo desc owner owner"; - align-items: center; - column-gap: 10px; - width: 100%; - padding: 0.85rem var(--gutter) 0.55rem; - margin-bottom: 0; + display: grid; + grid-template-columns: auto 1fr auto auto; + grid-template-areas: + "logo heading switch theme" + "logo desc owner owner"; + align-items: center; + column-gap: 10px; + width: 100%; + padding: 0.85rem var(--gutter) 0.55rem; + margin-bottom: 0; } div#cgit #header .theme-toggle { - grid-area: theme; - justify-self: end; - align-self: center; - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--control-h); - height: var(--control-h); - padding: 0; - color: var(--muted); - background-color: var(--surface); - border: solid 1px var(--border); - border-radius: var(--radius); - cursor: pointer; - line-height: 1; -} - -/* Keep the button hidden until the script reveals it, since the display - * rule above would otherwise override the hidden attribute. */ + grid-area: theme; + justify-self: end; + align-self: center; + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--control-h); + height: var(--control-h); + padding: 0; + color: var(--muted); + background-color: var(--surface); + border: solid 1px var(--border); + border-radius: var(--radius); + cursor: pointer; + line-height: 1; +} + +/* The display rule above would defeat the hidden attribute. */ div#cgit #header .theme-toggle[hidden] { - display: none; + display: none; } div#cgit #header .theme-toggle:hover { - color: var(--fg); - border-color: var(--border-mid); + color: var(--fg); + border-color: var(--border-mid); } div#cgit #header .theme-toggle svg { - width: 1.1em; - height: 1.1em; - fill: none; - stroke: currentColor; - stroke-width: 2; - stroke-linecap: round; - stroke-linejoin: round; -} - -/* The toggle starts hidden and is revealed once the script has run, so its - * column is reserved up front to keep the header from jumping. Only when - * scripting is on, otherwise the space would sit empty forever. */ + width: 1.1em; + height: 1.1em; + fill: none; + stroke: currentColor; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; +} + +/* Reserved up front so the reveal does not shift the header. */ html.cgit-js div#cgit #header { - grid-template-columns: auto 1fr auto var(--control-h); + grid-template-columns: auto 1fr auto var(--control-h); } -/* Reserve the logo's box so the header does not grow when the image - * arrives. The height matches the shipped 192x128 logo capped to 96px. */ +/* Reserved so the header holds still while the image loads. */ div#cgit #header .logo { - grid-area: logo; - align-self: start; - min-width: 96px; - min-height: 64px; + grid-area: logo; + align-self: start; + min-width: 96px; + min-height: 64px; } div#cgit #header .logo img { - display: block; - max-width: 96px; + display: block; + max-width: 96px; } div#cgit #header h1.main { - grid-area: heading; - margin: 0; - font-size: 250%; - font-weight: normal; - white-space: nowrap; + grid-area: heading; + margin: 0; + font-size: 250%; + font-weight: normal; + white-space: nowrap; } div#cgit #header h1.main a { - color: var(--fg); + color: var(--fg); } div#cgit #header .branch-switch { - grid-area: switch; - justify-self: end; - align-self: center; + grid-area: switch; + justify-self: end; + align-self: center; } div#cgit #header .branch-switch select { - max-width: 40vw; + max-width: 40vw; } div#cgit #header .sub { - grid-area: desc; - margin: 0; - color: var(--muted); - overflow-wrap: anywhere; + grid-area: desc; + margin: 0; + color: var(--muted); + overflow-wrap: anywhere; } -/* The rule under the masthead. A grid pseudo item rather than a border - * on the description, so it runs from the title through under the - * branch switcher and theme toggle to the right edge. */ +/* The rule under the masthead, run out to the right edge. */ div#cgit #header::before { - content: ""; - grid-column: 2 / -1; - grid-row: 2; - align-self: start; - height: 0; - border-top: solid 1px var(--border); + content: ""; + grid-column: 2 / -1; + grid-row: 2; + align-self: start; + height: 0; + border-top: solid 1px var(--border); } div#cgit #header .owner { - grid-area: owner; - justify-self: end; - text-align: right; + grid-area: owner; + justify-self: end; + text-align: right; } /* Tab bar */ div#cgit .tabs { - display: flex; - flex-wrap: wrap; - align-items: flex-end; - gap: 0.15em 0.75em; - border-bottom: solid 2px var(--border); - padding: 0 var(--gutter); - margin-top: 0.5rem; + display: flex; + flex-wrap: wrap; + align-items: flex-end; + gap: 0.15em 0.75em; + border-bottom: solid 2px var(--border); + padding: 0 var(--gutter); + margin-top: 0.5rem; } div#cgit .tabs ul { - display: flex; - flex-wrap: wrap; - align-items: flex-end; - flex: 1 1 auto; - gap: 0.1em 0.15em; - list-style: none; - margin: 0; - padding: 0; + display: flex; + flex-wrap: wrap; + align-items: flex-end; + flex: 1 1 auto; + gap: 0.1em 0.15em; + list-style: none; + margin: 0; + padding: 0; } div#cgit .tabs li { - margin: 0; + margin: 0; } div#cgit .tabs a { - display: inline-block; - padding: 0.3em 0.7em; - color: var(--muted); - border-radius: var(--radius) var(--radius) 0 0; + display: inline-block; + padding: 0.3em 0.7em; + color: var(--muted); + border-radius: var(--radius) var(--radius) 0 0; } div#cgit .tabs a:hover { - color: var(--fg); - background-color: var(--surface); - text-decoration: none; + color: var(--fg); + background-color: var(--surface); + text-decoration: none; } div#cgit .tabs a.active { - color: var(--fg); - background-color: var(--tab-active-bg); + color: var(--fg); + background-color: var(--tab-active-bg); } -/* Outbound-link marker on tabs that leave the site. Drawn through a - * mask filled with currentColor, so it follows the tab's text colour - * in both themes instead of staying a fixed-colour image. */ +/* Outbound marker on tabs that leave the site. */ div#cgit .tabs a.external:after { - content: ""; - display: inline-block; - width: 0.7em; - height: 0.7em; - margin-left: 5px; - vertical-align: -0.02em; - background-color: currentColor; - opacity: 0.6; - -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M19 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; - mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M19 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; + content: ""; + display: inline-block; + width: 0.7em; + height: 0.7em; + margin-left: 5px; + vertical-align: -0.02em; + background-color: currentColor; + opacity: 0.6; + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M19 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M19 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; } div#cgit .tabs .search { - padding-bottom: 2px; - white-space: nowrap; + padding-bottom: 2px; + white-space: nowrap; } div#cgit input.txt { - max-width: 12em; + max-width: 12em; } /* Page frame */ div#cgit .path { - margin: 0px; - padding: 0.45rem var(--gutter); - color: var(--fg); - background-color: var(--surface); - overflow-wrap: anywhere; + margin: 0px; + padding: 0.45rem var(--gutter); + color: var(--fg); + background-color: var(--surface); + overflow-wrap: anywhere; } div#cgit .content { - margin: 0px; - padding: 1.25rem var(--gutter); - border-bottom: solid 1px var(--border); - overflow-x: auto; + margin: 0px; + padding: 1.25rem var(--gutter); + border-bottom: solid 1px var(--border); + overflow-x: auto; } /* Listing tables */ div#cgit table.list { - width: 100%; - border: none; - border-collapse: collapse; + width: 100%; + border: none; + border-collapse: collapse; } div#cgit table.list tr { - background: var(--bg); + background: var(--bg); } div#cgit table.list tr.logheader { - background: var(--surface); + background: var(--surface); } div#cgit table.list tr:nth-child(even) { - background: var(--surface-2); + background: var(--surface-2); } div#cgit table.list tr:nth-child(odd) { - background: var(--bg); + background: var(--bg); } div#cgit table.list tr:hover { - background: var(--row-hover); + background: var(--row-hover); } div#cgit table.list tr.nohover { - background: var(--bg); + background: var(--bg); } div#cgit table.list tr.nohover:hover { - background: var(--bg); + background: var(--bg); } div#cgit table.list tr.nohover-highlight:hover:nth-child(even) { - background: var(--surface-2); + background: var(--surface-2); } div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) { - background: var(--bg); + background: var(--bg); } div#cgit table.list th { - font-weight: bold; - padding: 0.35em 0.6em 0.3em 0.6em; - vertical-align: baseline; + font-weight: bold; + padding: 0.35em 0.6em 0.3em 0.6em; + vertical-align: baseline; } div#cgit table.list td { - border: none; - padding: 0.3em 0.6em 0.3em 0.6em; + border: none; + padding: 0.3em 0.6em 0.3em 0.6em; } div#cgit table.list td.commitgraph { - font-family: var(--font-mono); - white-space: pre; + font-family: var(--font-mono); + white-space: pre; +} + +div#cgit table.list td.commitgraph .column1 { + color: var(--col1); +} + +div#cgit table.list td.commitgraph .column2 { + color: var(--col2); +} + +div#cgit table.list td.commitgraph .column3 { + color: var(--col3); +} + +div#cgit table.list td.commitgraph .column4 { + color: var(--col4); +} + +div#cgit table.list td.commitgraph .column5 { + color: var(--col5); } -div#cgit table.list td.commitgraph .column1 { color: var(--col1); } -div#cgit table.list td.commitgraph .column2 { color: var(--col2); } -div#cgit table.list td.commitgraph .column3 { color: var(--col3); } -div#cgit table.list td.commitgraph .column4 { color: var(--col4); } -div#cgit table.list td.commitgraph .column5 { color: var(--col5); } -div#cgit table.list td.commitgraph .column6 { color: var(--col6); } +div#cgit table.list td.commitgraph .column6 { + color: var(--col6); +} div#cgit table.list td.logsubject { - font-weight: bold; + font-weight: bold; } div#cgit table.list td.logmsg { - font-family: var(--font-mono); - white-space: pre-wrap; - overflow-wrap: anywhere; - padding: 0 0.5em; + font-family: var(--font-mono); + white-space: pre-wrap; + overflow-wrap: anywhere; + padding: 0 0.5em; } div#cgit table.list td a { - color: var(--fg); + color: var(--fg); } div#cgit table.list td a.ls-dir { - font-weight: bold; - color: var(--link); + font-weight: bold; + color: var(--link); } div#cgit table.list td a:hover { - color: var(--link); + color: var(--link); } /* Repository index */ div#cgit div#summary { - vertical-align: top; - margin-bottom: 1em; + vertical-align: top; + margin-bottom: 1em; } div#cgit div#summary img, div#cgit div#summary video { - max-width: 100%; + max-width: 100%; } div#cgit div#summary pre { - overflow-x: auto; + overflow-x: auto; } -/* A plaintext readme served without an about filter. Wrapped instead of - * scrolled, since prose is the common case. */ +/* Wrapped rather than scrolled, prose is the common case. */ div#cgit pre.plaintext { - white-space: pre-wrap; - overflow-wrap: anywhere; - font-family: var(--font-mono); - line-height: 1.5; - margin: 0; + white-space: pre-wrap; + overflow-wrap: anywhere; + font-family: var(--font-mono); + line-height: 1.5; + margin: 0; } div#cgit .markdown { - line-height: 1.6; - overflow-wrap: break-word; + line-height: 1.6; + overflow-wrap: break-word; } div#cgit .markdown > :first-child { - margin-top: 0; + margin-top: 0; } div#cgit .markdown > :last-child { - margin-bottom: 0; + margin-bottom: 0; } div#cgit .markdown h1, @@ -545,504 +547,550 @@ div#cgit .markdown h3, div#cgit .markdown h4, div#cgit .markdown h5, div#cgit .markdown h6 { - margin: 1.2em 0 0.5em; - font-weight: bold; - line-height: 1.25; + margin: 1.2em 0 0.5em; + font-weight: bold; + line-height: 1.25; +} + +div#cgit .markdown h1 { + font-size: 1.6em; } -div#cgit .markdown h1 { font-size: 1.6em; } div#cgit .markdown h2 { - font-size: 1.35em; - border-bottom: 1px solid var(--border); - padding-bottom: 0.2em; + font-size: 1.35em; + border-bottom: 1px solid var(--border); + padding-bottom: 0.2em; +} + +div#cgit .markdown h3 { + font-size: 1.15em; } -div#cgit .markdown h3 { font-size: 1.15em; } -div#cgit .markdown h4 { font-size: 1em; } + +div#cgit .markdown h4 { + font-size: 1em; +} + div#cgit .markdown h5, -div#cgit .markdown h6 { font-size: 0.9em; color: var(--muted); } +div#cgit .markdown h6 { + font-size: 0.9em; + color: var(--muted); +} -div#cgit .markdown p { margin: 0.7em 0; } -div#cgit .markdown a { color: var(--link); } +div#cgit .markdown p { + margin: 0.7em 0; +} + +div#cgit .markdown a { + color: var(--link); +} div#cgit .markdown ul, -div#cgit .markdown ol { margin: 0.7em 0; padding-left: 2em; } -div#cgit .markdown li { margin: 0.2em 0; } +div#cgit .markdown ol { + margin: 0.7em 0; + padding-left: 2em; +} + +div#cgit .markdown li { + margin: 0.2em 0; +} div#cgit .markdown blockquote { - margin: 0.7em 0; - padding: 0.1em 1em; - color: var(--muted); - border-left: 3px solid var(--border-mid); + margin: 0.7em 0; + padding: 0.1em 1em; + color: var(--muted); + border-left: 3px solid var(--border-mid); } div#cgit .markdown hr { - border: none; - border-top: 1px solid var(--border); - margin: 1.2em 0; + border: none; + border-top: 1px solid var(--border); + margin: 1.2em 0; } div#cgit .markdown code { - background: var(--surface-2); - border: 1px solid var(--border); - border-radius: var(--radius-s); - padding: 0.1em 0.35em; - font-size: 0.95em; + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: var(--radius-s); + padding: 0.1em 0.35em; + font-size: 0.95em; } div#cgit .markdown pre { - background: var(--surface-2); - border: 1px solid var(--border); - border-radius: var(--radius); - padding: 0.7em 0.9em; - overflow-x: auto; + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 0.7em 0.9em; + overflow-x: auto; } div#cgit .markdown pre code { - background: none; - border: none; - padding: 0; + background: none; + border: none; + padding: 0; } div#cgit .markdown table { - border-collapse: collapse; - margin: 0.7em 0; + border-collapse: collapse; + margin: 0.7em 0; } div#cgit .markdown th, div#cgit .markdown td { - border: 1px solid var(--border); - padding: 0.35em 0.7em; + border: 1px solid var(--border); + padding: 0.35em 0.7em; } -div#cgit .markdown th { background: var(--surface-2); } +div#cgit .markdown th { + background: var(--surface-2); +} div#cgit div#blob { - border: solid 1px var(--border-strong); + border: solid 1px var(--border-strong); } div#cgit div.error { - color: var(--accent); - font-weight: bold; - margin: 1em 2em; + color: var(--accent); + font-weight: bold; + margin: 1em 2em; } div#cgit table.list td.reposection { - font-style: italic; - color: var(--faint); + font-style: italic; + color: var(--faint); } div#cgit table.list td.sublevel-repo { - padding-left: 1.5em; + padding-left: 1.5em; } /* Directory / blob listings */ -div#cgit a.ls-blob, div#cgit a.ls-dir, div#cgit .ls-mod { - font-family: var(--font-mono); +div#cgit a.ls-blob, +div#cgit a.ls-dir, +div#cgit .ls-mod { + font-family: var(--font-mono); } div#cgit td.ls-size { - text-align: right; - font-family: var(--font-mono); - width: 10em; + text-align: right; + font-family: var(--font-mono); + width: 10em; } div#cgit td.ls-mode { - font-family: var(--font-mono); - width: 10em; + font-family: var(--font-mono); + width: 10em; } /* Source blob */ div#cgit table.blob { - margin-top: 0.5em; - border-top: solid 1px var(--border-strong); - display: block; - width: max-content; - max-width: 100%; - overflow-x: auto; + margin-top: 0.5em; + border-top: solid 1px var(--border-strong); + display: block; + width: max-content; + max-width: 100%; + overflow-x: auto; } -div#cgit table.blob td.hashes, div#cgit table.blob td.lines { - margin: 0; padding: 0 0 0 0.5em; - vertical-align: top; - color: var(--fg); + margin: 0; + padding: 0 0 0 0.5em; + vertical-align: top; + color: var(--fg); } div#cgit table.blob td.linenumbers { - margin: 0; padding: 0 0.5em 0 0.5em; - vertical-align: top; - text-align: right; - border-right: 1px solid var(--border-mid); + margin: 0; + padding: 0 0.5em 0 0.5em; + vertical-align: top; + text-align: right; + border-right: 1px solid var(--border-mid); } div#cgit table.blob pre { - padding: 0; margin: 0; - font-family: var(--font-mono); + padding: 0; + margin: 0; + font-family: var(--font-mono); } div#cgit table.blob td.linenumbers a, div#cgit table.ssdiff td.lineno a { - color: var(--muted); - text-align: right; - text-decoration: none; + color: var(--muted); + text-align: right; + text-decoration: none; } div#cgit table.blob td.linenumbers a:hover, div#cgit table.ssdiff td.lineno a:hover { - color: var(--fg); + color: var(--fg); } /* Land a fragment-targeted line mid-viewport rather than at the top. */ div#cgit table.blob td.linenumbers a, div#cgit table.blame td.linenumbers a { - scroll-margin-top: calc(50vh - 1em); + scroll-margin-top: calc(50vh - 1em); } -/* No-JS fallback tints the targeted number itself; cgit.js widens the - * highlight into the full-width bar below. */ +/* Without scripting only the line number itself is tinted. */ div#cgit table.blob td.linenumbers a:target, div#cgit table.blame td.linenumbers a:target { - background: var(--line-hl); - color: var(--fg); + background: var(--line-hl); + color: var(--fg); } /* Anchor box for the highlight bar cgit.js positions over the target. */ div#cgit table.blob, div#cgit table.blame { - position: relative; + position: relative; } div#cgit div.line-hl { - position: absolute; - left: 0; - right: 0; - background: var(--line-hl); - pointer-events: none; + position: absolute; + left: 0; + right: 0; + background: var(--line-hl); + pointer-events: none; } /* Tokens produced by the syntax-highlight.lua source filter. */ -div#cgit .hl-comment { color: light-dark(#6a737d, #8b949e); font-style: italic; } -div#cgit .hl-keyword { color: light-dark(#cf222e, #ff7b72); } -div#cgit .hl-string { color: light-dark(#0a7d24, #7ee787); } -div#cgit .hl-number { color: light-dark(#0550ae, #79c0ff); } -div#cgit .hl-type { color: light-dark(#953800, #ffa657); } -div#cgit .hl-func { color: light-dark(#6639ba, #d2a8ff); } +div#cgit .hl-comment { + color: light-dark(#6a737d, #8b949e); + font-style: italic; +} + +div#cgit .hl-keyword { + color: light-dark(#cf222e, #ff7b72); +} + +div#cgit .hl-string { + color: light-dark(#0a7d24, #7ee787); +} + +div#cgit .hl-number { + color: light-dark(#0550ae, #79c0ff); +} + +div#cgit .hl-type { + color: light-dark(#953800, #ffa657); +} + +div#cgit .hl-func { + color: light-dark(#6639ba, #d2a8ff); +} /* Blame */ div#cgit table.blame { - display: block; - width: max-content; - max-width: 100%; - overflow-x: auto; + display: block; + width: max-content; + max-width: 100%; + overflow-x: auto; } div#cgit table.blame td.hashes, div#cgit table.blame td.lines, div#cgit table.blame td.linenumbers { - padding: 0; + padding: 0; } div#cgit table.blame td.hashes div.alt, div#cgit table.blame td.lines div.alt { - padding: 0 0.5em 0 0.5em; + padding: 0 0.5em 0 0.5em; } div#cgit table.blame td.linenumbers div.alt { - padding: 0 0.5em 0 0; + padding: 0 0.5em 0 0; } div#cgit table.blame div.alt:nth-child(even) { - background: var(--surface); + background: var(--surface); } div#cgit table.blame div.alt:nth-child(odd) { - background: var(--bg); + background: var(--bg); } div#cgit table.blame td.lines > div { - position: relative; + position: relative; } div#cgit table.blame td.lines > div > pre { - padding: 0 0 0 0.5em; - position: absolute; - top: 0; - font-family: var(--font-mono); + padding: 0 0 0 0.5em; + position: absolute; + top: 0; + font-family: var(--font-mono); } div#cgit table.blame .oid { - font-size: 100%; + font-size: 100%; } /* Binary blob */ div#cgit table.bin-blob { - margin-top: 0.5em; - border: solid 1px var(--border-strong); - display: block; - width: max-content; - max-width: 100%; - overflow-x: auto; + margin-top: 0.5em; + border: solid 1px var(--border-strong); + display: block; + width: max-content; + max-width: 100%; + overflow-x: auto; } div#cgit table.bin-blob th { - font-family: var(--font-mono); - white-space: pre; - border: solid 1px var(--border-mid); - padding: 0.5em 1em; + font-family: var(--font-mono); + white-space: pre; + border: solid 1px var(--border-mid); + padding: 0.5em 1em; } div#cgit table.bin-blob td { - font-family: var(--font-mono); - white-space: pre; - border-left: solid 1px var(--border-mid); - padding: 0em 1em; + font-family: var(--font-mono); + white-space: pre; + border-left: solid 1px var(--border-mid); + padding: 0em 1em; } /* Commit / tag */ div#cgit table.nowrap td { - white-space: nowrap; + white-space: nowrap; } div#cgit table.commit-info { - border-collapse: collapse; - margin-top: 1.5em; + border-collapse: collapse; + margin-top: 1.5em; } div#cgit div.cgit-panel { - float: right; - margin-top: 1.5em; + float: right; + margin-top: 1.5em; } div#cgit div.cgit-panel table { - border-collapse: collapse; - border: solid 1px var(--border-mid); - background-color: var(--surface); + border-collapse: collapse; + border: solid 1px var(--border-mid); + background-color: var(--surface); } div#cgit div.cgit-panel th { - text-align: center; + text-align: center; } div#cgit div.cgit-panel td { - padding: 0.25em 0.5em; + padding: 0.25em 0.5em; } div#cgit div.cgit-panel td.label { - padding-right: 0.5em; + padding-right: 0.5em; } div#cgit div.cgit-panel td.ctrl { - padding-left: 0.5em; + padding-left: 0.5em; } div#cgit table.commit-info th { - text-align: left; - font-weight: normal; - padding: 0.1em 1em 0.1em 0.1em; - vertical-align: top; + text-align: left; + font-weight: normal; + padding: 0.1em 1em 0.1em 0.1em; + vertical-align: top; } div#cgit table.commit-info td { - font-weight: normal; - padding: 0.1em 1em 0.1em 0.1em; - overflow-wrap: anywhere; + font-weight: normal; + padding: 0.1em 1em 0.1em 0.1em; + overflow-wrap: anywhere; } div#cgit div.commit-subject { - font-weight: bold; - font-size: 125%; - margin: 1.5em 0em 0.5em 0em; - padding: 0em; - overflow-wrap: anywhere; + font-weight: bold; + font-size: 125%; + margin: 1.5em 0em 0.5em 0em; + padding: 0em; + overflow-wrap: anywhere; } div#cgit div.commit-msg { - white-space: pre-wrap; - overflow-wrap: anywhere; - font-family: var(--font-mono); + white-space: pre-wrap; + overflow-wrap: anywhere; + font-family: var(--font-mono); } div#cgit div.notes-header { - font-weight: bold; - padding-top: 1.5em; + font-weight: bold; + padding-top: 1.5em; } div#cgit div.notes { - white-space: pre-wrap; - overflow-wrap: anywhere; - font-family: var(--font-mono); - border: solid 1px var(--notes-border); - background-color: var(--notes-bg); - padding: 0.3em 2em 0.3em 1em; - float: left; + white-space: pre-wrap; + overflow-wrap: anywhere; + font-family: var(--font-mono); + border: solid 1px var(--notes-border); + background-color: var(--notes-bg); + padding: 0.3em 2em 0.3em 1em; + float: left; } div#cgit div.notes-footer { - clear: left; + clear: left; } /* Diffstat */ div#cgit div.diffstat-header { - font-weight: bold; - padding-top: 1.5em; + font-weight: bold; + padding-top: 1.5em; } div#cgit table.diffstat { - border-collapse: collapse; - border: solid 1px var(--border-mid); - background-color: var(--surface); - max-width: 100%; + border-collapse: collapse; + border: solid 1px var(--border-mid); + background-color: var(--surface); + max-width: 100%; } div#cgit table.diffstat th { - font-weight: normal; - text-align: left; - text-decoration: underline; - padding: 0.1em 1em 0.1em 0.1em; + font-weight: normal; + text-align: left; + text-decoration: underline; + padding: 0.1em 1em 0.1em 0.1em; } div#cgit table.diffstat td { - padding: 0.2em 0.2em 0.1em 0.1em; - border: none; + padding: 0.2em 0.2em 0.1em 0.1em; + border: none; } div#cgit table.diffstat td.mode { - white-space: nowrap; + white-space: nowrap; } div#cgit table.diffstat td span.modechange { - padding-left: 1em; - color: var(--del); + padding-left: 1em; + color: var(--del); } div#cgit table.diffstat td.add a { - color: var(--add); + color: var(--add); } div#cgit table.diffstat td.del a { - color: var(--del); + color: var(--del); } div#cgit table.diffstat td.upd a { - color: var(--upd); + color: var(--upd); } div#cgit table.diffstat td.graph { - width: 500px; - max-width: 40vw; - vertical-align: middle; + width: 500px; + max-width: 40vw; + vertical-align: middle; } div#cgit table.diffstat td.graph table { - border: none; - width: 100%; + border: none; + width: 100%; } div#cgit table.diffstat td.graph td { - padding: 0px; - border: 0px; - height: 7pt; + padding: 0px; + border: 0px; + height: 7pt; } div#cgit table.diffstat td.graph td.add { - background-color: var(--graph-add); + background-color: var(--graph-add); } div#cgit table.diffstat td.graph td.rem { - background-color: var(--graph-rem); + background-color: var(--graph-rem); } div#cgit div.diffstat-summary { - color: var(--faint); - padding-top: 0.5em; + color: var(--faint); + padding-top: 0.5em; } /* Unified diff */ div#cgit table.diff { - width: 100%; + width: 100%; } div#cgit table.diff td { - font-family: var(--font-mono); - white-space: pre; + font-family: var(--font-mono); + white-space: pre; } div#cgit table.diff td div.head { - font-weight: bold; - margin-top: 1em; - color: var(--fg); - white-space: pre-wrap; - overflow-wrap: anywhere; + font-weight: bold; + margin-top: 1em; + color: var(--fg); + white-space: pre-wrap; + overflow-wrap: anywhere; } div#cgit table.diff td div.hunk { - color: var(--hunk); + color: var(--hunk); } div#cgit table.diff td div.add { - color: var(--add); + color: var(--add); } div#cgit table.diff td div.del { - color: var(--del); + color: var(--del); } -/* Notice shown in place of a diff that exceeds max-diff-lines or - * max-diff-files, pointing at the page that renders it in full. */ +/* Notice shown when a diff exceeds the configured limits. */ div#cgit div.truncated, div#cgit table.ssdiff td.truncated { - color: var(--muted); - font-family: var(--font-sans); - white-space: normal; - padding: 0.4em 0; + color: var(--muted); + font-family: var(--font-sans); + white-space: normal; + padding: 0.4em 0; } div#cgit .oid { - font-family: var(--font-mono); - font-size: 90%; - overflow-wrap: anywhere; + font-family: var(--font-mono); + font-size: 90%; + overflow-wrap: anywhere; } div#cgit .left { - text-align: left; + text-align: left; } div#cgit .right { - text-align: right; + text-align: right; } /* Buttons / pager */ div#cgit a.button { - font-size: 90%; - padding: 0em 0.5em; + font-size: 90%; + padding: 0em 0.5em; } div#cgit ul.pager { - list-style-type: none; - text-align: center; - margin: 1em 0em 0em 0em; - padding: 0; + list-style-type: none; + text-align: center; + margin: 1em 0em 0em 0em; + padding: 0; } div#cgit ul.pager li { - display: inline-block; - margin: 0.25em 0.5em; + display: inline-block; + margin: 0.25em 0.5em; } div#cgit ul.pager a { - color: var(--muted); + color: var(--muted); } div#cgit ul.pager .current { - font-weight: bold; + font-weight: bold; } /* Ages / line counts */ @@ -1053,58 +1101,58 @@ div#cgit span.age-days, div#cgit span.age-weeks, div#cgit span.age-months, div#cgit span.age-years { - white-space: nowrap; + white-space: nowrap; } div#cgit span.age-mins { - font-weight: bold; - color: var(--age-mins); + font-weight: bold; + color: var(--age-mins); } div#cgit span.age-hours { - color: var(--age-hours); + color: var(--age-hours); } div#cgit span.age-days { - color: var(--age-days); + color: var(--age-days); } div#cgit span.age-weeks { - color: var(--age-weeks); + color: var(--age-weeks); } div#cgit span.age-months { - color: var(--age-months); + color: var(--age-months); } div#cgit span.age-years { - color: var(--age-years); + color: var(--age-years); } div#cgit span.insertions { - color: var(--add); + color: var(--add); } div#cgit span.deletions { - color: var(--del); + color: var(--del); } /* Footer */ div#cgit .footer { - padding: 0.85rem var(--gutter); - text-align: center; - font-size: 85%; - color: var(--footer-fg); + padding: 0.85rem var(--gutter); + text-align: center; + font-size: 85%; + color: var(--footer-fg); } div#cgit .footer a { - color: var(--footer-fg); - text-decoration: none; + color: var(--footer-fg); + text-decoration: none; } div#cgit .footer a:hover { - text-decoration: underline; + text-decoration: underline; } /* Ref decorations */ @@ -1114,52 +1162,52 @@ div#cgit a.tag-deco, div#cgit a.tag-annotated-deco, div#cgit a.remote-deco, div#cgit a.deco { - white-space: nowrap; + white-space: nowrap; } div#cgit a.branch-deco { - color: var(--deco-fg); - margin: 0px 0.5em; - padding: 0px 0.25em; - background-color: var(--branch-bg); - border: solid 1px var(--branch-bd); - border-radius: var(--radius-xs); + color: var(--deco-fg); + margin: 0px 0.5em; + padding: 0px 0.25em; + background-color: var(--branch-bg); + border: solid 1px var(--branch-bd); + border-radius: var(--radius-xs); } div#cgit a.tag-deco { - color: var(--deco-fg); - margin: 0px 0.5em; - padding: 0px 0.25em; - background-color: var(--tag-bg); - border: solid 1px var(--tag-bd); - border-radius: var(--radius-xs); + color: var(--deco-fg); + margin: 0px 0.5em; + padding: 0px 0.25em; + background-color: var(--tag-bg); + border: solid 1px var(--tag-bd); + border-radius: var(--radius-xs); } div#cgit a.tag-annotated-deco { - color: var(--deco-fg); - margin: 0px 0.5em; - padding: 0px 0.25em; - background-color: var(--tag-ann-bg); - border: solid 1px var(--tag-ann-bd); - border-radius: var(--radius-xs); + color: var(--deco-fg); + margin: 0px 0.5em; + padding: 0px 0.25em; + background-color: var(--tag-ann-bg); + border: solid 1px var(--tag-ann-bd); + border-radius: var(--radius-xs); } div#cgit a.remote-deco { - color: var(--deco-fg); - margin: 0px 0.5em; - padding: 0px 0.25em; - background-color: var(--remote-bg); - border: solid 1px var(--remote-bd); - border-radius: var(--radius-xs); + color: var(--deco-fg); + margin: 0px 0.5em; + padding: 0px 0.25em; + background-color: var(--remote-bg); + border: solid 1px var(--remote-bd); + border-radius: var(--radius-xs); } div#cgit a.deco { - color: var(--deco-fg); - margin: 0px 0.5em; - padding: 0px 0.25em; - background-color: var(--head-bg); - border: solid 1px var(--head-bd); - border-radius: var(--radius-xs); + color: var(--deco-fg); + margin: 0px 0.5em; + padding: 0px 0.25em; + background-color: var(--head-bg); + border: solid 1px var(--head-bd); + border-radius: var(--radius-xs); } div#cgit div.commit-subject a.branch-deco, @@ -1167,283 +1215,278 @@ 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: 80%; + margin-left: 1em; + font-size: 80%; } /* Statistics */ div#cgit table.stats { - border: solid 1px var(--border-strong); - border-collapse: collapse; - display: block; - width: max-content; - max-width: 100%; - overflow-x: auto; + border: solid 1px var(--border-strong); + border-collapse: collapse; + display: block; + width: max-content; + max-width: 100%; + overflow-x: auto; } div#cgit table.stats th { - text-align: left; - padding: 1px 0.5em; - background-color: var(--surface); - border: solid 1px var(--border-strong); + text-align: left; + padding: 1px 0.5em; + background-color: var(--surface); + border: solid 1px var(--border-strong); } div#cgit table.stats td { - text-align: right; - padding: 1px 0.5em; - border: solid 1px var(--border-strong); + text-align: right; + padding: 1px 0.5em; + border: solid 1px var(--border-strong); } div#cgit table.stats td.total { - font-weight: bold; - text-align: left; + font-weight: bold; + text-align: left; } div#cgit table.stats td.sum { - color: var(--accent); - font-weight: bold; + color: var(--accent); + font-weight: bold; } div#cgit table.stats td.left { - text-align: left; + text-align: left; } /* Side-by-side diff */ div#cgit table.ssdiff { - width: 100%; + width: 100%; } div#cgit table.ssdiff td { - font-size: 85%; - font-family: var(--font-mono); - white-space: pre; - padding: 1px 4px 1px 4px; - border-left: solid 1px var(--border-mid); - border-right: solid 1px var(--border-mid); + font-size: 85%; + font-family: var(--font-mono); + white-space: pre; + padding: 1px 4px 1px 4px; + border-left: solid 1px var(--border-mid); + border-right: solid 1px var(--border-mid); } div#cgit table.ssdiff td.add { - color: var(--fg); - background: var(--ss-add-bg); - min-width: 50%; + color: var(--fg); + background: var(--ss-add-bg); + min-width: 50%; } div#cgit table.ssdiff td.add_dark { - color: var(--fg); - background: var(--ss-add-bg2); - min-width: 50%; + color: var(--fg); + background: var(--ss-add-bg2); + min-width: 50%; } div#cgit table.ssdiff span.add { - background: var(--ss-add-bg); - font-weight: bold; + background: var(--ss-add-bg); + font-weight: bold; } div#cgit table.ssdiff td.del { - color: var(--fg); - background: var(--ss-del-bg); - min-width: 50%; + color: var(--fg); + background: var(--ss-del-bg); + min-width: 50%; } div#cgit table.ssdiff td.del_dark { - color: var(--fg); - background: var(--ss-del-bg2); - min-width: 50%; + color: var(--fg); + background: var(--ss-del-bg2); + min-width: 50%; } div#cgit table.ssdiff span.del { - background: var(--ss-del-bg); - font-weight: bold; + background: var(--ss-del-bg); + font-weight: bold; } div#cgit table.ssdiff td.changed { - color: var(--fg); - background: var(--ss-chg-bg); - min-width: 50%; + color: var(--fg); + background: var(--ss-chg-bg); + min-width: 50%; } div#cgit table.ssdiff td.changed_dark { - color: var(--fg); - background: var(--ss-chg-bg2); - min-width: 50%; + color: var(--fg); + background: var(--ss-chg-bg2); + min-width: 50%; } div#cgit table.ssdiff td.lineno { - color: var(--fg); - background: var(--ss-lineno-bg); - text-align: right; - width: 3em; - min-width: 3em; + color: var(--fg); + background: var(--ss-lineno-bg); + text-align: right; + width: 3em; + min-width: 3em; } div#cgit table.ssdiff td.hunk { - color: var(--fg); - background: var(--ss-hunk-bg); - border-top: solid 1px var(--border-mid); - border-bottom: solid 1px var(--border-mid); + color: var(--fg); + background: var(--ss-hunk-bg); + border-top: solid 1px var(--border-mid); + border-bottom: solid 1px var(--border-mid); } div#cgit table.ssdiff td.head { - border-top: solid 1px var(--border-mid); - border-bottom: solid 1px var(--border-mid); + border-top: solid 1px var(--border-mid); + border-bottom: solid 1px var(--border-mid); } div#cgit table.ssdiff td.head div.head { - font-weight: bold; - color: var(--fg); + font-weight: bold; + color: var(--fg); } div#cgit table.ssdiff td.foot { - border-top: solid 1px var(--border-mid); - border-left: none; - border-right: none; - border-bottom: none; + border-top: solid 1px var(--border-mid); + border-left: none; + border-right: none; + border-bottom: none; } div#cgit table.ssdiff td.space { - border: none; + border: none; } div#cgit table.ssdiff td.space div { - min-height: 3em; + min-height: 3em; } -/* Three tiers around the default layout. Wide screens get a roomier - * gutter and a slightly larger base size, phones trade chrome for - * content, and the smallest phones tighten the masthead further. */ - @media (min-width: 1440px) { - div#cgit { - --gutter: 2rem; - font-size: 14px; - } + div#cgit { + --gutter: 2rem; + font-size: 14px; + } } @media (max-width: 640px) { - div#cgit { - --gutter: 0.85rem; - /* Grow the controls into comfortable tap targets on a touch - * screen; the toggle, selects, inputs and buttons all track this. */ - --control-h: 2.5em; - } - /* Keep the index to name and age on a phone; the description, owner - * and the summary/log/tree shortcuts drop away since tapping the - * name already opens the repository. Auto layout is deliberate: with - * table-layout fixed the hidden columns still reserve equal width and - * squeeze the name, so we let the name take all the slack and the age - * hug its own text instead. */ - div#cgit .col-desc, - div#cgit .col-owner, - div#cgit .col-links { - display: none; - } - /* Ref and log listings drop the author and file/line-count columns - * on a phone, since the subject and age carry the story and long - * author names otherwise wrap every row onto two lines. */ - div#cgit table.list th.col-author, - div#cgit table.list td.col-author, - div#cgit table.list th.col-count, - div#cgit table.list td.col-count { - display: none; - } - /* Keep any remaining long token from forcing a sideways page. */ - div#cgit table.list td { - overflow-wrap: anywhere; - } - div#cgit table.repolist { - width: 100%; - } - div#cgit table.repolist th.col-name, - div#cgit table.repolist td.col-name { - width: 100%; - overflow-wrap: anywhere; - } - div#cgit table.repolist th.col-idle, - div#cgit table.repolist td.col-idle { - width: 1%; - white-space: nowrap; - text-align: right; - } - /* Give the tabs a finger-sized target while keeping them tight enough - * to wrap onto as few rows as possible. */ - div#cgit .tabs a { - padding: 0.55em 0.7em; - } - /* No search on a phone. Typing queries there is nobody's real - * workflow and the q= url form keeps working regardless. */ - div#cgit .tabs .search { - display: none; - } - /* Stack the masthead: logo, title and toggle across the top, then - * the description and owner on their own full rows. */ - div#cgit #header { - grid-template-columns: auto 1fr auto; - grid-template-areas: - "logo heading theme" - "desc desc desc" - "owner owner owner"; - column-gap: 8px; - row-gap: 6px; - } - div#cgit #header .logo { - min-width: 56px; - min-height: 37px; - } - div#cgit #header .logo img { - max-width: 56px; - } - /* On the stacked mobile masthead the rule spans the full width. */ - div#cgit #header::before { - grid-column: 1 / -1; - } - div#cgit #header h1.main { - white-space: normal; - overflow-wrap: anywhere; - min-width: 0; - font-size: 190%; - } - div#cgit #header .owner { - justify-self: start; - text-align: left; - } - /* No branch switcher on a phone. The refs page switches branches - * with less chrome, and every page link carries h= along. */ - div#cgit #header .branch-switch { - display: none; - } - /* Unfloat the side panels so they stack full width instead of - * squeezing the content into a sliver beside them. */ - div#cgit div.cgit-panel, - div#cgit div.notes { - float: none; - margin-left: 0; - } - div#cgit div.cgit-panel { - margin: 1em 0; - } - div#cgit table.commit-info { - width: 100%; - } - div#cgit table.nowrap td { - white-space: normal; - } + div#cgit { + --gutter: 0.85rem; + --control-h: 2.5em; + } + + div#cgit .col-desc, + div#cgit .col-owner, + div#cgit .col-links { + display: none; + } + + div#cgit table.list th.col-author, + div#cgit table.list td.col-author, + div#cgit table.list th.col-count, + div#cgit table.list td.col-count { + display: none; + } + + /* Keep any remaining long token from forcing a sideways page. */ + div#cgit table.list td { + overflow-wrap: anywhere; + } + + /* Fixed table layout would still reserve the hidden columns' width. */ + div#cgit table.repolist { + width: 100%; + } + + div#cgit table.repolist th.col-name, + div#cgit table.repolist td.col-name { + width: 100%; + overflow-wrap: anywhere; + } + + div#cgit table.repolist th.col-idle, + div#cgit table.repolist td.col-idle { + width: 1%; + white-space: nowrap; + text-align: right; + } + + div#cgit .tabs a { + padding: 0.55em 0.7em; + } + + div#cgit .tabs .search { + display: none; + } + + div#cgit #header { + grid-template-columns: auto 1fr auto; + grid-template-areas: + "logo heading theme" + "desc desc desc" + "owner owner owner"; + column-gap: 8px; + row-gap: 6px; + } + + div#cgit #header .logo { + min-width: 56px; + min-height: 37px; + } + + div#cgit #header .logo img { + max-width: 56px; + } + + div#cgit #header::before { + grid-column: 1 / -1; + } + + div#cgit #header h1.main { + white-space: normal; + overflow-wrap: anywhere; + min-width: 0; + font-size: 190%; + } + + div#cgit #header .owner { + justify-self: start; + text-align: left; + } + + div#cgit #header .branch-switch { + display: none; + } + + div#cgit div.cgit-panel, + div#cgit div.notes { + float: none; + margin-left: 0; + } + + div#cgit div.cgit-panel { + margin: 1em 0; + } + + div#cgit table.commit-info { + width: 100%; + } + + div#cgit table.nowrap td { + white-space: normal; + } } @media (max-width: 380px) { - /* Reclaim width on the smallest phones by shrinking the logo and the - * title further so the masthead does not crowd out the content. */ - div#cgit #header .logo { - min-width: 44px; - } - div#cgit #header .logo img { - max-width: 44px; - } - div#cgit #header h1.main { - font-size: 160%; - } - div#cgit .tabs a { - padding: 0.55em 0.55em; - } + div#cgit #header .logo { + min-width: 44px; + } + + div#cgit #header .logo img { + max-width: 44px; + } + + div#cgit #header h1.main { + font-size: 160%; + } + + div#cgit .tabs a { + padding: 0.55em 0.55em; + } } |