atpota.to
The 1st decentralized social network for sharing when you're on the toilet. Post a "flush" today! Powered by the AT Protocol.
1.container {
2 max-width: 800px;
3 margin: 0 auto;
4 padding: 2rem 1rem;
5}
6
7.header {
8 display: flex;
9 justify-content: space-between;
10 align-items: center;
11 margin-bottom: 2rem;
12 flex-wrap: wrap;
13 gap: 1rem;
14}
15
16.header h1 {
17 color: var(--primary-color);
18 margin: 0;
19 font-weight: bold;
20}
21
22.userInfo {
23 display: flex;
24 flex-direction: column;
25 align-items: flex-end;
26 gap: 0.5rem;
27}
28
29.actions {
30 display: flex;
31 gap: 0.5rem;
32}
33
34.feedButton {
35 background-color: var(--primary-color);
36 color: white;
37 border: none;
38 padding: 0.3rem 0.8rem;
39 font-size: 0.9rem;
40 border-radius: 4px;
41 cursor: pointer;
42}
43
44.feedButton:hover {
45 background-color: var(--secondary-color);
46}
47
48.logoutButton {
49 background-color: transparent;
50 color: var(--primary-color);
51 border: 1px solid var(--primary-color);
52 padding: 0.3rem 0.8rem;
53 font-size: 0.9rem;
54 border-radius: 4px;
55 cursor: pointer;
56}
57
58.logoutButton:hover {
59 background-color: rgba(91, 173, 240, 0.1);
60}
61
62.card {
63 background: white;
64 border-radius: 8px;
65 padding: 2rem;
66}
67
68.description {
69 color: #666;
70 margin: 1rem 0;
71 line-height: 1.5;
72}
73
74.code {
75 background: #f5f5f5;
76 padding: 0.2rem 0.4rem;
77 border-radius: 3px;
78 font-family: monospace;
79}
80
81.error {
82 background-color: rgba(255, 82, 82, 0.1);
83 color: var(--error-color);
84 padding: 1rem;
85 border-radius: 4px;
86 margin: 1rem 0;
87}
88
89.success {
90 background-color: rgba(76, 175, 80, 0.1);
91 color: #4caf50;
92 padding: 1rem;
93 border-radius: 4px;
94 margin: 1rem 0;
95}
96
97.form {
98 margin-top: 1.5rem;
99}
100
101.formGroup {
102 margin-bottom: 1.5rem;
103}
104
105.statusUpdateContainer {
106 overflow: hidden;
107 transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease;
108 max-height: 0;
109 opacity: 0;
110 transform: translateY(-20px);
111 margin-bottom: 0;
112}
113
114.statusUpdateOpen {
115 max-height: 1000px; /* Large enough to contain all content */
116 opacity: 1;
117 transform: translateY(0);
118 margin-bottom: 2rem;
119}
120
121.toggleButton {
122 background-color: var(--primary-color);
123 color: white;
124 border: none;
125 border-radius: 4px;
126 padding: 0.5rem 1rem;
127 margin-bottom: 1rem;
128 cursor: pointer;
129 display: flex;
130 align-items: center;
131 gap: 0.5rem;
132 transition: background-color 0.2s, transform 0.2s;
133}
134
135.toggleButton:hover {
136 background-color: var(--secondary-color);
137 transform: translateY(-2px);
138}
139
140.toggleButton svg {
141 width: 16px;
142 height: 16px;
143 transition: transform 0.3s ease;
144}
145
146.toggleButtonActive svg {
147 transform: rotate(180deg);
148}
149
150.formGroup label {
151 display: block;
152 margin-bottom: 0.5rem;
153 font-weight: 500;
154}
155
156.input {
157 width: 100%;
158 padding: 0.8rem;
159 border: 1px solid #ddd;
160 border-radius: 4px;
161 font-size: 1rem;
162}
163
164.input:focus {
165 border-color: var(--primary-color);
166 outline: none;
167}
168
169.charCount {
170 text-align: right;
171 color: #666;
172 font-size: 0.8rem;
173 margin-top: 0.3rem;
174}
175
176.emojiGrid {
177 display: grid;
178 grid-template-columns: repeat(8, 1fr);
179 gap: 0.5rem;
180}
181
182@media (max-width: 600px) {
183 .emojiGrid {
184 grid-template-columns: repeat(6, 1fr);
185 }
186}
187
188.emojiButton {
189 background: #f5f5f5;
190 border: 1px solid #ddd;
191 border-radius: 4px;
192 font-size: 1.5rem;
193 aspect-ratio: 1/1;
194 display: flex;
195 align-items: center;
196 justify-content: center;
197 cursor: pointer;
198 transition: all 0.2s;
199}
200
201.emojiButton:hover {
202 background: #eaeaea;
203 transform: scale(1.05);
204}
205
206.selectedEmoji {
207 background: rgba(91, 173, 240, 0.2);
208 border-color: var(--primary-color);
209}
210
211.preview {
212 background: #f9f9f9;
213 padding: 1rem;
214 border-radius: 4px;
215 margin-bottom: 1.5rem;
216}
217
218.previewTitle {
219 font-weight: 500;
220 margin-bottom: 0.5rem;
221 color: #666;
222}
223
224.previewContent {
225 display: flex;
226 align-items: center;
227 gap: 0.5rem;
228}
229
230.previewEmoji {
231 font-size: 1.5rem;
232}
233
234.submitButton {
235 background-color: var(--primary-color);
236 color: white;
237 border: none;
238 border-radius: 4px;
239 padding: 0.8rem 1.5rem;
240 font-size: 1.1rem;
241 font-weight: 500;
242 cursor: pointer;
243 transition: all 0.2s;
244 width: 100%;
245}
246
247.submitButton:hover:not(:disabled) {
248 background-color: var(--secondary-color);
249 transform: translateY(-2px);
250}
251
252.submitButton:disabled {
253 background-color: #cccccc;
254 cursor: not-allowed;
255}
256
257/* Feed styles */
258.feedSection {
259 margin-top: 1rem;
260}
261
262.feedTitle {
263 display: flex;
264 justify-content: space-between;
265 align-items: center;
266 margin-bottom: 1rem;
267 padding-bottom: 0.5rem;
268 border-bottom: 1px solid #e1e1e1;
269}
270
271.backButton {
272 display: block;
273 margin-top: 0.5rem;
274 background: transparent;
275 color: var(--primary-color);
276 border: 1px solid #ddd;
277 padding: 0.3rem 0.8rem;
278 border-radius: 4px;
279 font-size: 0.9rem;
280}
281
282.feedList {
283 display: flex;
284 flex-direction: column;
285 gap: 1rem;
286 margin-top: 1rem;
287}
288
289.feedItem {
290 background-color: white;
291 border: 1px solid #e1e1e1;
292 border-radius: 8px;
293 padding: 1rem;
294 transition: transform 0.2s;
295}
296
297.feedItem:hover {
298 transform: translateY(-2px);
299}
300
301.feedHeader {
302 display: none; /* Hide the header since we're moving timestamps to the right */
303}
304
305.authorLink {
306 color: var(--primary-color);
307 font-weight: 600;
308 text-decoration: none;
309}
310
311.authorLink:hover {
312 text-decoration: underline;
313}
314
315.timestamp {
316 font-size: 0.85rem;
317 color: #888;
318}
319
320.content {
321 display: flex;
322 align-items: center;
323 gap: 0.75rem;
324 justify-content: space-between;
325 width: 100%;
326}
327
328.contentLeft {
329 display: flex;
330 align-items: center;
331 gap: 0.75rem;
332}
333
334.emoji {
335 font-size: 1.5rem;
336}
337
338@keyframes slideIn {
339 from {
340 opacity: 0;
341 transform: translateY(-20px);
342 }
343 to {
344 opacity: 1;
345 transform: translateY(0);
346 }
347}
348
349.newFeedItem {
350 animation: slideIn 0.5s ease-out;
351}
352
353.text {
354 font-size: 1.1rem;
355 line-height: 1.4;
356 color: #333;
357}
358
359.loadingContainer {
360 display: flex;
361 justify-content: center;
362 align-items: center;
363 padding: 2rem;
364 text-align: center;
365}
366
367.loader {
368 border: 4px solid #f3f3f3;
369 border-top: 4px solid var(--primary-color);
370 border-radius: 50%;
371 width: 24px;
372 height: 24px;
373 animation: spin 1s linear infinite;
374 margin-right: 0.75rem;
375 display: inline-block;
376}
377
378@keyframes spin {
379 0% { transform: rotate(0deg); }
380 100% { transform: rotate(360deg); }
381}