Differences From
Artifact [a256539ae3]:
1 1 $default-color: hsl(323,100%,65%);
2 2 %sans { font-family: "Alegreya Sans", "Open Sans", sans-serif; }
3 3 %serif { font-family: Alegreya, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, Junicode, serif; }
4 4 %teletype { font-family: "Inconsolata LGC", Inconsolata, monospace; font-size: 12pt !important; }
5 5
6 6 // @function tone($pct, $alpha: 0) { @return adjust-color($color, $lightness: $pct, $alpha: $alpha) }
7 -@function tone($pct, $alpha: 0) {
8 - @return hsla(var(--hue), 100%, 65% + $pct, 1 + $alpha)
9 -}
7 +@function tone($pct, $alpha: 0) { @return hsla(var(--hue), 100%, 65% + $pct, 1 + $alpha) }
8 +@function vtone($pct, $vary, $alpha: 0) { @return hsla(calc(var(--hue) + $vary), 100%, 65% + $pct, 1 + $alpha) }
9 +@function otone($pct, $alpha: 0) { @return hsla(calc(var(--hue) + var(--co)), 100%, 65% + $pct, 1 + $alpha) }
10 10
11 -:root { --hue: 323; }
11 +:root { --hue: 323; --co: 0; }
12 12 body {
13 13 @extend %sans;
14 14 background-color: tone(-55%);
15 15 color: tone(25%);
16 16 font-size: 14pt;
17 17 margin: 0;
18 18 padding: 0;
................................................................................
24 24 ::placeholder {
25 25 color: tone(0,-0.3);
26 26 font-style: italic;
27 27 }
28 28 a[href] {
29 29 color: tone(10%);
30 30 text-decoration-color: tone(10%,-0.5);
31 + text-decoration-skip-ink: all;
32 + text-decoration-thickness: 1px;
33 + text-underline-offset: 0.1em;
31 34 &:hover, &:focus {
32 35 color: white;
33 36 text-shadow: 0 0 15px tone(20%);
34 37 text-decoration-color: tone(10%,-0.1);
35 38 outline: none;
36 39 }
37 40 &.button { @extend %button; }
................................................................................
68 71
69 72 %button {
70 73 @extend %sans;
71 74 font-size: 14pt;
72 75 box-sizing: border-box;
73 76 padding: 0.1in 0.2in;
74 77 border: 1px solid black;
75 - color: tone(25%);
78 + color: otone(25%);
76 79 text-shadow: 1px 1px black;
77 80 text-decoration: none;
78 81 text-align: center;
79 82 cursor: default;
80 83 user-select: none;
81 84 -webkit-user-drag: none;
82 85 -webkit-app-region: no-drag;
83 86 background: linear-gradient(to bottom,
84 - tone(-47%),
85 - tone(-50%) 15%,
86 - tone(-50%) 75%,
87 - tone(-53%)
87 + otone(-47%),
88 + otone(-50%) 15%,
89 + otone(-50%) 75%,
90 + otone(-53%)
88 91 );
89 92 &:hover, &:focus {
90 93 @extend %glow;
91 94 outline: none;
92 95 color: tone(-55%);
93 96 text-shadow: none;
94 97 background: linear-gradient(to bottom,
95 - tone(-27%),
96 - tone(-30%) 15%,
97 - tone(-30%) 75%,
98 - tone(-35%)
98 + otone(-27%),
99 + otone(-30%) 15%,
100 + otone(-30%) 75%,
101 + otone(-35%)
99 102 );
100 103 }
101 104 &:active {
102 105 color: black;
103 106 padding-bottom: calc(0.1in - 2px);
104 107 padding-top: calc(0.1in + 2px);
105 108 background: linear-gradient(to top,
106 - tone(-25%),
107 - tone(-30%) 15%,
108 - tone(-30%) 75%,
109 - tone(-35%)
109 + otone(-25%),
110 + otone(-30%) 15%,
111 + otone(-30%) 75%,
112 + otone(-35%)
110 113 );
111 114 }
112 115 }
113 116
114 117 button { @extend %button;
115 118 &:first-of-type {
116 119 @extend %button;
117 120 color: white;
118 - box-shadow: inset 0 1px tone(-25%),
119 - inset 0 -1px tone(-50%);
121 + box-shadow: inset 0 1px otone(-25%),
122 + inset 0 -1px otone(-50%);
120 123 background: linear-gradient(to bottom,
121 - tone(-35%),
122 - tone(-40%) 15%,
123 - tone(-40%) 75%,
124 - tone(-45%)
124 + otone(-35%),
125 + otone(-40%) 15%,
126 + otone(-40%) 75%,
127 + otone(-45%)
125 128 );
126 129 &:hover, &:focus {
127 - box-shadow: inset 0 1px tone(-15%),
128 - inset 0 -1px tone(-40%);
130 + box-shadow: inset 0 1px otone(-15%),
131 + inset 0 -1px otone(-40%);
129 132 }
130 133 &:active {
131 - box-shadow: inset 0 1px tone(-50%),
132 - inset 0 -1px tone(-25%);
134 + box-shadow: inset 0 1px otone(-50%),
135 + inset 0 -1px otone(-25%);
133 136 background: linear-gradient(to top,
134 - tone(-30%),
135 - tone(-35%) 15%,
136 - tone(-35%) 75%,
137 - tone(-40%)
137 + otone(-30%),
138 + otone(-35%) 15%,
139 + otone(-35%) 75%,
140 + otone(-40%)
138 141 );
139 142 }
140 143 }
141 - &:hover { font-weight: bold; }
144 + //&:hover { font-weight: bold; }
142 145 }
143 146
144 147 $grad-ui-focus: linear-gradient(to bottom,
145 148 tone(-50%),
146 149 tone(-35%)
147 150 );
148 151
149 -input[type='text'], input[type='password'], textarea, select {
152 +input[type='text'], input[type='number'], input[type='password'], textarea, select {
150 153 @extend %serif;
151 154 padding: 0.08in 0.1in;
152 155 box-sizing: border-box;
153 156 border: 1px solid black;
154 157 background: linear-gradient(to bottom, tone(-55%), tone(-40%));
155 158 font-size: 16pt;
156 159 color: tone(25%);
................................................................................
236 239 padding-bottom: 0.1in;
237 240 background-color: tone(-45%,-0.3);
238 241 border: {
239 242 left: 1px solid black;
240 243 right: 1px solid black;
241 244 }
242 245 }
246 +
247 +.id {
248 + color: tone(25%,-0.4);
249 + > .nym {
250 + font-weight: bold;
251 + color: tone(25%);
252 + }
253 + > .xid {
254 + color: tone(20%,-0.1);
255 + font-size: 80%;
256 + vertical-align: text-top;
257 + }
258 +}
243 259
244 260 div.profile {
245 261 padding: 0.1in;
246 262 position: relative;
247 263 display: grid;
248 264 margin-bottom: 0.4in;
249 265 grid-template-columns: 2fr 1fr;
................................................................................
261 277 grid-column: 1 / 2;
262 278 grid-row: 1 / 3;
263 279 border: 1px solid black;
264 280 }
265 281 > .id {
266 282 grid-column: 2 / 3;
267 283 grid-row: 1 / 2;
268 - color: tone(25%,-0.4);
269 - > .nym {
270 - font-weight: bold;
271 - color: tone(25%);
272 - }
273 - > .xid {
274 - color: tone(20%,-0.1);
275 - font-size: 80%;
276 - vertical-align: text-top;
277 - }
278 284 }
279 285 > .bio {
280 286 grid-column: 2 / 3;
281 287 grid-row: 2 / 3;
282 288 }
283 289 }
284 290 > .stats {
285 291 grid-column: 3 / 4;
286 292 grid-row: 1 / 3;
293 + display: flex;
294 + flex-flow: column;
295 + > * { flex-grow: 1; }
296 + table { td, th { text-align: center; } }
287 297 }
288 298 > form.actions {
289 299 grid-column: 1 / 3; grid-row: 2 / 3;
290 300 padding-top: 0.075in;
291 301 flex-wrap: wrap;
292 302 display: flex;
293 303 justify-content: center;
................................................................................
606 616 }
607 617 input, textarea, .txtbox {
608 618 display: block;
609 619 width: 100%;
610 620 }
611 621 textarea { resize: vertical; min-height: 2in; }
612 622 }
613 - .elem + %button { margin-left: 50%; width: 50%; }
623 + :is(.elem,.elem-group) + %button { margin-left: 50%; width: 50%; }
624 + .elem-group {
625 + display: flex;
626 + flex-flow: row;
627 + > .elem {
628 + flex-shrink: 1;
629 + flex-grow: 1;
630 + margin-left: 0.1in;
631 + &:first-child { margin-left: 0; }
632 + }
633 + > .small { flex-shrink: 5; }
634 + }
614 635 }
615 636
616 637 menu.choice {
617 638 display: flex;
618 639 &.horizontal {
619 640 flex-flow: row-reverse wrap;
620 641 justify-content: space-evenly;
................................................................................
713 734
714 735 .color-picker {
715 736 /* implemented using javascript, alas */
716 737 @extend %box;
717 738 label { text-shadow: 1px 1px black; }
718 739 padding: 0.1in;
719 740 }
741 +
742 +ul.user-list {
743 + list-style-type: none;
744 + margin: 0.5em 0;
745 + padding: 0;
746 + box-shadow: 0 0 10px -3px black inset;
747 + border: 1px solid tone(-50%);
748 + li {
749 + background-color: tone(-20%, -0.8);
750 + padding: 0.5em;
751 + .regalia { margin-right: 0.3em; vertical-align: bottom; }
752 + &:nth-child(odd) {
753 + background-color: tone(-30%, -0.8);
754 + }
755 + }
756 +}
757 +
758 +ul.remarks {
759 + margin: 0; padding: 0;
760 + list-style-type: none;
761 + li {
762 + border-top: 1px solid otone(-22%);
763 + border-bottom: 2px solid otone(-55%);
764 + border-radius: 3px;
765 + background: otone(-25%,-0.4);
766 + color: otone(25%);
767 + text-align: center;
768 + padding: 0.3em 0;
769 + margin: 0.2em 0.1em;
770 + cursor: default;
771 + }
772 +}
773 +
774 +:is(%button, a[href]).neg { --co: 60 }
775 +:is(%button, a[href]).pos { --co: -30 }