Differences From
Artifact [048cf30682]:
33 33 text-underline-offset: 0.1em;
34 34 &:hover, &:focus {
35 35 color: white;
36 36 text-shadow: 0 0 15px tone(20%);
37 37 text-decoration-color: tone(10%,-0.1);
38 38 outline: none;
39 39 }
40 - &.button { @extend %button; }
41 40 }
42 41 a[href^="//"],
43 42 a[href^="http://"],
44 43 a[href^="https://"] { // external link
45 44 &:hover::after {
46 45 color: black;
47 46 background-color: white;
................................................................................
65 64 margin: auto;
66 65 }
67 66
68 67 %glow {
69 68 box-shadow: 0 0 20px tone(0%,-0.8);
70 69 }
71 70
72 -%button {
71 +.button, a[href].button { // 🙄
73 72 @extend %sans;
74 73 font-size: 14pt;
75 74 box-sizing: border-box;
76 75 padding: 0.1in 0.2in;
77 76 border: 1px solid black;
78 77 color: otone(25%);
79 78 text-shadow: 1px 1px black;
................................................................................
111 110 otone(-30%) 15%,
112 111 otone(-30%) 75%,
113 112 otone(-35%)
114 113 );
115 114 }
116 115 }
117 116
118 -button { @extend %button;
117 +button { @extend .button;
119 118 &:first-of-type {
120 - @extend %button;
119 + @extend .button;
121 120 color: white;
122 121 box-shadow: inset 0 1px otone(-25%),
123 122 inset 0 -1px otone(-50%);
124 123 background: linear-gradient(to bottom,
125 124 otone(-35%),
126 125 otone(-40%) 15%,
127 126 otone(-40%) 75%,
................................................................................
307 306 }
308 307 > .stats {
309 308 grid-column: 3 / 4;
310 309 grid-row: 1 / 3;
311 310 display: flex;
312 311 flex-flow: column;
313 312 > * { flex-grow: 1; }
314 - table { td, th { text-align: center; } }
313 + table {
314 + width: 100%;
315 + td, th { text-align: center; }
316 + }
315 317 }
316 318 > form.actions {
317 319 grid-column: 1 / 3; grid-row: 2 / 3;
318 320 padding-top: 0.075in;
319 - flex-wrap: wrap;
320 321 display: flex;
322 + flex-flow: column;
321 323 justify-content: center;
322 324 align-items: center;
323 - > a[href] {
324 - display: block;
325 - margin: 0.025in 0.05in;
326 - }
327 - > hr {
328 - all: unset;
329 - display: block;
330 - height: 0.3in;
331 - width: 1px;
332 - border-left: 1px solid rgba(0,0,0,0.6);
325 + > div {
326 + display: flex;
327 + flex-wrap: wrap;
328 + flex-flow: row;
329 + justify-content: center;
330 + align-items: center;
331 + margin-bottom: 0.07in;
332 + > a[href] {
333 + display: block;
334 + margin: 0.025in 0.05in;
335 + }
333 336 }
334 337 }
335 338 }
336 339
337 340 .epithet {
338 341 display: inline-block;
339 342 background: tone(20%);
................................................................................
386 389 body.login {
387 390 form.auth-select {
388 391 @extend %box;
389 392 width: 3in;
390 393 padding: 0.4in;
391 394 p { text-align: center; }
392 395 menu {
393 - %button {
396 + .button {
394 397 display: block;
395 398 width: 100%;
396 - & + %button { border-top: none; }
399 + & + button, & + a[href] { border-top: none; }
397 400 }
398 401 }
399 402 }
400 403 div.login {
401 404 @extend %box;
402 405 width: 4in;
403 406 padding: 0.4in;
................................................................................
420 423 grid-template-columns: 1fr 1fr;
421 424 grid-template-rows: 1.2em max-content max-content;
422 425 grid-gap: 5px;
423 426 > label, input, button { display: block; }
424 427 > label { grid-column: 1 / 3; grid-row: 1/2; font-weight: bold }
425 428 > input, textarea { grid-column: 1 / 3; grid-row: 2/3; }
426 429 > button { grid-column: 2 / 3; grid-row: 3/4; }
427 - > a { @extend %button; grid-column: 1 / 2; grid-row: 3/4; }
430 + > a { grid-column: 1 / 2; grid-row: 3/4; }
431 + > textarea { @extend %teletype; font-size: 80% !important; height: 1.5in; }
428 432 }
429 433 }
430 434 }
431 435
432 436 form.compose {
433 437 @extend %box;
434 438 display: grid;
................................................................................
453 457 text-align: center;
454 458 padding: 0.09in 0.2in;
455 459 background: tone(-40%);
456 460 border: 1px solid black;
457 461 font-weight: bold;
458 462 text-decoration: none;
459 463 cursor: help;
464 + max-width: 0.1in;
460 465 }
461 466
462 467 input.acl {
463 468 @extend %teletype;
464 469 background: url(/s/padlock.svg) no-repeat;
465 470 background-size: 20pt;
466 471 background-position: 0.05in 50%;
................................................................................
485 490 z-index: 2;
486 491 > div {
487 492 height: 100%;
488 493 overflow-y: scroll;
489 494 >p:first-of-type { margin-top: 0; }
490 495 }
491 496 >a[href="#0"] { // close link
492 - @extend %button;
493 497 cursor: default;
494 498 display: block;
495 499 position: absolute;
496 500 top: -0.3in;
497 501 right: 0.1in;
498 502 margin: 0.1in;
499 503 padding: 0.1in;
................................................................................
647 651 %navmenu, body.profile main > menu {
648 652 margin-left: -0.25in;
649 653 grid-column: 1/2; grid-row: 1/2;
650 654 background: linear-gradient(to bottom, tone(-45%),tone(-55%));
651 655 border: 1px solid black;
652 656 padding: 0.1in;
653 657 > a[href] {
654 - @extend %button;
655 658 display: block;
656 659 text-align: left;
657 660 }
658 661 > a[href] + a[href] {
659 662 border-top: none;
660 663 }
661 664 hr {
................................................................................
728 731 }
729 732 > input, textarea, .txtbox {
730 733 display: block;
731 734 width: 100%;
732 735 }
733 736 > textarea { resize: vertical; min-height: 2in; }
734 737 }
735 - body.conf & > %button { margin-left: 50%; width: 50%; }
738 + body.conf & { > .button { margin-left: 50%; width: 50%; } }
736 739 .elem-group {
737 740 display: flex;
738 741 flex-flow: row;
739 742 > .elem {
740 743 flex-shrink: 1;
741 744 flex-grow: 1;
742 745 margin-left: 0.1in;
................................................................................
758 761 }
759 762 &.vertical-float {
760 763 flex-flow: column;
761 764 float: right;
762 765 width: 40%;
763 766 margin-left: 0.1in;
764 767 }
765 - > %button {
768 + > .button, a[href] {
766 769 flex-basis: min-content;
767 770 flex-grow: 1;
768 771 display: block; margin: 2px;
769 772 }
770 773 }
771 774
772 775 .check-panel {
................................................................................
881 884 text-align: center;
882 885 padding: 0.3em 0;
883 886 margin: 0.2em 0.1em;
884 887 cursor: default;
885 888 }
886 889 }
887 890
888 -:is(%button, a[href]).neg { --co: 30 }
889 -:is(%button, a[href]).pos { --co: -30 }
891 +.button, a[href] {
892 + .neg { --co: 30 }
893 + .pos { --co: -30 }
894 +}
890 895
891 896 .pick-list {
892 897 display: flex;
893 898 flex-flow: row wrap;
894 899 padding: 0.1in;
895 900 background-color: tone(-50%);
896 901 border: 1px solid tone(-53%);