Diff options
| -rw-r--r-- | assets/cgit.css | 163 |
1 file changed, 47 insertions, 116 deletions
diff --git a/assets/cgit.css b/assets/cgit.css index 94b4fd0..7a425f5 100644 --- a/assets/cgit.css +++ b/assets/cgit.css @@ -85,6 +85,11 @@ div#cgit { --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; @@ -151,7 +156,7 @@ div#cgit button { color: var(--fg); background-color: var(--surface); border: solid 1px var(--border); - border-radius: 5px; + border-radius: var(--radius); padding: 0 0.5em; line-height: 1.3; vertical-align: middle; @@ -220,7 +225,7 @@ div#cgit #header .theme-toggle { color: var(--muted); background-color: var(--surface); border: solid 1px var(--border); - border-radius: 5px; + border-radius: var(--radius); cursor: pointer; line-height: 1; } @@ -282,10 +287,21 @@ div#cgit #header .sub { grid-area: desc; margin: 0; color: var(--muted); - border-top: solid 1px var(--border); 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. */ +div#cgit #header::before { + 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; @@ -324,8 +340,7 @@ div#cgit .tabs a { display: inline-block; padding: 0.3em 0.7em; color: var(--muted); - font-size: 105%; - border-radius: 5px 5px 0 0; + border-radius: var(--radius) var(--radius) 0 0; } div#cgit .tabs a:hover { @@ -357,15 +372,9 @@ div#cgit .tabs a.external:after { div#cgit .tabs .search { padding-bottom: 2px; - font-size: 90%; white-space: nowrap; } -div#cgit .tabs .search input, -div#cgit .tabs .search select { - font-size: 90%; -} - div#cgit input.txt { max-width: 12em; } @@ -457,7 +466,6 @@ 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.logsubject { - font-family: var(--font-mono); font-weight: bold; } @@ -484,17 +492,6 @@ div#cgit table.list td a:hover { /* ---- Repository index ------------------------------------------------- */ -div#cgit td#sidebar input.txt { - width: 100%; - margin: 2px 0px 0px 0px; -} - -div#cgit td#content { - vertical-align: top; - padding: 1em 2em 1em 1em; - border: none; -} - div#cgit div#summary { vertical-align: top; margin-bottom: 1em; @@ -585,7 +582,7 @@ div#cgit .markdown hr { div#cgit .markdown code { background: var(--surface-2); border: 1px solid var(--border); - border-radius: 3px; + border-radius: var(--radius-s); padding: 0.1em 0.35em; font-size: 0.95em; } @@ -593,7 +590,7 @@ div#cgit .markdown code { div#cgit .markdown pre { background: var(--surface-2); border: 1px solid var(--border); - border-radius: 4px; + border-radius: var(--radius); padding: 0.7em 0.9em; overflow-x: auto; } @@ -637,25 +634,13 @@ div#cgit div.help p { div#cgit div.help pre.urls { background: var(--surface-2); border: 1px solid var(--border); - border-radius: 4px; + border-radius: var(--radius); padding: 0.6em 0.9em; font-family: var(--font-mono); font-size: 90%; overflow-x: auto; } -div#cgit table#downloads { - float: right; - border-collapse: collapse; - border: solid 1px var(--border-strong); - margin-left: 0.5em; - margin-bottom: 0.5em; -} - -div#cgit table#downloads th { - background-color: var(--surface); -} - div#cgit div#blob { border: solid 1px var(--border-strong); } @@ -666,19 +651,11 @@ div#cgit div.error { margin: 1em 2em; } -div#cgit td.reposection { - font-style: italic; - color: var(--faint); -} - div#cgit table.list td.reposection { font-style: italic; color: var(--faint); } -div#cgit td.toplevel-repo { -} - div#cgit table.list td.sublevel-repo { padding-left: 1.5em; } @@ -964,12 +941,10 @@ div#cgit table.diffstat th { text-align: left; text-decoration: underline; padding: 0.1em 1em 0.1em 0.1em; - font-size: 100%; } div#cgit table.diffstat td { padding: 0.2em 0.2em 0.1em 0.1em; - font-size: 100%; border: none; } @@ -1084,16 +1059,8 @@ div#cgit .right { /* ---- Buttons / pager -------------------------------------------------- */ div#cgit a.button { - font-size: 80%; - padding: 0em 0.5em; -} - -div#cgit a.primary { - font-size: 100%; -} - -div#cgit a.secondary { font-size: 90%; + padding: 0em 0.5em; } div#cgit ul.pager { @@ -1167,7 +1134,7 @@ div#cgit span.deletions { div#cgit .footer { padding: 0.85rem var(--gutter); text-align: center; - font-size: 80%; + font-size: 85%; color: var(--footer-fg); } @@ -1197,7 +1164,7 @@ div#cgit a.branch-deco { padding: 0px 0.25em; background-color: var(--branch-bg); border: solid 1px var(--branch-bd); - border-radius: 2px; + border-radius: var(--radius-xs); } div#cgit a.tag-deco { @@ -1206,7 +1173,7 @@ div#cgit a.tag-deco { padding: 0px 0.25em; background-color: var(--tag-bg); border: solid 1px var(--tag-bd); - border-radius: 2px; + border-radius: var(--radius-xs); } div#cgit a.tag-annotated-deco { @@ -1215,7 +1182,7 @@ div#cgit a.tag-annotated-deco { padding: 0px 0.25em; background-color: var(--tag-ann-bg); border: solid 1px var(--tag-ann-bd); - border-radius: 2px; + border-radius: var(--radius-xs); } div#cgit a.remote-deco { @@ -1224,7 +1191,7 @@ div#cgit a.remote-deco { padding: 0px 0.25em; background-color: var(--remote-bg); border: solid 1px var(--remote-bd); - border-radius: 2px; + border-radius: var(--radius-xs); } div#cgit a.deco { @@ -1233,7 +1200,7 @@ div#cgit a.deco { padding: 0px 0.25em; background-color: var(--head-bg); border: solid 1px var(--head-bd); - border-radius: 2px; + border-radius: var(--radius-xs); } div#cgit div.commit-subject a.branch-deco, @@ -1242,7 +1209,7 @@ 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%; + font-size: 80%; } @@ -1284,51 +1251,6 @@ div#cgit table.stats td.left { text-align: left; } -div#cgit table.vgraph { - border-collapse: separate; - border: solid 1px var(--border-strong); - height: 200px; -} - -div#cgit table.vgraph th { - background-color: var(--surface); - font-weight: bold; - border: solid 1px var(--bg); - padding: 1px 0.5em; -} - -div#cgit table.vgraph td { - vertical-align: bottom; - padding: 0px 10px; -} - -div#cgit table.vgraph div.bar { - background-color: var(--surface); -} - -div#cgit table.hgraph { - border: solid 1px var(--border-strong); - width: 800px; - max-width: 100%; -} - -div#cgit table.hgraph th { - background-color: var(--surface); - font-weight: bold; - border: solid 1px var(--border-strong); - padding: 1px 0.5em; -} - -div#cgit table.hgraph td { - vertical-align: middle; - padding: 2px 2px; -} - -div#cgit table.hgraph div.bar { - background-color: var(--surface); - height: 1em; -} - /* ---- Side-by-side diff ------------------------------------------------ */ @@ -1337,7 +1259,7 @@ div#cgit table.ssdiff { } div#cgit table.ssdiff td { - font-size: 75%; + font-size: 85%; font-family: var(--font-mono); white-space: pre; padding: 1px 4px 1px 4px; @@ -1432,7 +1354,17 @@ div#cgit table.ssdiff td.space div { } -/* ---- Small screens ---------------------------------------------------- */ +/* ---- Responsive tiers -------------------------------------------------- + * 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; + } +} @media (max-width: 640px) { div#cgit { @@ -1482,7 +1414,6 @@ div#cgit table.ssdiff td.space div { /* Give the tabs a finger-sized target while keeping them tight enough * to wrap onto as few rows as possible. */ div#cgit .tabs a { - font-size: 100%; padding: 0.55em 0.7em; } /* No search on a phone. Typing queries there is nobody's real @@ -1504,6 +1435,10 @@ div#cgit table.ssdiff td.space div { 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; @@ -1522,7 +1457,6 @@ div#cgit table.ssdiff td.space div { /* 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 table#downloads, div#cgit div.notes { float: none; margin-left: 0; @@ -1530,9 +1464,6 @@ div#cgit table.ssdiff td.space div { div#cgit div.cgit-panel { margin: 1em 0; } - div#cgit table#downloads { - width: 100%; - } div#cgit table.commit-info { width: 100%; } |