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