witchcraft.systems
+12
-1
.forgejo/workflows/deploy.yaml
+12
-1
.forgejo/workflows/deploy.yaml
···
6
6
- main
7
7
- astra/ci
8
8
9
+
9
10
jobs:
10
11
deploy:
11
12
name: Deploy
12
13
runs-on: ubuntu-latest
13
14
14
15
steps:
15
-
- name: Checkout repo
16
+
- name: Checkout main repo
16
17
uses: actions/checkout@v4
17
18
19
+
- name: Checkout overrides repo
20
+
uses: actions/checkout@v4
21
+
with:
22
+
repository: scientific-witchery/pds-dash-overrides
23
+
token: ${{ secrets.OVERRIDES_TOKEN}}
24
+
path: overrides
25
+
26
+
- name: Copy config file to root
27
+
run: cp overrides/config.ts ./config.ts
28
+
18
29
- name: Setup Node.js
19
30
uses: actions/setup-node@v3
20
31
with:
+3
-8
README.md
+3
-8
README.md
···
46
46
47
47
## theming
48
48
49
-
the colors are designated in [`src/app.css`](src/app.css) as variables, go crazy with them
49
+
themes are located in the `themes/` directory, you can create your own theme by copying one of the existing themes and modifying it to your liking.
50
50
51
-
the rest is done by editing the css files and style tags directly, good luck
51
+
currently, the name of the theme is determined by the directory name, and the theme itself is defined in `theme.css` inside that directory.
52
52
53
-
relevant files:
54
-
55
-
- [`src/App.svelte`](src/App.svelte)
56
-
- [`src/app.css`](src/app.css)
57
-
- [`src/lib/AccountComponent.svelte`](src/lib/AccountComponent.svelte)
58
-
- [`src/lib/PostComponent.svelte`](src/lib/PostComponent.svelte)
53
+
you can switch themes by changing the `theme` property in `config.ts`.
59
54
60
55
the favicon is located at [`public/favicon.ico`](public/favicon.ico)
61
56
+3
-3
config.ts.example
+3
-3
config.ts.example
···
9
9
static readonly PDS_URL: string = "";
10
10
11
11
/**
12
-
* Theme css file to be used
13
-
* @default "theme.css"
12
+
* Theme to be used
13
+
* @default "default"
14
14
*/
15
-
static readonly THEME: string = "themes/theme.css";
15
+
static readonly THEME: string = "default";
16
16
17
17
/**
18
18
* The base URL of the frontend service for linking to replies/quotes/accounts etc.
+21
-1
src/App.svelte
+21
-1
src/App.svelte
···
9
9
10
10
let posts: Post[] = [];
11
11
12
+
let hue: number = 1;
13
+
const cycleColors = async () => {
14
+
while (true) {
15
+
hue += 1;
16
+
if (hue > 360) {
17
+
hue = 0;
18
+
}
19
+
document.documentElement.style.setProperty("--primary-h", hue.toString());
20
+
await new Promise((resolve) => setTimeout(resolve, 10));
21
+
}
22
+
}
23
+
let clickCounter = 0;
24
+
const carameldansenfusion = async () => {
25
+
clickCounter++;
26
+
if (clickCounter >= 10) {
27
+
clickCounter = 0;
28
+
cycleColors();
29
+
}
30
+
};
31
+
12
32
onMount(() => {
13
33
// Fetch initial posts
14
34
getNextPosts().then((initialPosts) => {
···
39
59
<p>Loading...</p>
40
60
{:then accountsData}
41
61
<div id="Account">
42
-
<h1 id="Header">ATProto PDS</h1>
62
+
<h1 onclick={carameldansenfusion} id="Header">ATProto PDS</h1>
43
63
<p>Home to {accountsData.length} accounts</p>
44
64
<div id="accountsList">
45
65
{#each accountsData as accountObject}
+1
src/app.css
+1
src/app.css
+7
-3
src/lib/AccountComponent.svelte
+7
-3
src/lib/AccountComponent.svelte
···
12
12
alt="avatar of {account.displayName}"
13
13
src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
14
14
/>
15
+
<div id="accountName">
16
+
{account.displayName || account.handle || account.did}
17
+
</div>
18
+
{:else}
19
+
<div id="accountName" class="no-avatar">
20
+
{account.displayName || account.handle || account.did}
21
+
</div>
15
22
{/if}
16
-
<div id="accountName">
17
-
{account.displayName || account.handle || account.did}
18
-
</div>
19
23
</div>
20
24
</a>
21
25
+1
-1
src/lib/PostComponent.svelte
+1
-1
src/lib/PostComponent.svelte
+17
-10
src/lib/pdsfetch.ts
+17
-10
src/lib/pdsfetch.ts
···
132
132
const getAccountMetadata = async (
133
133
did: `did:${string}:${string}`,
134
134
) => {
135
-
// gonna assume self exists in the app.bsky.actor.profile
135
+
const account: AccountMetadata = {
136
+
did: did,
137
+
handle: "", // Guaranteed to be filled out later
138
+
displayName: "",
139
+
avatarCid: null,
140
+
};
141
+
136
142
try {
137
143
const { data } = await rpc.get("com.atproto.repo.getRecord", {
138
144
params: {
···
142
148
},
143
149
});
144
150
const value = data.value as AppBskyActorProfile.Record;
145
-
const handle = await blueskyHandleFromDid(did);
146
-
const account: AccountMetadata = {
147
-
did: did,
148
-
handle: handle,
149
-
displayName: value.displayName || "",
150
-
avatarCid: null,
151
-
};
151
+
account.displayName = value.displayName || "";
152
152
if (value.avatar) {
153
153
account.avatarCid = value.avatar.ref["$link"];
154
154
}
155
-
return account;
155
+
} catch (e) {
156
+
console.warn(`Error fetching profile for ${did}:`, e);
157
+
}
158
+
159
+
try {
160
+
account.handle = await blueskyHandleFromDid(did);
156
161
} catch (e) {
157
-
console.error(`Error fetching metadata for ${did}:`, e);
162
+
console.error(`Error fetching handle for ${did}:`, e);
158
163
return null;
159
164
}
165
+
166
+
return account;
160
167
};
161
168
162
169
const getAllMetadataFromPds = async (): Promise<AccountMetadata[]> => {
-369
src/themes/theme.css
-369
src/themes/theme.css
···
1
-
@font-face {
2
-
font-family: "ProggyClean";
3
-
src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
4
-
}
5
-
6
-
:root {
7
-
--link-color: #646cff;
8
-
--link-hover-color: #535bf2;
9
-
--background-color: #12082b;
10
-
--header-background-color: #1f1145;
11
-
--content-background-color: #0d0620;
12
-
--text-color: white;
13
-
--border-color: #8054f0;
14
-
--indicator-inactive-color: #4a4a4a;
15
-
--indicator-active-color: #8054f0;
16
-
}
17
-
18
-
::-webkit-scrollbar {
19
-
width: 0px;
20
-
background: transparent;
21
-
padding: 0;
22
-
margin: 0;
23
-
}
24
-
::-webkit-scrollbar-thumb {
25
-
background: transparent;
26
-
border-radius: 0;
27
-
}
28
-
::-webkit-scrollbar-track {
29
-
background: transparent;
30
-
border-radius: 0;
31
-
}
32
-
::-webkit-scrollbar-corner {
33
-
background: transparent;
34
-
border-radius: 0;
35
-
}
36
-
::-webkit-scrollbar-button {
37
-
background: transparent;
38
-
border-radius: 0;
39
-
}
40
-
* {
41
-
scrollbar-width: none;
42
-
scrollbar-color: transparent transparent;
43
-
-ms-overflow-style: none; /* IE and Edge */
44
-
-webkit-overflow-scrolling: touch;
45
-
-webkit-scrollbar: none; /* Safari */
46
-
}
47
-
48
-
a {
49
-
font-weight: 500;
50
-
color: var(--link-color);
51
-
text-decoration: inherit;
52
-
}
53
-
a:hover {
54
-
color: var(--link-hover-color);
55
-
text-decoration: underline;
56
-
}
57
-
58
-
body {
59
-
margin: 0;
60
-
display: flex;
61
-
place-items: center;
62
-
min-width: 320px;
63
-
min-height: 100vh;
64
-
background-color: var(--background-color);
65
-
font-family: "ProggyClean", monospace;
66
-
font-size: 24px;
67
-
color: var(--text-color);
68
-
border-color: var(--border-color);
69
-
overflow-wrap: break-word;
70
-
word-wrap: normal;
71
-
word-break: break-word;
72
-
hyphens: none;
73
-
}
74
-
75
-
h1 {
76
-
font-size: 3.2em;
77
-
line-height: 1.1;
78
-
}
79
-
80
-
#app {
81
-
max-width: 1400px;
82
-
width: 100%;
83
-
margin: 0;
84
-
padding: 0;
85
-
margin-left: auto;
86
-
margin-right: auto;
87
-
text-align: center;
88
-
}
89
-
90
-
/* Post Component */
91
-
a:hover {
92
-
text-decoration: underline;
93
-
}
94
-
#postContainer {
95
-
display: flex;
96
-
flex-direction: column;
97
-
border: 1px solid var(--border-color);
98
-
background-color: var(--background-color);
99
-
margin-bottom: 15px;
100
-
overflow-wrap: break-word;
101
-
}
102
-
#postHeader {
103
-
display: flex;
104
-
flex-direction: row;
105
-
align-items: center;
106
-
justify-content: start;
107
-
background-color: var(--header-background-color);
108
-
padding: 0px 0px;
109
-
height: fit-content;
110
-
border-bottom: 1px solid var(--border-color);
111
-
font-weight: bold;
112
-
overflow-wrap: break-word;
113
-
height: 60px;
114
-
}
115
-
#displayName {
116
-
display: block;
117
-
color: var(--text-color);
118
-
font-size: 1.2em;
119
-
padding: 0;
120
-
margin: 0;
121
-
overflow-wrap:normal;
122
-
word-wrap: break-word;
123
-
word-break: break-word;
124
-
text-overflow: ellipsis;
125
-
overflow: hidden;
126
-
white-space: nowrap;
127
-
width: 100%;
128
-
}
129
-
#handle {
130
-
display: block;
131
-
color: var(--border-color);
132
-
font-size: 0.8em;
133
-
padding: 0;
134
-
margin: 0;
135
-
}
136
-
137
-
#postLink {
138
-
color: var(--border-color);
139
-
font-size: 0.8em;
140
-
padding: 0;
141
-
margin: 0;
142
-
}
143
-
#postContent {
144
-
display: flex;
145
-
text-align: start;
146
-
flex-direction: column;
147
-
padding: 10px;
148
-
background-color: var(--content-background-color);
149
-
color: var(--text-color);
150
-
overflow-wrap: break-word;
151
-
white-space: pre-line;
152
-
}
153
-
#replyingText {
154
-
font-size: 0.7em;
155
-
margin: 0;
156
-
padding: 0;
157
-
padding-bottom: 5px;
158
-
}
159
-
#quotingText {
160
-
font-size: 0.7em;
161
-
margin: 0;
162
-
padding: 0;
163
-
padding-bottom: 5px;
164
-
}
165
-
#postText {
166
-
margin: 0;
167
-
padding: 0;
168
-
overflow-wrap: break-word;
169
-
word-wrap: normal;
170
-
word-break: break-word;
171
-
hyphens: none;
172
-
}
173
-
#headerText {
174
-
margin-left: 10px;
175
-
font-size: 0.9em;
176
-
text-align: start;
177
-
word-break: break-word;
178
-
max-width: 80%;
179
-
max-height: 95%;
180
-
overflow: hidden;
181
-
align-self: flex-start;
182
-
margin-top: auto;
183
-
margin-bottom: auto;
184
-
}
185
-
#avatar {
186
-
height: 60px;
187
-
width: 60px;
188
-
margin: 0px;
189
-
margin-left: 0px;
190
-
overflow: hidden;
191
-
object-fit: cover;
192
-
border-right: var(--border-color) 1px solid;
193
-
}
194
-
#carouselContainer {
195
-
position: relative;
196
-
width: 100%;
197
-
margin-top: 10px;
198
-
display: flex;
199
-
flex-direction: column;
200
-
align-items: center;
201
-
}
202
-
#carouselControls {
203
-
display: flex;
204
-
justify-content: space-between;
205
-
align-items: center;
206
-
width: 100%;
207
-
max-width: 500px;
208
-
margin-top: 5px;
209
-
}
210
-
#carouselIndicators {
211
-
display: flex;
212
-
gap: 5px;
213
-
}
214
-
.indicator {
215
-
width: 8px;
216
-
height: 8px;
217
-
background-color: var(--indicator-inactive-color);
218
-
}
219
-
.indicator.active {
220
-
background-color: var(--indicator-active-color);
221
-
}
222
-
#prevBtn,
223
-
#nextBtn {
224
-
background-color: rgba(31, 17, 69, 0.7);
225
-
color: var(--text-color);
226
-
border: 1px solid var(--border-color);
227
-
width: 30px;
228
-
height: 30px;
229
-
cursor: pointer;
230
-
display: flex;
231
-
align-items: center;
232
-
justify-content: center;
233
-
}
234
-
#prevBtn:disabled,
235
-
#nextBtn:disabled {
236
-
opacity: 0.5;
237
-
cursor: not-allowed;
238
-
}
239
-
#embedVideo {
240
-
width: 100%;
241
-
max-width: 500px;
242
-
margin-top: 10px;
243
-
align-self: center;
244
-
}
245
-
246
-
#embedImages {
247
-
min-width: min(100%, 500px);
248
-
max-width: min(100%, 500px);
249
-
max-height: 500px;
250
-
object-fit: contain;
251
-
252
-
margin: 0;
253
-
}
254
-
255
-
/* Account Component */
256
-
#accountContainer {
257
-
display: flex;
258
-
text-align: start;
259
-
align-items: center;
260
-
background-color: var(--background-color);
261
-
padding: 0px;
262
-
margin-bottom: 15px;
263
-
border: 1px solid var(--border-color);
264
-
}
265
-
#accountName {
266
-
margin-left: 10px;
267
-
font-size: 0.9em;
268
-
max-width: 80%;
269
-
270
-
/* replace overflow with ellipsis */
271
-
overflow: hidden;
272
-
text-overflow: ellipsis;
273
-
white-space: nowrap;
274
-
}
275
-
#avatar {
276
-
width: 50px;
277
-
height: 50px;
278
-
margin: 0px;
279
-
object-fit: cover;
280
-
border-right: var(--border-color) 1px solid;
281
-
}
282
-
283
-
/* App.Svelte */
284
-
/* desktop style */
285
-
286
-
#Content {
287
-
display: flex;
288
-
/* split the screen in half, left for accounts, right for posts */
289
-
width: 100%;
290
-
height: 100%;
291
-
flex-direction: row;
292
-
justify-content: space-between;
293
-
align-items: center;
294
-
background-color: var(--background-color);
295
-
color: var(--text-color);
296
-
}
297
-
#Feed {
298
-
overflow-y: scroll;
299
-
width: 65%;
300
-
height: 100vh;
301
-
padding: 20px;
302
-
padding-bottom: 0;
303
-
padding-top: 0;
304
-
margin-top: 0;
305
-
margin-bottom: 0;
306
-
}
307
-
#spacer {
308
-
padding: 0;
309
-
margin: 0;
310
-
height: 10vh;
311
-
width: 100%;
312
-
}
313
-
#Account {
314
-
width: 35%;
315
-
display: flex;
316
-
flex-direction: column;
317
-
border: 1px solid var(--border-color);
318
-
background-color: var(--content-background-color);
319
-
height: 80vh;
320
-
padding: 20px;
321
-
margin-left: 20px;
322
-
}
323
-
#accountsList {
324
-
display: flex;
325
-
flex-direction: column;
326
-
overflow-y: scroll;
327
-
height: 100%;
328
-
width: 100%;
329
-
padding: 0px;
330
-
margin: 0px;
331
-
}
332
-
333
-
#Header {
334
-
text-align: center;
335
-
font-size: 2em;
336
-
margin-bottom: 20px;
337
-
}
338
-
339
-
/* mobile style */
340
-
@media screen and (max-width: 600px) {
341
-
#Content {
342
-
flex-direction: column;
343
-
width: auto;
344
-
padding-left: 0px;
345
-
padding-right: 0px;
346
-
margin-top: 5%;
347
-
}
348
-
#Account {
349
-
width: 85%;
350
-
padding-left: 5%;
351
-
padding-right: 5%;
352
-
margin-bottom: 20px;
353
-
margin-left: 5%;
354
-
margin-right: 5%;
355
-
height: auto;
356
-
}
357
-
#Feed {
358
-
width: 95%;
359
-
margin: 0px;
360
-
margin-left: 10%;
361
-
margin-right: 10%;
362
-
padding: 0px;
363
-
overflow-y: visible;
364
-
}
365
-
366
-
#spacer {
367
-
height: 0;
368
-
}
369
-
}
+423
themes/default/theme.css
+423
themes/default/theme.css
···
1
+
/* Modern Theme for pds-dash */
2
+
3
+
:root {
4
+
/* Modern color palette */
5
+
--primary-h: 243;
6
+
--link-color: hsl(var(--primary-h), 73%, 59%);
7
+
--link-hover-color: #4338ca;
8
+
--time-color: #8b5cf6;
9
+
--background-color: #f8fafc;
10
+
--header-background-color: #ffffff;
11
+
--content-background-color: #ffffff;
12
+
--text-color: #111827;
13
+
--text-secondary-color: #4b5563;
14
+
--border-color: #e2e8f0;
15
+
--indicator-inactive-color: #cbd5e1;
16
+
--indicator-active-color: #6366f1;
17
+
18
+
/* Modern shadows */
19
+
--button-hover: #f3f4f6;
20
+
}
21
+
22
+
23
+
body {
24
+
margin: 0;
25
+
display: flex;
26
+
place-items: center;
27
+
min-width: 320px;
28
+
min-height: 100vh;
29
+
background-color: var(--background-color);
30
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
31
+
font-size: 18px;
32
+
line-height: 1.5;
33
+
color: var(--text-color);
34
+
border-color: var(--border-color);
35
+
overflow-wrap: break-word;
36
+
word-break: break-word;
37
+
hyphens: none;
38
+
}
39
+
40
+
a {
41
+
font-weight: 500;
42
+
color: var(--link-color);
43
+
text-decoration: none;
44
+
transition: color 0.15s ease;
45
+
}
46
+
a:hover {
47
+
color: var(--link-hover-color);
48
+
}
49
+
50
+
h1 {
51
+
font-size: 2.5em;
52
+
line-height: 1.2;
53
+
font-weight: 700;
54
+
}
55
+
56
+
#app {
57
+
max-width: 1400px;
58
+
width: 100%;
59
+
margin: 0 auto;
60
+
padding: 0;
61
+
text-align: center;
62
+
}
63
+
64
+
/* Post Component */
65
+
#postContainer {
66
+
display: flex;
67
+
flex-direction: column;
68
+
border-radius: 12px;
69
+
border: 1px solid var(--border-color);
70
+
background-color: var(--content-background-color);
71
+
margin-bottom: 20px;
72
+
overflow-wrap: break-word;
73
+
overflow: hidden;
74
+
box-shadow: var(--card-shadow);
75
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
76
+
}
77
+
78
+
#postContainer:hover {
79
+
transform: translateY(-2px);
80
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
81
+
}
82
+
83
+
#postHeader {
84
+
display: flex;
85
+
flex-direction: row;
86
+
align-items: center;
87
+
justify-content: start;
88
+
background-color: var(--header-background-color);
89
+
padding: 12px 16px;
90
+
height: 60px;
91
+
border-bottom: 1px solid var(--border-color);
92
+
font-weight: 600;
93
+
overflow-wrap: break-word;
94
+
}
95
+
96
+
#displayName {
97
+
display: block;
98
+
color: var(--text-color);
99
+
font-size: 1.1em;
100
+
padding: 0;
101
+
margin: 0 0 2px 0;
102
+
text-overflow: ellipsis;
103
+
overflow: hidden;
104
+
white-space: nowrap;
105
+
width: 100%;
106
+
letter-spacing: -0.01em;
107
+
}
108
+
109
+
#handle {
110
+
display: flex;
111
+
align-items: center;
112
+
color: #6b7280;
113
+
font-size: 0.85em;
114
+
font-weight: 400;
115
+
padding: 0;
116
+
margin: 0;
117
+
gap: 8px;
118
+
}
119
+
120
+
#postLink {
121
+
color: var(--time-color);
122
+
font-size: 0.85em;
123
+
padding: 0;
124
+
margin: 0;
125
+
opacity: 0.9;
126
+
}
127
+
128
+
#postContent {
129
+
display: flex;
130
+
text-align: start;
131
+
flex-direction: column;
132
+
padding: 16px;
133
+
background-color: var(--content-background-color);
134
+
color: var(--text-color);
135
+
overflow-wrap: break-word;
136
+
white-space: pre-line;
137
+
line-height: 1.6;
138
+
}
139
+
140
+
#replyingText, #quotingText {
141
+
font-size: 0.8em;
142
+
margin: 0;
143
+
padding: 0 0 10px 0;
144
+
color: #6b7280;
145
+
}
146
+
147
+
#postText {
148
+
margin: 0 0 8px 0;
149
+
padding: 0;
150
+
overflow-wrap: break-word;
151
+
word-break: break-word;
152
+
hyphens: none;
153
+
font-size: 1.05em;
154
+
}
155
+
156
+
#headerText {
157
+
margin-left: 12px;
158
+
font-size: 0.9em;
159
+
text-align: start;
160
+
word-break: break-word;
161
+
max-width: 80%;
162
+
max-height: 95%;
163
+
overflow: hidden;
164
+
align-self: flex-start;
165
+
margin-top: auto;
166
+
margin-bottom: auto;
167
+
}
168
+
169
+
#carouselContainer {
170
+
position: relative;
171
+
width: 100%;
172
+
margin-top: 12px;
173
+
display: flex;
174
+
flex-direction: column;
175
+
align-items: center;
176
+
border-radius: 8px;
177
+
overflow: hidden;
178
+
}
179
+
180
+
#carouselControls {
181
+
display: flex;
182
+
justify-content: space-between;
183
+
align-items: center;
184
+
width: 100%;
185
+
max-width: 500px;
186
+
margin-top: 10px;
187
+
}
188
+
189
+
#carouselIndicators {
190
+
display: flex;
191
+
gap: 6px;
192
+
}
193
+
194
+
.indicator {
195
+
width: 6px;
196
+
height: 6px;
197
+
background-color: var(--indicator-inactive-color);
198
+
border-radius: 50%;
199
+
transition: background-color 0.2s ease, transform 0.2s ease;
200
+
}
201
+
202
+
.indicator.active {
203
+
background-color: var(--indicator-active-color);
204
+
transform: scale(1.3);
205
+
}
206
+
207
+
#prevBtn,
208
+
#nextBtn {
209
+
background-color: var(--button-bg);
210
+
color: var(--text-color);
211
+
border: 1px solid var(--border-color);
212
+
width: 32px;
213
+
height: 32px;
214
+
cursor: pointer;
215
+
display: flex;
216
+
align-items: center;
217
+
justify-content: center;
218
+
border-radius: 50%;
219
+
transition: background-color 0.15s ease, transform 0.15s ease;
220
+
font-size: 16px;
221
+
}
222
+
223
+
#prevBtn:hover:not(:disabled),
224
+
#nextBtn:hover:not(:disabled) {
225
+
background-color: var(--button-hover);
226
+
transform: scale(1.05);
227
+
}
228
+
229
+
#prevBtn:disabled,
230
+
#nextBtn:disabled {
231
+
opacity: 0.4;
232
+
cursor: not-allowed;
233
+
}
234
+
235
+
#embedVideo {
236
+
width: 100%;
237
+
max-width: 500px;
238
+
margin-top: 12px;
239
+
align-self: center;
240
+
border-radius: 8px;
241
+
overflow: hidden;
242
+
}
243
+
244
+
#embedImages {
245
+
min-width: min(100%, 500px);
246
+
max-width: min(100%, 500px);
247
+
max-height: 500px;
248
+
object-fit: contain;
249
+
margin: 0;
250
+
border-radius: 8px;
251
+
}
252
+
253
+
/* Account Component */
254
+
#accountContainer {
255
+
display: flex;
256
+
text-align: start;
257
+
align-items: center;
258
+
background-color: var(--content-background-color);
259
+
padding: 12px;
260
+
margin-bottom: 15px;
261
+
border: 1px solid var(--border-color);
262
+
border-radius: 12px;
263
+
transition: background-color 0.15s ease;
264
+
}
265
+
266
+
#accountContainer:hover {
267
+
background-color: var(--hover-bg);
268
+
}
269
+
270
+
#accountName {
271
+
margin-left: 12px;
272
+
font-size: 0.95em;
273
+
max-width: 80%;
274
+
overflow: hidden;
275
+
text-overflow: ellipsis;
276
+
white-space: nowrap;
277
+
font-weight: 500;
278
+
}
279
+
280
+
#avatar {
281
+
width: 48px;
282
+
height: 48px;
283
+
margin: 0;
284
+
object-fit: cover;
285
+
border-radius: 50%;
286
+
border: 2px solid white;
287
+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
288
+
}
289
+
290
+
/* App.Svelte Layout */
291
+
#Content {
292
+
display: flex;
293
+
width: 100%;
294
+
height: 100%;
295
+
flex-direction: row;
296
+
justify-content: space-between;
297
+
align-items: center;
298
+
background-color: var(--background-color);
299
+
color: var(--text-color);
300
+
gap: 24px;
301
+
}
302
+
303
+
#Feed {
304
+
overflow-y: auto;
305
+
width: 65%;
306
+
height: 100vh;
307
+
padding-right: 16px;
308
+
align-self: flex-start;
309
+
}
310
+
311
+
#spacer {
312
+
padding: 0;
313
+
margin: 0;
314
+
height: 10vh;
315
+
width: 100%;
316
+
}
317
+
318
+
#Account {
319
+
width: 35%;
320
+
display: flex;
321
+
flex-direction: column;
322
+
border: 1px solid var(--border-color);
323
+
background-color: var(--content-background-color);
324
+
max-height: 80vh;
325
+
padding: 24px;
326
+
margin-left: 16px;
327
+
border-radius: 12px;
328
+
box-shadow: var(--card-shadow);
329
+
}
330
+
331
+
#accountsList {
332
+
display: flex;
333
+
flex-direction: column;
334
+
overflow-y: auto;
335
+
height: 100%;
336
+
width: 100%;
337
+
padding: 8px 0;
338
+
margin: 0;
339
+
}
340
+
341
+
#Header {
342
+
text-align: center;
343
+
font-size: 1.8em;
344
+
margin-bottom: 16px;
345
+
font-weight: 700;
346
+
background: linear-gradient(to right, var(--link-color), #8b5cf6);
347
+
-webkit-background-clip: text;
348
+
-webkit-text-fill-color: transparent;
349
+
background-clip: text;
350
+
}
351
+
352
+
/* Mobile Styles */
353
+
@media screen and (max-width: 768px) {
354
+
#Content {
355
+
flex-direction: column;
356
+
width: auto;
357
+
padding: 12px;
358
+
margin-top: 0;
359
+
}
360
+
361
+
#Account {
362
+
width: calc(100% - 32px);
363
+
padding: 16px;
364
+
margin-bottom: 20px;
365
+
margin-left: 0;
366
+
margin-right: 0;
367
+
height: auto;
368
+
order: -1;
369
+
}
370
+
371
+
#Feed {
372
+
width: 100%;
373
+
margin: 0;
374
+
padding: 0;
375
+
overflow-y: visible;
376
+
}
377
+
378
+
#spacer {
379
+
height: 5vh;
380
+
}
381
+
382
+
body {
383
+
font-size: 16px;
384
+
}
385
+
386
+
#postHeader {
387
+
padding: 10px;
388
+
height: auto;
389
+
min-height: 50px;
390
+
}
391
+
}
392
+
393
+
/* Scrollbar Styles */
394
+
::-webkit-scrollbar {
395
+
width: 0px;
396
+
background: transparent;
397
+
padding: 0;
398
+
margin: 0;
399
+
}
400
+
::-webkit-scrollbar-thumb {
401
+
background: transparent;
402
+
border-radius: 0;
403
+
}
404
+
::-webkit-scrollbar-track {
405
+
background: transparent;
406
+
border-radius: 0;
407
+
}
408
+
::-webkit-scrollbar-corner {
409
+
background: transparent;
410
+
border-radius: 0;
411
+
}
412
+
::-webkit-scrollbar-button {
413
+
background: transparent;
414
+
border-radius: 0;
415
+
}
416
+
417
+
* {
418
+
scrollbar-width: none;
419
+
scrollbar-color: transparent transparent;
420
+
-ms-overflow-style: none; /* IE and Edge */
421
+
-webkit-overflow-scrolling: touch;
422
+
-webkit-scrollbar: none; /* Safari */
423
+
}
+375
themes/express/theme.css
+375
themes/express/theme.css
···
1
+
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
2
+
3
+
:root {
4
+
/* Color overrides, edit to whatever you want */
5
+
--primary-h: 341; /* Hue */
6
+
--background-color: hsl(var(--primary-h), 62%, 30%);
7
+
--text-color: hsl(var(--primary-h), 69%, 18%);
8
+
--link-color: hsl(var(--primary-h), 100%, 20%);
9
+
--link-hover-color: hsl(var(--primary-h), 20%, 20%);
10
+
--border-color: hsl(var(--primary-h), 59%, 52%);
11
+
--content-background-color: hsl(var(--primary-h), 97%, 73%);
12
+
13
+
--header-background-color: hsl(var(--primary-h), 97%, 73%);
14
+
--indicator-inactive-color: #4a4a4a;
15
+
--indicator-active-color: var(--border-color);
16
+
}
17
+
18
+
a {
19
+
font-weight: 500;
20
+
color: var(--link-color);
21
+
text-decoration: inherit;
22
+
}
23
+
a:hover {
24
+
color: var(--link-hover-color);
25
+
text-decoration: underline;
26
+
}
27
+
28
+
body {
29
+
margin: 0;
30
+
display: flex;
31
+
place-items: center;
32
+
min-width: 320px;
33
+
min-height: 100vh;
34
+
background-color: var(--background-color);
35
+
font-family: "Share Tech Mono", monospace;
36
+
font-size: 24px;
37
+
color: var(--text-color);
38
+
border-color: var(--border-color);
39
+
overflow-wrap: break-word;
40
+
word-wrap: normal;
41
+
word-break: break-word;
42
+
hyphens: none;
43
+
}
44
+
45
+
h1 {
46
+
font-size: 3.2em;
47
+
line-height: 1.1;
48
+
}
49
+
50
+
#app {
51
+
max-width: 1400px;
52
+
width: 100%;
53
+
margin: 0;
54
+
padding: 0;
55
+
margin-left: auto;
56
+
margin-right: auto;
57
+
text-align: center;
58
+
}
59
+
60
+
/* Post Component */
61
+
a:hover {
62
+
text-decoration: underline;
63
+
}
64
+
#postContainer {
65
+
display: flex;
66
+
flex-direction: column;
67
+
border: 4px solid var(--border-color);
68
+
background-color: var(--background-color);
69
+
margin-bottom: 15px;
70
+
overflow-wrap: break-word;
71
+
box-shadow: var(--border-color) 10px 10px;
72
+
}
73
+
#postHeader {
74
+
display: flex;
75
+
flex-direction: row;
76
+
align-items: center;
77
+
justify-content: start;
78
+
background-color: var(--header-background-color);
79
+
padding: 0px 0px;
80
+
height: fit-content;
81
+
82
+
font-weight: bold;
83
+
overflow-wrap: break-word;
84
+
height: 64px;
85
+
}
86
+
#displayName {
87
+
display: block;
88
+
color: var(--text-color);
89
+
font-size: 1.2em;
90
+
padding: 0;
91
+
margin: 0;
92
+
overflow-wrap: normal;
93
+
word-wrap: break-word;
94
+
word-break: break-word;
95
+
text-overflow: ellipsis;
96
+
overflow: hidden;
97
+
white-space: nowrap;
98
+
width: 100%;
99
+
}
100
+
#handle {
101
+
display: block;
102
+
color: var(--border-color);
103
+
font-size: 0.8em;
104
+
padding: 0;
105
+
margin: 0;
106
+
}
107
+
108
+
#postLink {
109
+
color: var(--link-hover-color);
110
+
font-size: 0.8em;
111
+
padding: 0;
112
+
margin: 0;
113
+
}
114
+
#postContent {
115
+
display: flex;
116
+
text-align: start;
117
+
flex-direction: column;
118
+
padding: 10px;
119
+
background-color: var(--content-background-color);
120
+
color: var(--text-color);
121
+
overflow-wrap: break-word;
122
+
white-space: pre-line;
123
+
}
124
+
#replyingText {
125
+
font-size: 0.7em;
126
+
margin: 0;
127
+
padding: 0;
128
+
padding-bottom: 5px;
129
+
}
130
+
#quotingText {
131
+
font-size: 0.7em;
132
+
margin: 0;
133
+
padding: 0;
134
+
padding-bottom: 5px;
135
+
}
136
+
#postText {
137
+
margin: 0;
138
+
padding: 0;
139
+
overflow-wrap: break-word;
140
+
word-wrap: normal;
141
+
word-break: break-word;
142
+
hyphens: none;
143
+
}
144
+
#headerText {
145
+
margin-left: 10px;
146
+
font-size: 0.9em;
147
+
text-align: start;
148
+
word-break: break-word;
149
+
max-width: 80%;
150
+
max-height: 95%;
151
+
overflow: hidden;
152
+
align-self: flex-start;
153
+
margin-top: auto;
154
+
margin-bottom: auto;
155
+
}
156
+
#avatar {
157
+
height: 30px;
158
+
width: 30px;
159
+
overflow: hidden;
160
+
object-fit: cover;
161
+
}
162
+
#postContainer #avatar {
163
+
height: 60px;
164
+
width: 60px;
165
+
border-right: var(--border-color) 4px solid;
166
+
border-bottom: var(--border-color) 4px solid;
167
+
}
168
+
#carouselContainer {
169
+
position: relative;
170
+
width: 100%;
171
+
margin-top: 10px;
172
+
display: flex;
173
+
flex-direction: column;
174
+
align-items: center;
175
+
}
176
+
#carouselControls {
177
+
display: flex;
178
+
justify-content: space-between;
179
+
align-items: center;
180
+
width: 100%;
181
+
max-width: 500px;
182
+
margin-top: 5px;
183
+
}
184
+
#carouselIndicators {
185
+
display: flex;
186
+
gap: 5px;
187
+
}
188
+
.indicator {
189
+
width: 8px;
190
+
height: 8px;
191
+
background-color: var(--indicator-inactive-color);
192
+
}
193
+
.indicator.active {
194
+
background-color: var(--indicator-active-color);
195
+
}
196
+
#prevBtn,
197
+
#nextBtn {
198
+
background-color: rgba(31, 17, 69, 0.7);
199
+
color: var(--text-color);
200
+
border: 4px solid var(--border-color);
201
+
width: 30px;
202
+
height: 30px;
203
+
cursor: pointer;
204
+
display: flex;
205
+
align-items: center;
206
+
justify-content: center;
207
+
}
208
+
#prevBtn:disabled,
209
+
#nextBtn:disabled {
210
+
opacity: 0.5;
211
+
cursor: not-allowed;
212
+
}
213
+
#embedVideo {
214
+
width: 100%;
215
+
max-width: 500px;
216
+
margin-top: 10px;
217
+
align-self: center;
218
+
}
219
+
220
+
#embedImages {
221
+
min-width: min(100%, 500px);
222
+
max-width: min(100%, 500px);
223
+
max-height: 500px;
224
+
object-fit: contain;
225
+
226
+
margin: 0;
227
+
}
228
+
229
+
/* Account Component */
230
+
#accountContainer {
231
+
display: flex;
232
+
text-align: start;
233
+
align-items: center;
234
+
background-color: var(--header-background-color);
235
+
padding: 0px;
236
+
margin-bottom: 15px;
237
+
margin-right: 4px;
238
+
border: 4px solid var(--border-color);
239
+
box-shadow: var(--border-color) 10px 10px;
240
+
min-height: 30px;
241
+
}
242
+
#accountName {
243
+
margin-left: 10px;
244
+
font-size: 1em;
245
+
max-width: 80%;
246
+
247
+
/* replace overflow with ellipsis */
248
+
overflow: hidden;
249
+
text-overflow: ellipsis;
250
+
white-space: nowrap;
251
+
}
252
+
253
+
.no-avatar {
254
+
margin-left: 40px !important;
255
+
}
256
+
257
+
/* App.Svelte */
258
+
/* desktop style */
259
+
260
+
#Content {
261
+
display: flex;
262
+
/* split the screen in half, left for accounts, right for posts */
263
+
width: 100%;
264
+
height: 100%;
265
+
flex-direction: row;
266
+
justify-content: space-between;
267
+
align-items: center;
268
+
background-color: var(--background-color);
269
+
color: var(--text-color);
270
+
}
271
+
#Feed {
272
+
overflow-y: scroll;
273
+
width: 65%;
274
+
height: 100vh;
275
+
padding: 20px;
276
+
padding-bottom: 0;
277
+
padding-top: 0;
278
+
margin-top: 0;
279
+
margin-bottom: 0;
280
+
}
281
+
#spacer {
282
+
padding: 0;
283
+
margin: 0;
284
+
height: 10vh;
285
+
width: 100%;
286
+
}
287
+
#Account {
288
+
width: 35%;
289
+
display: flex;
290
+
flex-direction: column;
291
+
border: 4px solid var(--border-color);
292
+
background-color: var(--content-background-color);
293
+
box-shadow: var(--border-color) 10px 10px;
294
+
height: 80vh;
295
+
padding: 20px;
296
+
margin-left: 20px;
297
+
}
298
+
#accountsList {
299
+
display: flex;
300
+
flex-direction: column;
301
+
overflow-y: scroll;
302
+
height: 100%;
303
+
width: 100%;
304
+
padding: 0px;
305
+
margin: 0px;
306
+
}
307
+
308
+
#Header {
309
+
text-align: center;
310
+
font-size: 2em;
311
+
margin-bottom: 20px;
312
+
}
313
+
314
+
/* mobile style */
315
+
@media screen and (max-width: 600px) {
316
+
#Content {
317
+
flex-direction: column;
318
+
width: auto;
319
+
padding-left: 0px;
320
+
padding-right: 0px;
321
+
margin-top: 5%;
322
+
}
323
+
#Account {
324
+
width: 85%;
325
+
padding-left: 5%;
326
+
padding-right: 5%;
327
+
margin-bottom: 20px;
328
+
margin-left: 5%;
329
+
margin-right: 5%;
330
+
height: auto;
331
+
}
332
+
#Feed {
333
+
width: 95%;
334
+
margin: 0px;
335
+
margin-left: 10%;
336
+
margin-right: 10%;
337
+
padding: 0px;
338
+
overflow-y: visible;
339
+
}
340
+
341
+
#spacer {
342
+
height: 0;
343
+
}
344
+
}
345
+
346
+
::-webkit-scrollbar {
347
+
width: 0px;
348
+
background: transparent;
349
+
padding: 0;
350
+
margin: 0;
351
+
}
352
+
::-webkit-scrollbar-thumb {
353
+
background: transparent;
354
+
border-radius: 0;
355
+
}
356
+
::-webkit-scrollbar-track {
357
+
background: transparent;
358
+
border-radius: 0;
359
+
}
360
+
::-webkit-scrollbar-corner {
361
+
background: transparent;
362
+
border-radius: 0;
363
+
}
364
+
::-webkit-scrollbar-button {
365
+
background: transparent;
366
+
border-radius: 0;
367
+
}
368
+
369
+
* {
370
+
scrollbar-width: none;
371
+
scrollbar-color: transparent transparent;
372
+
-ms-overflow-style: none; /* IE and Edge */
373
+
-webkit-overflow-scrolling: touch;
374
+
-webkit-scrollbar: none; /* Safari */
375
+
}
+373
themes/witchcraft/theme.css
+373
themes/witchcraft/theme.css
···
1
+
@font-face {
2
+
font-family: "ProggyClean";
3
+
src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
4
+
}
5
+
6
+
:root {
7
+
/* Color overrides, edit to whatever you want */
8
+
--primary-h: 260; /* Hue */
9
+
10
+
--link-color: hsl(calc(var(--primary-h) - 30), 75%, 60%);
11
+
--link-hover-color: hsl(calc(var(--primary-h) - 30), 75%, 50%);
12
+
--background-color: hsl(var(--primary-h), 75%, 10%);
13
+
--header-background-color: hsl(var(--primary-h), 75%, 18%);
14
+
--content-background-color: hsl(var(--primary-h), 75%, 8%);
15
+
--text-color: #fff;
16
+
--border-color: hsl(var(--primary-h), 75%, 60%);
17
+
--indicator-inactive-color: #4a4a4a;
18
+
--indicator-active-color: var(--border-color);
19
+
}
20
+
21
+
22
+
a {
23
+
font-weight: 500;
24
+
color: var(--link-color);
25
+
text-decoration: inherit;
26
+
}
27
+
a:hover {
28
+
color: var(--link-hover-color);
29
+
text-decoration: underline;
30
+
}
31
+
32
+
body {
33
+
margin: 0;
34
+
display: flex;
35
+
place-items: center;
36
+
min-width: 320px;
37
+
min-height: 100vh;
38
+
background-color: var(--background-color);
39
+
font-family: "ProggyClean", monospace;
40
+
font-size: 24px;
41
+
color: var(--text-color);
42
+
border-color: var(--border-color);
43
+
overflow-wrap: break-word;
44
+
word-wrap: normal;
45
+
word-break: break-word;
46
+
hyphens: none;
47
+
}
48
+
49
+
h1 {
50
+
font-size: 3.2em;
51
+
line-height: 1.1;
52
+
}
53
+
54
+
#app {
55
+
max-width: 1400px;
56
+
width: 100%;
57
+
margin: 0;
58
+
padding: 0;
59
+
margin-left: auto;
60
+
margin-right: auto;
61
+
text-align: center;
62
+
}
63
+
64
+
/* Post Component */
65
+
a:hover {
66
+
text-decoration: underline;
67
+
}
68
+
#postContainer {
69
+
display: flex;
70
+
flex-direction: column;
71
+
border: 1px solid var(--border-color);
72
+
background-color: var(--background-color);
73
+
margin-bottom: 15px;
74
+
overflow-wrap: break-word;
75
+
}
76
+
#postHeader {
77
+
display: flex;
78
+
flex-direction: row;
79
+
align-items: center;
80
+
justify-content: start;
81
+
background-color: var(--header-background-color);
82
+
padding: 0px 0px;
83
+
height: fit-content;
84
+
border-bottom: 1px solid var(--border-color);
85
+
font-weight: bold;
86
+
overflow-wrap: break-word;
87
+
height: 60px;
88
+
}
89
+
#displayName {
90
+
display: block;
91
+
color: var(--text-color);
92
+
font-size: 1.2em;
93
+
padding: 0;
94
+
margin: 0;
95
+
overflow-wrap: normal;
96
+
word-wrap: break-word;
97
+
word-break: break-word;
98
+
text-overflow: ellipsis;
99
+
overflow: hidden;
100
+
white-space: nowrap;
101
+
width: 100%;
102
+
}
103
+
#handle {
104
+
display: block;
105
+
color: var(--border-color);
106
+
font-size: 0.8em;
107
+
padding: 0;
108
+
margin: 0;
109
+
}
110
+
111
+
#postLink {
112
+
color: var(--border-color);
113
+
font-size: 0.8em;
114
+
padding: 0;
115
+
margin: 0;
116
+
}
117
+
#postContent {
118
+
display: flex;
119
+
text-align: start;
120
+
flex-direction: column;
121
+
padding: 10px;
122
+
background-color: var(--content-background-color);
123
+
color: var(--text-color);
124
+
overflow-wrap: break-word;
125
+
white-space: pre-line;
126
+
}
127
+
#replyingText {
128
+
font-size: 0.7em;
129
+
margin: 0;
130
+
padding: 0;
131
+
padding-bottom: 5px;
132
+
}
133
+
#quotingText {
134
+
font-size: 0.7em;
135
+
margin: 0;
136
+
padding: 0;
137
+
padding-bottom: 5px;
138
+
}
139
+
#postText {
140
+
margin: 0;
141
+
padding: 0;
142
+
overflow-wrap: break-word;
143
+
word-wrap: normal;
144
+
word-break: break-word;
145
+
hyphens: none;
146
+
}
147
+
#headerText {
148
+
margin-left: 10px;
149
+
font-size: 0.9em;
150
+
text-align: start;
151
+
word-break: break-word;
152
+
max-width: 80%;
153
+
max-height: 95%;
154
+
overflow: hidden;
155
+
align-self: flex-start;
156
+
margin-top: auto;
157
+
margin-bottom: auto;
158
+
}
159
+
#avatar {
160
+
height: 60px;
161
+
width: 60px;
162
+
margin: 0px;
163
+
margin-left: 0px;
164
+
overflow: hidden;
165
+
object-fit: cover;
166
+
border-right: var(--border-color) 1px solid;
167
+
}
168
+
#carouselContainer {
169
+
position: relative;
170
+
width: 100%;
171
+
margin-top: 10px;
172
+
display: flex;
173
+
flex-direction: column;
174
+
align-items: center;
175
+
}
176
+
#carouselControls {
177
+
display: flex;
178
+
justify-content: space-between;
179
+
align-items: center;
180
+
width: 100%;
181
+
max-width: 500px;
182
+
margin-top: 5px;
183
+
}
184
+
#carouselIndicators {
185
+
display: flex;
186
+
gap: 5px;
187
+
}
188
+
.indicator {
189
+
width: 8px;
190
+
height: 8px;
191
+
background-color: var(--indicator-inactive-color);
192
+
}
193
+
.indicator.active {
194
+
background-color: var(--indicator-active-color);
195
+
}
196
+
#prevBtn,
197
+
#nextBtn {
198
+
background-color: rgba(31, 17, 69, 0.7);
199
+
color: var(--text-color);
200
+
border: 1px solid var(--border-color);
201
+
width: 30px;
202
+
height: 30px;
203
+
cursor: pointer;
204
+
display: flex;
205
+
align-items: center;
206
+
justify-content: center;
207
+
}
208
+
#prevBtn:disabled,
209
+
#nextBtn:disabled {
210
+
opacity: 0.5;
211
+
cursor: not-allowed;
212
+
}
213
+
#embedVideo {
214
+
width: 100%;
215
+
max-width: 500px;
216
+
margin-top: 10px;
217
+
align-self: center;
218
+
}
219
+
220
+
#embedImages {
221
+
min-width: min(100%, 500px);
222
+
max-width: min(100%, 500px);
223
+
max-height: 500px;
224
+
object-fit: contain;
225
+
226
+
margin: 0;
227
+
}
228
+
229
+
/* Account Component */
230
+
#accountContainer {
231
+
display: flex;
232
+
text-align: start;
233
+
align-items: center;
234
+
background-color: var(--background-color);
235
+
padding: 0px;
236
+
margin-bottom: 15px;
237
+
border: 1px solid var(--border-color);
238
+
min-height: 30px;
239
+
}
240
+
#accountName {
241
+
margin-left: 10px;
242
+
font-size: 1em;
243
+
max-width: 80%;
244
+
245
+
/* replace overflow with ellipsis */
246
+
overflow: hidden;
247
+
text-overflow: ellipsis;
248
+
white-space: nowrap;
249
+
}
250
+
251
+
252
+
.no-avatar {
253
+
margin-left: 70px !important;
254
+
}
255
+
256
+
/* App.Svelte */
257
+
/* desktop style */
258
+
259
+
#Content {
260
+
display: flex;
261
+
/* split the screen in half, left for accounts, right for posts */
262
+
width: 100%;
263
+
height: 100%;
264
+
flex-direction: row;
265
+
justify-content: space-between;
266
+
align-items: center;
267
+
background-color: var(--background-color);
268
+
color: var(--text-color);
269
+
}
270
+
#Feed {
271
+
overflow-y: scroll;
272
+
width: 65%;
273
+
height: 100vh;
274
+
padding: 20px;
275
+
padding-bottom: 0;
276
+
padding-top: 0;
277
+
margin-top: 0;
278
+
margin-bottom: 0;
279
+
}
280
+
#spacer {
281
+
padding: 0;
282
+
margin: 0;
283
+
height: 10vh;
284
+
width: 100%;
285
+
}
286
+
#Account {
287
+
width: 35%;
288
+
display: flex;
289
+
flex-direction: column;
290
+
border: 1px solid var(--border-color);
291
+
background-color: var(--content-background-color);
292
+
height: 80vh;
293
+
padding: 20px;
294
+
margin-left: 20px;
295
+
}
296
+
#accountsList {
297
+
display: flex;
298
+
flex-direction: column;
299
+
overflow-y: scroll;
300
+
height: 100%;
301
+
width: 100%;
302
+
padding: 0px;
303
+
margin: 0px;
304
+
}
305
+
306
+
#Header {
307
+
text-align: center;
308
+
font-size: 2em;
309
+
margin-bottom: 20px;
310
+
}
311
+
312
+
/* mobile style */
313
+
@media screen and (max-width: 600px) {
314
+
#Content {
315
+
flex-direction: column;
316
+
width: auto;
317
+
padding-left: 0px;
318
+
padding-right: 0px;
319
+
margin-top: 5%;
320
+
}
321
+
#Account {
322
+
width: 85%;
323
+
padding-left: 5%;
324
+
padding-right: 5%;
325
+
margin-bottom: 20px;
326
+
margin-left: 5%;
327
+
margin-right: 5%;
328
+
height: auto;
329
+
}
330
+
#Feed {
331
+
width: 95%;
332
+
margin: 0px;
333
+
margin-left: 10%;
334
+
margin-right: 10%;
335
+
padding: 0px;
336
+
overflow-y: visible;
337
+
}
338
+
339
+
#spacer {
340
+
height: 0;
341
+
}
342
+
}
343
+
344
+
::-webkit-scrollbar {
345
+
width: 0px;
346
+
background: transparent;
347
+
padding: 0;
348
+
margin: 0;
349
+
}
350
+
::-webkit-scrollbar-thumb {
351
+
background: transparent;
352
+
border-radius: 0;
353
+
}
354
+
::-webkit-scrollbar-track {
355
+
background: transparent;
356
+
border-radius: 0;
357
+
}
358
+
::-webkit-scrollbar-corner {
359
+
background: transparent;
360
+
border-radius: 0;
361
+
}
362
+
::-webkit-scrollbar-button {
363
+
background: transparent;
364
+
border-radius: 0;
365
+
}
366
+
367
+
* {
368
+
scrollbar-width: none;
369
+
scrollbar-color: transparent transparent;
370
+
-ms-overflow-style: none; /* IE and Edge */
371
+
-webkit-overflow-scrolling: touch;
372
+
-webkit-scrollbar: none; /* Safari */
373
+
}
+5
-4
theming.ts
+5
-4
theming.ts
···
5
5
// Replaces app.css with the contents of the file specified in the
6
6
// config file.
7
7
export const themePlugin = (): Plugin => {
8
-
const themeFile = Config.THEME;
9
-
console.log(`Using theme file: ${themeFile}`);
8
+
const themeFolder = Config.THEME;
9
+
console.log(`Using theme folder: ${themeFolder}`);
10
10
return {
11
11
name: 'theme-generator',
12
+
enforce: 'pre', // Ensure this plugin runs first
12
13
transform(code, id) {
13
14
if (id.endsWith('app.css')) {
14
15
// Read the theme file and replace the contents of app.css with it
15
16
// Needs full path to the file
16
-
const themeCode = Deno.readTextFileSync(Deno.cwd() + '/src/themes/' + themeFile);
17
+
const themeCode = Deno.readTextFileSync(Deno.cwd() + '/themes/' + themeFolder + '/theme.css');
17
18
// Replace the contents of app.css with the theme code
18
19
19
20
// and add a comment at the top
20
-
const themeComment = `/* Generated from ${themeFile} */\n`;
21
+
const themeComment = `/* Generated from ${themeFolder} */\n`;
21
22
const themeCodeWithComment = themeComment + themeCode;
22
23
// Return the theme code as the new contents of app.css
23
24
return {