281
282
283
284
285
286
287
288
289
290
291
292
293
294
...
487
488
489
490
491
492
493
494
495
496
497
498
499
500
....
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
....
1073
1074
1075
1076
1077
1078
1079
|
grid-row: 1 / 2;
display: grid;
grid-template-columns: 1.1in 1fr;
grid-template-rows: max-content 1fr;
> .avatar {
display: block;
width: 1in; height: 1in;
grid-column: 1 / 2;
grid-row: 1 / 3;
border: 1px solid black;
}
> .id {
grid-column: 2 / 3;
grid-row: 1 / 2;
................................................................................
font-size: 1.5ex !important;
letter-spacing: 1.3px;
padding-bottom: 3px;
border-radius: 2px;
vertical-align: baseline;
box-shadow: 1px 1px 1px black;
}
div.thread {
margin-left: 0.3in;
& + article.post { margin-top: 0.3in; }
}
a[href].username {
................................................................................
height: max-content;
background-image: url(/s/file.webp); //TODO different icons for different mime types
background-repeat: no-repeat;
background-position: left;
padding-left: 0.4in;
> .label {
text-decoration: underline;
}
> .mime {
font-style: italic;
opacity: 60%;
margin-left: 0.5ex;
}
}
................................................................................
}
}
.media.upload form {
padding: 0.1in 0.2in;
@extend %box;
}
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
...
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
....
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
....
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
|
grid-row: 1 / 2;
display: grid;
grid-template-columns: 1.1in 1fr;
grid-template-rows: max-content 1fr;
> .avatar {
display: block;
width: 1in; height: 1in;
object-fit: contain;
grid-column: 1 / 2;
grid-row: 1 / 3;
border: 1px solid black;
}
> .id {
grid-column: 2 / 3;
grid-row: 1 / 2;
................................................................................
font-size: 1.5ex !important;
letter-spacing: 1.3px;
padding-bottom: 3px;
border-radius: 2px;
vertical-align: baseline;
box-shadow: 1px 1px 1px black;
}
pre { @extend %teletype; white-space: pre-wrap; }
div.thread {
margin-left: 0.3in;
& + article.post { margin-top: 0.3in; }
}
a[href].username {
................................................................................
height: max-content;
background-image: url(/s/file.webp); //TODO different icons for different mime types
background-repeat: no-repeat;
background-position: left;
padding-left: 0.4in;
> .label {
text-decoration: underline;
text-decoration-width: 1px;
text-underline-offset: 0.1em;
text-decoration-color: tone(10%,-0.5);
}
&:hover > .label {
}
> .mime {
font-style: italic;
opacity: 60%;
margin-left: 0.5ex;
}
}
................................................................................
}
}
.media.upload form {
padding: 0.1in 0.2in;
@extend %box;
}
body.media div.viewer {
@extend %box;
padding: 0.2in;
margin-bottom: 0.2in;
&.img {
> img {
display: block;
max-width: 100%;
margin: auto;
}
.caption {
margin-top: 0.2in;
text-align: center;
&:empty {margin: 0;}
}
}
&.text {
> .desc {
border-bottom: 1px solid tone(-5%);
box-shadow: 0 2px 0 black;
margin-bottom: 0.1in;
padding-bottom: 0.1in;
}
> article {
font-size: 90%;
padding: 0 0.2in;
max-height: calc(100vh - 3in);
overflow-y: scroll;
text-align: justify;
}
}
}
|