static-listing.css (9737B)
1 :root { 2 color-scheme: dark; 3 font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 4 background: #0d0f10; 5 color: #edf2f5; 6 --bg: #0d0f10; 7 --panel: #15191b; 8 --panel-2: #101315; 9 --line: #273036; 10 --muted: #98a6ad; 11 --text: #edf2f5; 12 --green: #d5f55f; 13 --cyan: #8de9cd; 14 --amber: #ffd070; 15 } 16 17 * { box-sizing: border-box; } 18 19 body { 20 margin: 0 auto; 21 padding: 0 0 56px; 22 background: var(--bg); 23 color: var(--text); 24 } 25 26 a { 27 color: var(--green); 28 text-decoration-thickness: 1px; 29 text-underline-offset: 3px; 30 } 31 32 a.line { 33 color: #6f7b82; 34 text-decoration: none; 35 } 36 37 a.line:hover, 38 a.line:target { 39 color: #a8b2b8; 40 background: rgba(255, 255, 255, .04); 41 } 42 43 img.logo, #logo { 44 display: none; 45 } 46 47 h1, h2, h3 { letter-spacing: 0; } 48 h1 { margin: 0 0 10px; font-size: 42px; line-height: 1; } 49 h2 { margin-top: 30px; font-size: 22px; } 50 p, td, th, li { color: #b7c3c9; line-height: 1.55; } 51 52 .wrap { 53 width: min(1060px, calc(100% - 44px)); 54 margin: 0 auto; 55 } 56 57 body > :not(.topbar):not(script) { 58 width: min(1060px, calc(100% - 44px)); 59 margin-left: auto; 60 margin-right: auto; 61 } 62 63 .topbar { 64 position: sticky; 65 top: 0; 66 z-index: 2; 67 border-bottom: 1px solid rgba(39, 48, 54, .9); 68 background: rgba(13, 15, 16, .82); 69 backdrop-filter: blur(12px); 70 } 71 72 .topbar .wrap { 73 display: flex; 74 justify-content: space-between; 75 gap: 18px; 76 align-items: center; 77 min-height: 58px; 78 } 79 80 .brand { 81 display: flex; 82 gap: 10px; 83 align-items: center; 84 color: var(--text); 85 font-weight: 900; 86 text-decoration: none; 87 } 88 89 .brand:hover { color: var(--green); } 90 91 .mark { 92 width: 32px; 93 height: 32px; 94 display: grid; 95 place-items: center; 96 color: var(--green); 97 } 98 99 .mark svg { 100 width: 24px; 101 height: 24px; 102 display: block; 103 } 104 105 nav { 106 display: flex; 107 gap: 16px; 108 flex-wrap: wrap; 109 color: var(--muted); 110 font-size: 13px; 111 font-weight: 750; 112 } 113 114 nav a { 115 color: var(--muted); 116 text-decoration: none; 117 } 118 119 nav a:hover { color: var(--green); } 120 121 pre, code { 122 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; 123 } 124 125 pre { 126 white-space: pre-wrap; 127 overflow-x: visible; 128 overflow-wrap: anywhere; 129 border: 1px solid var(--line); 130 border-radius: 8px; 131 padding: 14px; 132 background: #0b0d0e; 133 } 134 135 pre#blob, 136 #blob { 137 overflow-x: visible; 138 table-layout: fixed; 139 } 140 141 pre#blob { 142 --line-number-width: 5.25rem; 143 padding-left: var(--line-number-width); 144 } 145 146 pre#blob a.line { 147 display: inline-block; 148 width: var(--line-number-width); 149 margin-left: calc(-1 * var(--line-number-width)); 150 padding-right: .75rem; 151 text-align: right; 152 user-select: none; 153 } 154 155 pre#blob.md-source { 156 line-height: 1.62; 157 } 158 159 pre#blob.md-source .md-heading { 160 display: inline-block; 161 margin: .45rem 0 .15rem; 162 color: var(--text); 163 font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 164 font-weight: 850; 165 } 166 167 pre#blob.md-source .md-heading-1 { font-size: 1.75rem; } 168 pre#blob.md-source .md-heading-2 { font-size: 1.42rem; } 169 pre#blob.md-source .md-heading-3 { font-size: 1.18rem; } 170 pre#blob.md-source .md-heading-4, 171 pre#blob.md-source .md-heading-5, 172 pre#blob.md-source .md-heading-6 { font-size: 1.02rem; } 173 174 pre#blob.md-source strong { 175 color: #f4f8fa; 176 font-weight: 850; 177 } 178 179 pre#blob.md-source em { 180 color: #d7e0e5; 181 } 182 183 pre#blob.md-source .md-code { 184 padding: .08rem .28rem; 185 border: 1px solid rgba(141, 233, 205, .22); 186 border-radius: 4px; 187 background: rgba(141, 233, 205, .08); 188 color: var(--cyan); 189 } 190 191 pre#blob.md-source .md-marker, 192 pre#blob.md-source .md-fence { 193 color: #66747b; 194 } 195 196 pre#blob.md-source .md-blockquote { 197 color: #c9d4d9; 198 } 199 200 pre#blob.md-source .md-list { 201 color: #c6d1d6; 202 } 203 204 pre#blob.md-source .md-rule { 205 color: var(--line); 206 letter-spacing: .12rem; 207 } 208 209 #blob td:first-child { 210 width: 1%; 211 white-space: nowrap; 212 } 213 214 #blob td:last-child { 215 width: 99%; 216 min-width: 0; 217 } 218 219 #blob pre, 220 #blob code { 221 white-space: pre-wrap; 222 overflow-wrap: anywhere; 223 word-break: break-word; 224 } 225 226 #blob pre { 227 margin: 0; 228 border: 0; 229 border-radius: 0; 230 padding: 0; 231 background: transparent; 232 } 233 234 table { 235 width: 100%; 236 border-collapse: collapse; 237 margin: 18px 0 28px; 238 overflow: hidden; 239 border: 1px solid var(--line); 240 border-radius: 8px; 241 background: var(--panel); 242 } 243 244 th, td { 245 padding: 12px 14px; 246 border-bottom: 1px solid var(--line); 247 text-align: left; 248 vertical-align: top; 249 } 250 251 th { 252 color: var(--text); 253 font-size: 12px; 254 text-transform: uppercase; 255 letter-spacing: 0; 256 background: var(--panel-2); 257 } 258 259 tr:last-child td { border-bottom: 0; } 260 261 .topnav { 262 display: flex; 263 gap: 14px; 264 flex-wrap: wrap; 265 margin-bottom: 28px; 266 font-size: 14px; 267 font-weight: 800; 268 } 269 270 #header, #navbar { 271 display: flex; 272 gap: 14px; 273 flex-wrap: wrap; 274 align-items: center; 275 margin-bottom: 18px; 276 } 277 278 #desc { 279 color: #b7c3c9; 280 font-size: 15px; 281 } 282 283 #content > p:first-child { 284 margin: 18px 0; 285 padding: 10px 14px; 286 border: 1px solid var(--line); 287 border-radius: 8px; 288 background: var(--panel-2); 289 color: var(--text); 290 font-weight: 850; 291 } 292 293 #content > h1, 294 #content > h2, 295 #content > h3, 296 body > h1, 297 body > h2, 298 body > h3 { 299 margin: 18px auto; 300 padding: 10px 14px; 301 border: 1px solid var(--line); 302 border-radius: 8px; 303 background: var(--panel-2); 304 } 305 306 #navbar a { 307 font-weight: 800; 308 } 309 310 .hero { 311 padding: 18px 0 22px; 312 border-bottom: 1px solid var(--line); 313 margin-bottom: 24px; 314 } 315 316 .grid { 317 display: grid; 318 grid-template-columns: repeat(3, minmax(0, 1fr)); 319 gap: 12px; 320 margin: 18px 0 28px; 321 } 322 323 .download-grid { 324 grid-template-columns: repeat(4, minmax(0, 1fr)); 325 margin-bottom: 10px; 326 } 327 328 .light-wallet-card { 329 position: relative; 330 display: grid; 331 grid-template-columns: auto minmax(0, 1fr) auto; 332 gap: 18px; 333 align-items: center; 334 overflow: hidden; 335 margin: 18px 0 32px; 336 border: 1px solid rgba(141, 233, 205, .38); 337 border-radius: 14px; 338 padding: 22px; 339 background: 340 radial-gradient(circle at 88% 20%, rgba(213, 245, 95, .13), transparent 34%), 341 linear-gradient(135deg, rgba(141, 233, 205, .1), rgba(21, 25, 27, .96) 54%); 342 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); 343 } 344 345 .light-wallet-card::after { 346 content: ""; 347 position: absolute; 348 right: -54px; 349 bottom: -72px; 350 width: 180px; 351 height: 180px; 352 border: 1px solid rgba(213, 245, 95, .1); 353 border-radius: 50%; 354 pointer-events: none; 355 } 356 357 .light-wallet-icon { 358 position: relative; 359 z-index: 1; 360 display: grid; 361 place-items: center; 362 width: 58px; 363 height: 58px; 364 border: 1px solid rgba(141, 233, 205, .32); 365 border-radius: 16px; 366 background: rgba(141, 233, 205, .09); 367 color: var(--cyan); 368 } 369 370 .light-wallet-icon svg { 371 width: 29px; 372 height: 29px; 373 fill: none; 374 stroke: currentColor; 375 stroke-width: 1.7; 376 stroke-linecap: round; 377 } 378 379 .light-wallet-copy { 380 position: relative; 381 z-index: 1; 382 } 383 384 .light-wallet-copy h2 { 385 margin: 7px 0 4px; 386 font-size: 22px; 387 } 388 389 .light-wallet-copy p { 390 max-width: 620px; 391 margin: 0; 392 font-size: 14px; 393 } 394 395 .light-wallet-tags { 396 display: flex; 397 gap: 9px; 398 align-items: center; 399 } 400 401 .light-wallet-tags .tag { 402 margin: 0; 403 border-color: rgba(141, 233, 205, .42); 404 color: var(--cyan); 405 } 406 407 .wallet-platform { 408 color: var(--muted); 409 font-size: 11px; 410 font-weight: 800; 411 letter-spacing: .04em; 412 text-transform: uppercase; 413 } 414 415 .light-wallet-button { 416 position: relative; 417 z-index: 1; 418 gap: 8px; 419 white-space: nowrap; 420 } 421 422 .download-heading { 423 display: flex; 424 justify-content: space-between; 425 align-items: end; 426 gap: 16px; 427 margin-top: 10px; 428 } 429 430 .download-heading h2 { 431 margin: 0 0 3px; 432 } 433 434 .download-heading p { 435 margin: 0; 436 font-size: 14px; 437 } 438 439 .card { 440 min-width: 0; 441 border: 1px solid var(--line); 442 border-radius: 8px; 443 padding: 16px; 444 background: var(--panel); 445 } 446 447 .card h2 { 448 margin: 0 0 8px; 449 font-size: 18px; 450 } 451 452 .tag { 453 display: inline-flex; 454 margin-bottom: 10px; 455 border: 1px solid rgba(213, 245, 95, .42); 456 border-radius: 999px; 457 padding: 3px 8px; 458 color: var(--green); 459 font-size: 11px; 460 font-weight: 850; 461 text-transform: uppercase; 462 } 463 464 .tag.pending { 465 border-color: #3b464d; 466 color: var(--muted); 467 } 468 469 .button { 470 display: inline-flex; 471 align-items: center; 472 min-height: 38px; 473 border: 1px solid var(--green); 474 border-radius: 8px; 475 padding: 0 12px; 476 background: var(--green); 477 color: #11140c; 478 font-size: 14px; 479 font-weight: 850; 480 text-decoration: none; 481 } 482 483 .button.secondary { 484 border-color: var(--line); 485 background: var(--panel-2); 486 color: var(--text); 487 } 488 489 .muted { color: var(--muted); } 490 491 .checksum-link { 492 margin: 0 0 28px; 493 font-size: 13px; 494 } 495 496 .safety-note { 497 border: 1px solid rgba(255, 208, 112, .24); 498 border-left: 3px solid var(--amber); 499 border-radius: 0 10px 10px 0; 500 padding: 14px 16px; 501 background: rgba(255, 208, 112, .055); 502 color: #ddd5c5; 503 font-size: 15px; 504 line-height: 1.55; 505 } 506 507 .safety-note code { color: #ffe2a3; } 508 509 .source-build { 510 margin-top: 28px; 511 } 512 513 .source-build h2 { 514 margin-bottom: 8px; 515 } 516 517 .source-build p { 518 margin-top: 0; 519 } 520 521 #content, #files, #branches, #tags { 522 border: 1px solid var(--line); 523 border-radius: 8px; 524 background: var(--panel); 525 } 526 527 hr { 528 height: 1px; 529 border: 0; 530 background: var(--line); 531 } 532 533 @media (max-width: 780px) { 534 body { padding-bottom: 44px; } 535 .wrap { width: min(100% - 32px, 1060px); } 536 nav { display: none; } 537 h1 { font-size: 34px; } 538 .grid { grid-template-columns: 1fr; } 539 .download-grid { grid-template-columns: 1fr; } 540 .light-wallet-card { 541 grid-template-columns: auto minmax(0, 1fr); 542 } 543 .light-wallet-button { 544 grid-column: 1 / -1; 545 justify-content: center; 546 width: 100%; 547 } 548 table { display: block; overflow-x: auto; } 549 } 550 551 @media (min-width: 781px) and (max-width: 1020px) { 552 .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } 553 }