Differences From
Artifact [2a06f65525]:
9 9 @extend %sans;
10 10 background-color: tone(-55%);
11 11 color: tone(25%);
12 12 font-size: 14pt;
13 13 margin: 0;
14 14 padding: 0;
15 15 }
16 +::selection {
17 + color: tone(-60%);
18 + background-color: tone(-10%);
19 +}
20 +::placeholder {
21 + color: tone(0,-0.3);
22 + font-style: italic;
23 +}
16 24 a[href] {
17 25 color: tone(10%);
18 26 text-decoration-color: tone(10%,-0.5);
19 27 &:hover {
20 28 color: white;
21 29 text-shadow: 0 0 15px tone(20%);
22 30 text-decoration-color: tone(10%,-0.1);
23 31 }
32 + &.button { @extend %button; }
24 33 }
25 34 a[href^="//"],
26 35 a[href^="http://"],
27 36 a[href^="https://"] { // external link
28 37 &:hover::after {
29 38 color: black;
30 39 background-color: white;
................................................................................
51 60 %glow {
52 61 box-shadow: 0 0 20px tone(0%,-0.8);
53 62 }
54 63
55 64 %button {
56 65 @extend %sans;
57 66 font-size: 14pt;
67 + box-sizing: border-box;
58 68 padding: 0.1in 0.2in;
59 69 border: 1px solid black;
60 70 color: tone(25%);
61 71 text-shadow: 1px 1px black;
62 72 text-decoration: none;
63 73 text-align: center;
64 74 cursor: default;
................................................................................
124 134 }
125 135
126 136 $grad-ui-focus: linear-gradient(to bottom,
127 137 tone(-50%),
128 138 tone(-35%)
129 139 );
130 140
131 -input[type='text'], input[type='password'], textarea {
141 +input[type='text'], input[type='password'], textarea, select {
132 142 @extend %serif;
133 143 padding: 0.08in 0.1in;
134 144 box-sizing: border-box;
135 145 border: 1px solid black;
136 146 background: linear-gradient(to bottom, tone(-55%), tone(-40%));
137 147 font-size: 16pt;
138 148 color: tone(25%);
................................................................................
141 151 color: white;
142 152 border-image: linear-gradient(to bottom, tone(-10%), tone(-30%)) 1 / 1px;
143 153 background: $grad-ui-focus;
144 154 outline: none;
145 155 @extend %glow;
146 156 }
147 157 }
158 +select { width: 100%; }
148 159
149 160 @mixin glass {
150 161 @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
151 162 backdrop-filter: blur(40px);
152 163 -webkit-backdrop-filter: blur(40px);
153 164 background-color: tone(-53%, -0.7);
154 165 }
................................................................................
262 273 grid-row: 2 / 3;
263 274 }
264 275 }
265 276 > .stats {
266 277 grid-column: 3 / 4;
267 278 grid-row: 1 / 3;
268 279 }
269 - > .menu {
280 + > form.actions {
270 281 grid-column: 1 / 3; grid-row: 2 / 3;
271 282 padding-top: 0.075in;
272 283 flex-wrap: wrap;
273 284 display: flex;
274 285 justify-content: center;
275 286 align-items: center;
276 287 > a[href] {
277 - @extend %button;
278 288 display: block;
279 289 margin: 0.025in 0.05in;
280 290 }
281 291 > hr {
282 292 all: unset;
283 293 display: block;
284 294 height: 0.3in;
................................................................................
289 299 }
290 300
291 301 .epithet {
292 302 display: inline-block;
293 303 background: tone(20%);
294 304 color: tone(-45%);
295 305 text-shadow: 0 0 3px tone(-30%, -0.4);
296 - border-radius: 3px;
306 + border-radius: 2px;
297 307 padding: 6px;
298 308 padding-top: 2px;
299 309 padding-bottom: 4px;
300 310 font-size: 80%;
301 311 vertical-align: top;
302 312 font-weight: 300;
303 313 letter-spacing: 0.5px;
................................................................................
321 331 tone(-55%) 10%,
322 332 tone(-50%) 80%,
323 333 tone(-45%)
324 334 );
325 335 // outline: 1px solid black;
326 336 }
327 337
328 -body.error .message {
338 +//body.error .message {
339 +.message {
329 340 @extend %box;
341 + display: block;
330 342 width: 4in;
331 343 margin:auto;
332 344 padding: 0.5in;
333 345 text-align: center;
334 346 }
335 347
336 348 div.login {
................................................................................
469 481 padding: 0.1in;
470 482 padding-left: 0.15in;
471 483 >.nym { font-weight: bold; }
472 484 color: tone(0%,-0.4);
473 485 > span.nym { color: tone(10%) }
474 486 > span.handle { color: tone(-5%) }
475 487 background: linear-gradient(to right, tone(-55%), transparent);
488 + &:hover {
489 + > span.nym { color: white; }
490 + > span.handle { color: tone(15%) }
491 + }
476 492 }
477 493 >.content {
478 494 grid-column: 2/4; grid-row: 1/2;
479 495 padding: 0.2in;
480 496 @extend %serif;
481 497 font-size: 110%;
482 498 text-align: justify;
................................................................................
510 526 }
511 527 }
512 528
513 529 body.conf main {
514 530 display: grid;
515 531 grid-template-columns: 2in 1fr;
516 532 grid-template-rows: max-content 1fr;
517 - > .menu {
533 + > menu {
518 534 margin-left: -0.25in;
519 535 grid-column: 1/2; grid-row: 1/2;
520 536 background: linear-gradient(to bottom, tone(-45%),tone(-55%));
521 537 border: 1px solid black;
522 538 padding: 0.1in;
523 539 > a[href] {
524 540 @extend %button;
................................................................................
546 562 border-left: none;
547 563 text-shadow: 1px 1px 0 black;
548 564 }
549 565 }
550 566
551 567 }
552 568
569 +hr {
570 + border: none;
571 + border-top: 1px solid tone(-30%);
572 + border-bottom: 1px solid tone(-55%);
573 +}
553 574 form {
575 + margin: 0.15in 0;
576 + > p:first-child { margin-top: 0; }
577 + > p:last-child { margin-bottom: 0; }
554 578 .elem {
555 579 margin: 0.1in 0;
556 580 label { display:block; font-weight: bold; padding: 0.03in 0; }
557 581 .txtbox {
558 582 @extend %serif;
559 583 box-sizing: border-box;
560 584 padding: 0.08in 0.1in;
561 585 border: 1px solid black;
562 586 background: tone(-55%);
563 587 }
564 - textarea { resize: vertical; min-height: 2in; }
565 588 input, textarea, .txtbox {
566 589 display: block;
567 590 width: 100%;
568 591 }
569 - button { float: right; width: 50%; }
592 + textarea { resize: vertical; min-height: 2in; }
593 + }
594 + .elem + %button { margin-left: 50%; width: 50%; }
595 +}
596 +
597 +menu.choice {
598 + display: flex;
599 + &.horizontal {
600 + flex-flow: row-reverse wrap;
601 + justify-content: space-evenly;
602 + }
603 + &.vertical {
604 + flex-flow: column;
605 + margin-left: 50%;
606 + }
607 + &.vertical-float {
608 + flex-flow: column;
609 + float: right;
610 + width: 40%;
611 + margin-left: 0.1in;
612 + }
613 + > %button { display: block; margin: 2px; flex-grow: 1 }
614 +}
615 +
616 +.check-panel {
617 + display: flex;
618 + flex-flow: row wrap;
619 + > label {
620 + display: block;
621 + box-sizing: border-box;
622 + width: calc(50% - 0.2in);
623 + padding: 0.1in 0.1in;
624 + margin: 0.1in 0.1in;
625 + background: tone(-45%);
626 + border: 1px solid black;
627 + text-shadow: 1px 1px black;
628 + flex-grow: 1;
629 + &:focus-within {
630 + border: 1px inset tone(-10%);
631 + background: tone(-50%);
632 + }
633 + }
634 + input[type="checkbox"] {
635 + -webkit-appearance: none;
636 + padding: 0.5em;
637 + background: tone(-35%);
638 + border: 1px outset tone(-50%);
639 + vertical-align: bottom;
640 + box-shadow: 0 1px tone(-50%);
641 + &:checked {
642 + border: 1px inset tone(-35%);
643 + background: tone(-60%);
644 + box-shadow: 0 1px tone(-40%);
645 + }
646 + &:focus {
647 + border-color: tone(10%);
648 + outline: none;
649 + }
570 650 }
571 651 }
572 652
573 653 @keyframes flashup {
574 654 0% { opacity: 0; transform: scale(0.8); }
575 655 10% { opacity: 1; transform: scale(1.1); }
576 656 80% { opacity: 1; transform: scale(1); }
................................................................................
591 671 border-radius: 3px;
592 672 box-shadow: 0 0 50px tone(-55%);
593 673 color: white;
594 674 animation: ease forwards flashup;
595 675 //cubic-bezier(0.4, 0.63, 0.6, 0.31)
596 676 animation-duration: 3s;
597 677 }
678 +
679 +form.action-bar {
680 + display: flex;
681 + > * {
682 + flex-grow: 1;
683 + flex-basis: 0;
684 + margin-left: 0.1in;
685 + }
686 + > *:first-child {
687 + margin-left: 0;
688 + }
689 +}