pub / tw2html

Checks online status of streams on twitch.tv and lets you watch them
git clone https://src.jayvii.de/pub/tw2html.git
Home | Log | Files | Exports | Refs | README | RSS

simple.css (12847B)


      1 /* Global variables. */
      2 :root,
      3 ::backdrop {
      4   /* Set sans-serif & mono fonts */
      5   --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
      6     "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
      7     "Helvetica Neue", sans-serif;
      8   --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
      9   --standard-border-radius: 5px;
     10 
     11   /* Default (light) theme */
     12   --bg: #fff;
     13   --accent-bg: #f5f7ff;
     14   --text: #212121;
     15   --text-light: #585858;
     16   --border: #898EA4;
     17   --accent: #0d47a1;
     18   --accent-hover: #1266e2;
     19   --accent-text: var(--bg);
     20   --code: #d81b60;
     21   --preformatted: #444;
     22   --marked: #ffdd33;
     23   --disabled: #efefef;
     24 }
     25 
     26 /* Dark theme */
     27 @media (prefers-color-scheme: dark) {
     28   :root,
     29   ::backdrop {
     30     color-scheme: dark;
     31     --bg: #212121;
     32     --accent-bg: #2b2b2b;
     33     --text: #dcdcdc;
     34     --text-light: #ababab;
     35     --accent: #ffb300;
     36     --accent-hover: #ffe099;
     37     --accent-text: var(--bg);
     38     --code: #f06292;
     39     --preformatted: #ccc;
     40     --disabled: #111;
     41   }
     42   /* Add a bit of transparency so light media isn't so glaring in dark mode */
     43   img,
     44   video {
     45     opacity: 0.8;
     46   }
     47 }
     48 
     49 /* Reset box-sizing */
     50 *, *::before, *::after {
     51   box-sizing: border-box;
     52 }
     53 
     54 /* Reset default appearance */
     55 textarea,
     56 select,
     57 input,
     58 progress {
     59   appearance: none;
     60   -webkit-appearance: none;
     61   -moz-appearance: none;
     62 }
     63 
     64 html {
     65   /* Set the font globally */
     66   font-family: var(--sans-font);
     67   scroll-behavior: smooth;
     68 }
     69 
     70 /* Make the body a nice central block */
     71 body {
     72   color: var(--text);
     73   background-color: var(--bg);
     74   font-size: 1.15rem;
     75   line-height: 1.5;
     76   display: grid;
     77   grid-template-columns: 1fr min(45rem, 90%) 1fr;
     78   margin: 0;
     79 }
     80 body > * {
     81   grid-column: 2;
     82 }
     83 
     84 /* Make the header bg full width, but the content inline with body */
     85 body > header {
     86   background-color: var(--accent-bg);
     87   border-bottom: 1px solid var(--border);
     88   text-align: center;
     89   padding: 0 0.5rem 2rem 0.5rem;
     90   grid-column: 1 / -1;
     91 }
     92 
     93 body > header > *:only-child {
     94   margin-block-start: 2rem;
     95 }
     96 
     97 body > header h1 {
     98   max-width: 1200px;
     99   margin: 1rem auto;
    100 }
    101 
    102 body > header p {
    103   max-width: 40rem;
    104   margin: 1rem auto;
    105 }
    106 
    107 /* Add a little padding to ensure spacing is correct between content and header > nav */
    108 main {
    109   padding-top: 1.5rem;
    110 }
    111 
    112 body > footer {
    113   margin-top: 4rem;
    114   padding: 2rem 1rem 1.5rem 1rem;
    115   color: var(--text-light);
    116   font-size: 0.9rem;
    117   text-align: center;
    118   border-top: 1px solid var(--border);
    119 }
    120 
    121 /* Format headers */
    122 h1 {
    123   font-size: 3rem;
    124 }
    125 
    126 h2 {
    127   font-size: 2.6rem;
    128   margin-top: 3rem;
    129 }
    130 
    131 h3 {
    132   font-size: 2rem;
    133   margin-top: 3rem;
    134 }
    135 
    136 h4 {
    137   font-size: 1.44rem;
    138 }
    139 
    140 h5 {
    141   font-size: 1.15rem;
    142 }
    143 
    144 h6 {
    145   font-size: 0.96rem;
    146 }
    147 
    148 p {
    149   margin: 1.5rem 0;
    150 }
    151 
    152 /* Prevent long strings from overflowing container */
    153 p, h1, h2, h3, h4, h5, h6 {
    154   overflow-wrap: break-word;
    155 }
    156 
    157 /* Fix line height when title wraps */
    158 h1,
    159 h2,
    160 h3 {
    161   line-height: 1.1;
    162 }
    163 
    164 /* Reduce header size on mobile */
    165 @media only screen and (max-width: 720px) {
    166   h1 {
    167     font-size: 2.5rem;
    168   }
    169 
    170   h2 {
    171     font-size: 2.1rem;
    172   }
    173 
    174   h3 {
    175     font-size: 1.75rem;
    176   }
    177 
    178   h4 {
    179     font-size: 1.25rem;
    180   }
    181 }
    182 
    183 /* Format links & buttons */
    184 a,
    185 a:visited {
    186   color: var(--accent);
    187 }
    188 
    189 a:hover {
    190   text-decoration: none;
    191 }
    192 
    193 button,
    194 .button,
    195 a.button, /* extra specificity to override a */
    196 input[type="submit"],
    197 input[type="reset"],
    198 input[type="button"],
    199 label[type="button"] {
    200   border: 1px solid var(--accent);
    201   background-color: var(--accent);
    202   color: var(--accent-text);
    203   padding: 0.5rem 0.9rem;
    204   text-decoration: none;
    205   line-height: normal;
    206 }
    207 
    208 .button[aria-disabled="true"], 
    209 input:disabled,
    210 textarea:disabled,
    211 select:disabled,
    212 button[disabled] {
    213   cursor: not-allowed;
    214   background-color: var(--disabled);
    215   border-color: var(--disabled);
    216   color: var(--text-light);
    217 }
    218 
    219 input[type="range"] {
    220   padding: 0;
    221 }
    222 
    223 /* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */
    224 abbr[title] {
    225   cursor: help;
    226   text-decoration-line: underline;
    227   text-decoration-style: dotted;
    228 }
    229 
    230 button:enabled:hover,
    231 .button:not([aria-disabled="true"]):hover,
    232 input[type="submit"]:enabled:hover,
    233 input[type="reset"]:enabled:hover,
    234 input[type="button"]:enabled:hover,
    235 label[type="button"]:hover {
    236   background-color: var(--accent-hover);
    237   border-color: var(--accent-hover);
    238   cursor: pointer;
    239 }
    240 
    241 .button:focus-visible,
    242 button:focus-visible:where(:enabled),
    243 input:enabled:focus-visible:where(
    244   [type="submit"],
    245   [type="reset"],
    246   [type="button"]
    247 ) {
    248   outline: 2px solid var(--accent);
    249   outline-offset: 1px;
    250 }
    251 
    252 /* Format navigation */
    253 header > nav {
    254   font-size: 1rem;
    255   line-height: 2;
    256   padding: 1rem 0 0 0;
    257 }
    258 
    259 /* Use flexbox to allow items to wrap, as needed */
    260 header > nav ul,
    261 header > nav ol {
    262   align-content: space-around;
    263   align-items: center;
    264   display: flex;
    265   flex-direction: row;
    266   flex-wrap: wrap;
    267   justify-content: center;
    268   list-style-type: none;
    269   margin: 0;
    270   padding: 0;
    271 }
    272 
    273 /* List items are inline elements, make them behave more like blocks */
    274 header > nav ul li,
    275 header > nav ol li {
    276   display: inline-block;
    277 }
    278 
    279 header > nav a,
    280 header > nav a:visited {
    281   margin: 0 0.5rem 1rem 0.5rem;
    282   border: 1px solid var(--border);
    283   border-radius: var(--standard-border-radius);
    284   color: var(--text);
    285   display: inline-block;
    286   padding: 0.1rem 1rem;
    287   text-decoration: none;
    288 }
    289 
    290 header > nav a:hover,
    291 header > nav a.current,
    292 header > nav a[aria-current="page"] {
    293   border-color: var(--accent);
    294   color: var(--accent);
    295   cursor: pointer;
    296 }
    297 
    298 /* Reduce nav side on mobile */
    299 @media only screen and (max-width: 720px) {
    300   header > nav a {
    301     border: none;
    302     padding: 0;
    303     text-decoration: underline;
    304     line-height: 1;
    305   }
    306 }
    307 
    308 /* Consolidate box styling */
    309 aside, details, pre, progress {
    310   background-color: var(--accent-bg);
    311   border: 1px solid var(--border);
    312   border-radius: var(--standard-border-radius);
    313   margin-bottom: 1rem;
    314 }
    315 
    316 aside {
    317   font-size: 1rem;
    318   width: 30%;
    319   padding: 0 15px;
    320   margin-inline-start: 15px;
    321   float: right;
    322 }
    323 *[dir="rtl"] aside {
    324   float: left;
    325 }
    326 
    327 /* Make aside full-width on mobile */
    328 @media only screen and (max-width: 720px) {
    329   aside {
    330     width: 100%;
    331     float: none;
    332     margin-inline-start: 0;
    333   }
    334 }
    335 
    336 article, fieldset, dialog {
    337   border: 1px solid var(--border);
    338   padding: 1rem;
    339   border-radius: var(--standard-border-radius);
    340   margin-bottom: 1rem;
    341 }
    342 
    343 article h2:first-child,
    344 section h2:first-child,
    345 article h3:first-child,
    346 section h3:first-child {
    347   margin-top: 1rem;
    348 }
    349 
    350 section {
    351   border-top: 1px solid var(--border);
    352   border-bottom: 1px solid var(--border);
    353   padding: 2rem 1rem;
    354   margin: 3rem 0;
    355 }
    356 
    357 /* Don't double separators when chaining sections */
    358 section + section,
    359 section:first-child {
    360   border-top: 0;
    361   padding-top: 0;
    362 }
    363 
    364 section + section {
    365   margin-top: 0;
    366 }
    367 
    368 section:last-child {
    369   border-bottom: 0;
    370   padding-bottom: 0;
    371 }
    372 
    373 details {
    374   padding: 0.7rem 1rem;
    375 }
    376 
    377 summary {
    378   cursor: pointer;
    379   font-weight: bold;
    380   padding: 0.7rem 1rem;
    381   margin: -0.7rem -1rem;
    382   word-break: break-all;
    383 }
    384 
    385 details[open] > summary + * {
    386   margin-top: 0;
    387 }
    388 
    389 details[open] > summary {
    390   margin-bottom: 0.5rem;
    391 }
    392 
    393 details[open] > :last-child {
    394   margin-bottom: 0;
    395 }
    396 
    397 /* Format tables */
    398 table {
    399   border-collapse: collapse;
    400   margin: 1.5rem 0;
    401 }
    402 
    403 figure > table {
    404   width: max-content;
    405   margin: 0;
    406 }
    407 
    408 td,
    409 th {
    410   border: 1px solid var(--border);
    411   text-align: start;
    412   padding: 0.5rem;
    413 }
    414 
    415 th {
    416   background-color: var(--accent-bg);
    417   font-weight: bold;
    418 }
    419 
    420 tr:nth-child(even) {
    421   /* Set every other cell slightly darker. Improves readability. */
    422   background-color: var(--accent-bg);
    423 }
    424 
    425 table caption {
    426   font-weight: bold;
    427   margin-bottom: 0.5rem;
    428 }
    429 
    430 /* Format forms */
    431 textarea,
    432 select,
    433 input,
    434 button,
    435 .button {
    436   font-size: inherit;
    437   font-family: inherit;
    438   padding: 0.5rem;
    439   margin-bottom: 0.5rem;
    440   border-radius: var(--standard-border-radius);
    441   box-shadow: none;
    442   max-width: 100%;
    443   display: inline-block;
    444 }
    445 textarea,
    446 select,
    447 input {
    448   color: var(--text);
    449   background-color: var(--bg);
    450   border: 1px solid var(--border);
    451 }
    452 label {
    453   display: block;
    454 }
    455 textarea:not([cols]) {
    456   width: 100%;
    457 }
    458 
    459 /* Add arrow to drop-down */
    460 select:not([multiple]) {
    461   background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
    462     linear-gradient(135deg, var(--text) 51%, transparent 49%);
    463   background-position: calc(100% - 15px), calc(100% - 10px);
    464   background-size: 5px 5px, 5px 5px;
    465   background-repeat: no-repeat;
    466   padding-inline-end: 25px;
    467 }
    468 *[dir="rtl"] select:not([multiple]) {
    469   background-position: 10px, 15px;
    470 }
    471 
    472 /* checkbox and radio button style */
    473 input[type="checkbox"],
    474 input[type="radio"] {
    475   vertical-align: middle;
    476   position: relative;
    477   width: min-content;
    478 }
    479 
    480 input[type="checkbox"] + label,
    481 input[type="radio"] + label {
    482   display: inline-block;
    483 }
    484 
    485 input[type="radio"] {
    486   border-radius: 100%;
    487 }
    488 
    489 input[type="checkbox"]:checked,
    490 input[type="radio"]:checked {
    491   background-color: var(--accent);
    492 }
    493 
    494 input[type="checkbox"]:checked::after {
    495   /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
    496   content: " ";
    497   width: 0.18em;
    498   height: 0.32em;
    499   border-radius: 0;
    500   position: absolute;
    501   top: 0.05em;
    502   left: 0.17em;
    503   background-color: transparent;
    504   border-right: solid var(--bg) 0.08em;
    505   border-bottom: solid var(--bg) 0.08em;
    506   font-size: 1.8em;
    507   transform: rotate(45deg);
    508 }
    509 input[type="radio"]:checked::after {
    510   /* creates a colored circle for the checked radio button  */
    511   content: " ";
    512   width: 0.25em;
    513   height: 0.25em;
    514   border-radius: 100%;
    515   position: absolute;
    516   top: 0.125em;
    517   background-color: var(--bg);
    518   left: 0.125em;
    519   font-size: 32px;
    520 }
    521 
    522 /* Makes input fields wider on smaller screens */
    523 @media only screen and (max-width: 720px) {
    524   textarea,
    525   select,
    526   input {
    527     width: 100%;
    528   }
    529 }
    530 
    531 /* Set a height for color input */
    532 input[type="color"] {
    533   height: 2.5rem;
    534   padding:  0.2rem;
    535 }
    536 
    537 /* do not show border around file selector button */
    538 input[type="file"] {
    539   border: 0;
    540 }
    541 
    542 /* Misc body elements */
    543 hr {
    544   border: none;
    545   height: 1px;
    546   background: var(--border);
    547   margin: 1rem auto;
    548 }
    549 
    550 mark {
    551   padding: 2px 5px;
    552   border-radius: var(--standard-border-radius);
    553   background-color: var(--marked);
    554   color: black;
    555 }
    556 
    557 mark a {
    558   color: #0d47a1;
    559 }
    560 
    561 img,
    562 video {
    563   max-width: 100%;
    564   height: auto;
    565   border-radius: var(--standard-border-radius);
    566 }
    567 
    568 figure {
    569   margin: 0;
    570   display: block;
    571   overflow-x: auto;
    572 }
    573 
    574 figure > img,
    575 figure > picture > img {
    576   display: block;
    577   margin-inline: auto;
    578 }
    579 
    580 figcaption {
    581   text-align: center;
    582   font-size: 0.9rem;
    583   color: var(--text-light);
    584   margin-block: 1rem;
    585 }
    586 
    587 blockquote {
    588   margin-inline-start: 2rem;
    589   margin-inline-end: 0;
    590   margin-block: 2rem;
    591   padding: 0.4rem 0.8rem;
    592   border-inline-start: 0.35rem solid var(--accent);
    593   color: var(--text-light);
    594   font-style: italic;
    595 }
    596 
    597 cite {
    598   font-size: 0.9rem;
    599   color: var(--text-light);
    600   font-style: normal;
    601 }
    602 
    603 dt {
    604     color: var(--text-light);
    605 }
    606 
    607 /* Use mono font for code elements */
    608 code,
    609 pre,
    610 pre span,
    611 kbd,
    612 samp {
    613   font-family: var(--mono-font);
    614   color: var(--code);
    615 }
    616 
    617 kbd {
    618   color: var(--preformatted);
    619   border: 1px solid var(--preformatted);
    620   border-bottom: 3px solid var(--preformatted);
    621   border-radius: var(--standard-border-radius);
    622   padding: 0.1rem 0.4rem;
    623 }
    624 
    625 pre {
    626   padding: 1rem 1.4rem;
    627   max-width: 100%;
    628   overflow: auto;
    629   color: var(--preformatted);
    630 }
    631 
    632 /* Fix embedded code within pre */
    633 pre code {
    634   color: var(--preformatted);
    635   background: none;
    636   margin: 0;
    637   padding: 0;
    638 }
    639 
    640 /* Progress bars */
    641 /* Declarations are repeated because you */
    642 /* cannot combine vendor-specific selectors */
    643 progress {
    644   width: 100%;
    645 }
    646 
    647 progress:indeterminate {
    648   background-color: var(--accent-bg);
    649 }
    650 
    651 progress::-webkit-progress-bar {
    652   border-radius: var(--standard-border-radius);
    653   background-color: var(--accent-bg);
    654 }
    655 
    656 progress::-webkit-progress-value {
    657   border-radius: var(--standard-border-radius);
    658   background-color: var(--accent);
    659 }
    660 
    661 progress::-moz-progress-bar {
    662   border-radius: var(--standard-border-radius);
    663   background-color: var(--accent);
    664   transition-property: width;
    665   transition-duration: 0.3s;
    666 }
    667 
    668 progress:indeterminate::-moz-progress-bar {
    669   background-color: var(--accent-bg);
    670 }
    671 
    672 dialog {
    673   max-width: 40rem;
    674   margin: auto;
    675 }
    676 
    677 dialog::backdrop {
    678   background-color: var(--bg);
    679   opacity: 0.8;
    680 }
    681 
    682 @media only screen and (max-width: 720px) {
    683   dialog {
    684     max-width: 100%;
    685     margin: auto 1em;
    686   }
    687 }
    688 
    689 /* Superscript & Subscript */
    690 /* Prevent scripts from affecting line-height. */
    691 sup, sub {
    692   vertical-align: baseline;
    693   position: relative;
    694 }
    695 
    696 sup {
    697   top: -0.4em;
    698 }
    699 
    700 sub { 
    701   top: 0.3em; 
    702 }
    703 
    704 /* Classes for notices */
    705 .notice {
    706   background: var(--accent-bg);
    707   border: 2px solid var(--border);
    708   border-radius: var(--standard-border-radius);
    709   padding: 1.5rem;
    710   margin: 2rem 0;
    711 }