| @@ -1,32 +1,62 @@ |
| 1 | | /* gitbay stylesheet. One file, light and dark via prefers-color-scheme. |
| 2 | | Tokens first; components use tokens only. No external requests. */ |
| 1 | /* gitbay stylesheet, Carbon-school: black shell, sharp lines, one blue. |
| 2 | One file, light and dark via prefers-color-scheme. Tokens first; |
| 3 | components use tokens only. No external requests: IBM Plex is served |
| 4 | from this origin. */ |
| 5 | |
| 6 | @font-face { |
| 7 | font-family: "IBM Plex Sans"; |
| 8 | font-style: normal; |
| 9 | font-weight: 400 600; |
| 10 | font-display: swap; |
| 11 | src: url(/static/fonts/plex-sans.woff2) format("woff2"); |
| 12 | } |
| 13 | @font-face { |
| 14 | font-family: "IBM Plex Mono"; |
| 15 | font-style: normal; |
| 16 | font-weight: 400; |
| 17 | font-display: swap; |
| 18 | src: url(/static/fonts/plex-mono-400.woff2) format("woff2"); |
| 19 | } |
| 20 | @font-face { |
| 21 | font-family: "IBM Plex Mono"; |
| 22 | font-style: normal; |
| 23 | font-weight: 500; |
| 24 | font-display: swap; |
| 25 | src: url(/static/fonts/plex-mono-500.woff2) format("woff2"); |
| 26 | } |
| 3 | 27 | |
| 4 | 28 | :root { |
| 5 | 29 | /* declare native light+dark support: correct form controls and |
| 6 | 30 | scrollbars per scheme, and opt out of browser auto-darkening */ |
| 7 | 31 | color-scheme: light dark; |
| 8 | 32 | |
| 9 | | /* palette */ |
| 10 | | --bg: #ffffff; |
| 11 | | --fg: #1f2328; |
| 12 | | --muted: #667079; |
| 13 | | --faint: #eceff1; /* hairlines, row separators */ |
| 14 | | --line: #d7dde2; /* control borders, card edges */ |
| 15 | | --surface: #f6f8fa; /* cards, code, table hover */ |
| 16 | | --accent: #0000f0; /* blue: links, active tab, primary */ |
| 33 | /* palette (Carbon g10) */ |
| 34 | --bg: #f4f4f4; |
| 35 | --fg: #161616; |
| 36 | --muted: #525252; |
| 37 | --faint: #ececec; /* hairlines, row separators */ |
| 38 | --line: #e0e0e0; /* control borders, tile edges */ |
| 39 | --surface: #ffffff; /* tiles, cards */ |
| 40 | --hover: #f0f2f8; /* row hover on tiles */ |
| 41 | --accent: #0f62fe; /* blue-60: links, active nav, primary */ |
| 17 | 42 | --accent-fg: #ffffff; /* text on accent */ |
| 18 | | --ok: #1a7f37; |
| 19 | | --warn: #9a6700; |
| 20 | | --bad: #cf222e; |
| 21 | | --done: #8250df; /* merged */ |
| 22 | | --neutral: #667079; |
| 23 | | --code-bg: #f6f8fa; |
| 43 | --ok: #198038; |
| 44 | --warn: #8e6a00; |
| 45 | --bad: #da1e28; |
| 46 | --done: #8a3ffc; /* merged */ |
| 47 | --neutral: #525252; |
| 48 | --code-bg: #f4f4f4; |
| 49 | /* the shell is ink in both schemes */ |
| 50 | --shell-bg: #161616; |
| 51 | --shell-fg: #f4f4f4; |
| 52 | --shell-muted: #c6c6c6; |
| 53 | --shell-line: #161616; |
| 24 | 54 | |
| 25 | 55 | /* type */ |
| 26 | | --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, |
| 27 | | "Helvetica Neue", Arial, sans-serif; |
| 28 | | --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, |
| 29 | | "Liberation Mono", monospace; |
| 56 | --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", |
| 57 | Roboto, "Helvetica Neue", Arial, sans-serif; |
| 58 | --mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, |
| 59 | Consolas, "Liberation Mono", monospace; |
| 30 | 60 | --fs-0: 0.8rem; /* 12.8px: chips, fine print */ |
| 31 | 61 | --fs-1: 0.866rem; /* ~13px: metadata, mono in tables */ |
| 32 | 62 | --fs-2: 0.933rem; /* 14px: dense table text */ |
| @@ -42,28 +72,31 @@ |
| 42 | 72 | --sp-5: 1.5rem; |
| 43 | 73 | --sp-6: 2.5rem; |
| 44 | 74 | |
| 45 | | /* radii */ |
| 46 | | --r-sm: 4px; |
| 47 | | --r-md: 6px; |
| 48 | | --r-lg: 8px; |
| 75 | /* radii: sharp everywhere; only tags stay pills */ |
| 76 | --r-sm: 0; |
| 77 | --r-md: 0; |
| 78 | --r-lg: 0; |
| 49 | 79 | --r-pill: 999px; |
| 50 | 80 | } |
| 51 | 81 | @media (prefers-color-scheme: dark) { |
| 52 | 82 | :root { |
| 53 | | --bg: #0d1117; |
| 54 | | --fg: #e6edf3; |
| 55 | | --muted: #8d96a0; |
| 56 | | --faint: #1d242c; |
| 57 | | --line: #30363d; |
| 58 | | --surface: #161b22; |
| 59 | | --accent: #8899ff; |
| 60 | | --accent-fg: #0a1030; |
| 61 | | --ok: #3fb950; |
| 62 | | --warn: #d29922; |
| 63 | | --bad: #f85149; |
| 64 | | --done: #a371f7; |
| 65 | | --neutral: #8d96a0; |
| 66 | | --code-bg: #161b22; |
| 83 | /* Carbon g100 */ |
| 84 | --bg: #161616; |
| 85 | --fg: #f4f4f4; |
| 86 | --muted: #a8a8a8; |
| 87 | --faint: #2a2a2a; |
| 88 | --line: #393939; |
| 89 | --surface: #262626; |
| 90 | --hover: #2e3440; |
| 91 | --accent: #78a9ff; /* blue-40 reads on dark grounds */ |
| 92 | --accent-fg: #161616; |
| 93 | --ok: #42be65; |
| 94 | --warn: #d2a106; |
| 95 | --bad: #fa4d56; |
| 96 | --done: #a56eff; |
| 97 | --neutral: #a8a8a8; |
| 98 | --code-bg: #1e1e1e; |
| 99 | --shell-line: #393939; |
| 67 | 100 | } |
| 68 | 101 | } |
| 69 | 102 | |
| @@ -100,36 +133,68 @@ code, pre, .code, td.mode, td.size { |
| 100 | 133 | margin: 0 auto; |
| 101 | 134 | padding: 0 var(--sp-5); |
| 102 | 135 | } |
| 136 | /* the shell: an ink bar in both schemes, Carbon UI-shell style */ |
| 103 | 137 | header { |
| 104 | | border-bottom: 1px solid var(--faint); |
| 105 | | padding: var(--sp-3) 0; |
| 138 | background: var(--shell-bg); |
| 139 | border-bottom: 1px solid var(--shell-line); |
| 140 | padding: 0; |
| 106 | 141 | } |
| 107 | 142 | a.site { |
| 108 | | font-weight: 650; |
| 109 | | color: var(--fg); |
| 143 | font-weight: 600; |
| 144 | color: var(--shell-fg); |
| 110 | 145 | letter-spacing: -0.01em; |
| 111 | 146 | display: inline-flex; |
| 112 | 147 | align-items: center; |
| 113 | 148 | gap: var(--sp-2); |
| 114 | 149 | } |
| 115 | | a.site:hover { text-decoration: none; color: var(--accent); } |
| 150 | a.site:hover { text-decoration: none; color: #ffffff; } |
| 116 | 151 | a.site svg.mark { display: block; } |
| 152 | a.site svg.mark rect { fill: #0f62fe; } |
| 153 | a.site svg.mark path { stroke: #ffffff; } |
| 117 | 154 | nav.topnav { |
| 118 | 155 | display: flex; |
| 119 | 156 | align-items: center; |
| 120 | | gap: var(--sp-4); |
| 157 | gap: 0; |
| 158 | min-height: 3rem; |
| 121 | 159 | } |
| 122 | 160 | nav.topnav .spacer { flex: 1; } |
| 123 | | nav.topnav > a:not(.site) { color: var(--fg); font-size: var(--fs-2); } |
| 124 | | nav.topnav > a:not(.site):hover { color: var(--accent); text-decoration: none; } |
| 125 | | nav.topnav a.navuser { font-weight: 600; } |
| 126 | | nav.topnav button.linklike { color: var(--muted); } |
| 127 | | nav.topnav button.linklike:hover { color: var(--accent); text-decoration: none; } |
| 161 | nav.topnav > a:not(.site) { |
| 162 | color: var(--shell-muted); |
| 163 | font-size: var(--fs-2); |
| 164 | padding: 0.85rem var(--sp-3); |
| 165 | line-height: 1; |
| 166 | } |
| 167 | nav.topnav > a:not(.site):hover { color: #ffffff; background: #353535; text-decoration: none; } |
| 168 | nav.topnav a.navuser { |
| 169 | font-weight: 600; |
| 170 | color: #ffffff; |
| 171 | box-shadow: inset 0 -3px 0 #0f62fe; |
| 172 | } |
| 173 | nav.topnav button.linklike { color: var(--shell-muted); padding: 0.85rem var(--sp-3); } |
| 174 | nav.topnav button.linklike:hover { color: #ffffff; background: #353535; text-decoration: none; } |
| 128 | 175 | main.container { |
| 129 | 176 | width: 100%; |
| 130 | 177 | padding-top: var(--sp-3); |
| 131 | 178 | padding-bottom: var(--sp-6); |
| 132 | 179 | } |
| 180 | /* repo pages carry a left rail: the repohead spans the top, the sidenav |
| 181 | takes column one, everything after flows in column two. Browsers |
| 182 | without :has() fall back to single-column flow, which still works. */ |
| 183 | main.container:has(> nav.tabs) { |
| 184 | display: grid; |
| 185 | grid-template-columns: 11.5rem minmax(0, 1fr); |
| 186 | column-gap: var(--sp-6); |
| 187 | max-width: 80rem; |
| 188 | } |
| 189 | main.container:has(> nav.tabs) > * { grid-column: 2; } |
| 190 | main.container:has(> nav.tabs) > .repohead { grid-column: 1 / -1; } |
| 191 | main.container:has(> nav.tabs) > nav.tabs { |
| 192 | grid-column: 1; |
| 193 | grid-row: 2 / span 99; |
| 194 | align-self: start; |
| 195 | position: sticky; |
| 196 | top: var(--sp-4); |
| 197 | } |
| 133 | 198 | |
| 134 | 199 | /* tables */ |
| 135 | 200 | table { border-collapse: collapse; width: 100%; } |
| @@ -164,24 +229,35 @@ button.pinbtn.pinned { color: var(--accent); border-color: var(--accent); } |
| 164 | 229 | a.chip.label:hover, a.chip.topic:hover { text-decoration: none; filter: brightness(1.15); } |
| 165 | 230 | .repohead .desc { margin: 0 0 var(--sp-2); } |
| 166 | 231 | |
| 167 | | /* repo tabs */ |
| 168 | | nav.tabs { |
| 169 | | display: flex; |
| 170 | | flex-wrap: wrap; |
| 171 | | gap: var(--sp-1); |
| 172 | | border-bottom: 1px solid var(--faint); |
| 173 | | margin-top: var(--sp-3); |
| 232 | /* repo rail: grouped vertical navigation on the left */ |
| 233 | nav.tabs { display: flex; flex-direction: column; margin-top: var(--sp-1); } |
| 234 | nav.tabs .glabel { |
| 235 | font-size: var(--fs-0); |
| 236 | color: var(--muted); |
| 237 | letter-spacing: 0.04em; |
| 238 | margin: var(--sp-4) 0 var(--sp-1); |
| 174 | 239 | } |
| 240 | nav.tabs .glabel:first-child { margin-top: 0; } |
| 175 | 241 | nav.tabs a { |
| 176 | | color: var(--muted); |
| 177 | | padding: var(--sp-1) var(--sp-2); |
| 178 | | border-radius: var(--r-md) var(--r-md) 0 0; |
| 179 | | border-bottom: 2px solid transparent; |
| 180 | | margin-bottom: -1px; |
| 242 | color: var(--fg); |
| 243 | padding: 0.32rem var(--sp-3); |
| 181 | 244 | font-size: var(--fs-2); |
| 245 | border-left: 3px solid transparent; |
| 246 | } |
| 247 | nav.tabs a:hover { background: var(--hover); text-decoration: none; } |
| 248 | nav.tabs a.active { |
| 249 | border-left-color: var(--accent); |
| 250 | background: var(--surface); |
| 251 | font-weight: 600; |
| 252 | } |
| 253 | @media (max-width: 52rem) { |
| 254 | /* the rail folds back into a wrapping strip on narrow screens */ |
| 255 | main.container:has(> nav.tabs) { display: block; } |
| 256 | nav.tabs { flex-direction: row; flex-wrap: wrap; gap: 0 var(--sp-1); border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); position: static; } |
| 257 | nav.tabs .glabel { display: none; } |
| 258 | nav.tabs a { border-left: none; border-bottom: 3px solid transparent; padding: var(--sp-1) var(--sp-2); } |
| 259 | nav.tabs a.active { border-bottom-color: var(--accent); background: none; } |
| 182 | 260 | } |
| 183 | | nav.tabs a:hover { color: var(--fg); background: var(--surface); text-decoration: none; } |
| 184 | | nav.tabs a.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 550; } |
| 185 | 261 | |
| 186 | 262 | .clone { color: var(--muted); font-size: var(--fs-2); } |
| 187 | 263 | .clone code { |
| @@ -239,11 +315,12 @@ details.refmenu .refdrop a { |
| 239 | 315 | font-family: var(--mono); |
| 240 | 316 | font-size: var(--fs-1); |
| 241 | 317 | } |
| 242 | | details.refmenu .refdrop a:hover { background: var(--surface); text-decoration: none; } |
| 318 | details.refmenu .refdrop a:hover { background: var(--hover); text-decoration: none; } |
| 243 | 319 | details.refmenu .refdrop a.allrefs { color: var(--accent); font-family: var(--sans); border-top: 1px solid var(--faint); margin-top: var(--sp-1); } |
| 244 | 320 | |
| 245 | 321 | /* file and refs tables: bordered cards, rows inside */ |
| 246 | 322 | table.tree, table.refs { |
| 323 | background: var(--surface); |
| 247 | 324 | border: 1px solid var(--line); |
| 248 | 325 | border-radius: var(--r-lg); |
| 249 | 326 | border-collapse: separate; |
| @@ -256,7 +333,7 @@ table.tree td, table.refs td { |
| 256 | 333 | border-bottom: 1px solid var(--faint); |
| 257 | 334 | } |
| 258 | 335 | table.tree tr:last-child td, table.refs tr:last-child td { border-bottom: none; } |
| 259 | | table.tree tr:hover td, table.refs tr:hover td { background: var(--surface); } |
| 336 | table.tree tr:hover td, table.refs tr:hover td { background: var(--hover); } |
| 260 | 337 | table.tree tr.cols th { |
| 261 | 338 | text-align: left; |
| 262 | 339 | font-weight: 500; |
| @@ -264,9 +341,9 @@ table.tree tr.cols th { |
| 264 | 341 | color: var(--muted); |
| 265 | 342 | padding: var(--sp-1) var(--sp-4); |
| 266 | 343 | border-bottom: 1px solid var(--line); |
| 267 | | background: var(--surface); |
| 344 | background: var(--bg); |
| 268 | 345 | } |
| 269 | | table.tree tr.cols:hover th { background: var(--surface); } |
| 346 | table.tree tr.cols:hover th { background: var(--bg); } |
| 270 | 347 | table.tree th.size { text-align: right; } |
| 271 | 348 | table.tree td.name { width: 100%; } |
| 272 | 349 | table.tree td.name a { color: var(--fg); } |
| @@ -286,7 +363,7 @@ table.refs td.sha { color: var(--muted); } |
| 286 | 363 | border-bottom: 1px solid var(--faint); |
| 287 | 364 | margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)) var(--sp-4); |
| 288 | 365 | padding: var(--sp-2) var(--sp-5); |
| 289 | | background: var(--surface); |
| 366 | background: var(--bg); |
| 290 | 367 | border-radius: var(--r-lg) var(--r-lg) 0 0; |
| 291 | 368 | } |
| 292 | 369 | |
| @@ -295,6 +372,7 @@ ul.loglist { |
| 295 | 372 | list-style: none; |
| 296 | 373 | margin: var(--sp-3) 0; |
| 297 | 374 | padding: 0; |
| 375 | background: var(--surface); |
| 298 | 376 | border: 1px solid var(--line); |
| 299 | 377 | border-radius: var(--r-lg); |
| 300 | 378 | overflow: hidden; |
| @@ -307,7 +385,7 @@ ul.loglist li { |
| 307 | 385 | border-bottom: 1px solid var(--faint); |
| 308 | 386 | } |
| 309 | 387 | ul.loglist li:last-child { border-bottom: none; } |
| 310 | | ul.loglist li:hover { background: var(--surface); } |
| 388 | ul.loglist li:hover { background: var(--hover); } |
| 311 | 389 | ul.loglist .commitmain { flex: 1; min-width: 0; } |
| 312 | 390 | ul.loglist p { margin: 0; } |
| 313 | 391 | ul.loglist .subject a { color: var(--fg); font-weight: 550; } |
| @@ -337,6 +415,7 @@ ul.repolist { |
| 337 | 415 | list-style: none; |
| 338 | 416 | margin: var(--sp-3) 0 var(--sp-5); |
| 339 | 417 | padding: 0; |
| 418 | background: var(--surface); |
| 340 | 419 | border: 1px solid var(--line); |
| 341 | 420 | border-radius: var(--r-lg); |
| 342 | 421 | overflow: hidden; |
| @@ -352,16 +431,17 @@ ul.pinlist { |
| 352 | 431 | gap: var(--sp-2); |
| 353 | 432 | } |
| 354 | 433 | ul.pinlist li { |
| 434 | background: var(--surface); |
| 355 | 435 | border: 1px solid var(--line); |
| 356 | 436 | border-radius: var(--r-md); |
| 357 | 437 | padding: var(--sp-1) var(--sp-3); |
| 358 | 438 | } |
| 359 | | ul.pinlist li:hover { background: var(--surface); } |
| 439 | ul.pinlist li:hover { background: var(--hover); } |
| 360 | 440 | ul.pinlist li a { color: var(--fg); } |
| 361 | 441 | ul.pinlist li a:hover { color: var(--accent); text-decoration: none; } |
| 362 | 442 | ul.pinlist .sep { color: var(--muted); margin: 0 0.15em; } |
| 363 | 443 | ul.repolist li:last-child { border-bottom: none; } |
| 364 | | ul.repolist li:hover { background: var(--surface); } |
| 444 | ul.repolist li:hover { background: var(--hover); } |
| 365 | 445 | ul.repolist li.empty { color: var(--muted); } |
| 366 | 446 | ul.repolist p { margin: 0; } |
| 367 | 447 | ul.repolist .reponame { font-size: var(--fs-3); } |
| @@ -451,7 +531,8 @@ button.linklike:hover { text-decoration: underline; filter: none; } |
| 451 | 531 | |
| 452 | 532 | /* cards: README, comments */ |
| 453 | 533 | .readme, .code { |
| 454 | | border: 1px solid var(--faint); |
| 534 | background: var(--surface); |
| 535 | border: 1px solid var(--line); |
| 455 | 536 | border-radius: var(--r-lg); |
| 456 | 537 | padding: var(--sp-4) var(--sp-5); |
| 457 | 538 | margin-top: var(--sp-4); |
| @@ -605,13 +686,14 @@ nav.filters a { |
| 605 | 686 | padding: 0.05rem var(--sp-2); |
| 606 | 687 | border-radius: var(--r-pill); |
| 607 | 688 | } |
| 608 | | nav.filters a:hover { color: var(--fg); background: var(--surface); text-decoration: none; } |
| 689 | nav.filters a:hover { color: var(--fg); background: var(--hover); text-decoration: none; } |
| 609 | 690 | nav.filters a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } |
| 610 | 691 | |
| 611 | 692 | ul.issuelist { |
| 612 | 693 | list-style: none; |
| 613 | 694 | margin: var(--sp-2) 0; |
| 614 | 695 | padding: 0; |
| 696 | background: var(--surface); |
| 615 | 697 | border: 1px solid var(--line); |
| 616 | 698 | border-radius: var(--r-lg); |
| 617 | 699 | overflow: hidden; |
| @@ -624,7 +706,7 @@ ul.issuelist li { |
| 624 | 706 | border-bottom: 1px solid var(--faint); |
| 625 | 707 | } |
| 626 | 708 | ul.issuelist li:last-child { border-bottom: none; } |
| 627 | | ul.issuelist li:hover { background: var(--surface); } |
| 709 | ul.issuelist li:hover { background: var(--hover); } |
| 628 | 710 | ul.issuelist li.empty { display: block; color: var(--muted); } |
| 629 | 711 | ul.issuelist .issuemain { flex: 1; min-width: 0; } |
| 630 | 712 | ul.issuelist p { margin: 0; } |
| @@ -633,6 +715,7 @@ ul.issuelist .title a:hover { color: var(--accent); } |
| 633 | 715 | |
| 634 | 716 | /* releases */ |
| 635 | 717 | article.release { |
| 718 | background: var(--surface); |
| 636 | 719 | border: 1px solid var(--line); |
| 637 | 720 | border-radius: var(--r-lg); |
| 638 | 721 | padding: var(--sp-3) var(--sp-4); |