This repository has no description
tweaks to styles
author
damedotblog
date
(Mar 9, 2025, 1:55 PM -0400)
commit
83189dc6
83189dc6f7ddfd7ee3c57df7456c125c5489d629
parent
dfe0c57a
dfe0c57a3a7c46ba9ce08f0619330cc9df3d949d
+57
-50
+19
-16
app/src/app/feed/feed.module.css
+19
-16
app/src/app/feed/feed.module.css
···
11
11
12
12
.subtitle {
13
13
font-size: 1.1rem;
14
-
color: #666;
14
+
color: var(--text-color);
15
15
margin-top: 0.5rem;
16
16
}
17
17
···
37
37
}
38
38
39
39
.refreshButton:disabled {
40
-
background-color: #ccc;
40
+
background-color: var(--button-disabled);
41
+
color: var(--button-disabled-text);
41
42
cursor: not-allowed;
42
43
}
43
44
44
45
.homeLink {
45
46
display: inline-block;
46
-
background-color: #f1f1f1;
47
-
color: #333;
47
+
background-color: var(--button-background);
48
+
color: var(--button-text);
48
49
text-decoration: none;
49
50
border-radius: 4px;
50
51
padding: 0.5rem 1rem;
51
52
font-size: 1rem;
52
-
transition: background-color 0.2s;
53
+
transition: all 0.2s;
54
+
border: 1px solid var(--input-border);
53
55
}
54
56
55
57
.homeLink:hover {
56
-
background-color: #e1e1e1;
58
+
background-color: var(--button-hover);
57
59
}
58
60
59
61
.error {
60
-
background-color: #ffebee;
61
-
color: #c62828;
62
+
background-color: var(--error-background);
63
+
color: var(--error-color);
62
64
padding: 1rem;
63
65
border-radius: 4px;
64
66
margin-bottom: 1rem;
65
67
}
66
68
67
69
.notice {
68
-
background-color: #fff3e0;
69
-
color: #e65100;
70
+
background-color: var(--notice-background);
71
+
color: var(--notice-text);
70
72
padding: 1rem;
71
73
border-radius: 4px;
72
74
margin-bottom: 1.5rem;
73
75
margin-top: 0;
74
-
border: 2px solid #ff9800;
76
+
border: 2px solid var(--notice-border);
75
77
font-size: 1.1rem;
76
78
line-height: 1.4;
77
79
text-align: center;
78
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
80
+
box-shadow: 0 2px 4px var(--shadow-color);
79
81
font-weight: 500;
80
82
}
81
83
···
83
85
margin-top: 0.8rem;
84
86
font-size: 0.95rem;
85
87
padding-top: 0.5rem;
86
-
border-top: 1px dashed rgba(255, 152, 0, 0.3);
88
+
border-top: 1px dashed var(--notice-border);
89
+
opacity: 0.8;
87
90
}
88
91
89
92
.noticeLink {
90
-
color: #e65100;
93
+
color: var(--notice-text);
91
94
font-weight: 600;
92
95
text-decoration: underline;
93
96
transition: color 0.2s;
94
97
}
95
98
96
99
.noticeLink:hover {
97
-
color: #f57c00;
100
+
color: var(--primary-color);
98
101
}
99
102
100
103
.loadingContainer {
···
160
163
161
164
.timestamp {
162
165
font-size: 0.85rem;
163
-
color: #888;
166
+
color: var(--timestamp-color);
164
167
}
165
168
166
169
.content {
+38
-32
app/src/app/page.module.css
+38
-32
app/src/app/page.module.css
···
29
29
30
30
.subtitle {
31
31
font-size: 1rem;
32
-
color: #888;
32
+
color: var(--timestamp-color);
33
33
margin: 0 0 0.5rem 0;
34
34
font-weight: normal;
35
35
word-wrap: break-word;
···
37
37
38
38
.description {
39
39
font-size: 1.1rem;
40
-
color: #666;
40
+
color: var(--text-color);
41
41
margin: 0;
42
42
line-height: 1.5;
43
43
word-wrap: break-word;
···
47
47
display: block;
48
48
font-size: 0.85rem;
49
49
margin-top: 0.5rem;
50
-
color: #888;
50
+
color: var(--timestamp-color);
51
51
}
52
52
53
53
.kofiLink {
···
94
94
}
95
95
96
96
.userInfo {
97
-
color: #555;
97
+
color: var(--text-color);
98
98
font-weight: 500;
99
99
text-decoration: none;
100
100
transition: color 0.2s;
···
117
117
}
118
118
119
119
.logoutButton:hover {
120
-
background-color: rgba(91, 173, 240, 0.1);
120
+
background-color: var(--button-hover);
121
121
}
122
122
123
123
.loginButton {
···
135
135
.loginButton:hover {
136
136
background-color: var(--secondary-color);
137
137
transform: translateY(-2px);
138
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
138
+
box-shadow: 0 4px 8px var(--shadow-color);
139
139
}
140
140
141
141
/* Status form styles */
···
215
215
display: none; /* Hide since we don't need to scroll anymore */
216
216
margin: 0 0 0.5rem 0;
217
217
font-size: 0.85rem;
218
-
color: #666;
218
+
color: var(--timestamp-color);
219
219
font-style: italic;
220
220
}
221
221
222
222
.input {
223
223
width: 100%;
224
224
padding: 0.8rem;
225
-
border: 1px solid #ddd;
225
+
border: 1px solid var(--input-border);
226
226
border-radius: 4px;
227
227
font-size: 1rem;
228
+
background-color: var(--input-background);
229
+
color: var(--text-color);
228
230
}
229
231
230
232
.input:focus {
···
238
240
align-items: center;
239
241
width: 100%;
240
242
position: relative;
241
-
border: 1px solid #ddd;
243
+
border: 1px solid var(--input-border);
242
244
border-radius: 4px;
243
-
background-color: white;
245
+
background-color: var(--input-background);
244
246
}
245
247
246
248
.inputWrapper:focus-within {
···
251
253
.inputPrefix {
252
254
padding: 0.8rem 0.8rem 0.8rem 0.8rem;
253
255
font-size: 1rem;
254
-
color: #333;
256
+
color: var(--text-color);
255
257
font-weight: 500;
256
-
background-color: #f8f8f8;
257
-
border-right: 1px solid #eee;
258
+
background-color: var(--input-prefix-background);
259
+
border-right: 1px solid var(--input-border);
258
260
border-radius: 4px 0 0 4px;
259
261
}
260
262
···
265
267
font-size: 1rem;
266
268
background: transparent;
267
269
border-radius: 0 4px 4px 0;
270
+
color: var(--text-color);
268
271
}
269
272
270
273
.inputWithPrefix:focus {
···
274
277
275
278
.charCount {
276
279
text-align: right;
277
-
color: #666;
280
+
color: var(--timestamp-color);
278
281
font-size: 0.8rem;
279
282
margin-top: 0.3rem;
280
283
}
···
284
287
grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr));
285
288
gap: 0.5rem;
286
289
padding: 0.8rem;
287
-
border: 1px solid #eee;
290
+
border: 1px solid var(--input-border);
288
291
border-radius: 8px;
289
-
background-color: #fcfcfc;
292
+
background-color: var(--emoji-grid-bg);
290
293
max-height: none; /* Remove height restriction */
291
294
overflow-y: visible; /* No need for scrolling */
292
295
}
···
308
311
}
309
312
310
313
.emojiButton {
311
-
background: #f5f5f5;
312
-
border: 1px solid #ddd;
314
+
background: var(--emoji-button-bg);
315
+
border: 1px solid var(--emoji-button-border);
313
316
border-radius: 4px;
314
317
font-size: 1.3rem;
315
318
aspect-ratio: 1/1;
···
333
336
}
334
337
335
338
.emojiButton:hover {
336
-
background: #eaeaea;
339
+
background: var(--button-hover);
337
340
transform: scale(1.05);
338
341
}
339
342
···
343
346
}
344
347
345
348
.preview {
346
-
background: #f9f9f9;
349
+
background: var(--background-color);
347
350
padding: 1rem;
348
351
border-radius: 4px;
349
352
margin-bottom: 1.5rem;
353
+
border: 1px solid var(--tile-border);
350
354
}
351
355
352
356
.previewTitle {
353
357
font-weight: 500;
354
358
margin-bottom: 0.5rem;
355
-
color: #666;
359
+
color: var(--text-color);
356
360
}
357
361
358
362
.previewContent {
···
381
385
.submitButton:hover:not(:disabled) {
382
386
background-color: var(--secondary-color);
383
387
transform: translateY(-2px);
384
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
388
+
box-shadow: 0 4px 8px var(--shadow-color);
385
389
}
386
390
387
391
.submitButton:disabled {
388
-
background-color: #cccccc;
392
+
background-color: var(--button-disabled);
393
+
color: var(--button-disabled-text);
389
394
cursor: not-allowed;
390
395
}
391
396
392
397
.success {
393
-
background-color: rgba(76, 175, 80, 0.1);
394
-
color: #4caf50;
398
+
background-color: var(--success-background);
399
+
color: var(--success-text);
395
400
padding: 1rem;
396
401
border-radius: 4px;
397
402
margin: 1rem 0;
···
423
428
align-items: center;
424
429
margin-bottom: 1rem;
425
430
padding-bottom: 0.5rem;
426
-
border-bottom: 1px solid #e1e1e1;
431
+
border-bottom: 1px solid var(--tile-border);
427
432
}
428
433
429
434
.feedHeaderLeft {
···
440
445
441
446
.feedSubheader {
442
447
font-size: 0.9rem;
443
-
color: #666;
448
+
color: var(--timestamp-color);
444
449
margin: 0;
445
450
display: flex;
446
451
flex-direction: column;
···
477
482
}
478
483
479
484
.refreshButton:disabled {
480
-
background-color: #ccc;
485
+
background-color: var(--button-disabled);
486
+
color: var(--button-disabled-text);
481
487
cursor: not-allowed;
482
488
}
483
489
···
507
513
padding: 0.75rem;
508
514
margin-bottom: 0.5rem;
509
515
border-radius: 6px;
510
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
516
+
box-shadow: 0 1px 3px var(--shadow-color);
511
517
}
512
518
513
519
.feedList {
···
516
522
517
523
.feedItem:hover {
518
524
transform: none;
519
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
525
+
box-shadow: 0 1px 3px var(--shadow-color);
520
526
}
521
527
}
522
528
···
569
575
.text {
570
576
font-size: 1.1rem;
571
577
line-height: 1.4;
572
-
color: #333;
578
+
color: var(--text-color);
573
579
flex: 1;
574
580
min-width: 0;
575
581
word-wrap: break-word;
···
579
585
580
586
.timestamp {
581
587
font-size: 0.85rem;
582
-
color: #888;
588
+
color: var(--timestamp-color);
583
589
margin-left: auto;
584
590
white-space: nowrap;
585
591
}
-2
app/src/app/profile/[handle]/profile.module.css
-2
app/src/app/profile/[handle]/profile.module.css
···
90
90
margin-bottom: 1.5rem;
91
91
box-shadow: 0 2px 5px var(--shadow-color);
92
92
border: 1px solid var(--tile-border);
93
-
background-image: repeating-linear-gradient(0deg, var(--tile-border), var(--tile-border) 1px, transparent 1px, transparent 20px);
94
93
}
95
94
96
95
.statsHeader {
···
274
273
padding: 1rem;
275
274
box-shadow: 0 2px 5px var(--shadow-color);
276
275
transition: transform 0.2s, box-shadow 0.2s;
277
-
background-image: repeating-linear-gradient(0deg, var(--tile-border), var(--tile-border) 1px, transparent 1px, transparent 20px);
278
276
}
279
277
280
278
.feedItem:hover {