mackuba.eu
Thread viewer for Bluesky
moved most styles from style.css to the components
+1160
-1100
+75
src/components/AccountMenu.svelte
+75
src/components/AccountMenu.svelte
···
107
107
<li class="link"><a href="?page=search&mode=likes">Archive search</a></li>
108
108
</ul>
109
109
</div>
110
+
111
+
<style>
112
+
#account {
113
+
position: fixed;
114
+
top: 10px;
115
+
left: 10px;
116
+
line-height: 24px;
117
+
z-index: 20;
118
+
user-select: none;
119
+
-webkit-user-select: none;
120
+
}
121
+
122
+
#account i {
123
+
opacity: 0.4;
124
+
}
125
+
126
+
#account i:hover {
127
+
cursor: pointer;
128
+
opacity: 0.6;
129
+
}
130
+
131
+
#account :global(img.avatar) {
132
+
width: 24px;
133
+
height: 24px;
134
+
border-radius: 13px;
135
+
box-shadow: 0px 0px 2px black;
136
+
}
137
+
138
+
#account_menu {
139
+
position: fixed;
140
+
visibility: hidden;
141
+
top: 5px;
142
+
left: 5px;
143
+
padding-top: 30px;
144
+
z-index: 15;
145
+
background: hsl(210, 33.33%, 94.0%);
146
+
border: 1px solid #ccc;
147
+
border-radius: 5px;
148
+
user-select: none;
149
+
-webkit-user-select: none;
150
+
}
151
+
152
+
#account_menu ul {
153
+
list-style-type: none;
154
+
margin: 0px 0px 10px;
155
+
padding: 6px 11px;
156
+
}
157
+
158
+
#account_menu :global(li:not(.link) + li.link) {
159
+
margin-top: 16px;
160
+
padding-top: 10px;
161
+
border-top: 1px solid #ccc;
162
+
}
163
+
164
+
li.link {
165
+
margin-top: 8px;
166
+
margin-left: 2px;
167
+
}
168
+
169
+
li.link a {
170
+
font-size: 11pt;
171
+
color: #333;
172
+
}
173
+
174
+
@media (prefers-color-scheme: dark) {
175
+
#account.active {
176
+
color: #333;
177
+
}
178
+
179
+
#account_menu {
180
+
background: hsl(210, 33.33%, 94.0%);
181
+
border-color: #ccc;
182
+
}
183
+
}
184
+
</style>
+30
src/components/AccountMenuButton.svelte
+30
src/components/AccountMenuButton.svelte
···
12
12
<li><a class="button" href="#" {onclick} {title}>
13
13
{#if showCheckmark} <span class="check">✓</span> {/if} {label}
14
14
</a></li>
15
+
16
+
<style>
17
+
li .button {
18
+
display: inline-block;
19
+
color: #333;
20
+
font-size: 11pt;
21
+
border: 1px solid #bbb;
22
+
padding: 3px 5px;
23
+
margin-top: 8px;
24
+
border-radius: 5px;
25
+
background-color: hsla(210, 100%, 4%, 0.12);
26
+
}
27
+
28
+
li .button:hover {
29
+
background-color: hsla(210, 100%, 4%, 0.2);
30
+
text-decoration: none;
31
+
}
32
+
33
+
@media (prefers-color-scheme: dark) {
34
+
li .button {
35
+
color: #333;
36
+
border-color: #bbb;
37
+
background-color: hsla(210, 100%, 4%, 0.12);
38
+
}
39
+
40
+
li .button:hover {
41
+
background-color: hsla(210, 100%, 4%, 0.2);
42
+
}
43
+
}
44
+
</style>
+101
-2
src/components/DialogPanel.svelte
+101
-2
src/components/DialogPanel.svelte
···
1
1
<script lang="ts">
2
-
let { children, onClose = undefined }: { children: any, onClose?: () => void } = $props();
2
+
type Props = {
3
+
children: any;
4
+
id?: string;
5
+
class?: string;
6
+
onClose?: () => void;
7
+
}
8
+
9
+
let { children, onClose = undefined, id = undefined, ...props }: Props = $props();
3
10
4
11
function onclick(e: Event) {
5
12
// close the dialog (if it's closable) on click on the overlay, but not on anything inside
···
9
16
}
10
17
</script>
11
18
12
-
<div class="dialog" {onclick}>
19
+
<div {id} class="dialog {props.class}" {onclick}>
13
20
{@render children()}
14
21
</div>
22
+
23
+
<style>
24
+
.dialog {
25
+
position: fixed;
26
+
top: 0;
27
+
bottom: 0;
28
+
left: 0;
29
+
right: 0;
30
+
display: flex;
31
+
align-items: center;
32
+
justify-content: center;
33
+
padding-bottom: 5%;
34
+
z-index: 10;
35
+
background-color: rgba(240, 240, 240, 0.4);
36
+
}
37
+
38
+
.dialog:global(.expanded) {
39
+
padding-bottom: 0;
40
+
}
41
+
42
+
.dialog ~ :global(main) {
43
+
filter: blur(8px);
44
+
}
45
+
46
+
.dialog :global {
47
+
form {
48
+
position: relative;
49
+
border: 2px solid hsl(210, 100%, 85%);
50
+
background-color: hsl(210, 100%, 98%);
51
+
border-radius: 10px;
52
+
padding: 15px 25px;
53
+
}
54
+
55
+
.close {
56
+
position: absolute;
57
+
top: 5px;
58
+
right: 5px;
59
+
color: hsl(210, 100%, 75%);
60
+
opacity: 0.6;
61
+
}
62
+
63
+
.close:hover {
64
+
color: hsl(210, 100%, 65%);
65
+
opacity: 1.0;
66
+
}
67
+
68
+
p {
69
+
text-align: center;
70
+
line-height: 125%;
71
+
}
72
+
73
+
h2 {
74
+
font-size: 13pt;
75
+
font-weight: 600;
76
+
text-align: center;
77
+
margin-bottom: 25px;
78
+
padding-right: 10px;
79
+
}
80
+
81
+
input[type="text"], input[type="password"] {
82
+
width: 200px;
83
+
font-size: 11pt;
84
+
border: 1px solid #d6d6d6;
85
+
border-radius: 4px;
86
+
padding: 5px 6px;
87
+
margin: 0px 15px;
88
+
}
89
+
90
+
p.submit {
91
+
margin-top: 25px;
92
+
}
93
+
94
+
input[type="submit"] {
95
+
width: 150px;
96
+
font-size: 11pt;
97
+
border: 1px solid hsl(210, 90%, 85%);
98
+
background-color: hsl(210, 100%, 92%);
99
+
border-radius: 4px;
100
+
padding: 5px 6px;
101
+
}
102
+
103
+
input[type="submit"]:hover {
104
+
background-color: hsl(210, 100%, 90%);
105
+
border: 1px solid hsl(210, 90%, 82%);
106
+
}
107
+
108
+
input[type="submit"]:active {
109
+
background-color: hsl(210, 100%, 87%);
110
+
border: 1px solid hsl(210, 90%, 80%);
111
+
}
112
+
}
113
+
</style>
+12
src/components/HomeSearch.svelte
+12
src/components/HomeSearch.svelte
···
45
45
</div>
46
46
47
47
<style>
48
+
#search {
49
+
position: fixed;
50
+
top: 0;
51
+
bottom: 0;
52
+
left: 0;
53
+
right: 0;
54
+
display: flex;
55
+
align-items: center;
56
+
justify-content: center;
57
+
padding-bottom: 5%;
58
+
}
59
+
48
60
form {
49
61
border: 2px solid hsl(210, 100%, 80%);
50
62
border-radius: 10px;
+13
-1
src/components/LoginDialog.svelte
+13
-1
src/components/LoginDialog.svelte
···
57
57
}
58
58
</script>
59
59
60
-
<DialogPanel onClose={onOverlayClick}>
60
+
<DialogPanel id="login" class={loginInfoVisible ? 'expanded' : ''} onClose={onOverlayClick}>
61
61
<form method="get" {onsubmit}>
62
62
{#if showClose}
63
63
<i class="close fa-circle-xmark fa-regular" onclick={onClose}></i>
···
94
94
</DialogPanel>
95
95
96
96
<style>
97
+
p.info {
98
+
font-size: 9pt;
99
+
}
100
+
101
+
p.info a {
102
+
color: #666;
103
+
}
104
+
97
105
.cloudy {
98
106
color: hsl(210, 60%, 75%);
99
107
margin: 14px 0px;
···
113
121
}
114
122
115
123
@media (prefers-color-scheme: dark) {
124
+
:global(#login) {
125
+
background-color: rgba(240, 240, 240, 0.15);
126
+
}
127
+
116
128
form {
117
129
border-color: hsl(210, 20%, 40%);
118
130
background-color: hsl(210, 12%, 25%);
+4
src/components/MainLoader.svelte
+4
src/components/MainLoader.svelte
+72
src/components/PostingStatsTable.svelte
+72
src/components/PostingStatsTable.svelte
···
80
80
{/each}
81
81
</tbody>
82
82
</table>
83
+
84
+
<style>
85
+
.scan-result {
86
+
border: 1px solid #333;
87
+
border-collapse: collapse;
88
+
}
89
+
90
+
td, th {
91
+
border: 1px solid #333;
92
+
}
93
+
94
+
td {
95
+
text-align: right;
96
+
padding: 5px 8px;
97
+
}
98
+
99
+
th {
100
+
text-align: center;
101
+
background-color: hsl(207, 100%, 86%);
102
+
padding: 7px 10px;
103
+
}
104
+
105
+
td.handle {
106
+
text-align: left;
107
+
max-width: 450px;
108
+
overflow: hidden;
109
+
text-overflow: ellipsis;
110
+
white-space: nowrap;
111
+
}
112
+
113
+
tr.total td {
114
+
font-weight: bold;
115
+
font-size: 11pt;
116
+
background-color: hsla(207, 100%, 86%, 0.4);
117
+
}
118
+
119
+
tr.total td.handle {
120
+
text-align: left;
121
+
padding: 10px 12px;
122
+
}
123
+
124
+
.avatar {
125
+
width: 24px;
126
+
height: 24px;
127
+
border-radius: 14px;
128
+
vertical-align: middle;
129
+
margin-right: 2px;
130
+
padding: 2px;
131
+
}
132
+
133
+
td.no {
134
+
font-weight: bold;
135
+
}
136
+
137
+
td.percent {
138
+
min-width: 70px;
139
+
}
140
+
141
+
@media (prefers-color-scheme: dark) {
142
+
.scan-result, td, th {
143
+
border-color: #888;
144
+
}
145
+
146
+
th {
147
+
background-color: hsl(207, 90%, 25%);
148
+
}
149
+
150
+
tr.total td {
151
+
background-color: hsla(207, 90%, 25%, 0.4);
152
+
}
153
+
}
154
+
</style>
+120
src/components/UserAutocomplete.svelte
+120
src/components/UserAutocomplete.svelte
···
153
153
<span class="name">{user.displayName || '–'}</span>
154
154
<span class="handle">{user.handle}</span>
155
155
{/snippet}
156
+
157
+
<style>
158
+
.user-choice {
159
+
position: relative;
160
+
}
161
+
162
+
input {
163
+
width: 260px;
164
+
font-size: 11pt;
165
+
}
166
+
167
+
.autocomplete {
168
+
position: absolute;
169
+
left: 0;
170
+
top: 0;
171
+
margin-top: 4px;
172
+
width: 350px;
173
+
max-height: 250px;
174
+
overflow-y: auto;
175
+
background-color: white;
176
+
border: 1px solid #ccc;
177
+
z-index: 10;
178
+
}
179
+
180
+
.selected-users {
181
+
width: 275px;
182
+
height: 150px;
183
+
overflow-y: auto;
184
+
border: 1px solid #aaa;
185
+
padding: 4px;
186
+
margin-top: 20px;
187
+
}
188
+
189
+
.user-row {
190
+
position: relative;
191
+
padding: 2px 4px 2px 37px;
192
+
cursor: pointer;
193
+
}
194
+
195
+
.user-row .avatar {
196
+
position: absolute;
197
+
left: 6px;
198
+
top: 8px;
199
+
width: 24px;
200
+
border-radius: 12px;
201
+
}
202
+
203
+
.user-row span {
204
+
display: block;
205
+
overflow-x: hidden;
206
+
text-overflow: ellipsis;
207
+
}
208
+
209
+
.user-row .name {
210
+
font-size: 11pt;
211
+
margin-top: 1px;
212
+
margin-bottom: 1px;
213
+
}
214
+
215
+
.user-row .handle {
216
+
font-size: 10pt;
217
+
margin-bottom: 2px;
218
+
color: #666;
219
+
}
220
+
221
+
.autocomplete .user-row {
222
+
cursor: pointer;
223
+
}
224
+
225
+
.autocomplete .user-row.highlighted {
226
+
background-color: hsl(207, 100%, 85%);
227
+
}
228
+
229
+
.selected-users .user-row span {
230
+
padding-right: 14px;
231
+
}
232
+
233
+
.selected-users .user-row .remove {
234
+
position: absolute;
235
+
right: 4px;
236
+
top: 11px;
237
+
padding: 0px 4px;
238
+
color: #333;
239
+
line-height: 17px;
240
+
}
241
+
242
+
.selected-users .user-row .remove:hover {
243
+
text-decoration: none;
244
+
background-color: #ddd;
245
+
border-radius: 8px;
246
+
}
247
+
248
+
@media (prefers-color-scheme: dark) {
249
+
.autocomplete {
250
+
background-color: hsl(210, 5%, 18%);
251
+
border-color: #4b4b4b;
252
+
}
253
+
254
+
.selected-users {
255
+
border-color: #666;
256
+
}
257
+
258
+
.user-row .handle {
259
+
color: #888;
260
+
}
261
+
262
+
.autocomplete .user-row.highlighted {
263
+
background-color: hsl(207, 90%, 25%);
264
+
}
265
+
266
+
.selected-users .user-row .remove {
267
+
color: #aaa;
268
+
}
269
+
270
+
.selected-users .user-row .remove:hover {
271
+
background-color: #555;
272
+
color: #bbb;
273
+
}
274
+
}
275
+
</style>
+125
src/components/embeds/EmbedComponent.svelte
+125
src/components/embeds/EmbedComponent.svelte
···
13
13
let { embed }: { embed: Embed } = $props();
14
14
</script>
15
15
16
+
<div class="embed">
16
17
{#if embed instanceof RawRecordEmbed || embed instanceof InlineRecordEmbed}
17
18
<QuoteComponent record={embed.record} />
18
19
···
34
35
{:else}
35
36
<p>[{embed.type}]</p>
36
37
{/if}
38
+
</div>
39
+
40
+
<style>
41
+
.embed :global {
42
+
a.link-card {
43
+
display: block;
44
+
position: relative;
45
+
max-width: 500px;
46
+
margin-bottom: 12px;
47
+
}
48
+
49
+
a.link-card:hover {
50
+
text-decoration: none;
51
+
}
52
+
53
+
a.link-card > div {
54
+
background-color: #fcfcfd;
55
+
border: 1px solid #d8d8d8;
56
+
border-radius: 8px;
57
+
padding: 11px 15px;
58
+
}
59
+
60
+
a.link-card:hover > div {
61
+
background-color: #f6f7f8;
62
+
border: 1px solid #c8c8c8;
63
+
}
64
+
65
+
a.link-card > div:not(:has(p.description)) {
66
+
padding-bottom: 14px;
67
+
}
68
+
69
+
a.link-card p.domain {
70
+
color: #888;
71
+
font-size: 10pt;
72
+
margin-top: 1px;
73
+
margin-bottom: 5px;
74
+
}
75
+
76
+
a.link-card h2 {
77
+
font-size: 12pt;
78
+
color: #333;
79
+
margin-top: 8px;
80
+
margin-bottom: 0;
81
+
}
82
+
83
+
a.link-card p.description {
84
+
color: #666;
85
+
font-size: 11pt;
86
+
margin-top: 8px;
87
+
margin-bottom: 4px;
88
+
line-height: 135%;
89
+
}
90
+
91
+
a.link-card.record > div:has(.avatar) {
92
+
padding-left: 65px;
93
+
}
94
+
95
+
a.link-card.record h2 {
96
+
margin-top: 3px;
97
+
}
98
+
99
+
a.link-card.record .handle {
100
+
color: #666;
101
+
margin-left: 5px;
102
+
}
103
+
104
+
a.link-card.record .avatar {
105
+
width: 36px;
106
+
height: 36px;
107
+
border: 1px solid #ddd;
108
+
border-radius: 6px;
109
+
position: absolute;
110
+
top: 15px;
111
+
left: 15px;
112
+
}
113
+
114
+
a.link-card.record .stats {
115
+
margin-top: 9px;
116
+
margin-bottom: 1px;
117
+
}
118
+
119
+
a.link-card.record .stats i.fa-heart:hover {
120
+
color: #aaa;
121
+
}
122
+
}
123
+
124
+
@media (prefers-color-scheme: dark) {
125
+
.embed :global {
126
+
a.link-card > div {
127
+
background-color: #303030;
128
+
border-color: #606060;
129
+
}
130
+
131
+
a.link-card:hover > div {
132
+
background-color: #383838;
133
+
border-color: #707070;
134
+
}
135
+
136
+
a.link-card p.domain {
137
+
color: #666;
138
+
}
139
+
140
+
a.link-card h2 {
141
+
color: #ccc;
142
+
}
143
+
144
+
a.link-card p.description {
145
+
color: #888;
146
+
}
147
+
148
+
a.link-card.record .handle {
149
+
color: #666;
150
+
}
151
+
152
+
a.link-card.record .avatar {
153
+
border-color: #888;
154
+
}
155
+
156
+
a.link-card.record .stats i.fa-heart:hover {
157
+
color: #eee;
158
+
}
159
+
}
160
+
}
161
+
</style>
+11
src/components/embeds/GIFPlayer.svelte
+11
src/components/embeds/GIFPlayer.svelte
+21
src/components/embeds/ImagesComponent.svelte
+21
src/components/embeds/ImagesComponent.svelte
···
27
27
{/if}
28
28
{/each}
29
29
</div>
30
+
31
+
<style>
32
+
.image-alt {
33
+
font-size: 11pt;
34
+
color: #666;
35
+
margin-bottom: 20px;
36
+
}
37
+
38
+
.image-alt summary {
39
+
font-size: 11pt;
40
+
color: #666;
41
+
margin-bottom: 5px;
42
+
user-select: none;
43
+
-webkit-user-select: none;
44
+
cursor: default;
45
+
}
46
+
47
+
@media (prefers-color-scheme: dark) {
48
+
.image-alt, .image-alt summary { color: #999; }
49
+
}
50
+
</style>
+32
src/components/embeds/QuoteComponent.svelte
+32
src/components/embeds/QuoteComponent.svelte
···
75
75
</div>
76
76
{/if}
77
77
{/snippet}
78
+
79
+
<style>
80
+
.quote-embed {
81
+
border: 1px solid #ddd;
82
+
border-radius: 8px;
83
+
background-color: #fbfcfd;
84
+
margin-top: 25px;
85
+
margin-bottom: 15px;
86
+
margin-left: 0px;
87
+
max-width: 800px;
88
+
}
89
+
90
+
.quote-embed :global(.post) {
91
+
margin-top: 16px;
92
+
padding-left: 16px;
93
+
padding-right: 16px;
94
+
padding-bottom: 5px;
95
+
}
96
+
97
+
.placeholder {
98
+
font-style: italic;
99
+
font-size: 11pt;
100
+
color: #888;
101
+
}
102
+
103
+
@media (prefers-color-scheme: dark) {
104
+
.quote-embed {
105
+
background-color: #303030;
106
+
border-color: #606060;
107
+
}
108
+
}
109
+
</style>
+43
src/components/posts/EdgeMargin.svelte
+43
src/components/posts/EdgeMargin.svelte
···
13
13
14
14
<img class="plus" alt="{collapsed ? '+' : '-'}" src="icons/{collapsed ? 'add-square.png' : 'subtract-square.png'}" onclick={toggleFold}>
15
15
</div>
16
+
17
+
<style>
18
+
.edge {
19
+
position: absolute;
20
+
left: -2px;
21
+
top: 30px;
22
+
bottom: 0px;
23
+
width: 6px;
24
+
}
25
+
26
+
.line {
27
+
position: absolute;
28
+
left: 2px;
29
+
top: 0px;
30
+
bottom: 0px;
31
+
border-left: 1px solid #aaa;
32
+
}
33
+
34
+
.edge:hover .line {
35
+
border-left: 2px solid #888;
36
+
}
37
+
38
+
.plus {
39
+
position: absolute;
40
+
top: 8px;
41
+
left: -6px;
42
+
width: 14px;
43
+
}
44
+
45
+
:global(.post.collapsed) .line {
46
+
display: none;
47
+
}
48
+
49
+
:global(.post.flat) > .margin {
50
+
display: none;
51
+
}
52
+
53
+
@media (prefers-color-scheme: dark) {
54
+
.line { border-left-color: #666; }
55
+
.edge:hover .line { border-left-color: #888; }
56
+
.plus { filter: invert(); }
57
+
}
58
+
</style>
+41
src/components/posts/FediSourceLink.svelte
+41
src/components/posts/FediSourceLink.svelte
···
9
9
<i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i> View on {hostname}
10
10
</div>
11
11
</a>
12
+
13
+
<style>
14
+
.fedi-link {
15
+
display: inline-block;
16
+
margin-bottom: 6px;
17
+
margin-top: 2px;
18
+
}
19
+
20
+
.fedi-link:hover {
21
+
text-decoration: none;
22
+
}
23
+
24
+
div {
25
+
border: 1px solid #d0d0d0;
26
+
border-radius: 8px;
27
+
padding: 5px 9px;
28
+
color: #555;
29
+
font-size: 10pt;
30
+
}
31
+
32
+
i {
33
+
margin-right: 3px;
34
+
}
35
+
36
+
.fedi-link:hover div {
37
+
background-color: #f6f7f8;
38
+
border: 1px solid #c8c8c8;
39
+
}
40
+
41
+
@media (prefers-color-scheme: dark) {
42
+
div {
43
+
border-color: #606060;
44
+
color: #909090;
45
+
}
46
+
47
+
.fedi-link:hover div {
48
+
background-color: #444;
49
+
border-color: #909090;
50
+
}
51
+
}
52
+
</style>
+12
src/components/posts/HiddenRepliesLink.svelte
+12
src/components/posts/HiddenRepliesLink.svelte
+17
-1
src/components/posts/PostBody.svelte
+17
-1
src/components/posts/PostBody.svelte
···
49
49
</script>
50
50
51
51
{#if post.originalFediContent}
52
-
<div class="body" bind:this={bodyElement}>
52
+
<div class="bridged-body" bind:this={bodyElement}>
53
53
{@html sanitizeHTML(post.originalFediContent)}
54
54
</div>
55
55
{:else}
···
57
57
<RichTextFromFacets text={post.text} facets={post.facets} />
58
58
</p>
59
59
{/if}
60
+
61
+
<style>
62
+
.bridged-body :global(p + p) {
63
+
margin-top: 18px;
64
+
}
65
+
66
+
::highlight(search-results) {
67
+
background-color: rgba(255, 255, 0, 0.75);
68
+
}
69
+
70
+
@media (prefers-color-scheme: dark) {
71
+
::highlight(search-results) {
72
+
background-color: rgba(255, 255, 0, 0.35);
73
+
}
74
+
}
75
+
</style>
+51
src/components/posts/PostComponent.svelte
+51
src/components/posts/PostComponent.svelte
···
79
79
function onMoreRepliesLoaded(newPost: Post) {
80
80
replies = post.replies = newPost.replies;
81
81
repliesLoaded = true;
82
+
// TODO: more replies turning into hidden replies
82
83
}
83
84
84
85
function onHiddenRepliesLoaded(newReplies: (AnyPost | null)[]) {
···
183
184
{/if}
184
185
</div>
185
186
</div>
187
+
188
+
<style>
189
+
.post {
190
+
position: relative;
191
+
padding-left: 21px;
192
+
margin-top: 30px;
193
+
}
194
+
195
+
.post.collapsed .content {
196
+
display: none;
197
+
}
198
+
199
+
.post.flat {
200
+
padding-left: 0px;
201
+
margin-top: 25px;
202
+
}
203
+
204
+
.post.muted > :global(h2) {
205
+
opacity: 0.3;
206
+
font-weight: 600;
207
+
}
208
+
209
+
.post.muted > :global(.content > details > p), .post.muted > :global(.content > details summary) {
210
+
opacity: 0.3;
211
+
}
212
+
213
+
details {
214
+
margin-top: 12px;
215
+
margin-bottom: 10px;
216
+
}
217
+
218
+
summary {
219
+
font-size: 10pt;
220
+
user-select: none;
221
+
-webkit-user-select: none;
222
+
cursor: default;
223
+
}
224
+
225
+
.missing-replies-info {
226
+
font-size: 11pt;
227
+
color: darkred;
228
+
margin-top: 25px;
229
+
}
230
+
231
+
.post :global(img.loader) {
232
+
width: 24px;
233
+
animation: rotation 3s infinite linear;
234
+
margin-top: 5px;
235
+
}
236
+
</style>
+58
-2
src/components/posts/PostHeader.svelte
+58
-2
src/components/posts/PostHeader.svelte
···
22
22
23
23
<h2>
24
24
{#if post.muted}
25
-
<i class="missing fa-regular fa-circle-user fa-2x"></i>
25
+
<i class="muted-avatar fa-regular fa-circle-user fa-2x"></i>
26
26
{:else if post.author.avatar}
27
27
<img class="avatar" alt="Avatar" loading="lazy" src={post.author.avatar} bind:this={avatar}>
28
28
{:else}
29
-
<i class="missing fa-regular fa-face-smile fa-2x"></i>
29
+
<i class="no-avatar fa-regular fa-face-smile fa-2x"></i>
30
30
{/if}
31
31
32
32
{post.authorDisplayName}
···
52
52
{/if}
53
53
{/if}
54
54
</h2>
55
+
56
+
<style>
57
+
h2 {
58
+
font-size: 12pt;
59
+
margin-bottom: 0;
60
+
}
61
+
62
+
.avatar {
63
+
width: 32px;
64
+
height: 32px;
65
+
border-radius: 16px;
66
+
vertical-align: middle;
67
+
margin-bottom: 3px;
68
+
margin-right: 8px;
69
+
}
70
+
71
+
.no-avatar, .muted-avatar {
72
+
color: #aaa;
73
+
background-color: #eee;
74
+
border-radius: 16px;
75
+
vertical-align: middle;
76
+
margin-right: 8px;
77
+
}
78
+
79
+
.muted-avatar {
80
+
color: #bbb;
81
+
}
82
+
83
+
.handle {
84
+
color: #888;
85
+
font-weight: normal;
86
+
font-size: 11pt;
87
+
vertical-align: text-top;
88
+
}
89
+
90
+
.mastodon {
91
+
width: 15px;
92
+
position: relative;
93
+
top: 2px;
94
+
margin-left: 3px;
95
+
}
96
+
97
+
.time {
98
+
color: #666;
99
+
font-weight: normal;
100
+
font-size: 10pt;
101
+
vertical-align: text-top;
102
+
}
103
+
104
+
@media (prefers-color-scheme: dark) {
105
+
.handle { color: #888; }
106
+
.separator { color: #888; }
107
+
.time { color: #aaa; }
108
+
h2 :global(.action) { color: #888; }
109
+
}
110
+
</style>
+17
src/components/posts/PostTagsRow.svelte
+17
src/components/posts/PostTagsRow.svelte
···
10
10
<a href="{linkToHashtagPage(tag)}"># {tag}</a>
11
11
{/each}
12
12
</p>
13
+
14
+
<style>
15
+
a {
16
+
background-color: hsl(210, 90%, 97%);
17
+
border: 1px solid hsl(215, 90%, 85%);
18
+
border-radius: 6px;
19
+
padding: 3px 7px;
20
+
margin-right: 5px;
21
+
font-size: 10pt;
22
+
color: #333;
23
+
}
24
+
25
+
a:hover {
26
+
text-decoration: none;
27
+
background-color: hsl(210, 90%, 93%);
28
+
}
29
+
</style>
+41
src/components/posts/PostWrapper.svelte
+41
src/components/posts/PostWrapper.svelte
···
30
30
{/if}
31
31
</div>
32
32
{/if}
33
+
34
+
<style>
35
+
.post.blocked :global {
36
+
p, a {
37
+
font-size: 11pt;
38
+
color: #666;
39
+
}
40
+
41
+
@media (prefers-color-scheme: dark) {
42
+
p, a { color: #aaa; }
43
+
}
44
+
}
45
+
46
+
:global {
47
+
.post p {
48
+
margin-top: 10px;
49
+
}
50
+
51
+
.post .blocked-header i {
52
+
margin-right: 2px;
53
+
}
54
+
55
+
.post h2 .separator, .post .blocked-header .separator, .blocked-header .separator {
56
+
color: #888;
57
+
font-weight: normal;
58
+
font-size: 11pt;
59
+
vertical-align: text-top;
60
+
}
61
+
62
+
.post h2 .action, .post .blocked-header .action, .blocked-header .action {
63
+
color: #888;
64
+
font-weight: normal;
65
+
font-size: 10pt;
66
+
vertical-align: text-top;
67
+
}
68
+
69
+
.post h2 .action:hover, .post .blocked-header .action:hover, .blocked-header .action:hover {
70
+
color: #444;
71
+
}
72
+
}
73
+
</style>
+9
-2
src/pages/HashtagPage.svelte
+9
-2
src/pages/HashtagPage.svelte
···
46
46
</svelte:head>
47
47
48
48
{#if firstPageLoaded}
49
-
<div id="thread" class="hashtag">
49
+
<main class="hashtag">
50
50
<header>
51
51
<h2>
52
52
{#if posts.length > 0}
···
60
60
{#each posts as post (post.uri)}
61
61
<PostComponent {post} placement="feed" />
62
62
{/each}
63
-
</div>
63
+
</main>
64
64
{:else if !loadingFailed}
65
65
<MainLoader />
66
66
{/if}
67
+
68
+
<style>
69
+
.hashtag :global(.post) {
70
+
padding-bottom: 10px;
71
+
border-bottom: 1px solid #ddd;
72
+
}
73
+
</style>
+32
-2
src/pages/LycanSearchPage.svelte
+32
-2
src/pages/LycanSearchPage.svelte
···
3
3
import { settings } from '../models/settings.svelte';
4
4
import { DevLycan, Lycan } from '../services/lycan';
5
5
import PostComponent from '../components/posts/PostComponent.svelte';
6
+
import SearchPage from './SearchPage.svelte';
6
7
7
8
const collections = [
8
9
{ id: 'likes', title: 'Likes' },
···
152
153
}
153
154
</script>
154
155
155
-
<div id="private_search_page">
156
+
<SearchPage>
156
157
<h2>Archive search</h2>
157
158
158
159
<form class="search-form">
···
217
218
{/if}
218
219
{/if}
219
220
</div>
220
-
</div>
221
+
</SearchPage>
222
+
223
+
<style>
224
+
.search-collections label {
225
+
vertical-align: middle;
226
+
}
227
+
228
+
.lycan-import {
229
+
margin-top: 30px;
230
+
border-top: 1px solid #ccc;
231
+
padding-top: 5px;
232
+
}
233
+
234
+
.lycan-import form p {
235
+
line-height: 135%;
236
+
}
237
+
238
+
.import-progress progress {
239
+
margin-left: 0;
240
+
margin-right: 6px;
241
+
}
242
+
243
+
.import-progress progress + output {
244
+
font-size: 11pt;
245
+
}
246
+
247
+
@media (prefers-color-scheme: dark) {
248
+
.lycan-import { border-top-color: #888; }
249
+
}
250
+
</style>
+27
-2
src/pages/NotificationsPage.svelte
+27
-2
src/pages/NotificationsPage.svelte
···
49
49
</svelte:head>
50
50
51
51
{#if firstPageLoaded}
52
-
<div id="thread" class="notifications">
52
+
<main class="notifications">
53
53
<header>
54
54
<h2>Replies & Mentions:</h2>
55
55
</header>
···
62
62
63
63
<PostComponent {post} placement="feed" />
64
64
{/each}
65
-
</div>
65
+
</main>
66
66
{:else if !loadingFailed}
67
67
<MainLoader />
68
68
{/if}
69
+
70
+
<style>
71
+
.notifications :global {
72
+
.post {
73
+
padding-bottom: 4px;
74
+
border-bottom: 1px solid #ddd;
75
+
margin-top: 24px;
76
+
}
77
+
78
+
.back {
79
+
margin-left: 22px;
80
+
margin-bottom: -12px;
81
+
margin-top: 15px;
82
+
}
83
+
84
+
.back, .back a {
85
+
font-size: 10pt;
86
+
}
87
+
88
+
.back i {
89
+
font-size: 9pt;
90
+
margin-right: 2px;
91
+
}
92
+
}
93
+
</style>
+41
src/pages/PostingStatsPage.svelte
+41
src/pages/PostingStatsPage.svelte
···
154
154
<PostingStatsTable {...tableOptions} {...results} />
155
155
{/if}
156
156
</div>
157
+
158
+
<style>
159
+
input[type="radio"] {
160
+
position: relative;
161
+
top: -1px;
162
+
margin-left: 5px;
163
+
}
164
+
165
+
input[type="radio"] + label {
166
+
user-select: none;
167
+
-webkit-user-select: none;
168
+
}
169
+
170
+
input[type="range"] {
171
+
width: 250px;
172
+
vertical-align: middle;
173
+
}
174
+
175
+
input[type="submit"] {
176
+
font-size: 12pt;
177
+
margin: 5px 0px;
178
+
padding: 5px 10px;
179
+
}
180
+
181
+
select {
182
+
font-size: 12pt;
183
+
margin-left: 5px;
184
+
}
185
+
186
+
progress {
187
+
width: 300px;
188
+
margin-left: 10px;
189
+
vertical-align: middle;
190
+
}
191
+
192
+
.scan-info {
193
+
font-weight: 600;
194
+
line-height: 125%;
195
+
margin: 20px 0px;
196
+
}
197
+
</style>
+16
-2
src/pages/QuotesPage.svelte
+16
-2
src/pages/QuotesPage.svelte
···
48
48
</script>
49
49
50
50
{#if quoteCount !== undefined}
51
-
<div id="thread" class="quotes">
51
+
<main class="quotes">
52
52
<header>
53
53
<h2>
54
54
{#if quoteCount > 1}
···
69
69
70
70
<PostComponent {post} placement="quotes" />
71
71
{/each}
72
-
</div>
72
+
</main>
73
73
{:else if !loadingFailed}
74
74
<MainLoader />
75
75
{/if}
76
+
77
+
<style>
78
+
.quotes :global(.post) {
79
+
padding-bottom: 5px;
80
+
}
81
+
82
+
.quotes :global(.post-quote .quote-embed) {
83
+
display: none;
84
+
}
85
+
86
+
.quotes :global(.post-quote p.stats) {
87
+
display: none;
88
+
}
89
+
</style>
+68
src/pages/SearchPage.svelte
+68
src/pages/SearchPage.svelte
···
1
+
<script lang="ts">
2
+
let { children } = $props();
3
+
</script>
4
+
5
+
<div class="search-page">
6
+
{@render children()}
7
+
</div>
8
+
9
+
<style>
10
+
.search-page :global {
11
+
input[type="submit"] {
12
+
font-size: 12pt;
13
+
margin: 5px 0px;
14
+
padding: 5px 10px;
15
+
}
16
+
17
+
progress {
18
+
width: 300px;
19
+
margin-left: 10px;
20
+
vertical-align: middle;
21
+
}
22
+
23
+
.search-query {
24
+
font-size: 12pt;
25
+
border: 1px solid #ccc;
26
+
border-radius: 6px;
27
+
padding: 5px 6px;
28
+
margin-left: 8px;
29
+
}
30
+
31
+
.results {
32
+
margin-top: 30px;
33
+
}
34
+
35
+
.results > .post {
36
+
margin-left: -15px;
37
+
padding-left: 15px;
38
+
border-bottom: 1px solid #ddd;
39
+
padding-bottom: 10px;
40
+
margin-top: 24px;
41
+
}
42
+
43
+
.results-end {
44
+
font-size: 12pt;
45
+
color: #333;
46
+
}
47
+
48
+
.post + .results-end {
49
+
font-size: 11pt;
50
+
}
51
+
}
52
+
53
+
@media (prefers-color-scheme: dark) {
54
+
.search-page :global {
55
+
.search-query {
56
+
border: 1px solid #666;
57
+
}
58
+
59
+
.results-end {
60
+
color: #888;
61
+
}
62
+
63
+
.results > .post {
64
+
border-bottom: 1px solid #555;
65
+
}
66
+
}
67
+
}
68
+
</style>
+2
-2
src/pages/ThreadPage.svelte
+2
-2
src/pages/ThreadPage.svelte
···
60
60
</svelte:head>
61
61
62
62
{#if post}
63
-
<div id="thread">
63
+
<main>
64
64
{#if post instanceof Post}
65
65
{#if post.parent}
66
66
<ThreadRootParent post={post.parent} />
···
72
72
{:else}
73
73
<PostWrapper {post} placement="thread" />
74
74
{/if}
75
-
</div>
75
+
</main>
76
76
{:else if !loadingFailed}
77
77
<MainLoader />
78
78
{/if}
+10
-2
src/pages/TimelineSearchPage.svelte
+10
-2
src/pages/TimelineSearchPage.svelte
···
1
1
<script lang="ts">
2
2
import PostComponent from '../components/posts/PostComponent.svelte';
3
+
import SearchPage from './SearchPage.svelte';
3
4
import { Post } from '../models/posts';
4
5
import { TimelineSearch } from '../services/timeline_search.js';
5
6
import { numberOfDays } from '../utils.js';
···
48
49
}
49
50
</script>
50
51
51
-
<div id="private_search_page">
52
+
<SearchPage>
52
53
<h2>Timeline search</h2>
53
54
54
55
<div class="timeline-search">
···
90
91
{/each}
91
92
</div>
92
93
{/if}
93
-
</div>
94
+
</SearchPage>
95
+
96
+
<style>
97
+
input[type="range"] {
98
+
width: 250px;
99
+
vertical-align: middle;
100
+
}
101
+
</style>
+2
-1082
style.css
+2
-1082
style.css
···
1
1
:root {
2
2
color-scheme: light dark;
3
-
supported-color-schemes: light dark;
4
3
}
5
4
6
5
@keyframes rotation {
···
34
33
color: rgb(0, 0, 255);
35
34
}
36
35
37
-
#search {
38
-
position: fixed;
39
-
top: 0;
40
-
bottom: 0;
41
-
left: 0;
42
-
right: 0;
43
-
display: flex;
44
-
align-items: center;
45
-
justify-content: center;
46
-
padding-bottom: 5%;
47
-
}
48
-
49
-
#account {
50
-
position: fixed;
51
-
top: 10px;
52
-
left: 10px;
53
-
line-height: 24px;
54
-
z-index: 20;
55
-
user-select: none;
56
-
-webkit-user-select: none;
57
-
}
58
-
59
-
#account i {
60
-
opacity: 0.4;
61
-
}
62
-
63
-
#account i:hover {
64
-
cursor: pointer;
65
-
opacity: 0.6;
66
-
}
67
-
68
-
#account img.avatar {
69
-
width: 24px;
70
-
height: 24px;
71
-
border-radius: 13px;
72
-
box-shadow: 0px 0px 2px black;
73
-
}
74
-
75
-
#account_menu {
76
-
position: fixed;
77
-
visibility: hidden;
78
-
top: 5px;
79
-
left: 5px;
80
-
padding-top: 30px;
81
-
z-index: 15;
82
-
background: hsl(210, 33.33%, 94.0%);
83
-
border: 1px solid #ccc;
84
-
border-radius: 5px;
85
-
user-select: none;
86
-
-webkit-user-select: none;
87
-
}
88
-
89
-
#account_menu ul {
90
-
list-style-type: none;
91
-
margin: 0px 0px 10px;
92
-
padding: 6px 11px;
93
-
}
94
-
95
-
#account_menu li a.button {
96
-
display: inline-block;
97
-
color: #333;
98
-
font-size: 11pt;
99
-
border: 1px solid #bbb;
100
-
padding: 3px 5px;
101
-
margin-top: 8px;
102
-
border-radius: 5px;
103
-
background-color: hsla(210, 100%, 4%, 0.12);
104
-
}
105
-
106
-
#account_menu li a.button:hover {
107
-
background-color: hsla(210, 100%, 4%, 0.2);
108
-
text-decoration: none;
109
-
}
110
-
111
-
#account_menu li:not(.link) + li.link {
112
-
margin-top: 16px;
113
-
padding-top: 10px;
114
-
border-top: 1px solid #ccc;
115
-
}
116
-
117
-
#account_menu li.link {
118
-
margin-top: 8px;
119
-
margin-left: 2px;
120
-
}
121
-
122
-
#account_menu li.link a {
123
-
font-size: 11pt;
124
-
color: #333;
125
-
}
126
-
127
-
.dialog {
128
-
position: fixed;
129
-
top: 0;
130
-
bottom: 0;
131
-
left: 0;
132
-
right: 0;
133
-
display: flex;
134
-
align-items: center;
135
-
justify-content: center;
136
-
padding-bottom: 5%;
137
-
z-index: 10;
138
-
background-color: rgba(240, 240, 240, 0.4);
139
-
}
140
-
141
-
.dialog.expanded {
142
-
padding-bottom: 0;
143
-
}
144
-
145
-
.dialog form {
146
-
position: relative;
147
-
border: 2px solid hsl(210, 100%, 85%);
148
-
background-color: hsl(210, 100%, 98%);
149
-
border-radius: 10px;
150
-
padding: 15px 25px;
151
-
}
152
-
153
-
.dialog .close {
154
-
position: absolute;
155
-
top: 5px;
156
-
right: 5px;
157
-
color: hsl(210, 100%, 75%);
158
-
opacity: 0.6;
159
-
}
160
-
161
-
.dialog .close:hover {
162
-
color: hsl(210, 100%, 65%);
163
-
opacity: 1.0;
164
-
}
165
-
166
-
.dialog p {
167
-
text-align: center;
168
-
line-height: 125%;
169
-
}
170
-
171
-
.dialog h2 {
172
-
font-size: 13pt;
173
-
font-weight: 600;
174
-
text-align: center;
175
-
margin-bottom: 25px;
176
-
padding-right: 10px;
177
-
}
178
-
179
-
.dialog p.submit {
180
-
margin-top: 25px;
181
-
}
182
-
183
-
.dialog p.info {
184
-
font-size: 9pt;
185
-
}
186
-
187
-
.dialog p.info a {
188
-
color: #666;
189
-
}
190
-
191
-
.dialog input[type="text"], .dialog input[type="password"] {
192
-
width: 200px;
193
-
font-size: 11pt;
194
-
border: 1px solid #d6d6d6;
195
-
border-radius: 4px;
196
-
padding: 5px 6px;
197
-
margin: 0px 15px;
198
-
}
199
-
200
-
.dialog input[type="submit"] {
201
-
width: 150px;
202
-
font-size: 11pt;
203
-
border: 1px solid hsl(210, 90%, 85%);
204
-
background-color: hsl(210, 100%, 92%);
205
-
border-radius: 4px;
206
-
padding: 5px 6px;
207
-
}
208
-
209
-
.dialog input[type="submit"]:hover {
210
-
background-color: hsl(210, 100%, 90%);
211
-
border: 1px solid hsl(210, 90%, 82%);
212
-
}
213
-
214
-
.dialog input[type="submit"]:active {
215
-
background-color: hsl(210, 100%, 87%);
216
-
border: 1px solid hsl(210, 90%, 80%);
217
-
}
218
-
219
-
#thread {
36
+
main {
220
37
padding-top: 1px;
221
38
}
222
39
223
-
.dialog ~ #thread {
224
-
filter: blur(8px);
225
-
}
226
-
227
-
#thread header h2 {
40
+
main header h2 {
228
41
margin-left: 20px;
229
42
margin-top: 40px;
230
43
margin-bottom: 50px;
231
44
font-size: 18pt;
232
45
}
233
46
234
-
#thread.quotes .post {
235
-
padding-bottom: 5px;
236
-
}
237
-
238
-
#thread.hashtag .post {
239
-
padding-bottom: 10px;
240
-
border-bottom: 1px solid #ddd;
241
-
}
242
-
243
-
#thread.notifications .post {
244
-
padding-bottom: 4px;
245
-
border-bottom: 1px solid #ddd;
246
-
margin-top: 24px;
247
-
}
248
-
249
-
#thread.notifications .back {
250
-
margin-left: 22px;
251
-
margin-bottom: -12px;
252
-
margin-top: 15px;
253
-
}
254
-
255
-
#thread.notifications .back, #thread.notifications .back a {
256
-
font-size: 10pt;
257
-
}
258
-
259
-
#thread.notifications .back i {
260
-
font-size: 9pt;
261
-
margin-right: 2px;
262
-
}
263
-
264
-
#thread + p.note {
265
-
margin-top: 30px;
266
-
margin-left: 15px;
267
-
font-size: 11pt;
268
-
color: #666;
269
-
}
270
-
271
47
.back, .back a {
272
48
font-size: 11pt;
273
49
color: #666;
···
283
59
margin-right: 5px;
284
60
}
285
61
286
-
.post {
287
-
position: relative;
288
-
padding-left: 21px;
289
-
margin-top: 30px;
290
-
}
291
-
292
-
.post .edge {
293
-
position: absolute;
294
-
left: -2px;
295
-
top: 30px;
296
-
bottom: 0px;
297
-
width: 6px;
298
-
}
299
-
300
-
.post .edge .line {
301
-
position: absolute;
302
-
left: 2px;
303
-
top: 0px;
304
-
bottom: 0px;
305
-
border-left: 1px solid #aaa;
306
-
}
307
-
308
-
.post .edge:hover .line {
309
-
border-left: 2px solid #888;
310
-
}
311
-
312
-
.post .plus {
313
-
position: absolute;
314
-
top: 8px;
315
-
left: -6px;
316
-
width: 14px;
317
-
}
318
-
319
-
.post.collapsed .line {
320
-
display: none;
321
-
}
322
-
323
-
.post.collapsed .content {
324
-
display: none;
325
-
}
326
-
327
-
.post.flat {
328
-
padding-left: 0px;
329
-
margin-top: 25px;
330
-
}
331
-
332
-
.post.flat > .margin {
333
-
display: none;
334
-
}
335
-
336
-
.post .avatar {
337
-
width: 32px;
338
-
height: 32px;
339
-
border-radius: 16px;
340
-
vertical-align: middle;
341
-
margin-bottom: 3px;
342
-
margin-right: 8px;
343
-
}
344
-
345
-
.post .missing {
346
-
color: #aaa;
347
-
background-color: #eee;
348
-
border-radius: 16px;
349
-
vertical-align: middle;
350
-
margin-right: 8px;
351
-
}
352
-
353
-
.post.muted .missing {
354
-
color: #bbb;
355
-
}
356
-
357
-
.post h2 {
358
-
font-size: 12pt;
359
-
margin-bottom: 0;
360
-
}
361
-
362
-
.post h2 .handle {
363
-
color: #888;
364
-
font-weight: normal;
365
-
font-size: 11pt;
366
-
vertical-align: text-top;
367
-
}
368
-
369
-
.post h2 .separator, .post .blocked-header .separator, .blocked-header .separator {
370
-
color: #888;
371
-
font-weight: normal;
372
-
font-size: 11pt;
373
-
vertical-align: text-top;
374
-
}
375
-
376
-
.post h2 .time {
377
-
color: #666;
378
-
font-weight: normal;
379
-
font-size: 10pt;
380
-
vertical-align: text-top;
381
-
}
382
-
383
-
.post h2 .action, .post .blocked-header .action, .blocked-header .action {
384
-
color: #888;
385
-
font-weight: normal;
386
-
font-size: 10pt;
387
-
vertical-align: text-top;
388
-
}
389
-
390
-
.post h2 .action:hover, .post .blocked-header .action:hover, .blocked-header .action:hover {
391
-
color: #444;
392
-
}
393
-
394
-
.post h2 img.mastodon {
395
-
width: 15px;
396
-
position: relative;
397
-
top: 2px;
398
-
margin-left: 3px;
399
-
}
400
-
401
-
.post p {
402
-
margin-top: 10px;
403
-
}
404
-
405
-
.post div.body p + p {
406
-
margin-top: 18px;
407
-
}
408
-
409
-
::highlight(search-results) {
410
-
background-color: rgba(255, 255, 0, 0.75);
411
-
}
412
-
413
-
.post .quote-embed {
414
-
border: 1px solid #ddd;
415
-
border-radius: 8px;
416
-
background-color: #fbfcfd;
417
-
margin-top: 25px;
418
-
margin-bottom: 15px;
419
-
margin-left: 0px;
420
-
max-width: 800px;
421
-
}
422
-
423
-
.post .quote-embed .post {
424
-
margin-top: 16px;
425
-
padding-left: 16px;
426
-
padding-right: 16px;
427
-
padding-bottom: 5px;
428
-
}
429
-
430
-
.post .quote-embed .placeholder {
431
-
font-style: italic;
432
-
font-size: 11pt;
433
-
color: #888;
434
-
}
435
-
436
-
.post-quotes .post-quote .quote-embed {
437
-
display: none;
438
-
}
439
-
440
-
.post-quotes .post-quote p.stats {
441
-
display: none;
442
-
}
443
-
444
-
.post .image-alt {
445
-
font-size: 11pt;
446
-
color: #666;
447
-
margin-bottom: 20px;
448
-
}
449
-
450
-
.post .image-alt summary {
451
-
font-size: 11pt;
452
-
color: #666;
453
-
margin-bottom: 5px;
454
-
user-select: none;
455
-
-webkit-user-select: none;
456
-
cursor: default;
457
-
}
458
-
459
-
.post.blocked p, .post.blocked a {
460
-
font-size: 11pt;
461
-
color: #666;
462
-
}
463
-
464
-
.post.blocked .blocked-header i {
465
-
margin-right: 2px;
466
-
}
467
-
468
-
.post.muted > h2, .post.muted > .content > details > p, .post.muted > .content > details summary {
469
-
opacity: 0.3;
470
-
}
471
-
472
-
.post.muted > h2 {
473
-
font-weight: 600;
474
-
}
475
-
476
-
.post.muted details {
477
-
margin-top: 12px;
478
-
margin-bottom: 10px;
479
-
}
480
-
481
-
.post.muted details summary {
482
-
font-size: 10pt;
483
-
user-select: none;
484
-
-webkit-user-select: none;
485
-
cursor: default;
486
-
}
487
-
488
-
.post a.link-card {
489
-
display: block;
490
-
position: relative;
491
-
max-width: 500px;
492
-
margin-bottom: 12px;
493
-
}
494
-
495
-
.post a.link-card:hover {
496
-
text-decoration: none;
497
-
}
498
-
499
-
.post a.link-card > div {
500
-
background-color: #fcfcfd;
501
-
border: 1px solid #d8d8d8;
502
-
border-radius: 8px;
503
-
padding: 11px 15px;
504
-
}
505
-
506
-
.post a.link-card:hover > div {
507
-
background-color: #f6f7f8;
508
-
border: 1px solid #c8c8c8;
509
-
}
510
-
511
-
.post a.link-card > div:not(:has(p.description)) {
512
-
padding-bottom: 14px;
513
-
}
514
-
515
-
.post a.link-card p.domain {
516
-
color: #888;
517
-
font-size: 10pt;
518
-
margin-top: 1px;
519
-
margin-bottom: 5px;
520
-
}
521
-
522
-
.post a.link-card h2 {
523
-
color: #333;
524
-
margin-top: 8px;
525
-
}
526
-
527
-
.post a.link-card p.description {
528
-
color: #666;
529
-
font-size: 11pt;
530
-
margin-top: 8px;
531
-
margin-bottom: 4px;
532
-
line-height: 135%;
533
-
}
534
-
535
-
.post a.link-card.record > div:has(.avatar) {
536
-
padding-left: 65px;
537
-
}
538
-
539
-
.post a.link-card.record h2 {
540
-
margin-top: 3px;
541
-
}
542
-
543
-
.post a.link-card.record .handle {
544
-
color: #666;
545
-
margin-left: 5px;
546
-
}
547
-
548
-
.post a.link-card.record .avatar {
549
-
width: 36px;
550
-
height: 36px;
551
-
border: 1px solid #ddd;
552
-
border-radius: 6px;
553
-
position: absolute;
554
-
top: 15px;
555
-
left: 15px;
556
-
}
557
-
558
-
.post a.link-card.record .stats {
559
-
margin-top: 9px;
560
-
margin-bottom: 1px;
561
-
}
562
-
563
-
.post a.link-card.record .stats i.fa-heart:hover {
564
-
color: #aaa;
565
-
}
566
-
567
-
.post a.fedi-link {
568
-
display: inline-block;
569
-
margin-bottom: 6px;
570
-
margin-top: 2px;
571
-
}
572
-
573
-
.post a.fedi-link:hover {
574
-
text-decoration: none;
575
-
}
576
-
577
-
.post a.fedi-link > div {
578
-
border: 1px solid #d0d0d0;
579
-
border-radius: 8px;
580
-
padding: 5px 9px;
581
-
color: #555;
582
-
font-size: 10pt;
583
-
}
584
-
585
-
.post a.fedi-link i {
586
-
margin-right: 3px;
587
-
}
588
-
589
-
.post a.fedi-link:hover > div {
590
-
background-color: #f6f7f8;
591
-
border: 1px solid #c8c8c8;
592
-
}
593
-
594
-
.post div.gif img {
595
-
user-select: none;
596
-
-webkit-user-select: none;
597
-
}
598
-
599
-
.post div.gif img.static {
600
-
opacity: 0.75;
601
-
}
602
-
603
-
.post .stats {
604
-
font-size: 10pt;
605
-
color: #666;
606
-
}
607
-
608
-
.post .stats a {
609
-
color: #666;
610
-
text-decoration: none;
611
-
}
612
-
613
-
.post .stats a:hover {
614
-
text-decoration: underline;
615
-
}
616
-
617
-
.post .stats i {
618
-
font-size: 9pt;
619
-
color: #888;
620
-
}
621
-
622
-
.post .stats i.fa-heart {
623
-
color: #aaa;
624
-
}
625
-
626
-
.post .stats i.fa-heart.liked {
627
-
color: #e03030;
628
-
}
629
-
630
-
.post .stats i.fa-heart:hover {
631
-
color: #888;
632
-
cursor: pointer;
633
-
}
634
-
635
-
.post .stats i.fa-heart.liked:hover {
636
-
color: #c02020;
637
-
}
638
-
639
-
.post .stats span {
640
-
margin-right: 10px;
641
-
}
642
-
643
-
.post .stats .blocked-info {
644
-
color: #a02020;
645
-
font-weight: bold;
646
-
margin-left: 5px;
647
-
}
648
-
649
-
.post img.loader {
650
-
width: 24px;
651
-
animation: rotation 3s infinite linear;
652
-
margin-top: 5px;
653
-
}
654
-
655
-
.post .tags a {
656
-
background-color: hsl(210, 90%, 97%);
657
-
border: 1px solid hsl(215, 90%, 85%);
658
-
border-radius: 6px;
659
-
padding: 3px 7px;
660
-
margin-right: 5px;
661
-
font-size: 10pt;
662
-
color: #333;
663
-
}
664
-
665
-
.post .tags a:hover {
666
-
text-decoration: none;
667
-
background-color: hsl(210, 90%, 93%);
668
-
}
669
-
670
-
.post p.hidden-replies {
671
-
margin-top: 20px;
672
-
font-size: 11pt;
673
-
}
674
-
675
-
.post p.hidden-replies a {
676
-
font-size: 12pt;
677
-
color: saddlebrown;
678
-
}
679
-
680
-
.post p.missing-replies-info {
681
-
font-size: 11pt;
682
-
color: darkred;
683
-
margin-top: 25px;
684
-
}
685
-
686
-
#posting_stats_page input[type="radio"] {
687
-
position: relative;
688
-
top: -1px;
689
-
margin-left: 5px;
690
-
}
691
-
692
-
#posting_stats_page input[type="radio"] + label {
693
-
user-select: none;
694
-
-webkit-user-select: none;
695
-
}
696
-
697
-
#posting_stats_page input[type="radio"]:disabled + label {
698
-
color: #999;
699
-
}
700
-
701
-
#posting_stats_page input[type="range"] {
702
-
width: 250px;
703
-
vertical-align: middle;
704
-
}
705
-
706
-
#posting_stats_page input[type="submit"] {
707
-
font-size: 12pt;
708
-
margin: 5px 0px;
709
-
padding: 5px 10px;
710
-
}
711
-
712
-
#posting_stats_page select {
713
-
font-size: 12pt;
714
-
margin-left: 5px;
715
-
}
716
-
717
-
#posting_stats_page progress {
718
-
width: 300px;
719
-
margin-left: 10px;
720
-
vertical-align: middle;
721
-
}
722
-
723
-
#posting_stats_page .user-choice {
724
-
position: relative;
725
-
}
726
-
727
-
#posting_stats_page .user-choice input {
728
-
width: 260px;
729
-
font-size: 11pt;
730
-
}
731
-
732
-
#posting_stats_page .user-choice .autocomplete {
733
-
position: absolute;
734
-
left: 0;
735
-
top: 0;
736
-
margin-top: 4px;
737
-
width: 350px;
738
-
max-height: 250px;
739
-
overflow-y: auto;
740
-
background-color: white;
741
-
border: 1px solid #ccc;
742
-
z-index: 10;
743
-
}
744
-
745
-
#posting_stats_page .user-choice .selected-users {
746
-
width: 275px;
747
-
height: 150px;
748
-
overflow-y: auto;
749
-
border: 1px solid #aaa;
750
-
padding: 4px;
751
-
margin-top: 20px;
752
-
}
753
-
754
-
#posting_stats_page .user-choice .user-row {
755
-
position: relative;
756
-
padding: 2px 4px 2px 37px;
757
-
cursor: pointer;
758
-
}
759
-
760
-
#posting_stats_page .user-choice .user-row .avatar {
761
-
position: absolute;
762
-
left: 6px;
763
-
top: 8px;
764
-
width: 24px;
765
-
border-radius: 12px;
766
-
}
767
-
768
-
#posting_stats_page .user-choice .user-row span {
769
-
display: block;
770
-
overflow-x: hidden;
771
-
text-overflow: ellipsis;
772
-
}
773
-
774
-
#posting_stats_page .user-choice .user-row .name {
775
-
font-size: 11pt;
776
-
margin-top: 1px;
777
-
margin-bottom: 1px;
778
-
}
779
-
780
-
#posting_stats_page .user-choice .user-row .handle {
781
-
font-size: 10pt;
782
-
margin-bottom: 2px;
783
-
color: #666;
784
-
}
785
-
786
-
#posting_stats_page .user-choice .autocomplete .user-row {
787
-
cursor: pointer;
788
-
}
789
-
790
-
#posting_stats_page .user-choice .autocomplete .user-row.highlighted {
791
-
background-color: hsl(207, 100%, 85%);
792
-
}
793
-
794
-
#posting_stats_page .user-choice .selected-users .user-row span {
795
-
padding-right: 14px;
796
-
}
797
-
798
-
#posting_stats_page .user-choice .selected-users .user-row .remove {
799
-
position: absolute;
800
-
right: 4px;
801
-
top: 11px;
802
-
padding: 0px 4px;
803
-
color: #333;
804
-
line-height: 17px;
805
-
}
806
-
807
-
#posting_stats_page .user-choice .selected-users .user-row .remove:hover {
808
-
text-decoration: none;
809
-
background-color: #ddd;
810
-
border-radius: 8px;
811
-
}
812
-
813
-
#posting_stats_page .scan-info {
814
-
font-weight: 600;
815
-
line-height: 125%;
816
-
margin: 20px 0px;
817
-
}
818
-
819
-
#posting_stats_page .scan-result {
820
-
border: 1px solid #333;
821
-
border-collapse: collapse;
822
-
}
823
-
824
-
#posting_stats_page .scan-result td, #posting_stats_page .scan-result th {
825
-
border: 1px solid #333;
826
-
}
827
-
828
-
#posting_stats_page .scan-result td {
829
-
text-align: right;
830
-
padding: 5px 8px;
831
-
}
832
-
833
-
#posting_stats_page .scan-result th {
834
-
text-align: center;
835
-
background-color: hsl(207, 100%, 86%);
836
-
padding: 7px 10px;
837
-
}
838
-
839
-
#posting_stats_page .scan-result td.handle {
840
-
text-align: left;
841
-
max-width: 450px;
842
-
overflow: hidden;
843
-
text-overflow: ellipsis;
844
-
white-space: nowrap;
845
-
}
846
-
847
-
#posting_stats_page .scan-result tr.total td {
848
-
font-weight: bold;
849
-
font-size: 11pt;
850
-
background-color: hsla(207, 100%, 86%, 0.4);
851
-
}
852
-
853
-
#posting_stats_page .scan-result tr.total td.handle {
854
-
text-align: left;
855
-
padding: 10px 12px;
856
-
}
857
-
858
-
#posting_stats_page .scan-result .avatar {
859
-
width: 24px;
860
-
height: 24px;
861
-
border-radius: 14px;
862
-
vertical-align: middle;
863
-
margin-right: 2px;
864
-
padding: 2px;
865
-
}
866
-
867
-
#posting_stats_page .scan-result td.no {
868
-
font-weight: bold;
869
-
}
870
-
871
-
#posting_stats_page .scan-result td.percent {
872
-
min-width: 70px;
873
-
}
874
-
875
-
#private_search_page input[type="range"] {
876
-
width: 250px;
877
-
vertical-align: middle;
878
-
}
879
-
880
-
#private_search_page input[type="submit"] {
881
-
font-size: 12pt;
882
-
margin: 5px 0px;
883
-
padding: 5px 10px;
884
-
}
885
-
886
-
#private_search_page progress {
887
-
width: 300px;
888
-
margin-left: 10px;
889
-
vertical-align: middle;
890
-
}
891
-
892
-
#private_search_page .search-query {
893
-
font-size: 12pt;
894
-
border: 1px solid #ccc;
895
-
border-radius: 6px;
896
-
padding: 5px 6px;
897
-
margin-left: 8px;
898
-
}
899
-
900
-
#private_search_page .search-collections label {
901
-
vertical-align: middle;
902
-
}
903
-
904
-
#private_search_page .lycan-import {
905
-
margin-top: 30px;
906
-
border-top: 1px solid #ccc;
907
-
padding-top: 5px;
908
-
}
909
-
910
-
#private_search_page .lycan-import form p {
911
-
line-height: 135%;
912
-
}
913
-
914
-
#private_search_page .lycan-import .import-progress progress {
915
-
margin-left: 0;
916
-
margin-right: 6px;
917
-
}
918
-
919
-
#private_search_page .lycan-import .import-progress progress + output {
920
-
font-size: 11pt;
921
-
}
922
-
923
-
#private_search_page .results {
924
-
margin-top: 30px;
925
-
}
926
-
927
-
#private_search_page .results > .post {
928
-
margin-left: -15px;
929
-
padding-left: 15px;
930
-
border-bottom: 1px solid #ddd;
931
-
padding-bottom: 10px;
932
-
margin-top: 24px;
933
-
}
934
-
935
-
#private_search_page .results-end {
936
-
font-size: 12pt;
937
-
color: #333;
938
-
}
939
-
940
-
#private_search_page .post + .results-end {
941
-
font-size: 11pt;
942
-
}
943
-
944
62
@media (prefers-color-scheme: dark) {
945
63
body {
946
64
background-color: rgb(39, 39, 37);
···
955
73
color: rgb(0, 133, 255);
956
74
}
957
75
958
-
#loader {
959
-
filter: invert();
960
-
}
961
-
962
-
#account.active {
963
-
color: #333;
964
-
}
965
-
966
-
#account_menu {
967
-
background: hsl(210, 33.33%, 94.0%);
968
-
border-color: #ccc;
969
-
}
970
-
971
-
#account_menu li a.button {
972
-
color: #333;
973
-
border-color: #bbb;
974
-
background-color: hsla(210, 100%, 4%, 0.12);
975
-
}
976
-
977
-
#account_menu li a.button:hover {
978
-
background-color: hsla(210, 100%, 4%, 0.2);
979
-
}
980
-
981
-
#login {
982
-
background-color: rgba(240, 240, 240, 0.15);
983
-
}
984
-
985
76
.back, .back a {
986
77
color: #888;
987
78
}
988
79
989
80
p.back i {
990
81
color: #888;
991
-
}
992
-
993
-
.post h2 .handle {
994
-
color: #888;
995
-
}
996
-
997
-
.post h2 .separator {
998
-
color: #888;
999
-
}
1000
-
1001
-
.post h2 .time {
1002
-
color: #aaa;
1003
-
}
1004
-
1005
-
.post h2 .action {
1006
-
color: #888;
1007
-
}
1008
-
1009
-
.post .body .highlight {
1010
-
background-color: rgba(255, 255, 0, 0.35);
1011
-
}
1012
-
1013
-
.post .quote-embed {
1014
-
background-color: #303030;
1015
-
border-color: #606060;
1016
-
}
1017
-
1018
-
.post .image-alt, .post .image-alt summary {
1019
-
color: #999;
1020
-
}
1021
-
1022
-
.post.blocked p, .post.blocked a {
1023
-
color: #aaa;
1024
-
}
1025
-
1026
-
.post .edge .line {
1027
-
border-left-color: #666;
1028
-
}
1029
-
1030
-
.post .edge:hover .line {
1031
-
border-left-color: #888;
1032
-
}
1033
-
1034
-
.post .plus {
1035
-
filter: invert();
1036
-
}
1037
-
1038
-
.post .stats {
1039
-
color: #aaa;
1040
-
}
1041
-
1042
-
.post .stats i {
1043
-
color: #888;
1044
-
}
1045
-
1046
-
.post .stats i.fa-heart {
1047
-
color: #aaa;
1048
-
}
1049
-
1050
-
.post .stats i.fa-heart.liked {
1051
-
color: #f04040;
1052
-
}
1053
-
1054
-
.post .stats i.fa-heart:hover {
1055
-
color: #eee;
1056
-
}
1057
-
1058
-
.post .stats i.fa-heart.liked:hover {
1059
-
color: #ff7070;
1060
-
}
1061
-
1062
-
.post a.link-card > div {
1063
-
background-color: #303030;
1064
-
border-color: #606060;
1065
-
}
1066
-
1067
-
.post a.link-card:hover > div {
1068
-
background-color: #383838;
1069
-
border-color: #707070;
1070
-
}
1071
-
1072
-
.post a.link-card p.domain {
1073
-
color: #666;
1074
-
}
1075
-
1076
-
.post a.link-card h2 {
1077
-
color: #ccc;
1078
-
}
1079
-
1080
-
.post a.link-card p.description {
1081
-
color: #888;
1082
-
}
1083
-
1084
-
.post a.link-card.record .handle {
1085
-
color: #666;
1086
-
}
1087
-
1088
-
.post a.link-card.record .avatar {
1089
-
border-color: #888;
1090
-
}
1091
-
1092
-
.post a.link-card.record .stats i.fa-heart:hover {
1093
-
color: #eee;
1094
-
}
1095
-
1096
-
.post a.fedi-link > div {
1097
-
border-color: #606060;
1098
-
color: #909090;
1099
-
}
1100
-
1101
-
.post a.fedi-link:hover > div {
1102
-
background-color: #444;
1103
-
border-color: #909090;
1104
-
}
1105
-
1106
-
#posting_stats_page input:disabled + label {
1107
-
color: #777;
1108
-
}
1109
-
1110
-
#posting_stats_page .user-choice .autocomplete {
1111
-
background-color: hsl(210, 5%, 18%);
1112
-
border-color: #4b4b4b;
1113
-
}
1114
-
1115
-
#posting_stats_page .user-choice .selected-users {
1116
-
border-color: #666;
1117
-
}
1118
-
1119
-
#posting_stats_page .user-choice .user-row .handle {
1120
-
color: #888;
1121
-
}
1122
-
1123
-
#posting_stats_page .user-choice .autocomplete .user-row.highlighted {
1124
-
background-color: hsl(207, 90%, 25%);
1125
-
}
1126
-
1127
-
#posting_stats_page .user-choice .selected-users .user-row .remove {
1128
-
color: #aaa;
1129
-
}
1130
-
1131
-
#posting_stats_page .user-choice .selected-users .user-row .remove:hover {
1132
-
background-color: #555;
1133
-
color: #bbb;
1134
-
}
1135
-
1136
-
#posting_stats_page .scan-result, #posting_stats_page .scan-result td, #posting_stats_page .scan-result th {
1137
-
border-color: #888;
1138
-
}
1139
-
1140
-
#posting_stats_page .scan-result th {
1141
-
background-color: hsl(207, 90%, 25%);
1142
-
}
1143
-
1144
-
#posting_stats_page .scan-result tr.total td {
1145
-
background-color: hsla(207, 90%, 25%, 0.4);
1146
-
}
1147
-
1148
-
#private_search_page .search-query {
1149
-
border: 1px solid #666;
1150
-
}
1151
-
1152
-
#private_search_page .lycan-import {
1153
-
border-top-color: #888;
1154
-
}
1155
-
1156
-
#private_search_page .results-end {
1157
-
color: #888;
1158
-
}
1159
-
1160
-
#private_search_page .results > .post {
1161
-
border-bottom: 1px solid #555;
1162
82
}
1163
83
}