base.css

   1 /* general */
   2
   3 body {
   4         background: #FFF;
   5         color: #000;
   6         font-size: 90%;
   7         text-align: center;
   8 }
   9 a, a:visited {
  10         color: #000;
  11         text-decoration: underline;
  12 }
  13 a:active, a:hover {
  14         color: #00F;
  15         text-decoration: none;
  16 }
  17
  18 /* common sections */
  19
  20 h1, h2 {
  21         font-size: 200%;
  22         margin: 0;
  23 }
  24 h2, caption {
  25         font-size: 110%;
  26         font-weight: bold;
  27 }
  28 caption {
  29         margin: 1ex;
  30 }
  31 caption aside {
  32         position: absolute;
  33         margin-left: 1ex;
  34         font-weight: normal;
  35         display: inline;
  36         font-size: 91%; /* 100% */
  37         margin-top: .3ex; /* align with 110% baseline */
  38 }
  39
  40 hr {
  41         clear: both;
  42         visibility: hidden;
  43         height: 2ex;
  44         margin: 0;
  45 }
  46
  47 .section ul {
  48         margin-bottom: 1ex;
  49 }
  50 .section h2 {
  51         margin: 0 1ex;
  52         clear: both;
  53 }
  54 .section table {
  55         float: left;
  56         position: relative; /* prevents buggy hovering in table if caption present in gecko */
  57         margin: 1ex 1ex 2ex;
  58 }
  59 .section .section {
  60         float: left;
  61 }
  62 #charset .section table {
  63         margin: -0.5ex 0 1ex; /* headers provide sufficient spacing already */
  64 }
  65
  66 p {
  67         margin: 1ex 0 1em;
  68 }
  69 p.aside {
  70         font-size: 80%;
  71 }
  72 p.footer {
  73         margin: 1em 0 0;
  74         clear: both;
  75 }
  76 .help + .footer {
  77         margin: 0;
  78 }
  79
  80 .error {
  81         background: #F00;
  82         background: rgba(255, 0, 0, .8);
  83         color: #FFF;
  84         border: 2px solid #000;
  85         border-width: 2px 0;
  86         padding: 1em;
  87         margin: 2ex auto;
  88         clear: both;
  89 }
  90 .error > * {
  91         margin-bottom: 1ex;
  92 }
  93 .error > *:last-child {
  94         margin-bottom: 0;
  95 }
  96
  97 ul {
  98         margin: 0;
  99         padding: 0;
 100         list-style: none;
 101 }
 102
 103 pre {
 104         text-align: left;
 105         margin: 2ex auto;
 106         white-space: pre-wrap;
 107         overflow-wrap: break-word;
 108 }
 109 body > pre {
 110         width: 78ch;
 111         tab-size: 4;
 112         -moz-tab-size: 4;
 113         padding: 0 1em;
 114         border-width: 0 1px;
 115         border-style: solid;
 116         white-space: pre;
 117         font-size: 1.9vmin; /* cover full width at most */
 118 }
 119 code {
 120         white-space: nowrap;
 121 }
 122
 123 h1 small,
 124 h2 small {
 125         position: absolute; /* side note; do not influence alignment */
 126         margin-left: 1em;
 127         font-weight: normal;
 128         font-size: 50%; /* 1rem */
 129         padding-top: 1.75ex; /* align baseline with container */
 130 }
 131 h2 small {
 132         font-size: 90.9%;
 133         padding-top: .17ex;
 134 }
 135
 136 .section dl {
 137         display: grid;
 138         grid: auto-flow / 1fr 1fr;
 139         clear: both;
 140 }
 141 .section dl > dt {
 142         grid-column: 1;
 143         text-align: right;
 144 }
 145 dt code {
 146         white-space: normal;
 147 }
 148 dl > dd {
 149         grid-column: 2;
 150         text-align: left;
 151         padding-left: 1em;
 152         margin: 0 0 .5ex;
 153 }
 154 @media (max-width: 42em) {
 155         .section dl {
 156                 grid: auto-flow / minmax(8em, 1fr) minmax(20em, 1fr);
 157         }
 158         dl > dd {
 159                 margin-bottom: 1ex; /* distinguish rows more as dts can wrap */
 160         }
 161 }
 162
 163 /* "keyboard" (list of keys) */
 164
 165 .row0 {margin-top: -5ex} /* top (esc) row fits besides header */
 166 .row2 {margin-left: 7em} /* row offsets relative to ~6em key width */
 167 .row3 {margin-left: 8em}
 168 .row4 {margin-left: 10em} /* should actually align to next key on row1 */
 169         /* ...however rows>=1 are shifted a bit, to make space */
 170
 171 table.keys tr {
 172         clear: both; /* start new row (screen row) */
 173         display: block;
 174 }
 175 table.keys tbody {
 176         /* start new row block (keyboard row) */
 177         clear: both;
 178         padding-top: 1ex;
 179         display: block;
 180 }
 181
 182 table.keys th,
 183 h3      {display: none} /* semantic details (non-css/js) */
 184 .keys .mode {display: none} /* initially hidden (only show interactively (js)) */
 185
 186 table.keys {
 187         display: block;
 188         border-spacing: 0;
 189         border-collapse: collapse;
 190         white-space: nowrap;
 191         text-align: left;
 192 }
 193
 194 /* individual keys */
 195
 196 dl.legend dt,
 197 .keys td {
 198         display: inline-block;
 199         white-space: normal;
 200         width: 6.2em;
 201         line-height: 2.25ex; /* a little terser (seems to be gecko's default anyway) */
 202         height: 4.5ex; /* 2 lines */
 203         overflow: hidden;
 204         margin: 0 2px -1px;
 205         padding: 0;
 206         text-align: center;
 207         border: 1px solid #000;
 208         border-radius: 4px;
 209         -moz-border-radius: 4px;
 210         text-transform-variation: text;
 211 }
 212 .keys td b {
 213         float: left;
 214         font-size: 200%;
 215         line-height: 2.5ex; /* inherits otherwise */
 216         padding-left: 2px;
 217 }
 218 .keys .row0 td { /* omni-present esc */
 219         width: 8.5em;
 220 }
 221
 222 /* fine tuning of special occurrences */
 223
 224 .keys td b[title] { /* mnemonic hover */
 225         cursor: help;
 226 }
 227 .keys td[onclick]:hover { /* link */
 228         cursor: pointer;
 229 }
 230 .keys td a { /* key link */
 231         color: inherit;
 232         text-decoration: none;
 233         display: block;
 234         height: 100%;
 235 }
 236
 237 .keys .meta td b,
 238 .keys .ctrl td b,
 239 .keys .lead td b { /* char with ctrl or leading key */
 240         font-size: 100%; /* space is too limited for 2+ double-sized chars */
 241         line-height: 5ex; /* keep double height though */
 242 }
 243 .keys .meta td b small,
 244 .keys .ctrl td b small { /* meta key indicator */
 245         font-size: 70%;
 246         font-weight: normal; /* nice and subtle */
 247 }
 248
 249 /* enlarged keys */
 250
 251 .keys.big td {
 252         width: 1em;
 253         min-width: auto;
 254         height: 2.25ex;
 255         font-size: 200%;
 256         font-size: calc(7vmin - 4px); /* fit 12 keys to page */
 257         overflow: visible;
 258         position: relative;
 259         padding: 0;
 260         margin: 0 .2vw -1px;
 261 }
 262
 263 /* override row alignments */
 264 .keys.big tbody {
 265         font-size: calc(1.4vmin); /* enlarged td conversion */
 266 }
 267 .keys.big .row2 {margin-left: 7em}
 268 .keys.big .row3 {margin-left: 8em}
 269 .keys.big .row4 {margin-left: 10em}
 270 .keys.big .row0 {
 271         display: none; /* headerless */
 272 }
 273
 274 .keys.big td b {
 275         position: absolute; /* overlay */
 276         z-index: 1;
 277         top: -1.2ex; /* halfway over shift */
 278         left: 0;
 279         right: 0;
 280         font-size: 50%;
 281         opacity: .5;
 282         color: #FFF;
 283         line-height: 2.25ex;
 284 }
 285 .keys.big.cmp td b,
 286 .keys.big .meta td b,
 287 .keys.big .shift td b {
 288         display: none;
 289 }
 290
 291 /* tables */
 292
 293 table {
 294         border-collapse: collapse;
 295 }
 296 th, td {
 297         border-color: #778;
 298         border: 1px solid #888;
 299         background: #DDD;
 300 }
 301 thead th, td {
 302         text-align: center;
 303 }
 304
 305 td.joind {
 306         border-bottom: none;
 307 }
 308 td.joinu {
 309         /* first cell determines border width for entire row */
 310         border-top-color: transparent;
 311 }
 312 td.joinr {
 313         border-right: none;
 314 }
 315 td.joinl {
 316         border-left: none;
 317 }
 318
 319 thead {
 320         position: sticky;
 321         top: 0;
 322         background: #DDD8;
 323 }
 324
 325 /* character table */
 326
 327 .glyphs thead th, .glyphs td {
 328         width: 1.6em; /* regular interval */
 329 }
 330 .glyphs tbody td {
 331         font-size: 112%;
 332 }
 333 .glyphs.big tbody td {
 334         font-size: 200%;
 335 }
 336 .glyphs .glyphs {
 337         margin: 0.5ex 0; /* nested in legend */
 338 }
 339 .glyphs .glyphs td {
 340         font-size: 100%;
 341 }
 342
 343 .cover td {
 344         min-width: 2.5ex; /* square cells */
 345 }
 346
 347 /* table headers */
 348
 349 th,
 350 tfoot td,
 351 thead td {
 352         border-width: 0;
 353         background: transparent;
 354 }
 355 .glyphs thead td {
 356         width: auto; /* no glyph cells in header */
 357 }
 358 .glyphs caption {
 359         margin-left: 2.2em; /* 1ex + offset head column (1.6em + 0.4em) / 110% */
 360                 /* adjusted insignificant -.2em to fit wide contents on /charset/mac */
 361 }
 362 th {
 363         padding: 0 0.2em;
 364 }
 365 .diinfo th {
 366         font-size: 50%; /* mostly insignificant here */
 367         font-weight: normal;
 368 }
 369 .diinfo tbody th {
 370         text-align: right; /* variable width so keep near cells */
 371         padding: 0 0.5em;
 372 }
 373 .cat {
 374         font-size: 70%;
 375         text-transform: uppercase;
 376 }
 377 tfoot .cat th {
 378         border-top: 1px solid #888;
 379 }
 380
 381 /* colour map */
 382
 383 table.color td {
 384         border: 1px solid #555;
 385         font-weight: normal;
 386         padding: 0 8px;
 387 }
 388 table.color td samp {
 389         margin: 0 -8px 0 8px;
 390         font-family: inherit;
 391         float: right;
 392 }
 393 table.color td samp ~ samp {
 394 }
 395 table.color td samp small {
 396         font: 100% monospace;
 397         padding: 0 .5ex;
 398 }
 399
 400 /* digraphs map */
 401
 402 table.dimap {
 403         table-layout: fixed; /* prevent resizing, notably in msie6 */
 404 }
 405 .dimap thead th, .dimap td {
 406         /* below-maximum size (but still average enough to be regular) so we can fit more */
 407         width: 1.2em; /* msie only looks at the first row */
 408         min-width: 1em; /* prevents gecko from restricting to page width */
 409 }
 410 .dimap th {
 411         text-align: center; /* row headers are also glyph-sized */
 412 }
 413
 414 .mapped tbody, .mapped colgroup,
 415 .dimap tbody, .dimap colgroup {
 416         border: 2px double #888; /* major character group grid */
 417 }
 418 .mapped tbody,
 419 .dimap tbody {
 420         border-width: 2px 0; /* horizontal group dividers */
 421 }
 422 .mapped colgroup,
 423 .dimap colgroup {
 424         border-width: 0 2px; /* vertical divides */
 425 }
 426
 427 /* digraph selection */
 428
 429 .diinfo {
 430         -moz-column-width: 24em;
 431         -webkit-column-width: 24em;
 432         column-width: 24em;
 433 }
 434 .diinfo > div {
 435         overflow: hidden;
 436         column-break-inside: avoid;
 437         -webkit-column-break-inside: avoid;
 438         position: relative; z-index: 1; /* webkit bug */
 439 }
 440
 441 /* glyph cell overlay (digraph labels) */
 442
 443 .glyphs.dilabel td {
 444         padding: 0;
 445         padding-bottom: 1.1ex; /* reserve space for label */
 446         vertical-align: bottom;
 447 }
 448 .glyphs.dilabel small {
 449         font-size: 50%;
 450         display: block;
 451         margin-top: 0.2ex;
 452         margin-bottom: -2.2ex; /* take cell padding */
 453 }
 454 .glyphs.dilabel small.digraph {
 455         background: #000;
 456         color: #FFF;
 457         opacity: 0.3;
 458 }
 459 .glyphs.dilabel small.value {
 460         background: #600;
 461         color: #FFF;
 462         opacity: 0.3;
 463 }
 464
 465 /* character properties */
 466
 467 .X  {background: #FFF} /* unidentified */
 468 .Mc, .Me, .Zl, .Zp      {background: #F00} /* unstyled */
 469 .X > span               {background: #898; background: rgba(0, 0, 0, .25)} /* invisible contents */
 470
 471 /* letter scripts */
 472 .Armenian,
 473 .Greek    {background: #FFE8CF}
 474 .Cyrillic {background: #FFDDA8}
 475 .Latin    {background: #FFB}
 476 .Aramaic,
 477 .Hebrew   {background: #FFD}
 478 .Arabic   {background: #EFE}
 479 .African  {background: #DED}
 480 .Brahmic  {background: #FBB} /* same as number */
 481 .Khmer    {background: #FBA}
 482 .Hangul,
 483 .Syllabic {background: #DEA}
 484 .Katakana {background: #DFA}
 485 .Hiragana {background: #DFC}
 486 .Bopomofo {background: #BFC}
 487 .Han      {background: #CFD}
 488 .Alpha    {background: #ADA} /* other scripts */
 489
 490 /* other categories */
 491 .Nd, .Nl, .No         {background: #FDD} /* number */
 492 .Sc                   {background: #FCD} /* currency */
 493 .Sm                   {background: #ECE} /* math */
 494 .So                   {background: #DCF} /* symbol */
 495 .Pd, .Po, .Pc         {background: #CDF} /* punctuation */
 496 .Ps, .Pe, .Pi, .Pf    {background: #BEF} /* quote */
 497 .Lm, .Sk              {background: #CEE} /* spacing modifier */
 498 .Mn                   {background: #ACC} /* modifier */
 499 .Cc, .Cf {color: #666; background: #BBB} /* control */
 500 .Zs                   {background: #ACB} /* space */
 501 .Co, .Xi.Co           {background: #DCC} /* private */
 502 .Xi, .Cs              {background: #CCC} /* invalid */
 503 .Xd                   {color: #844} /* deprecated */
 504 .Xr                   {color: #888} /* reserved (digraph reverse or proposal) */
 505 .dimap .Xr            {background: #EEE} /* reversed digraph */
 506 .ccmap .Xr {opacity:.4}
 507
 508 /* support levels */
 509 .l1 {background: #FDD} /* no, unsupported, other */
 510 .l2 {background: #FED} /* partial, restricted, unofficial */
 511         /* default u-prop, u-bmp */
 512 .l3 {background: #FFD} /* almost, imperfect, common */
 513         /* default u-di, u-lat1 */
 514 .l4 {background: #EFD} /* yes, supported, ubiquitous, native */
 515         /* default u-ascii */
 516 .l5 {background: #DFD} /* complete, perfect */
 517 .l0 {background: #EEE} /* unknown, omitted */
 518 .ex {     color: #888; color: rgba(0, 0, 0, .5)} /* experimental, disfavoured */
 519 .u-invalid {background: #BBB} /* invalid, impossible */
 520
 521 /* foreground representation */
 522 #digraphs .u-l3 {color: #080} /* partial */
 523 #digraphs .u-l3.ex {color: #4C0} /* experimental */
 524 #digraphs .u-l2 {color: #A44; color: rgba(128, 0, 0, .6)} /* unofficial proposal */
 525 #digraphs .u-l1 {color: #D00; color: rgba(255, 0, 0, .8)} /* minimal or invalid */
 526
 527 /* support percentage (browser cells) */
 528 .p0         {opacity: .6}
 529 .p0.p       {opacity: 1}
 530 .p::after   {content: '!'; color: #F00}
 531 .p4::after  {color: #C00}
 532 .p3::after  {color: #A00}
 533 .p2::after  {color: #800}
 534 .p1::after,
 535 .p0::after  {color: #000}
 536 .p09::after {opacity: .9}
 537 .p08::after {opacity: .8}
 538 .p07::after {opacity: .7}
 539 .p06::after {opacity: .6}
 540 .p05::after {opacity: .5}
 541 .p04::after {opacity: .4}
 542 .p03::after {opacity: .3}
 543 .p02::after {opacity: .2}
 544 .p01::after {opacity: .1}
 545 .p00::after {display: none}
 546
 547 /* code syntax */
 548 .sy-comment    { color: #888 }
 549 .sy-constant   { color: #008 }
 550 .sy-identifier { color: #804 }
 551 .sy-statement  { }
 552 .sy-preProc    { }
 553 .sy-type,
 554 .sy-special    { color: #408 }
 555 .sy-error      { font-weight: bold; background-color: #F00; color: #FFF }
 556 .sy-todo       { background-color: #FF0 }
 557
 558 /* boolean alternate */
 559 .glyphs b      { font-weight: normal; color: #800 }
 560
 561 /* hover effects */
 562 .X:hover {cursor: help}
 563 .X:hover > span                            {background: #FFF} /* whitespace marker */
 564 .Greek:hover, .Armenian:hover              {background: #FA8}
 565 .Cyrillic:hover                            {background: #FB7}
 566 .Latin:hover                               {background: #EE4}
 567 .Hebrew:hover, .Aramaic:hover              {background: #FFA}
 568 .Arabic:hover                              {background: #CFD}
 569 .African:hover                             {background: #BDB}
 570 .Syllabic:hover, .Hangul:hover             {background: #CE6}
 571 .Katakana:hover                            {background: #BF7}
 572 .Hiragana:hover                            {background: #AF8}
 573 .Bopomofo:hover                            {background: #8FA}
 574 .Brahmic:hover                             {background: #F77}
 575 .Khmer:hover                               {background: #F87}
 576 .Han:hover                                 {background: #5EB}
 577 .Alpha:hover                               {background: #5C5}
 578 .Nd:hover, .Nl:hover, .No:hover            {background: #F99} /* number */
 579 .Sc:hover                                  {background: #F8C} /* currency */
 580 .Sm:hover                                  {background: #F8F} /* math */
 581 .So:hover                                  {background: #A8F} /* symbol */
 582 .Pd:hover, .Po:hover, .Pc:hover            {background: #8AF} /* punctuation */
 583 .Ps:hover, .Pe:hover, .Pi:hover, .Pf:hover {background: #8DF} /* quote */
 584 .Lm:hover, .Sk:hover                       {background: #BFF} /* spacing modifier */
 585 .Mn:hover                                  {background: #CDE} /* modifier */
 586 .Zs:hover                                  {background: #CED} /* space */
 587 .Cc:hover, .Cf:hover                       {background: #DDD} /* control */
 588 .Co:hover                                  {background: #A77} /* private */
 589 .Xr:hover                                  {background: #FFF} /* reserved */
 590 .Xi:hover                                  {background: #DDD} /* invalid */
 591 .l0:hover                                  {background: #888}
 592 .l1:hover                                  {background: #F88}
 593 .l2:hover                                  {background: #FC8}
 594 .l3:hover                                  {background: #FF8}
 595 .l4:hover                                  {background: #CF8}
 596 .l5:hover                                  {background: #8F8}
 597 .u-l3:hover    {outline: 1px solid #080}
 598 .u-l3.ex:hover {outline: 1px solid #8F0}
 599 .u-l2:hover    {outline: 1px solid #800}
 600 .u-l1:hover    {outline: 1px solid #F00}
 601
 602 /* key type colorization */
 603
 604 .c-sa,
 605 .g1 {background: #BFE} /* cyan: info */
 606 .c-na,
 607 .g2 {background: #BFB} /* green: motion */
 608 .g3 {background: #DFA} /* greenish: jump (g2+) */
 609 .c-af,
 610 .g4 {background: #FFA} /* yellow: command */
 611 .c-eu,
 612 .g5 {background: #FDA} /* orangish: open (g6-) */
 613 .g6 {background: #FCA} /* orange: insert */
 614 .c-as,
 615 .g7 {background: #FCC} /* red: mode */
 616 .c-an,
 617 .g8 {background: #ECE} /* purple: visual (g7+) */
 618 .c-oc,
 619 .g9 {background: #CCF} /* blue: prefix */
 620
 621 .c-sa:hover,
 622 .g1 a:hover, .g1[onclick]:hover {background: #5ED}
 623 .c-na:hover,
 624 .g2 a:hover, .g2[onclick]:hover {background: #7E7}
 625 .g3 a:hover, .g3[onclick]:hover {background: #CE6}
 626 .c-af:hover,
 627 .g4 a:hover, .g4[onclick]:hover {background: #EE4}
 628 .c-eu:hover,
 629 .g5 a:hover, .g5[onclick]:hover {background: #FA6}
 630 .g6 a:hover, .g6[onclick]:hover {background: #F97}
 631 .c-as:hover,
 632 .g7 a:hover, .g7[onclick]:hover {background: #F88}
 633 .c-an:hover,
 634 .g8 a:hover, .g8[onclick]:hover {background: #D9D}
 635 .c-oc:hover,
 636 .g9 a:hover, .g9[onclick]:hover {background: #99F}
 637
 638 .no {
 639         background: #EEE; /* unassigned */
 640 }
 641 .keys td.ni {
 642         border: 0;
 643         padding: 1px; /* same size as borderlessless keys */
 644         background: none;
 645 }
 646
 647 dl.legend dt.more,
 648 .keys td.more b {
 649         text-shadow: #F20 0 0 0.1em;
 650 }
 651 dl.legend dt.more:hover,
 652 .keys td.more:hover b {
 653         text-shadow: #F20 0 0 0.5em, #FC0 0 0 0.2em;
 654 }
 655 dl.legend dt.new,
 656 .keys td.new {
 657         border-style: dashed;
 658 }
 659 .ext,
 660 dl.legend dt.ext,
 661 .keys td.ext {
 662         opacity: .6;
 663 }
 664
 665 /* l/r help columns */
 666
 667 .help {
 668         display: table;
 669         width: 100%;
 670 }
 671 .help > * {
 672         display: table-cell;
 673         width: 20%;
 674         vertical-align: top;
 675 }
 676
 677 .left dl.legend {
 678         margin-left: 6.4em; /* a bit over 6.2em to allow for borders+padding (border-sizing would work too) */
 679 }
 680 .left dl.legend dt {
 681         margin-left: -6.4em; /* msie<=6 multiply this by two for some reason */
 682         float: left;
 683         clear: left;
 684 }
 685 .left dl.legend dd {
 686         float: left; /* align next to dt (except msie<=7 does just the opposite) */
 687 }
 688 .right dl.legend {
 689         margin-right: 6.4em;
 690 }
 691 .right dl.legend dt {
 692         margin-right: -6.4em;
 693         float: right;
 694         clear: right;
 695 }
 696 .right dl.legend dd {
 697         float: right;
 698 }
 699 .right {
 700         text-align: right;
 701 }
 702
 703 /* help/legend */
 704
 705 dl.legend dt {
 706         margin: 0 0 1px; /* distinct keys */
 707         height: auto; /* not key-height */
 708         padding: 2px 0;
 709 }
 710 dl.legend dd {
 711         margin: 3px 0.4em 0; /* align text (add dt border+padding height) */
 712         padding: 0;
 713 }
 714
 715 dl.legend-options dt {
 716         background: #CCC;
 717 }
 718
 719 ul.legend-set {
 720         clear: right;
 721         padding-top: 1ex;
 722 }
 723 ul.legend-set li {
 724         margin: 6px 0; /* similar to dl legends */
 725 }
 726
 727 .legend {
 728         margin-top: 1em;
 729 }
 730 .legend table {
 731         width: 100%;
 732 }
 733 .legend td {
 734         padding: 0 0.2em;
 735 }
 736
 737 /* images */
 738
 739 figure {
 740         margin: 0;
 741         position: relative;
 742 }
 743 figure img {
 744         vertical-align: bottom;
 745         width: 100%;
 746 }
 747
 748 @media (min-width: 60em) {
 749         figcaption {
 750                 padding: 0 1em;
 751                 color: #000;
 752                 background: rgba(255, 255, 255, .66);
 753                 position: absolute;
 754                 right: 0;
 755                 bottom: 0;
 756                 max-width: 100%;
 757                 box-sizing: border-box;
 758         }
 759         .gallery li.parent:hover > figure > figcaption,
 760         .gallery figure:hover > figcaption {
 761                 /* highlight title of current and parents */
 762                 font-size: 175%;
 763                 right: 50%;
 764                 bottom: 50%;
 765                 transform: translate(50%, 50%);
 766                 margin-left: -60%; /* keep width */
 767         }
 768 }
 769
 770 /* image gallery */
 771
 772 .gallery {
 773         display: grid;
 774         grid: auto-flow dense / repeat(auto-fit, minmax(200px, 1fr));
 775         grid-gap: 1px;
 776 }
 777 .gallery li, .gallery ul {
 778         display: contents;
 779 }
 780 .gallery figure {
 781         overflow: hidden;
 782         box-sizing: border-box;
 783         hyphens: auto;
 784         max-width: 900px;
 785 }
 786 .gallery figcaption > small {
 787         display: inline-block;
 788 }
 789
 790 @media (min-width: 403px) and (min-height: 266px) {
 791         /* able to fit 2 cells of 200x133 */
 792         .gallery li.large > figure {
 793                 grid-row: span 2;
 794                 grid-column: span 2;
 795         }
 796 }
 797 @media (min-width: 603px) and (min-height: 400px) {
 798         /* fit 3 cells of 200x133 */
 799         .gallery > li:first-child > figure,
 800         .gallery li.huge > figure {
 801                 grid-row: span 3;
 802                 grid-column: span 3;
 803         }
 804 }
 805
 806 .gallery figure, .gallery figcaption {
 807         transition: all .5s ease-in;
 808 }
 809 .gallery figure:hover ~ ul figcaption {
 810         /* mark all children */
 811         color: #FFF;
 812         background: rgba(0, 0, 0, .5);
 813 }
 814
 815 .gallery figure[data-sup]:after {
 816         position: absolute;
 817         right: 0;
 818         content: attr(data-sup);
 819         color: #FFF;
 820         background: #0006;
 821         border-radius: 1em;
 822         padding: .1ex .4em;
 823         margin: .4em;
 824 }
 825 .gallery .expand > figure[data-sup]:after {
 826         content: '+' attr(data-sup);
 827         background: #0008;
 828         font-size: 150%;
 829         border: 2px solid #FFF8;
 830 }
 831
 832 /* specialised galleries */
 833
 834 body#word {
 835         margin: 8px 1px;
 836 }
 837
 838 table.gallery {
 839         grid-auto-flow: row;
 840         grid-template-columns: repeat(auto-fit, minmax(2em, max-content)); /* 1fr */
 841 }
 842 table.gallery tbody,
 843 table.gallery tr {
 844         display: contents;
 845 }
 846 table.gallery tr > :first-child {
 847         grid-column: 1;
 848         -grid-row: span 6;
 849         margin: auto; /* vertical-align: middle */
 850 }
 851 table.gallery tr > :nth-child(2) {
 852         grid-column: 2; /* in case 1st is missing */
 853 }
 854 table.gallery td {
 855         border: 0; /* does not collapse */
 856         outline: 1px solid #888; /* over grid-gap */
 857 }
 858
 859 /* page-specific */
 860
 861 #browser td > a {
 862         text-decoration: none;
 863 }
 864 #browser td > a:active,
 865 #browser td > a:hover {
 866         text-decoration: underline;
 867 }
 868 #browser tr .aside {
 869         font-size: 80%;
 870         overflow: hidden;
 871         height: 0;
 872         -webkit-transition: all 1s ease-in;
 873         -o-transition: all 1s ease-in;
 874         -moz-transition: all 1s ease-in;
 875         transition: height 1s ease-in;
 876 }
 877 #browser tr .aside p {
 878         margin: 1ex 0;
 879 }
 880 #browser tr.target .aside,
 881 #browser tr:target .aside {
 882         height: auto;
 883 }
 884 #browser td.X {
 885         white-space: nowrap; /* some browsers break on dashes */
 886 }
 887
 888 #browser tr:target > td:first-of-type,
 889 #browser tr.focus > td:first-of-type {
 890         background: inherit;
 891 }
 892 #browser tr.focus > td {
 893         border-bottom-color: #000;
 894 }
 895
 896 form.aside {
 897         position: absolute;
 898         top: 3ex;
 899         right: 1em;
 900 }
 901
 902 .family-name {
 903         font-variant: small-caps;
 904 }
 905
 906 #index nav {
 907         columns: 3;
 908         -moz-columns: 3;
 909         -webkit-columns: 3;
 910 }
 911 nav > .section {
 912         break-inside: avoid;
 913         -webkit-column-break-inside: avoid; /* webkit */
 914         page-break-inside: avoid; /* moz */
 915         overflow: hidden; /* webkit workaround */
 916 }
 917 #index nav a {
 918         display: inline-block;
 919         margin-top: 1em;
 920 }
 921
 922 .units tbody tr:hover:not(.race) {
 923         background: #EEE;
 924 }
 925 .unit-gas {
 926         color: #040;
 927 }
 928 .unit-min, .unit-min a:not(:hover) {
 929         color: #004;
 930 }
 931 .unit-supply {
 932         color: #080;
 933 }
 934 .unit-o {color: #C08} /* organic */
 935 .unit-u {color: #44C} /* mechanic */
 936 .unit-p {color: #0A8} /* psionic */
 937 .unit-composed {
 938         color: #C88;
 939 }
 940 .unit-air {
 941         color: #08C;
 942 }
 943 .unit-x {color: #888}
 944 .unit-s {color: #890}
 945 .unit-m {color: #C70}
 946 .unit-l {color: #D22}
 947 .unit-h {color: #804}
 948 .magic-opt:before,
 949 .magic-opt:after {
 950         color: #000;
 951 }
 952 .hurtrel, .units .hurtrel {
 953         color: #778;
 954 }
 955 tbody .unit-shield {
 956         color: #64A;
 957 }
 958 .unit-pdd {
 959         color: #A8C;
 960 }
 961 .unit-splash {
 962         color: #4A0;
 963 }
 964 .hurt-a {
 965         color: #036;
 966 }
 967 .hurt-g {
 968         color: #063;
 969 }
 970 .unit-massive {
 971         color: #D88;
 972 }
 973 .unit-detect::before {
 974         color: #0A8;
 975 }
 976 .unit-jump {
 977         color: #8A4;
 978 }
 979 body .magic-perma {
 980                 text-decoration-color: #8C0;
 981            -moz-text-decoration-color: #8C0;
 982         -webkit-text-decoration-color: #8C0;
 983 }
 984
 985 /* printing hints */
 986
 987 @page {
 988         size: landscape;
 989         margin: 0;
 990 }
 991
 992 @media print {
 993         ul.legend-set {display: none} /* current options only relevant on dynamic media */
 994 }
 995
 996 /* terse optimisation */
 997
 998 @media (min-height: 112ex) and (min-width: 90em) {
 999         .keys td {
1000                 padding: 1ex 0 1ex .1em;
1001                 width: 7em;
1002         }
1003 }
1004
1005 @media (max-width: 79em) {
1006         .keys td {
1007                 position: relative; /* hides overflow */
1008                 width: 4.5em;
1009                 min-width: 6.5vw;
1010                 min-width: calc(7.7vw - 8px);
1011         }
1012         .keys td b,
1013         .keys .meta td b,
1014         .keys .ctrl td b,
1015         .keys .lead td b { /* leading chars always fit */
1016                 position: absolute; /* background */
1017                 right: 0; /* least overlap in corner */
1018                 font-size: 250%;
1019                 line-height: 2.5ex;
1020                 opacity: .5;
1021                 color: #FFF;
1022         }
1023
1024         .row2 {margin-left: 5.3em} /* 7em / Δtd(6em : 4.5em) */
1025         .row3 {margin-left: 6em}   /* 8em / Δtd */
1026         .row4 {margin-left: 7.5em} /* 10em / Δtd */
1027
1028         /* letter scripts columns to rows */
1029         .legend .glyphs:first-child td {
1030                 display: table-row;
1031                 vertical-align: baseline;
1032         }
1033         .legend .glyphs td > table {
1034                 width: auto;
1035                 display: inline;
1036                 margin-left: 1ex;
1037         }
1038         .legend .glyphs:first-child td td {
1039                 margin: 2px;
1040                 display: inline-block;
1041                 width: auto;
1042         }
1043
1044         @media (max-width: 61em) {
1045                 .keys td {
1046                         width: 3em;
1047                         height: 6.75ex; /* 3 lines */
1048                         font-size: 80%;
1049                 }
1050                 .keys td b,
1051                 .keys .meta td b,
1052                 .keys .ctrl td b,
1053                 .keys .lead td b {
1054                         line-height: 4ex;
1055                 }
1056
1057                 .row2 {margin-left: 3.5em} /* 7em / Δtd(6em : 3em) */
1058                 .row3 {margin-left: 4em}   /* 8em / Δtd */
1059                 .row4 {margin-left: 5em}   /* 10em / Δtd */
1060         }
1061
1062         @media (max-width: 42em) {
1063                 /* flatten right legend column on mobile */
1064                 .help > * {
1065                         display: table-row;
1066                         width: auto;
1067                 }
1068                 ul.legend-set {
1069                         clear: left;
1070                 }
1071                 .right dl.legend {
1072                         margin-right: 0;
1073                         margin-left: 6.4em;
1074                 }
1075                 .right dl.legend dt {
1076                         margin-right: 0;
1077                         margin-left: -6.4em;
1078                         float: left;
1079                         clear: left;
1080                 }
1081                 .right dl.legend dd {
1082                         float: left;
1083                 }
1084         }
1085 }
1086
1087 /*
1088 @media screen and (orientation: portrait) and (max-width: 62em) {
1089         body table.keys,
1090         #rows {
1091                 margin-top: 1ex;
1092                 transform: rotate(90deg);
1093                 transform-origin: top left;
1094                 margin-left: 40em;
1095                 margin-bottom: 30em;
1096                 font-size: 80%;
1097         }
1098 }
1099 */