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.
1.modalBackdrop {
2 position: fixed;
3 top: 0;
4 left: 0;
5 right: 0;
6 bottom: 0;
7 background: rgba(135, 206, 250, 0.74);
8 backdrop-filter: blur(4px);
9 display: flex;
10 align-items: center;
11 justify-content: center;
12 z-index: 1000;
13 padding: 20px;
14}
15
16.modalContent {
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;
22 max-width: 600px;
23 width: 100%;
24 max-height: 90vh;
25 overflow-y: auto;
26 box-shadow: 0 10px 40px rgba(135, 206, 250, 0.2);
27}
28
29.modalHeader {
30 display: flex;
31 justify-content: space-between;
32 align-items: center;
33 margin-bottom: 20px;
34}
35
36.modalHeader h2 {
37 margin: 0;
38 font-size: 1.5rem;
39 color: var(--title-color);
40}
41
42.closeButton {
43 background: none;
44 border: none;
45 font-size: 1.5rem;
46 cursor: pointer;
47 color: var(--text-color);
48 padding: 5px 10px;
49 line-height: 1;
50 transition: color 0.2s;
51}
52
53.closeButton:hover {
54 color: var(--primary-color);
55}
56
57.closeButton:disabled {
58 opacity: 0.5;
59 cursor: not-allowed;
60}
61
62.error {
63 background: var(--error-background);
64 border: 1px solid var(--error-color);
65 border-radius: 4px;
66 color: var(--error-color);
67 padding: 1rem;
68 margin-bottom: 20px;
69 font-size: 0.9rem;
70}
71
72.formGroup {
73 margin-bottom: 24px;
74}
75
76.formGroup label {
77 display: block;
78 margin-bottom: 8px;
79 font-weight: 500;
80 color: var(--text-color);
81 font-size: 0.95rem;
82}
83
84.textInput {
85 width: 100%;
86 padding: 0.8rem;
87 font-size: 1rem;
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);
93 font-family: inherit;
94 transition: border-color 0.2s;
95}
96
97.textInput:focus {
98 outline: none;
99 border-color: var(--primary-color);
100}
101
102.inputWrapper {
103 display: flex;
104 align-items: center;
105 width: 100%;
106 position: relative;
107 border: 1px solid var(--input-border);
108 border-radius: 4px;
109 background-color: var(--input-background);
110}
111
112.inputWrapper:focus-within {
113 border-color: var(--primary-color);
114}
115
116.inputPrefix {
117 padding: 0.8rem 0.8rem 0.8rem 0.8rem;
118 font-size: 1rem;
119 color: var(--text-color);
120 font-weight: 500;
121 background-color: var(--input-prefix-background);
122 border-right: 1px solid var(--input-border);
123 border-radius: 4px 0 0 4px;
124}
125
126.inputWithPrefix {
127 flex: 1;
128 border: none;
129 padding: 0.8rem;
130 font-size: 1rem;
131 background: transparent;
132 border-radius: 0 4px 4px 0;
133 color: var(--text-color);
134 font-family: inherit;
135}
136
137.inputWithPrefix:focus {
138 outline: none;
139 box-shadow: none;
140}
141
142.textInput:focus {
143 outline: none;
144 border-color: var(--primary);
145}
146
147.textInput:disabled {
148 opacity: 0.6;
149 cursor: not-allowed;
150}
151
152.charCount {
153 text-align: right;
154 font-size: 0.8rem;
155 color: var(--timestamp-color);
156 margin-top: 0.3rem;
157}
158
159.emojiGrid {
160 display: grid;
161 grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
162 gap: 0.5rem;
163 margin-top: 8px;
164 padding: 0.8rem;
165 border: 1px solid var(--input-border);
166 border-radius: 8px;
167 background-color: var(--emoji-grid-bg);
168}
169
170.emojiButton {
171 background: var(--emoji-button-bg);
172 background-color: var(--emoji-button-bg);
173 border: 1px solid var(--emoji-button-border);
174 border-radius: 4px;
175 padding: 0.5rem;
176 font-size: 1.3rem;
177 cursor: pointer;
178 transition: all 0.2s;
179 display: flex;
180 align-items: center;
181 justify-content: center;
182 aspect-ratio: 1/1;
183 min-width: 2rem;
184 min-height: 2rem;
185}
186
187.emojiButton:hover {
188 background: var(--button-hover);
189 transform: scale(1.05);
190}
191
192.emojiButton.selected {
193 background: rgba(91, 173, 240, 0.2);
194 border-color: var(--primary-color);
195 transform: scale(1.1);
196}
197
198.emojiButton:disabled {
199 opacity: 0.5;
200 cursor: not-allowed;
201}
202
203.modalActions {
204 display: flex;
205 justify-content: space-between;
206 align-items: center;
207 gap: 12px;
208 margin-top: 24px;
209 padding-top: 24px;
210 border-top: 1px solid var(--border);
211}
212
213.rightActions {
214 display: flex;
215 gap: 12px;
216}
217
218.deleteButton {
219 background: transparent;
220 color: #c62828;
221 border: 1px solid #c62828;
222 border-radius: 4px;
223 padding: 0.8rem 1.5rem;
224 font-size: 1rem;
225 font-weight: 500;
226 cursor: pointer;
227 transition: all 0.2s;
228}
229
230.deleteButton:hover {
231 background: #c62828;
232 color: white;
233}
234
235.deleteButton:disabled {
236 opacity: 0.5;
237 cursor: not-allowed;
238}
239
240.cancelButton {
241 background-color: var(--button-background);
242 color: var(--button-text);
243 border: 1px solid var(--input-border);
244 border-radius: 4px;
245 padding: 0.8rem 1.5rem;
246 font-size: 1rem;
247 font-weight: 500;
248 cursor: pointer;
249 transition: all 0.2s;
250}
251
252.cancelButton:hover {
253 background: var(--button-hover);
254}
255
256.cancelButton:disabled {
257 opacity: 0.5;
258 cursor: not-allowed;
259}
260
261.saveButton {
262 background-color: var(--primary-color);
263 color: white;
264 border: none;
265 border-radius: 4px;
266 padding: 0.8rem 1.5rem;
267 font-size: 1rem;
268 font-weight: 500;
269 cursor: pointer;
270 transition: all 0.2s;
271}
272
273.saveButton:hover:not(:disabled) {
274 background-color: var(--secondary-color);
275 transform: translateY(-2px);
276}
277
278.saveButton:disabled {
279 background-color: var(--button-disabled);
280 color: var(--button-disabled-text);
281 cursor: not-allowed;
282 transform: none;
283}
284
285.deleteConfirmation {
286 width: 100%;
287}
288
289.deleteConfirmation p {
290 margin: 0 0 16px 0;
291 color: var(--text-color);
292 font-size: 0.95rem;
293}
294
295.confirmButtons {
296 display: flex;
297 gap: 12px;
298 justify-content: flex-end;
299}
300
301.confirmDeleteButton {
302 background: #c62828;
303 color: white;
304 border: none;
305 border-radius: 4px;
306 padding: 0.8rem 1.5rem;
307 font-size: 1rem;
308 font-weight: 500;
309 cursor: pointer;
310 transition: all 0.2s;
311}
312
313.confirmDeleteButton:hover {
314 background: #a02020;
315}
316
317.confirmDeleteButton:disabled {
318 opacity: 0.5;
319 cursor: not-allowed;
320}
321
322@media (max-width: 640px) {
323 .modalContent {
324 padding: 20px;
325 max-height: 95vh;
326 }
327
328 .modalActions {
329 flex-direction: column;
330 align-items: stretch;
331 }
332
333 .rightActions {
334 flex-direction: column;
335 }
336
337 .deleteButton,
338 .cancelButton,
339 .saveButton,
340 .confirmDeleteButton {
341 width: 100%;
342 }
343}
344