Differences From
Artifact [d08e77f56c]:
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 + u {
41 + text-decoration-color: tone(10%,-0.3);
42 + }
40 43 }
41 44 a[href^="//"],
42 45 a[href^="http://"],
43 46 a[href^="https://"] { // external link
44 47 &:hover::after {
45 48 color: black;
46 49 background-color: white;
................................................................................
70 73
71 74 .button, a[href].button { // 🙄
72 75 @extend %sans;
73 76 font-size: 14pt;
74 77 box-sizing: border-box;
75 78 padding: 0.1in 0.2in;
76 79 border: 1px solid black;
80 + border-bottom: 2px solid black;
77 81 color: otone(25%);
78 82 text-shadow: 1px 1px black;
79 83 text-decoration: none;
80 84 text-align: center;
81 85 cursor: default;
82 86 user-select: none;
83 87 -webkit-user-drag: none;
84 88 -webkit-app-region: no-drag;
85 89 --icon: url(/s/heart.webp);
86 90 background-image: linear-gradient(to bottom,
87 - otone(-47%),
88 - otone(-50%) 15%,
89 - otone(-50%) 75%,
90 - otone(-53%)
91 + otone(-41%),
92 + otone(-43%) 15%,
93 + otone(-46%) 75%,
94 + otone(-50%)
91 95 );
92 96 &:hover, &:focus {
93 97 @extend %glow;
94 98 outline: none;
95 99 color: tone(-55%);
96 100 text-shadow: none;
97 101 background: linear-gradient(to bottom,
98 102 otone(-27%),
99 103 otone(-30%) 15%,
100 - otone(-30%) 75%,
104 + otone(-32%) 75%,
101 105 otone(-35%)
102 106 );
103 107 }
104 108 &:active {
105 109 color: black;
106 110 padding-bottom: calc(0.1in - 2px);
107 111 padding-top: calc(0.1in + 2px);
112 + border: 1px solid black;
113 + border-top: 2px solid black;
108 114 background: linear-gradient(to top,
109 115 otone(-25%),
110 116 otone(-30%) 15%,
111 - otone(-30%) 75%,
117 + otone(-32%) 75%,
112 118 otone(-35%)
113 119 );
114 120 }
115 121 }
116 122
117 123 button { @extend .button;
118 - &:first-of-type {
124 + form > &:first-of-type, menu > &:first-of-type {
119 125 @extend .button;
120 126 color: white;
121 127 box-shadow: inset 0 1px otone(-25%),
122 128 inset 0 -1px otone(-50%);
123 129 background: linear-gradient(to bottom,
124 130 otone(-35%),
125 131 otone(-40%) 15%,
126 - otone(-40%) 75%,
132 + otone(-43%) 75%,
127 133 otone(-45%)
128 134 );
129 135 &:hover, &:focus {
130 136 box-shadow: inset 0 1px otone(-15%),
131 137 inset 0 -1px otone(-40%);
132 138 }
133 139 &:active {
134 140 box-shadow: inset 0 1px otone(-50%),
135 141 inset 0 -1px otone(-25%);
136 142 background: linear-gradient(to top,
137 143 otone(-30%),
138 144 otone(-35%) 15%,
139 - otone(-35%) 75%,
145 + otone(-38%) 75%,
140 146 otone(-40%)
141 147 );
142 148 }
143 149 }
144 150 //&:hover { font-weight: bold; }
145 151 }
146 152
................................................................................
209 215 }
210 216 nav {
211 217 all: unset;
212 218 display: flex;
213 219 justify-content: flex-end;
214 220 align-items: center;
215 221 grid-column: 2/3; grid-row: 1/2;
216 - .ident {
222 + hr {
223 + width: 1px;
224 + height: 1.5em;
225 + border: none;
226 + border-left: 1px solid tone(-40%);
227 + margin-left: 0.5em;
228 + }
229 + a[href].ident {
217 230 color: tone(-20%);
218 231 margin-left: 0.2em;
219 - border-left: 1px solid tone(-40%);
220 232 padding-left: 0.5em;
233 + &::before {
234 + content: '@';
235 + display: inline-block; // remove underline - i don't want to know why this works
236 + opacity: 0.7;
237 + }
221 238 }
222 239 > a[href] {
223 240 display: block;
224 241 padding: 0.25in 0.10in;
225 242 //padding: calc((25% - 1em)/2) 0.15in;
226 243 &, &::after { transition: 0.3s; }
227 244 text-shadow: 1px 1px 1px black;
228 245 &:hover{
229 246 transform: scale(1.2);
230 247 }
231 248 }
232 - > a[href].bell {
233 - content: url(/s/bell.svg);
249 + > a[href].bell, a[href].gear {
234 250 height: 2em;
235 - padding: 0.125in 0.10in;
251 + padding: 0.125in 0.05in;
236 252 filter: drop-shadow(1px 1px 3px tone(-5%));
237 253 &:hover {
238 254 filter: drop-shadow(1px 1px 3px tone(-5%))
239 255 drop-shadow(0 0 10px tone(-5%));
240 256 }
241 257 }
258 + > a[href].bell { content: url(/s/bell.svg); }
259 + > a[href].gear { content: url(/s/gear.svg); }
242 260 }
243 261 }
244 262 }
245 263
246 264 main {
247 265 @extend %content;
248 266 display: block;
................................................................................
285 303 border-radius: 5px;
286 304 border: 1px solid transparent;
287 305 &.on {
288 306 background-color: tone(-30%, -0.7);
289 307 box-shadow: 0 0 10px tone(-30%);
290 308 border-color: tone(-20%);
291 309 }
292 - > button, > p { display: block; }
310 + > button, > p, > a[href] { display: block; }
293 311 > p { text-align: center; font-size: 80%; margin: 0; margin-top: 0.1in; }
294 - > button {
312 + > button, > a[href] {
313 + width: max-content;
295 314 margin: auto;
296 315 }
297 316 &:last-child:nth-child(2n-1) {
298 317 grid-column: 1/3;
299 318 }
300 319 }
301 320
................................................................................
479 498 padding: 0.1in;
480 499 > img { grid-column: 1/2; grid-row: 1/3; width: 1in; height: 1in;}
481 500 > textarea {
482 501 grid-column: 2/6; grid-row: 1/2; height: 3in;
483 502 resize: vertical;
484 503 margin-bottom: 0.08in;
485 504 }
486 - > input[name="acl"] { grid-column: 2/3; grid-row: 2/3; }
487 505 > button[value="post"] { grid-column: 5/6; grid-row: 2/3; }
488 506 > button[value="attach"] { grid-column: 4/5; grid-row: 2/3; }
489 507 a.help[href] { margin-right: 0.05in }
490 508 }
509 +
510 +input[name="acl"] { grid-column: 2/3; grid-row: 2/3; }
491 511
492 512 a.help[href] {
493 513 display: block;
494 514 text-align: center;
495 515 padding: 0.09in 0.2in;
496 516 background: tone(-40%);
497 517 border: 1px solid black;
................................................................................
694 714 > a[href] {
695 715 display: block;
696 716 text-align: left;
697 717 }
698 718 > a[href] + a[href] {
699 719 border-top: none;
700 720 }
721 + .button, .button:active {
722 + border: 1px solid black;
723 + }
701 724 hr {
702 725 border: none;
703 726 }
704 727 }
705 728
706 729 menu { all: unset; display: block; }
707 730 body.conf main {
................................................................................
887 910 .color-picker {
888 911 /* implemented using javascript, alas */
889 912 @extend %box;
890 913 label { text-shadow: 1px 1px black; }
891 914 padding: 0.1in;
892 915 }
893 916
894 -ul.user-list {
917 +ul.directory {
895 918 list-style-type: none;
896 919 margin: 0.5em 0;
897 920 padding: 0;
898 921 box-shadow: 0 0 10px -3px black inset;
899 922 border: 1px solid tone(-50%);
900 923 li {
901 924 background-color: tone(-20%, -0.8);
................................................................................
921 944 text-align: center;
922 945 padding: 0.3em 0;
923 946 margin: 0.2em 0.1em;
924 947 cursor: default;
925 948 }
926 949 }
927 950
928 -.button, a[href] {
929 - .neg { --co: 30 }
930 - .pos { --co: -30 }
931 -}
951 +.neg { --co: 30 !important }
952 +.pos { --co: -30 !important }
932 953
933 954 .pick-list {
934 955 display: flex;
935 956 flex-flow: row wrap;
936 957 padding: 0.1in;
937 958 background-color: tone(-50%);
938 959 border: 1px solid tone(-53%);
................................................................................
1210 1231 padding: 0 0.2in;
1211 1232 max-height: calc(100vh - 3in);
1212 1233 overflow-y: scroll;
1213 1234 text-align: justify;
1214 1235 }
1215 1236 }
1216 1237 }
1238 +
1239 +div.kind-picker {
1240 + text-align: right;
1241 + font-style: italic;
1242 + padding: 0.2em;
1243 +}
1244 +
1245 +body.timeline {
1246 + menu.circles {
1247 + @extend %box;
1248 + width: 3in;
1249 + margin-right: 0;
1250 + margin-left: auto;
1251 + padding: 0.1in;
1252 + a[href] {
1253 + transition: 0.4s;
1254 + text-align: center;
1255 + display: block;
1256 + padding: 0.4em;
1257 + background: linear-gradient(to right, tone(-30%, -0.6), transparent) no-repeat;
1258 + background-position: -3in 0;
1259 + text-decoration: none;
1260 + & + a[href] {
1261 + border-bottom: 1px solid tone(-40%);
1262 + border-image: linear-gradient(to right, transparent, tone(-45%), transparent) 1 0 0 / 1px;
1263 + }
1264 + &:hover {
1265 + background-position: 0 0;
1266 + }
1267 + }
1268 + }
1269 +}