water.css
1 :root { 2 --background-body: #2a2a2f; 3 --background: #161f27; 4 --background-alt: #1a242f; 5 --selection: #1c76c5; 6 --text-main: #c0c6cc; 7 --text-bright: #dbe0e3; 8 /*--text-bright: #fff;*/ 9 --text-muted: #a9b1ba; 10 --links: #7eb7e1; 11 --focus: #0096bfab; 12 --border: #526980; 13 --code: #ffbe85; 14 --animation-duration: 0.1s; 15 --button-base: #0c151c; 16 --button-hover: #040a0f; 17 --scrollbar-thumb: var(--button-hover); 18 --scrollbar-thumb-hover: rgb(0, 0, 0); 19 --form-placeholder: #a9a9a9; 20 --form-text: #fff; 21 --variable: #d941e2; 22 --highlight: #efdb43; 23 --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E"); 24 } 25 26 @font-face { 27 font-family: yond; 28 src: url(yond.woff2); 29 } 30 31 html { 32 text-size-adjust: none; 33 -webkit-text-size-adjust: none; 34 -moz-text-size-adjust: none; 35 -ms-text-size-adjust: none; 36 } 37 38 body { 39 font-size: 1.1em; 40 } 41 42 body button { 43 margin-bottom: 0.8em; 44 margin-left: 0.2em; 45 margin-left: 0.2em; 46 } 47 48 body li { 49 margin-top: 0.4em; 50 margin-bottom: 0.4em; 51 } 52 53 span.menu a { 54 text-decoration: none; 55 } 56 57 body .logo { 58 font-family: "yond", "monospace"; 59 font-size: 5em; 60 text-align: center; 61 width: 100%; 62 display: block; 63 line-height: 0.75em; 64 color: #fff; 65 color: var(--text-bright); 66 } 67 68 body a.topic_link { 69 color: #dbdbdb; 70 color: var(--text-main); 71 } 72 73 body .article_date { 74 font-family: "yond", "monospace"; 75 font-size: 1.75em; 76 text-align: right; 77 line-height: 0.5em; 78 margin-right: -0.33em; 79 margin-bottom: -0.35em; 80 } 81 82 body .article_photo { 83 width: 100%; 84 } 85 86 body .topic { 87 display: inline-block; 88 vertical-align: top; 89 width: 48%; 90 margin-bottom: 2.5em; 91 } 92 93 body .topic:nth-child(even) {margin-left: 2%} 94 body .topic:nth-child(odd) {margin-right: 2%} 95 96 body .topic .topic_image { 97 display: block; 98 width: 100%; 99 } 100 101 /*body .topic .topic_image { border: 1px solid #666; }*/ 102 103 body .topic .topic_title { 104 display: block; 105 font-weight: 600; 106 font-size: 1.2em; 107 margin-top: 0.35em; 108 margin-bottom: 0.2em; 109 } 110 111 body .topic .topic_date { 112 display: block; 113 font-size: 0.85em; 114 font-weight: 400; 115 font-style: oblique; 116 text-align: left; 117 margin-bottom: 1em; 118 } 119 120 table#loracalc { 121 /*border: 1px solid #888;*/ 122 min-width: 50%; 123 width: auto; 124 } 125 126 table#loracalc tbody tr td { 127 vertical-align: middle; 128 font-weight: bold; 129 } 130 131 table#loracalc tbody tr td.lcfield { 132 padding-left: 5em; 133 } 134 135 table#loracalc tbody tr:nth-child(2n) { 136 background-color: transparent; 137 } 138 139 table#loracalc input { 140 display: inline-block; 141 } 142 143 144 html { 145 scrollbar-color: #040a0f #202b38; 146 scrollbar-color: var(--scrollbar-thumb) var(--background-body); 147 scrollbar-width: thin; 148 } 149 150 body { 151 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; 152 line-height: 1.4; 153 max-width: 800px; 154 margin: 20px auto; 155 padding: 0 10px; 156 word-wrap: break-word; 157 color: #dbdbdb; 158 color: var(--text-main); 159 background: #202b38; 160 background: var(--background-body); 161 text-rendering: optimizeLegibility; 162 } 163 164 button { 165 transition: 166 background-color 0.1s linear, 167 border-color 0.1s linear, 168 color 0.1s linear, 169 box-shadow 0.1s linear, 170 transform 0.1s ease; 171 transition: 172 background-color var(--animation-duration) linear, 173 border-color var(--animation-duration) linear, 174 color var(--animation-duration) linear, 175 box-shadow var(--animation-duration) linear, 176 transform var(--animation-duration) ease; 177 } 178 179 input { 180 transition: 181 background-color 0.1s linear, 182 border-color 0.1s linear, 183 color 0.1s linear, 184 box-shadow 0.1s linear, 185 transform 0.1s ease; 186 transition: 187 background-color var(--animation-duration) linear, 188 border-color var(--animation-duration) linear, 189 color var(--animation-duration) linear, 190 box-shadow var(--animation-duration) linear, 191 transform var(--animation-duration) ease; 192 } 193 194 textarea { 195 transition: 196 background-color 0.1s linear, 197 border-color 0.1s linear, 198 color 0.1s linear, 199 box-shadow 0.1s linear, 200 transform 0.1s ease; 201 transition: 202 background-color var(--animation-duration) linear, 203 border-color var(--animation-duration) linear, 204 color var(--animation-duration) linear, 205 box-shadow var(--animation-duration) linear, 206 transform var(--animation-duration) ease; 207 } 208 209 h1 { 210 font-size: 1.7em; 211 margin-top: 0; 212 } 213 214 h1, 215 h2, 216 h3, 217 h4, 218 h5, 219 h6 { 220 margin-bottom: 12px; 221 margin-top: 24px; 222 } 223 224 h1 { 225 color: #fff; 226 color: var(--text-bright); 227 } 228 229 h2 { 230 font-size: 1.4em; 231 color: #fff; 232 color: var(--text-bright); 233 } 234 235 h3 { 236 color: #fff; 237 color: var(--text-bright); 238 } 239 240 h4 { 241 color: #fff; 242 color: var(--text-bright); 243 } 244 245 h5 { 246 color: #fff; 247 color: var(--text-bright); 248 } 249 250 h6 { 251 color: #fff; 252 color: var(--text-bright); 253 } 254 255 strong { 256 color: #fff; 257 color: var(--text-bright); 258 } 259 260 h1, 261 h2, 262 h3, 263 h4, 264 h5, 265 h6, 266 b, 267 strong, 268 th { 269 font-weight: 600; 270 } 271 272 q::before { 273 content: none; 274 } 275 276 q::after { 277 content: none; 278 } 279 280 blockquote { 281 border-left: 4px solid #0096bfab; 282 border-left: 4px solid var(--focus); 283 margin: 1.5em 0; 284 padding: 0.5em 1em; 285 font-style: italic; 286 } 287 288 q { 289 border-left: 4px solid #0096bfab; 290 border-left: 4px solid var(--focus); 291 margin: 1.5em 0; 292 padding: 0.5em 1em; 293 font-style: italic; 294 } 295 296 blockquote > footer { 297 font-style: normal; 298 border: 0; 299 } 300 301 blockquote cite { 302 font-style: normal; 303 } 304 305 address { 306 font-style: normal; 307 } 308 309 a[href^='mailto\:']::before { 310 content: '📧 '; 311 } 312 313 a[href^='tel\:']::before { 314 content: '📞 '; 315 } 316 317 a[href^='sms\:']::before { 318 content: '💬 '; 319 } 320 321 mark { 322 background-color: #efdb43; 323 background-color: var(--highlight); 324 border-radius: 2px; 325 padding: 0 2px 0 2px; 326 color: #000; 327 } 328 329 a > code, 330 a > strong { 331 color: inherit; 332 } 333 334 button, 335 select, 336 input[type='submit'], 337 input[type='reset'], 338 input[type='button'], 339 input[type='checkbox'], 340 input[type='range'], 341 input[type='radio'] { 342 cursor: pointer; 343 } 344 345 input, 346 select { 347 display: block; 348 } 349 350 [type='checkbox'], 351 [type='radio'] { 352 display: initial; 353 } 354 355 input { 356 color: #fff; 357 color: var(--form-text); 358 background-color: #161f27; 359 background-color: var(--background); 360 font-family: inherit; 361 font-size: inherit; 362 margin-right: 6px; 363 margin-bottom: 6px; 364 padding: 10px; 365 border: none; 366 border-radius: 6px; 367 outline: none; 368 } 369 370 button { 371 color: #fff; 372 color: var(--form-text); 373 background-color: #161f27; 374 background-color: var(--background); 375 font-family: inherit; 376 font-size: inherit; 377 margin-right: 6px; 378 margin-bottom: 6px; 379 padding: 10px; 380 border: none; 381 border-radius: 6px; 382 outline: none; 383 } 384 385 textarea { 386 color: #fff; 387 color: var(--form-text); 388 background-color: #161f27; 389 background-color: var(--background); 390 font-family: inherit; 391 font-size: inherit; 392 margin-right: 6px; 393 margin-bottom: 6px; 394 padding: 10px; 395 border: none; 396 border-radius: 6px; 397 outline: none; 398 } 399 400 select { 401 color: #fff; 402 color: var(--form-text); 403 background-color: #161f27; 404 background-color: var(--background); 405 font-family: inherit; 406 font-size: inherit; 407 margin-right: 6px; 408 margin-bottom: 6px; 409 padding: 10px; 410 border: none; 411 border-radius: 6px; 412 outline: none; 413 } 414 415 button { 416 background-color: #0c151c; 417 background-color: var(--button-base); 418 padding-right: 30px; 419 padding-left: 30px; 420 } 421 422 input[type='submit'] { 423 background-color: #0c151c; 424 background-color: var(--button-base); 425 padding-right: 30px; 426 padding-left: 30px; 427 } 428 429 input[type='reset'] { 430 background-color: #0c151c; 431 background-color: var(--button-base); 432 padding-right: 30px; 433 padding-left: 30px; 434 } 435 436 input[type='button'] { 437 background-color: #0c151c; 438 background-color: var(--button-base); 439 padding-right: 30px; 440 padding-left: 30px; 441 } 442 443 button:hover { 444 background: #040a0f; 445 background: var(--button-hover); 446 } 447 448 input[type='submit']:hover { 449 background: #040a0f; 450 background: var(--button-hover); 451 } 452 453 input[type='reset']:hover { 454 background: #040a0f; 455 background: var(--button-hover); 456 } 457 458 input[type='button']:hover { 459 background: #040a0f; 460 background: var(--button-hover); 461 } 462 463 input[type='color'] { 464 min-height: 2rem; 465 padding: 8px; 466 cursor: pointer; 467 } 468 469 input[type='checkbox'], 470 input[type='radio'] { 471 height: 1em; 472 width: 1em; 473 } 474 475 input[type='radio'] { 476 border-radius: 100%; 477 } 478 479 input { 480 vertical-align: top; 481 } 482 483 label { 484 vertical-align: middle; 485 margin-bottom: 4px; 486 display: inline-block; 487 } 488 489 input:not([type='checkbox']):not([type='radio']), 490 input[type='range'], 491 select, 492 button, 493 textarea { 494 -webkit-appearance: none; 495 } 496 497 textarea { 498 display: block; 499 margin-right: 0; 500 box-sizing: border-box; 501 resize: vertical; 502 } 503 504 textarea:not([cols]) { 505 width: 100%; 506 } 507 508 textarea:not([rows]) { 509 min-height: 40px; 510 height: 140px; 511 } 512 513 select { 514 background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat; 515 background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; 516 padding-right: 35px; 517 } 518 519 select::-ms-expand { 520 display: none; 521 } 522 523 select[multiple] { 524 padding-right: 10px; 525 background-image: none; 526 overflow-y: auto; 527 } 528 529 input:focus { 530 box-shadow: 0 0 0 2px #0096bfab; 531 box-shadow: 0 0 0 2px var(--focus); 532 } 533 534 select:focus { 535 box-shadow: 0 0 0 2px #0096bfab; 536 box-shadow: 0 0 0 2px var(--focus); 537 } 538 539 button:focus { 540 box-shadow: 0 0 0 2px #0096bfab; 541 box-shadow: 0 0 0 2px var(--focus); 542 } 543 544 textarea:focus { 545 box-shadow: 0 0 0 2px #0096bfab; 546 box-shadow: 0 0 0 2px var(--focus); 547 } 548 549 input[type='checkbox']:active, 550 input[type='radio']:active, 551 input[type='submit']:active, 552 input[type='reset']:active, 553 input[type='button']:active, 554 input[type='range']:active, 555 button:active { 556 transform: translateY(2px); 557 } 558 559 input:disabled, 560 select:disabled, 561 button:disabled, 562 textarea:disabled { 563 cursor: not-allowed; 564 opacity: 0.5; 565 } 566 567 ::-moz-placeholder { 568 color: #a9a9a9; 569 color: var(--form-placeholder); 570 } 571 572 :-ms-input-placeholder { 573 color: #a9a9a9; 574 color: var(--form-placeholder); 575 } 576 577 ::-ms-input-placeholder { 578 color: #a9a9a9; 579 color: var(--form-placeholder); 580 } 581 582 ::placeholder { 583 color: #a9a9a9; 584 color: var(--form-placeholder); 585 } 586 587 fieldset { 588 border: 1px #0096bfab solid; 589 border: 1px var(--focus) solid; 590 border-radius: 6px; 591 margin: 0; 592 margin-bottom: 12px; 593 padding: 10px; 594 } 595 596 legend { 597 font-size: 0.9em; 598 font-weight: 600; 599 } 600 601 input[type='range'] { 602 margin: 10px 0; 603 padding: 10px 0; 604 background: transparent; 605 } 606 607 input[type='range']:focus { 608 outline: none; 609 } 610 611 input[type='range']::-webkit-slider-runnable-track { 612 width: 100%; 613 height: 9.5px; 614 -webkit-transition: 0.2s; 615 transition: 0.2s; 616 background: #161f27; 617 background: var(--background); 618 border-radius: 3px; 619 } 620 621 input[type='range']::-webkit-slider-thumb { 622 box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d; 623 height: 20px; 624 width: 20px; 625 border-radius: 50%; 626 background: #526980; 627 background: var(--border); 628 -webkit-appearance: none; 629 margin-top: -7px; 630 } 631 632 input[type='range']:focus::-webkit-slider-runnable-track { 633 background: #161f27; 634 background: var(--background); 635 } 636 637 input[type='range']::-moz-range-track { 638 width: 100%; 639 height: 9.5px; 640 -moz-transition: 0.2s; 641 transition: 0.2s; 642 background: #161f27; 643 background: var(--background); 644 border-radius: 3px; 645 } 646 647 input[type='range']::-moz-range-thumb { 648 box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; 649 height: 20px; 650 width: 20px; 651 border-radius: 50%; 652 background: #526980; 653 background: var(--border); 654 } 655 656 input[type='range']::-ms-track { 657 width: 100%; 658 height: 9.5px; 659 background: transparent; 660 border-color: transparent; 661 border-width: 16px 0; 662 color: transparent; 663 } 664 665 input[type='range']::-ms-fill-lower { 666 background: #161f27; 667 background: var(--background); 668 border: 0.2px solid #010101; 669 border-radius: 3px; 670 box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; 671 } 672 673 input[type='range']::-ms-fill-upper { 674 background: #161f27; 675 background: var(--background); 676 border: 0.2px solid #010101; 677 border-radius: 3px; 678 box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; 679 } 680 681 input[type='range']::-ms-thumb { 682 box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; 683 border: 1px solid #000; 684 height: 20px; 685 width: 20px; 686 border-radius: 50%; 687 background: #526980; 688 background: var(--border); 689 } 690 691 input[type='range']:focus::-ms-fill-lower { 692 background: #161f27; 693 background: var(--background); 694 } 695 696 input[type='range']:focus::-ms-fill-upper { 697 background: #161f27; 698 background: var(--background); 699 } 700 701 a { 702 text-decoration: underline; 703 color: #41adff; 704 color: var(--links); 705 } 706 707 a:hover { 708 text-decoration: underline; 709 } 710 711 code { 712 background: #161f27; 713 background: var(--background); 714 color: #ffbe85; 715 color: var(--code); 716 padding: 2.5px 5px; 717 border-radius: 6px; 718 font-size: 1em; 719 } 720 721 samp { 722 background: #161f27; 723 background: var(--background); 724 color: #ffbe85; 725 color: var(--code); 726 padding: 2.5px 5px; 727 border-radius: 6px; 728 font-size: 1em; 729 } 730 731 time { 732 background: #161f27; 733 background: var(--background); 734 color: #ffbe85; 735 color: var(--code); 736 padding: 2.5px 5px; 737 border-radius: 6px; 738 font-size: 1em; 739 } 740 741 pre > code { 742 padding: 10px; 743 display: block; 744 overflow-x: auto; 745 } 746 747 var { 748 color: #d941e2; 749 color: var(--variable); 750 font-style: normal; 751 font-family: monospace; 752 } 753 754 kbd { 755 background: #161f27; 756 background: var(--background); 757 border: 1px solid #526980; 758 border: 1px solid var(--border); 759 border-radius: 2px; 760 color: #dbdbdb; 761 color: var(--text-main); 762 padding: 2px 4px 2px 4px; 763 } 764 765 img, 766 video { 767 max-width: 100%; 768 height: auto; 769 display: block; 770 margin-left: auto; 771 margin-right: auto; 772 } 773 774 hr { 775 border: none; 776 border-top: 1px solid #526980; 777 border-top: 1px solid var(--border); 778 } 779 780 table { 781 border-collapse: collapse; 782 margin-bottom: 10px; 783 width: 100%; 784 table-layout: fixed; 785 } 786 787 table caption { 788 text-align: left; 789 } 790 791 td, 792 th { 793 padding: 6px; 794 text-align: left; 795 vertical-align: top; 796 word-wrap: break-word; 797 } 798 799 thead { 800 border-bottom: 1px solid #526980; 801 border-bottom: 1px solid var(--border); 802 } 803 804 tfoot { 805 border-top: 1px solid #526980; 806 border-top: 1px solid var(--border); 807 } 808 809 tbody tr:nth-child(even) { 810 background-color: #161f27; 811 background-color: var(--background); 812 } 813 814 tbody tr:nth-child(even) button { 815 background-color: #1a242f; 816 background-color: var(--background-alt); 817 } 818 819 tbody tr:nth-child(even) button:hover { 820 background-color: #202b38; 821 background-color: var(--background-body); 822 } 823 824 ::-webkit-scrollbar { 825 height: 10px; 826 width: 10px; 827 } 828 829 ::-webkit-scrollbar-track { 830 background: #161f27; 831 background: var(--background); 832 border-radius: 6px; 833 } 834 835 ::-webkit-scrollbar-thumb { 836 background: #040a0f; 837 background: var(--scrollbar-thumb); 838 border-radius: 6px; 839 } 840 841 ::-webkit-scrollbar-thumb:hover { 842 background: rgb(0, 0, 0); 843 background: var(--scrollbar-thumb-hover); 844 } 845 846 ::-moz-selection { 847 background-color: #1c76c5; 848 background-color: var(--selection); 849 color: #fff; 850 color: var(--text-bright); 851 } 852 853 ::selection { 854 background-color: #1c76c5; 855 background-color: var(--selection); 856 color: #fff; 857 color: var(--text-bright); 858 } 859 860 details { 861 display: flex; 862 flex-direction: column; 863 align-items: flex-start; 864 background-color: #1a242f; 865 background-color: var(--background-alt); 866 padding: 10px 10px 0; 867 margin: 1em 0; 868 border-radius: 6px; 869 overflow: hidden; 870 } 871 872 details[open] { 873 padding: 10px; 874 } 875 876 details > :last-child { 877 margin-bottom: 0; 878 } 879 880 details[open] summary { 881 margin-bottom: 10px; 882 } 883 884 summary { 885 display: list-item; 886 background-color: #161f27; 887 background-color: var(--background); 888 padding: 10px; 889 margin: -10px -10px 0; 890 cursor: pointer; 891 outline: none; 892 } 893 894 summary:hover, 895 summary:focus { 896 text-decoration: underline; 897 } 898 899 details > :not(summary) { 900 margin-top: 0; 901 } 902 903 summary::-webkit-details-marker { 904 color: #dbdbdb; 905 color: var(--text-main); 906 } 907 908 dialog { 909 background-color: #1a242f; 910 background-color: var(--background-alt); 911 color: #dbdbdb; 912 color: var(--text-main); 913 border: none; 914 border-radius: 6px; 915 border-color: #526980; 916 border-color: var(--border); 917 padding: 10px 30px; 918 } 919 920 dialog > header:first-child { 921 background-color: #161f27; 922 background-color: var(--background); 923 border-radius: 6px 6px 0 0; 924 margin: -10px -30px 10px; 925 padding: 10px; 926 text-align: center; 927 } 928 929 dialog::-webkit-backdrop { 930 background: #0000009c; 931 -webkit-backdrop-filter: blur(4px); 932 backdrop-filter: blur(4px); 933 } 934 935 dialog::backdrop { 936 background: #0000009c; 937 -webkit-backdrop-filter: blur(4px); 938 backdrop-filter: blur(4px); 939 } 940 941 footer { 942 border-top: 1px solid #526980; 943 border-top: 1px solid var(--border); 944 padding-top: 10px; 945 color: #a9b1ba; 946 color: var(--text-muted); 947 } 948 949 body > footer { 950 margin-top: 40px; 951 } 952 953 @media print { 954 body, 955 pre, 956 code, 957 summary, 958 details, 959 button, 960 input, 961 textarea { 962 background-color: #fff; 963 } 964 965 button, 966 input, 967 textarea { 968 border: 1px solid #000; 969 } 970 971 body, 972 h1, 973 h2, 974 h3, 975 h4, 976 h5, 977 h6, 978 pre, 979 code, 980 button, 981 input, 982 textarea, 983 footer, 984 summary, 985 strong { 986 color: #000; 987 } 988 989 summary::marker { 990 color: #000; 991 } 992 993 summary::-webkit-details-marker { 994 color: #000; 995 } 996 997 tbody tr:nth-child(even) { 998 background-color: #f2f2f2; 999 } 1000 1001 a { 1002 color: #00f; 1003 text-decoration: underline; 1004 } 1005 } 1006 1007 #load_overlay { 1008 display: none; 1009 }