static-listing.css (6260B)
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 } 15 16 * { box-sizing: border-box; } 17 18 body { 19 margin: 0 auto; 20 padding: 0 0 56px; 21 background: var(--bg); 22 color: var(--text); 23 } 24 25 a { 26 color: var(--green); 27 text-decoration-thickness: 1px; 28 text-underline-offset: 3px; 29 } 30 31 a.line { 32 color: #6f7b82; 33 text-decoration: none; 34 } 35 36 a.line:hover, 37 a.line:target { 38 color: #a8b2b8; 39 background: rgba(255, 255, 255, .04); 40 } 41 42 img.logo, #logo { 43 display: none; 44 } 45 46 h1, h2, h3 { letter-spacing: 0; } 47 h1 { margin: 0 0 10px; font-size: 42px; line-height: 1; } 48 h2 { margin-top: 30px; font-size: 22px; } 49 p, td, th, li { color: #b7c3c9; line-height: 1.55; } 50 51 .wrap { 52 width: min(1060px, calc(100% - 44px)); 53 margin: 0 auto; 54 } 55 56 body > :not(.topbar):not(script) { 57 width: min(1060px, calc(100% - 44px)); 58 margin-left: auto; 59 margin-right: auto; 60 } 61 62 .topbar { 63 position: sticky; 64 top: 0; 65 z-index: 2; 66 border-bottom: 1px solid rgba(39, 48, 54, .9); 67 background: rgba(13, 15, 16, .82); 68 backdrop-filter: blur(12px); 69 } 70 71 .topbar .wrap { 72 display: flex; 73 justify-content: space-between; 74 gap: 18px; 75 align-items: center; 76 min-height: 58px; 77 } 78 79 .brand { 80 display: flex; 81 gap: 10px; 82 align-items: center; 83 color: var(--text); 84 font-weight: 900; 85 text-decoration: none; 86 } 87 88 .brand:hover { color: var(--green); } 89 90 .mark { 91 position: relative; 92 width: 32px; 93 height: 32px; 94 display: grid; 95 place-items: center; 96 overflow: hidden; 97 border: 1px solid #e8ff8d; 98 border-radius: 8px; 99 background: linear-gradient(145deg, #ecff8a 0%, var(--green) 54%, var(--cyan) 100%); 100 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 9px 20px rgba(213, 245, 95, .14); 101 } 102 103 .mark svg { 104 position: relative; 105 z-index: 1; 106 width: 21px; 107 height: 21px; 108 display: block; 109 } 110 111 .mark .mark-loop { 112 fill: none; 113 stroke: #101315; 114 stroke-width: 4.2; 115 stroke-linecap: round; 116 stroke-linejoin: round; 117 } 118 119 .mark .mark-dot { fill: #101315; } 120 121 nav { 122 display: flex; 123 gap: 16px; 124 flex-wrap: wrap; 125 color: var(--muted); 126 font-size: 13px; 127 font-weight: 750; 128 } 129 130 nav a { 131 color: var(--muted); 132 text-decoration: none; 133 } 134 135 nav a:hover { color: var(--green); } 136 137 pre, code { 138 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; 139 } 140 141 pre { 142 white-space: pre-wrap; 143 overflow-x: visible; 144 overflow-wrap: anywhere; 145 border: 1px solid var(--line); 146 border-radius: 8px; 147 padding: 14px; 148 background: #0b0d0e; 149 } 150 151 pre#blob, 152 #blob { 153 overflow-x: visible; 154 table-layout: fixed; 155 } 156 157 #blob td:first-child { 158 width: 1%; 159 white-space: nowrap; 160 } 161 162 #blob td:last-child { 163 width: 99%; 164 min-width: 0; 165 } 166 167 #blob pre, 168 #blob code { 169 white-space: pre-wrap; 170 overflow-wrap: anywhere; 171 word-break: break-word; 172 } 173 174 #blob pre { 175 margin: 0; 176 border: 0; 177 border-radius: 0; 178 padding: 0; 179 background: transparent; 180 } 181 182 table { 183 width: 100%; 184 border-collapse: collapse; 185 margin: 18px 0 28px; 186 overflow: hidden; 187 border: 1px solid var(--line); 188 border-radius: 8px; 189 background: var(--panel); 190 } 191 192 th, td { 193 padding: 12px 14px; 194 border-bottom: 1px solid var(--line); 195 text-align: left; 196 vertical-align: top; 197 } 198 199 th { 200 color: var(--text); 201 font-size: 12px; 202 text-transform: uppercase; 203 letter-spacing: 0; 204 background: var(--panel-2); 205 } 206 207 tr:last-child td { border-bottom: 0; } 208 209 .topnav { 210 display: flex; 211 gap: 14px; 212 flex-wrap: wrap; 213 margin-bottom: 28px; 214 font-size: 14px; 215 font-weight: 800; 216 } 217 218 #header, #navbar { 219 display: flex; 220 gap: 14px; 221 flex-wrap: wrap; 222 align-items: center; 223 margin-bottom: 18px; 224 } 225 226 #desc { 227 color: #b7c3c9; 228 font-size: 15px; 229 } 230 231 #content > p:first-child { 232 margin: 18px 0; 233 padding: 10px 14px; 234 border: 1px solid var(--line); 235 border-radius: 8px; 236 background: var(--panel-2); 237 color: var(--text); 238 font-weight: 850; 239 } 240 241 #content > h1, 242 #content > h2, 243 #content > h3, 244 body > h1, 245 body > h2, 246 body > h3 { 247 margin: 18px auto; 248 padding: 10px 14px; 249 border: 1px solid var(--line); 250 border-radius: 8px; 251 background: var(--panel-2); 252 } 253 254 #navbar a { 255 font-weight: 800; 256 } 257 258 .hero { 259 padding: 18px 0 22px; 260 border-bottom: 1px solid var(--line); 261 margin-bottom: 24px; 262 } 263 264 .grid { 265 display: grid; 266 grid-template-columns: repeat(3, minmax(0, 1fr)); 267 gap: 12px; 268 margin: 18px 0 28px; 269 } 270 271 .download-grid { 272 grid-template-columns: repeat(4, minmax(0, 1fr)); 273 margin-bottom: 10px; 274 } 275 276 .card { 277 min-width: 0; 278 border: 1px solid var(--line); 279 border-radius: 8px; 280 padding: 16px; 281 background: var(--panel); 282 } 283 284 .card h2 { 285 margin: 0 0 8px; 286 font-size: 18px; 287 } 288 289 .tag { 290 display: inline-flex; 291 margin-bottom: 10px; 292 border: 1px solid rgba(213, 245, 95, .42); 293 border-radius: 999px; 294 padding: 3px 8px; 295 color: var(--green); 296 font-size: 11px; 297 font-weight: 850; 298 text-transform: uppercase; 299 } 300 301 .tag.pending { 302 border-color: #3b464d; 303 color: var(--muted); 304 } 305 306 .button { 307 display: inline-flex; 308 align-items: center; 309 min-height: 38px; 310 border: 1px solid var(--green); 311 border-radius: 8px; 312 padding: 0 12px; 313 background: var(--green); 314 color: #11140c; 315 font-size: 14px; 316 font-weight: 850; 317 text-decoration: none; 318 } 319 320 .button.secondary { 321 border-color: var(--line); 322 background: var(--panel-2); 323 color: var(--text); 324 } 325 326 .muted { color: var(--muted); } 327 328 .checksum-link { 329 margin: 0 0 28px; 330 font-size: 13px; 331 } 332 333 .source-build { 334 margin-top: 28px; 335 } 336 337 .source-build h2 { 338 margin-bottom: 8px; 339 } 340 341 .source-build p { 342 margin-top: 0; 343 } 344 345 #content, #files, #branches, #tags { 346 border: 1px solid var(--line); 347 border-radius: 8px; 348 background: var(--panel); 349 } 350 351 hr { 352 height: 1px; 353 border: 0; 354 background: var(--line); 355 } 356 357 @media (max-width: 780px) { 358 body { padding-bottom: 44px; } 359 .wrap { width: min(100% - 32px, 1060px); } 360 nav { display: none; } 361 h1 { font-size: 34px; } 362 .grid { grid-template-columns: 1fr; } 363 .download-grid { grid-template-columns: 1fr; } 364 table { display: block; overflow-x: auto; } 365 } 366 367 @media (min-width: 781px) and (max-width: 1020px) { 368 .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } 369 }