xan.lol
forked from
atpota.to/flushes.app
The 1st decentralized social network for sharing when you're on the toilet. Post a "flush" today! Powered by the AT Protocol.
fix edit flush modal styles
+84
-63
+84
-63
src/components/EditFlushModal.module.css
+84
-63
src/components/EditFlushModal.module.css
···
4
4
left: 0;
5
5
right: 0;
6
6
bottom: 0;
7
-
background: rgba(0, 0, 0, 0.7);
7
+
background: rgba(135, 206, 250, 0.15);
8
+
backdrop-filter: blur(4px);
8
9
display: flex;
9
10
align-items: center;
10
11
justify-content: center;
···
13
14
}
14
15
15
16
.modalContent {
16
-
background: var(--card-background, #ffffff);
17
-
background-color: var(--card-background, #ffffff);
18
-
border: 2px solid var(--border);
19
-
padding: 30px;
17
+
background: var(--card-background);
18
+
background-color: var(--card-background);
19
+
border: 1px solid var(--tile-border);
20
+
border-radius: 8px;
21
+
padding: 2rem;
20
22
max-width: 600px;
21
23
width: 100%;
22
24
max-height: 90vh;
23
25
overflow-y: auto;
24
-
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
26
+
box-shadow: 0 10px 40px rgba(135, 206, 250, 0.2);
25
27
}
26
28
27
29
.modalHeader {
···
34
36
.modalHeader h2 {
35
37
margin: 0;
36
38
font-size: 1.5rem;
37
-
color: var(--foreground);
39
+
color: var(--title-color);
38
40
}
39
41
40
42
.closeButton {
···
42
44
border: none;
43
45
font-size: 1.5rem;
44
46
cursor: pointer;
45
-
color: var(--foreground);
47
+
color: var(--text-color);
46
48
padding: 5px 10px;
47
49
line-height: 1;
48
50
transition: color 0.2s;
49
51
}
50
52
51
53
.closeButton:hover {
52
-
color: var(--primary);
54
+
color: var(--primary-color);
53
55
}
54
56
55
57
.closeButton:disabled {
···
58
60
}
59
61
60
62
.error {
61
-
background: #fee;
62
-
border: 1px solid #fcc;
63
-
color: #c33;
64
-
padding: 12px;
63
+
background: var(--error-background);
64
+
border: 1px solid var(--error-color);
65
+
border-radius: 4px;
66
+
color: var(--error-color);
67
+
padding: 1rem;
65
68
margin-bottom: 20px;
66
69
font-size: 0.9rem;
67
70
}
···
73
76
.formGroup label {
74
77
display: block;
75
78
margin-bottom: 8px;
76
-
font-weight: 600;
77
-
color: var(--foreground);
79
+
font-weight: 500;
80
+
color: var(--text-color);
78
81
font-size: 0.95rem;
79
82
}
80
83
81
84
.textInput {
82
85
width: 100%;
83
-
padding: 12px;
86
+
padding: 0.8rem;
84
87
font-size: 1rem;
85
-
border: 2px solid var(--border);
86
-
background: var(--input-background, #f5f5f5);
87
-
background-color: var(--input-background, #f5f5f5);
88
-
color: var(--foreground, #000000);
88
+
border: 1px solid var(--input-border);
89
+
border-radius: 4px;
90
+
background: var(--input-background);
91
+
background-color: var(--input-background);
92
+
color: var(--text-color);
89
93
font-family: inherit;
90
94
transition: border-color 0.2s;
91
95
}
92
96
93
97
.textInput:focus {
94
98
outline: none;
99
+
border-color: var(--primary-color);
100
+
}
101
+
102
+
.textInput:focus {
103
+
outline: none;
95
104
border-color: var(--primary);
96
105
}
97
106
···
102
111
103
112
.charCount {
104
113
text-align: right;
105
-
font-size: 0.85rem;
106
-
color: var(--muted);
107
-
margin-top: 4px;
114
+
font-size: 0.8rem;
115
+
color: var(--timestamp-color);
116
+
margin-top: 0.3rem;
108
117
}
109
118
110
119
.emojiGrid {
111
120
display: grid;
112
121
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
113
-
gap: 8px;
122
+
gap: 0.5rem;
114
123
margin-top: 8px;
124
+
padding: 0.8rem;
125
+
border: 1px solid var(--input-border);
126
+
border-radius: 8px;
127
+
background-color: var(--emoji-grid-bg);
115
128
}
116
129
117
130
.emojiButton {
118
-
background: var(--input-background, #f5f5f5);
119
-
background-color: var(--input-background, #f5f5f5);
120
-
border: 2px solid var(--border);
121
-
padding: 12px;
122
-
font-size: 1.5rem;
131
+
background: var(--emoji-button-bg);
132
+
background-color: var(--emoji-button-bg);
133
+
border: 1px solid var(--emoji-button-border);
134
+
border-radius: 4px;
135
+
padding: 0.5rem;
136
+
font-size: 1.3rem;
123
137
cursor: pointer;
124
138
transition: all 0.2s;
125
139
display: flex;
126
140
align-items: center;
127
141
justify-content: center;
142
+
aspect-ratio: 1/1;
143
+
min-width: 2rem;
144
+
min-height: 2rem;
128
145
}
129
146
130
147
.emojiButton:hover {
131
-
border-color: var(--primary);
148
+
background: var(--button-hover);
132
149
transform: scale(1.05);
133
150
}
134
151
135
152
.emojiButton.selected {
136
-
background: var(--primary);
137
-
border-color: var(--primary);
153
+
background: rgba(91, 173, 240, 0.2);
154
+
border-color: var(--primary-color);
138
155
transform: scale(1.1);
139
156
}
140
157
···
160
177
161
178
.deleteButton {
162
179
background: transparent;
163
-
color: #c33;
164
-
border: 2px solid #c33;
165
-
padding: 10px 20px;
166
-
font-size: 0.95rem;
167
-
font-weight: 600;
180
+
color: #c62828;
181
+
border: 1px solid #c62828;
182
+
border-radius: 4px;
183
+
padding: 0.8rem 1.5rem;
184
+
font-size: 1rem;
185
+
font-weight: 500;
168
186
cursor: pointer;
169
187
transition: all 0.2s;
170
188
}
171
189
172
190
.deleteButton:hover {
173
-
background: #c33;
191
+
background: #c62828;
174
192
color: white;
175
193
}
176
194
···
180
198
}
181
199
182
200
.cancelButton {
183
-
background: transparent;
184
-
color: var(--foreground);
185
-
border: 2px solid var(--border);
186
-
padding: 10px 20px;
187
-
font-size: 0.95rem;
188
-
font-weight: 600;
201
+
background-color: var(--button-background);
202
+
color: var(--button-text);
203
+
border: 1px solid var(--input-border);
204
+
border-radius: 4px;
205
+
padding: 0.8rem 1.5rem;
206
+
font-size: 1rem;
207
+
font-weight: 500;
189
208
cursor: pointer;
190
209
transition: all 0.2s;
191
210
}
192
211
193
212
.cancelButton:hover {
194
-
background: var(--border);
213
+
background: var(--button-hover);
195
214
}
196
215
197
216
.cancelButton:disabled {
···
200
219
}
201
220
202
221
.saveButton {
203
-
background: var(--primary);
204
-
color: var(--primary-foreground);
205
-
border: 2px solid var(--primary);
206
-
padding: 10px 20px;
207
-
font-size: 0.95rem;
208
-
font-weight: 600;
222
+
background-color: var(--primary-color);
223
+
color: white;
224
+
border: none;
225
+
border-radius: 4px;
226
+
padding: 0.8rem 1.5rem;
227
+
font-size: 1rem;
228
+
font-weight: 500;
209
229
cursor: pointer;
210
230
transition: all 0.2s;
211
231
}
212
232
213
-
.saveButton:hover {
214
-
opacity: 0.9;
215
-
transform: translateY(-1px);
233
+
.saveButton:hover:not(:disabled) {
234
+
background-color: var(--secondary-color);
235
+
transform: translateY(-2px);
216
236
}
217
237
218
238
.saveButton:disabled {
219
-
opacity: 0.5;
239
+
background-color: var(--button-disabled);
240
+
color: var(--button-disabled-text);
220
241
cursor: not-allowed;
221
242
transform: none;
222
243
}
···
227
248
228
249
.deleteConfirmation p {
229
250
margin: 0 0 16px 0;
230
-
color: var(--foreground);
251
+
color: var(--text-color);
231
252
font-size: 0.95rem;
232
253
}
233
254
···
238
259
}
239
260
240
261
.confirmDeleteButton {
241
-
background: #c33;
262
+
background: #c62828;
242
263
color: white;
243
-
border: 2px solid #c33;
244
-
padding: 10px 20px;
245
-
font-size: 0.95rem;
246
-
font-weight: 600;
264
+
border: none;
265
+
border-radius: 4px;
266
+
padding: 0.8rem 1.5rem;
267
+
font-size: 1rem;
268
+
font-weight: 500;
247
269
cursor: pointer;
248
270
transition: all 0.2s;
249
271
}
250
272
251
273
.confirmDeleteButton:hover {
252
-
background: #a22;
253
-
border-color: #a22;
274
+
background: #a02020;
254
275
}
255
276
256
277
.confirmDeleteButton:disabled {