new.css (7593B)
1 :root { 2 --nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 3 --nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace; 4 5 /* Light theme */ 6 --nc-tx-1: #000000; 7 --nc-tx-2: #1A1A1A; 8 --nc-bg-1: #FFFFFF; 9 --nc-bg-2: #F6F8FA; 10 --nc-bg-3: #E5E7EB; 11 --nc-lk-1: #0070F3; 12 --nc-lk-2: #0366D6; 13 --nc-lk-tx: #FFFFFF; 14 --nc-ac-1: #79FFE1; 15 --nc-ac-tx: #0C4047; 16 17 /* Dark theme */ 18 --nc-d-tx-1: #ffffff; 19 --nc-d-tx-2: #eeeeee; 20 --nc-d-bg-1: #000000; 21 --nc-d-bg-2: #111111; 22 --nc-d-bg-3: #222222; 23 --nc-d-lk-1: #3291FF; 24 --nc-d-lk-2: #0070F3; 25 --nc-d-lk-tx: #FFFFFF; 26 --nc-d-ac-1: #7928CA; 27 --nc-d-ac-tx: #FFFFFF; 28 } 29 30 @media (prefers-color-scheme: dark) { 31 :root { 32 --nc-tx-1: var(--nc-d-tx-1); 33 --nc-tx-2: var(--nc-d-tx-2); 34 --nc-bg-1: var(--nc-d-bg-1); 35 --nc-bg-2: var(--nc-d-bg-2); 36 --nc-bg-3: var(--nc-d-bg-3); 37 --nc-lk-1: var(--nc-d-lk-1); 38 --nc-lk-2: var(--nc-d-lk-2); 39 --nc-lk-tx: var(--nc--dlk-tx); 40 --nc-ac-1: var(--nc-d-ac-1); 41 --nc-ac-tx: var(--nc--dac-tx); 42 } 43 } 44 45 * { 46 /* Reset margins and padding */ 47 margin: 0; 48 padding: 0; 49 } 50 51 address, 52 area, 53 article, 54 aside, 55 audio, 56 blockquote, 57 datalist, 58 details, 59 dl, 60 fieldset, 61 figure, 62 form, 63 input, 64 iframe, 65 img, 66 meter, 67 nav, 68 ol, 69 optgroup, 70 option, 71 output, 72 p, 73 pre, 74 progress, 75 ruby, 76 section, 77 table, 78 textarea, 79 ul, 80 video { 81 /* Margins for most elements */ 82 margin-bottom: 1rem; 83 } 84 85 html,input,select,button { 86 /* Set body font family and some finicky elements */ 87 font-family: var(--nc-font-sans); 88 } 89 90 body { 91 /* Center body in page */ 92 margin: 0 auto; 93 max-width: 750px; 94 padding: 2rem; 95 border-radius: 6px; 96 overflow-x: hidden; 97 word-break: break-word; 98 overflow-wrap: break-word; 99 background: var(--nc-bg-1); 100 101 /* Main body text */ 102 color: var(--nc-tx-2); 103 font-size: 1.03rem; 104 line-height: 1.5; 105 } 106 107 ::selection { 108 /* Set background color for selected text */ 109 background: var(--nc-ac-1); 110 color: var(--nc-ac-tx); 111 } 112 113 h1,h2,h3,h4,h5,h6 { 114 line-height: 1; 115 color: var(--nc-tx-1); 116 padding-top: .875rem; 117 } 118 119 h1, 120 h2, 121 h3 { 122 color: var(--nc-tx-1); 123 padding-bottom: 2px; 124 margin-bottom: 8px; 125 border-bottom: 1px solid var(--nc-bg-2); 126 } 127 128 h4, 129 h5, 130 h6 { 131 margin-bottom: .3rem; 132 } 133 134 h1 { 135 font-size: 2.25rem; 136 } 137 138 h2 { 139 font-size: 1.85rem; 140 } 141 142 h3 { 143 font-size: 1.55rem; 144 } 145 146 h4 { 147 font-size: 1.25rem; 148 } 149 150 h5 { 151 font-size: 1rem; 152 } 153 154 h6 { 155 font-size: .875rem; 156 } 157 158 a { 159 color: var(--nc-lk-1); 160 } 161 162 a:hover { 163 color: var(--nc-lk-2); 164 } 165 166 abbr:hover { 167 /* Set the '?' cursor while hovering an abbreviation */ 168 cursor: help; 169 } 170 171 blockquote { 172 padding: 1.5rem; 173 background: var(--nc-bg-2); 174 border-left: 5px solid var(--nc-bg-3); 175 } 176 177 abbr { 178 cursor: help; 179 } 180 181 blockquote *:last-child { 182 padding-bottom: 0; 183 margin-bottom: 0; 184 } 185 186 header { 187 background: var(--nc-bg-2); 188 border-bottom: 1px solid var(--nc-bg-3); 189 padding: 2rem 1.5rem; 190 191 /* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */ 192 193 margin: -2rem calc(50% - 50vw) 2rem; 194 195 /* Shorthand for: 196 197 margin-top: -2rem; 198 margin-bottom: 2rem; 199 200 margin-left: calc(50% - 50vw); 201 margin-right: calc(50% - 50vw); */ 202 203 padding-left: calc(50vw - 50%); 204 padding-right: calc(50vw - 50%); 205 } 206 207 header h1, 208 header h2, 209 header h3 { 210 padding-bottom: 0; 211 border-bottom: 0; 212 } 213 214 header > *:first-child { 215 margin-top: 0; 216 padding-top: 0; 217 } 218 219 header > *:last-child { 220 margin-bottom: 0; 221 } 222 223 a button, 224 button, 225 input[type="submit"], 226 input[type="reset"], 227 input[type="button"] { 228 font-size: 1rem; 229 display: inline-block; 230 padding: 6px 12px; 231 text-align: center; 232 text-decoration: none; 233 white-space: nowrap; 234 background: var(--nc-lk-1); 235 color: var(--nc-lk-tx); 236 border: 0; 237 border-radius: 4px; 238 box-sizing: border-box; 239 cursor: pointer; 240 color: var(--nc-lk-tx); 241 } 242 243 a button[disabled], 244 button[disabled], 245 input[type="submit"][disabled], 246 input[type="reset"][disabled], 247 input[type="button"][disabled] { 248 cursor: default; 249 opacity: .5; 250 251 /* Set the [X] cursor while hovering a disabled link */ 252 cursor: not-allowed; 253 } 254 255 .button:focus, 256 .button:enabled:hover, 257 button:focus, 258 button:enabled:hover, 259 input[type="submit"]:focus, 260 input[type="submit"]:enabled:hover, 261 input[type="reset"]:focus, 262 input[type="reset"]:enabled:hover, 263 input[type="button"]:focus, 264 input[type="button"]:enabled:hover { 265 background: var(--nc-lk-2); 266 } 267 268 a img { 269 margin-bottom: 0px; 270 } 271 272 code, 273 pre, 274 kbd, 275 samp { 276 /* Set the font family for monospaced elements */ 277 font-family: var(--nc-font-mono); 278 } 279 280 code, 281 samp, 282 kbd, 283 pre { 284 /* The main preformatted style. This is changed slightly across different cases. */ 285 background: var(--nc-bg-2); 286 border: 1px solid var(--nc-bg-3); 287 border-radius: 4px; 288 padding: 3px 6px; 289 /* ↓ font-size is relative to containing element, so it scales for titles*/ 290 font-size: 0.9em; 291 } 292 293 kbd { 294 /* Makes the kbd element look like a keyboard key */ 295 border-bottom: 3px solid var(--nc-bg-3); 296 } 297 298 pre { 299 padding: 1rem 1.4rem; 300 max-width: 100%; 301 overflow: auto; 302 } 303 304 pre code { 305 /* When <code> is in a <pre>, reset it's formatting to blend in */ 306 background: inherit; 307 font-size: inherit; 308 color: inherit; 309 border: 0; 310 padding: 0; 311 margin: 0; 312 } 313 314 code pre { 315 /* When <pre> is in a <code>, reset it's formatting to blend in */ 316 display: inline; 317 background: inherit; 318 font-size: inherit; 319 color: inherit; 320 border: 0; 321 padding: 0; 322 margin: 0; 323 } 324 325 details { 326 /* Make the <details> look more "clickable" */ 327 padding: .6rem 1rem; 328 background: var(--nc-bg-2); 329 border: 1px solid var(--nc-bg-3); 330 border-radius: 4px; 331 } 332 333 summary { 334 /* Makes the <summary> look more like a "clickable" link with the pointer cursor */ 335 cursor: pointer; 336 font-weight: bold; 337 } 338 339 details[open] { 340 /* Adjust the <details> padding while open */ 341 padding-bottom: .75rem; 342 } 343 344 details[open] summary { 345 /* Adjust the <details> padding while open */ 346 margin-bottom: 6px; 347 } 348 349 details[open]>*:last-child { 350 /* Resets the bottom margin of the last element in the <details> while <details> is opened. This prevents double margins/paddings. */ 351 margin-bottom: 0; 352 } 353 354 dt { 355 font-weight: bold; 356 } 357 358 dd::before { 359 /* Add an arrow to data table definitions */ 360 content: '→ '; 361 } 362 363 hr { 364 /* Reset the border of the <hr> separator, then set a better line */ 365 border: 0; 366 border-bottom: 1px solid var(--nc-bg-3); 367 margin: 1rem auto; 368 } 369 370 fieldset { 371 margin-top: 1rem; 372 padding: 2rem; 373 border: 1px solid var(--nc-bg-3); 374 border-radius: 4px; 375 } 376 377 legend { 378 padding: auto .5rem; 379 } 380 381 table { 382 /* border-collapse sets the table's elements to share borders, rather than floating as separate "boxes". */ 383 border-collapse: collapse; 384 width: 100% 385 } 386 387 td, 388 th { 389 border: 1px solid var(--nc-bg-3); 390 text-align: left; 391 padding: .5rem; 392 } 393 394 th { 395 background: var(--nc-bg-2); 396 } 397 398 tr:nth-child(even) { 399 /* Set every other cell slightly darker. Improves readability. */ 400 background: var(--nc-bg-2); 401 } 402 403 table caption { 404 font-weight: bold; 405 margin-bottom: .5rem; 406 } 407 408 textarea { 409 /* Don't let the <textarea> extend off the screen naturally or when dragged by the user */ 410 max-width: 100%; 411 } 412 413 ol, 414 ul { 415 /* Replace the browser default padding */ 416 padding-left: 2rem; 417 } 418 419 li { 420 margin-top: .4rem; 421 } 422 423 ul ul, 424 ol ul, 425 ul ol, 426 ol ol { 427 margin-bottom: 0; 428 } 429 430 mark { 431 padding: 3px 6px; 432 background: var(--nc-ac-1); 433 color: var(--nc-ac-tx); 434 } 435 436 textarea, 437 select, 438 input { 439 padding: 6px 12px; 440 margin-bottom: .5rem; 441 background: var(--nc-bg-2); 442 color: var(--nc-tx-2); 443 border: 1px solid var(--nc-bg-3); 444 border-radius: 4px; 445 box-shadow: none; 446 box-sizing: border-box; 447 } 448 449 img { 450 max-width: 100%; 451 }