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.container {
2 max-width: 800px;
3 margin: 0 auto;
4 padding: 2rem 1rem;
5}
6
7.header {
8 text-align: center;
9 margin-bottom: 2rem;
10}
11
12.subtitle {
13 font-size: 1.1rem;
14 color: var(--text-color);
15 margin-top: 0.5rem;
16}
17
18.controls {
19 display: flex;
20 justify-content: space-between;
21 margin-bottom: 2rem;
22}
23
24.refreshButton {
25 background-color: var(--primary-color);
26 color: white;
27 border: none;
28 border-radius: 4px;
29 padding: 0.5rem 1rem;
30 font-size: 1rem;
31 cursor: pointer;
32 transition: background-color 0.2s;
33}
34
35.refreshButton:hover {
36 background-color: var(--secondary-color);
37}
38
39.refreshButton:disabled {
40 background-color: var(--button-disabled);
41 color: var(--button-disabled-text);
42 cursor: not-allowed;
43}
44
45.homeLink {
46 display: inline-block;
47 background-color: var(--button-background);
48 color: var(--button-text);
49 text-decoration: none;
50 border-radius: 4px;
51 padding: 0.5rem 1rem;
52 font-size: 1rem;
53 transition: all 0.2s;
54 border: 1px solid var(--input-border);
55}
56
57.homeLink:hover {
58 background-color: var(--button-hover);
59}
60
61.error {
62 background-color: var(--error-background);
63 color: var(--error-color);
64 padding: 1rem;
65 border-radius: 4px;
66 margin-bottom: 1rem;
67}
68
69.notice {
70 background-color: var(--notice-background);
71 color: var(--notice-text);
72 padding: 1rem;
73 border-radius: 4px;
74 margin-bottom: 1.5rem;
75 margin-top: 0;
76 border: 2px solid var(--notice-border);
77 font-size: 1.1rem;
78 line-height: 1.4;
79 text-align: center;
80 font-weight: 500;
81}
82
83.noticePersonal {
84 margin-top: 0.8rem;
85 font-size: 0.95rem;
86 padding-top: 0.5rem;
87 border-top: 1px dashed var(--notice-border);
88 opacity: 0.8;
89}
90
91.noticeLink {
92 color: var(--notice-text);
93 font-weight: 600;
94 text-decoration: underline;
95 transition: color 0.2s;
96}
97
98.noticeLink:hover {
99 color: var(--primary-color);
100}
101
102.loadingContainer {
103 display: flex;
104 flex-direction: column;
105 align-items: center;
106 justify-content: center;
107 padding: 2rem;
108}
109
110.loader {
111 border: 4px solid var(--background-color);
112 border-top: 4px solid var(--primary-color);
113 border-radius: 50%;
114 width: 40px;
115 height: 40px;
116 animation: spin 1s linear infinite;
117 margin-bottom: 1rem;
118}
119
120@keyframes spin {
121 0% { transform: rotate(0deg); }
122 100% { transform: rotate(360deg); }
123}
124
125.feedList {
126 display: flex;
127 flex-direction: column;
128 gap: 1rem;
129}
130
131.feedItem {
132 background-color: var(--card-background);
133 border: 1px solid var(--tile-border);
134 border-radius: 8px;
135 padding: 1rem;
136 /* Removed transition */
137 background-image: repeating-linear-gradient(0deg, var(--tile-border), var(--tile-border) 1px, transparent 1px, transparent 20px);
138}
139
140.feedItem:hover {
141 /* Removed transform and increased box-shadow to prevent movement */
142 border-color: var(--primary-color);
143}
144
145.feedHeader {
146 display: flex;
147 justify-content: space-between;
148 align-items: center;
149 margin-bottom: 0.75rem;
150}
151
152.headerRight {
153 display: flex;
154 align-items: center;
155 gap: 0.75rem;
156}
157
158.editButton {
159 background: none;
160 border: 1px solid var(--tile-border);
161 color: var(--text-color);
162 padding: 6px;
163 cursor: pointer;
164 display: flex;
165 align-items: center;
166 justify-content: center;
167 transition: all 0.2s;
168 width: 32px;
169 height: 32px;
170 border-radius: 4px;
171}
172
173.editButton svg {
174 width: 16px;
175 height: 16px;
176}
177
178.editButton:hover {
179 border-color: var(--primary-color);
180 color: var(--primary-color);
181 background: rgba(91, 173, 240, 0.05);
182}
183
184.actionError {
185 background: var(--error-background);
186 border: 1px solid var(--error-color);
187 color: var(--error-color);
188 padding: 1rem;
189 margin-bottom: 1rem;
190 border-radius: 4px;
191 font-size: 0.9rem;
192}
193
194.actionSuccess {
195 background: var(--success-background);
196 border: 1px solid var(--success-color);
197 color: var(--success-text);
198 padding: 1rem;
199 margin-bottom: 1rem;
200 border-radius: 4px;
201 font-size: 0.9rem;
202}
203
204.authorLink {
205 color: var(--primary-color);
206 font-weight: 600;
207 text-decoration: none;
208}
209
210.authorLink:hover {
211 text-decoration: underline;
212}
213
214.timestamp {
215 font-size: 0.85rem;
216 color: var(--timestamp-color);
217}
218
219.content {
220 display: flex;
221 align-items: flex-start;
222 gap: 0.75rem;
223}
224
225.emoji {
226 font-size: 1.5rem;
227}
228
229.text {
230 font-size: 1.1rem;
231 line-height: 1.4;
232 color: var(--text-color);
233}
234
235.emptyState {
236 text-align: center;
237 padding: 2rem;
238 background-color: var(--background-color);
239 border-radius: 8px;
240 border: 1px dashed var(--tile-border);
241}
242
243.loadMoreButton {
244 width: 100%;
245 background-color: var(--button-background);
246 color: var(--button-text);
247 border: 1px solid var(--input-border);
248 border-radius: 8px;
249 padding: 1rem;
250 font-size: 1rem;
251 font-weight: 500;
252 cursor: pointer;
253 margin-top: 1rem;
254 transition: all 0.2s;
255 display: flex;
256 justify-content: center;
257 align-items: center;
258 gap: 0.5rem;
259}
260
261.loadMoreButton:hover {
262 background-color: var(--button-hover);
263}
264
265.loadMoreButton:disabled {
266 background-color: var(--button-disabled);
267 color: var(--button-disabled-text);
268 cursor: not-allowed;
269}
270
271.loadMoreButton svg {
272 width: 16px;
273 height: 16px;
274}
275
276.createButton {
277 display: inline-block;
278 margin-top: 1rem;
279 background-color: var(--primary-color);
280 color: white;
281 text-decoration: none;
282 border-radius: 4px;
283 padding: 0.5rem 1rem;
284 font-size: 1rem;
285 transition: background-color 0.2s;
286}
287
288.createButton:hover {
289 background-color: var(--secondary-color);
290}