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