268
269
270
271
272
273
274
275
276
277
278
279
280
281
...
290
291
292
293
294
295
296
297
298
299
300
301
302
303
...
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
...
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
|
}
> .xid {
color: tone(20%,-0.1);
font-size: 80%;
vertical-align: text-top;
}
}
div.profile {
padding: 0.1in;
position: relative;
display: grid;
margin-bottom: 0.4in;
grid-template-columns: 2fr 1fr;
................................................................................
> .avatar {
display: block;
width: 1in; height: 1in;
object-fit: cover;
grid-column: 1 / 2;
grid-row: 1 / 3;
border: 1px solid black;
}
> .id {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
> .bio {
grid-column: 2 / 3;
................................................................................
> .msg:first-child { padding-top: 0; }
> .user {
width: max-content; margin: auto;
background: tone(-20%,-0.3);
border: 1px solid black;
color: tone(-50%);
padding: 0.1in;
> img { display: block; width: 1in; height: 1in; margin: auto; border: 1px solid black; }
> .name { @extend %serif; text-align: center; font-size: 130%; font-weight: bold; margin-top: 0.08in; }
}
>form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1.2em max-content max-content;
grid-gap: 5px;
................................................................................
background: url(/s/padlock.svg) no-repeat, $grad-ui-focus;
background-size: 20pt;
background-position: 0.05in 50%;
};
padding-left: 0.40in;
}
div.modal {
@extend %box;
position: fixed;
display: none;
left: 0; right: 0; bottom: 0; top: 0;
max-width: 7in;
margin: 1in auto;
padding: 0.2in 0.3in;
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
>
>
>
>
|
|
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
...
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
...
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
...
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
|
}
> .xid {
color: tone(20%,-0.1);
font-size: 80%;
vertical-align: text-top;
}
}
body.profile {
#rel {
menu {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(max-content);
grid-gap: 0.1in;
> .opt {
padding: 0.1in;
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;
}
}
}
}
}
div.profile {
padding: 0.1in;
position: relative;
display: grid;
margin-bottom: 0.4in;
grid-template-columns: 2fr 1fr;
................................................................................
> .avatar {
display: block;
width: 1in; height: 1in;
object-fit: cover;
grid-column: 1 / 2;
grid-row: 1 / 3;
border: 1px solid black;
background-color: tone(-57%);
}
> .id {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
> .bio {
grid-column: 2 / 3;
................................................................................
> .msg:first-child { padding-top: 0; }
> .user {
width: max-content; margin: auto;
background: tone(-20%,-0.3);
border: 1px solid black;
color: tone(-50%);
padding: 0.1in;
> img {
display: block;
width: 1in; height: 1in;
margin: auto;
border: 1px solid black;
background-color: tone(-50%);
}
> .name { @extend %serif; text-align: center; font-size: 130%; font-weight: bold; margin-top: 0.08in; }
}
>form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1.2em max-content max-content;
grid-gap: 5px;
................................................................................
background: url(/s/padlock.svg) no-repeat, $grad-ui-focus;
background-size: 20pt;
background-position: 0.05in 50%;
};
padding-left: 0.40in;
}
.modal {
@extend %box;
position: fixed;
display: none;
left: 0; right: 0; bottom: 0; top: 0;
max-width: 7in;
margin: 1in auto;
padding: 0.2in 0.3in;
|