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/* Light mode variables */
2:root {
3 --primary-color: #5badf0;
4 --primary-hover: #4a97d8;
5 --secondary-color: #1968a8;
6 --secondary-hover: #155690;
7 --success-color: #4caf50;
8 --success-hover: #43a047;
9 --background-color: #eaf5ff;
10 --background-start-rgb: 249, 249, 249;
11 --background-end-rgb: 255, 255, 255;
12 --card-background: #ffffff;
13 --card-rgb: 255, 255, 255;
14 --foreground-rgb: #333333;
15 --secondary-foreground: #666666;
16 --link-color: #5badf0;
17 --text-color: #333;
18 --title-color: #272727;
19 --error-color: #ff5252;
20 --error-background: #ffebee;
21 --success-background: rgba(76, 175, 80, 0.1);
22 --success-text: #4caf50;
23 --notice-background: #fff3e0;
24 --notice-text: #e65100;
25 --notice-border: #ff9800;
26 --input-background: #ffffff;
27 --input-border: #ddd;
28 --input-focus-border: #5badf0;
29 --input-prefix-background: #f8f8f8;
30 --button-background: #f1f1f1;
31 --button-text: #444;
32 --button-hover: #e5e5e5;
33 --button-disabled: #f5f5f5;
34 --button-disabled-text: #aaa;
35 --chart-bar: #5badf0;
36 --chart-background: #f8f9fa;
37 --timestamp-color: #888;
38 --shadow-color: rgba(0, 0, 0, 0.1);
39 --emoji-button-bg: #f5f5f5;
40 --emoji-button-border: #ddd;
41 --emoji-grid-bg: #fcfcfc;
42 --tile-border: rgba(0, 0, 0, 0.1);
43 --hover-overlay: rgba(0, 0, 0, 0.05);
44}
45
46/* Dark mode variables */
47[data-theme="dark"] {
48 --primary-color: #5badf0;
49 --primary-hover: #4a97d8;
50 --secondary-color: #69c0ff;
51 --secondary-hover: #5aafeb;
52 --success-color: #4caf50;
53 --success-hover: #43a047;
54 --background-color: #121212;
55 --background-start-rgb: 18, 18, 18;
56 --background-end-rgb: 30, 30, 30;
57 --card-background: #1e1e1e;
58 --card-rgb: 30, 30, 30;
59 --foreground-rgb: #dddddd;
60 --secondary-foreground: #aaaaaa;
61 --link-color: #5badf0;
62 --text-color: #dddddd;
63 --title-color: #e0e0e0;
64 --error-color: #ff7070;
65 --error-background: #4a161a;
66 --success-background: rgba(76, 175, 80, 0.2);
67 --success-text: #7dff83;
68 --notice-background: #3d2e15;
69 --notice-text: #ffae5e;
70 --notice-border: #ff9800;
71 --input-background: #2d2d2d;
72 --input-border: #444;
73 --input-focus-border: #5badf0;
74 --input-prefix-background: #252525;
75 --button-background: #2d2d2d;
76 --button-text: #e0e0e0;
77 --button-hover: #3a3a3a;
78 --button-disabled: #252525;
79 --button-disabled-text: #666;
80 --chart-bar: #5badf0;
81 --chart-background: #252525;
82 --timestamp-color: #aaa;
83 --shadow-color: rgba(0, 0, 0, 0.3);
84 --emoji-button-bg: #2d2d2d;
85 --emoji-button-border: #444;
86 --emoji-grid-bg: #252525;
87 --tile-border: rgba(255, 255, 255, 0.1);
88 --hover-overlay: rgba(255, 255, 255, 0.05);
89}
90
91/* Automatically use dark mode if user prefers it */
92@media (prefers-color-scheme: dark) {
93 :root:not([data-theme="light"]) {
94 --primary-color: #5badf0;
95 --primary-hover: #4a97d8;
96 --secondary-color: #69c0ff;
97 --secondary-hover: #5aafeb;
98 --success-color: #4caf50;
99 --success-hover: #43a047;
100 --background-color: #121212;
101 --background-start-rgb: 18, 18, 18;
102 --background-end-rgb: 30, 30, 30;
103 --card-background: #1e1e1e;
104 --card-rgb: 30, 30, 30;
105 --foreground-rgb: #dddddd;
106 --secondary-foreground: #aaaaaa;
107 --link-color: #5badf0;
108 --text-color: #dddddd;
109 --title-color: #e0e0e0;
110 --error-color: #ff7070;
111 --error-background: #4a161a;
112 --success-background: rgba(76, 175, 80, 0.2);
113 --success-text: #7dff83;
114 --notice-background: #3d2e15;
115 --notice-text: #ffae5e;
116 --notice-border: #ff9800;
117 --input-background: #2d2d2d;
118 --input-border: #444;
119 --input-focus-border: #5badf0;
120 --input-prefix-background: #252525;
121 --button-background: #2d2d2d;
122 --button-text: #e0e0e0;
123 --button-hover: #3a3a3a;
124 --button-disabled: #252525;
125 --button-disabled-text: #666;
126 --chart-bar: #5badf0;
127 --chart-background: #252525;
128 --timestamp-color: #aaa;
129 --shadow-color: rgba(0, 0, 0, 0.3);
130 --emoji-button-bg: #2d2d2d;
131 --emoji-button-border: #444;
132 --emoji-grid-bg: #252525;
133 --tile-border: rgba(255, 255, 255, 0.1);
134 --hover-overlay: rgba(255, 255, 255, 0.05);
135 }
136
137 body {
138 color-scheme: dark;
139 }
140}
141
142* {
143 box-sizing: border-box;
144 margin: 0;
145 padding: 0;
146 font-family: 'decoy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
147 Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
148}
149
150/* Font definitions */
151.font-regular {
152 font-family: 'decoy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
153 Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
154 font-weight: 400;
155 font-style: normal;
156}
157
158.font-medium {
159 font-family: 'decoy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
160 Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
161 font-weight: 500;
162 font-style: normal;
163}
164
165.font-bold {
166 font-family: 'decoy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
167 Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
168 font-weight: 700;
169 font-style: normal;
170}
171
172.font-black {
173 font-family: 'decoy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
174 Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
175 font-weight: 900;
176 font-style: normal;
177}
178
179html,
180body {
181 font-family: 'decoy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
182 Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
183 font-weight: 400;
184 line-height: 1.6;
185 color: var(--text-color);
186 background-color: var(--background-color);
187 min-height: 100vh;
188}
189
190h1 {
191 line-height: 2.5rem;
192}
193
194h2 {
195 line-height: 2rem;
196}
197
198h3 {
199 line-height: 2rem;
200}
201
202main {
203 width: 100%;
204 padding-bottom: 2rem;
205 max-width: 800px;
206 margin: 0 auto;
207 padding: 2rem 1.5rem;
208}
209
210a {
211 color: var(--primary-color);
212 text-decoration: none;
213}
214
215a:hover {
216 text-decoration: underline;
217}
218
219button, input, select, textarea {
220 font-family: 'decoy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
221 Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
222}
223
224button {
225 cursor: pointer;
226 background-color: var(--primary-color);
227 color: white;
228 border: none;
229 border-radius: 4px;
230 padding: 0.5rem 1rem;
231 font-size: 1rem;
232 font-weight: 500;
233 transition: background-color 0.2s;
234}
235
236button:hover {
237 background-color: var(--secondary-color);
238}
239
240.container {
241 display: flex;
242 flex-direction: column;
243 align-items: center;
244 justify-content: center;
245 min-height: 80vh;
246}
247
248.card {
249 background-color: var(--card-background);
250 border: 1px solid var(--tile-border);
251 border-radius: 8px;
252 padding: 1.5rem;
253 margin: 1rem 0;
254 width: 100%;
255 /* Removed transitions */
256 background-image: repeating-linear-gradient(0deg, var(--tile-border), var(--tile-border) 1px, transparent 1px, transparent 20px);
257}
258
259.card:hover {
260 /* Removed transform and increased box-shadow to prevent movement */
261 border-color: var(--primary-color);
262}
263
264.form-group {
265 margin-bottom: 1rem;
266}
267
268.form-group label {
269 display: block;
270 margin-bottom: 0.5rem;
271 font-weight: bold;
272}
273
274.form-group input,
275.form-group textarea,
276.form-group select {
277 width: 100%;
278 padding: 0.5rem;
279 border: 1px solid var(--input-border);
280 border-radius: 4px;
281 font-size: 1rem;
282 background-color: var(--input-background);
283 color: var(--text-color);
284}
285
286.error {
287 color: var(--error-color);
288 font-size: 0.9rem;
289 margin-top: 0.5rem;
290}