desertthunder.dev
web based infinite canvas
1@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap');
2
3:root {
4 --bg-primary: #eceff4;
5 --bg-secondary: #e5e9f0;
6 --bg-tertiary: #d8dee9;
7
8 --fg-primary: #2e3440;
9 --fg-secondary: #3b4252;
10 --fg-tertiary: #434c5e;
11 --fg-muted: #4c566a;
12
13 --accent-cyan: #8fbcbb;
14 --accent-blue-bright: #88c0d0;
15 --accent-blue: #81a1c1;
16 --accent-blue-dark: #5e81ac;
17
18 --color-error: #bf616a;
19 --color-warning: #d08770;
20 --color-info: #ebcb8b;
21 --color-success: #a3be8c;
22 --color-purple: #b48ead;
23
24 --surface: var(--bg-primary);
25 --surface-elevated: var(--bg-secondary);
26 --surface-overlay: var(--bg-tertiary);
27 --text: var(--fg-primary);
28 --text-secondary: var(--fg-secondary);
29 --text-muted: var(--fg-muted);
30 --border: var(--fg-tertiary);
31 --accent: var(--accent-blue);
32 --accent-hover: var(--accent-blue-dark);
33}
34
35@media (prefers-color-scheme: dark) {
36 :root {
37 --bg-primary: #161821;
38 --bg-secondary: #1e2132;
39 --bg-tertiary: #272c42;
40
41 --fg-primary: #c6c8d1;
42 --fg-secondary: #89b8c2;
43 --fg-tertiary: #84a0c6;
44 --fg-muted: #6b7089;
45
46 --accent-purple: #a093c7;
47 --accent-cyan: #89b8c2;
48 --accent-blue: #84a0c6;
49 --accent-search: #e4aa80;
50
51 --color-error: #e27878;
52 --color-warning: #e2a478;
53 --color-success: #b4be82;
54 --color-info: #e4aa80;
55 --color-purple: #a093c7;
56
57 --line-numbers: #444b71;
58 --selection: #272c42;
59
60 --surface: var(--bg-primary);
61 --surface-elevated: var(--bg-secondary);
62 --surface-overlay: var(--bg-tertiary);
63 --text: var(--fg-primary);
64 --text-secondary: var(--fg-secondary);
65 --text-muted: var(--fg-muted);
66 --border: var(--line-numbers);
67 --accent: var(--accent-blue);
68 --accent-hover: var(--accent-cyan);
69 }
70}
71
72[data-theme='light'] {
73 --bg-primary: #eceff4;
74 --bg-secondary: #e5e9f0;
75 --bg-tertiary: #d8dee9;
76
77 --fg-primary: #2e3440;
78 --fg-secondary: #3b4252;
79 --fg-tertiary: #434c5e;
80 --fg-muted: #4c566a;
81
82 --accent-cyan: #8fbcbb;
83 --accent-blue-bright: #88c0d0;
84 --accent-blue: #81a1c1;
85 --accent-blue-dark: #5e81ac;
86
87 --color-error: #bf616a;
88 --color-warning: #d08770;
89 --color-info: #ebcb8b;
90 --color-success: #a3be8c;
91 --color-purple: #b48ead;
92
93 --surface: var(--bg-primary);
94 --surface-elevated: var(--bg-secondary);
95 --surface-overlay: var(--bg-tertiary);
96 --text: var(--fg-primary);
97 --text-secondary: var(--fg-secondary);
98 --text-muted: var(--fg-muted);
99 --border: var(--fg-tertiary);
100 --accent: var(--accent-blue);
101 --accent-hover: var(--accent-blue-dark);
102}
103
104[data-theme='dark'] {
105 --bg-primary: #161821;
106 --bg-secondary: #1e2132;
107 --bg-tertiary: #272c42;
108 --fg-primary: #c6c8d1;
109 --fg-secondary: #89b8c2;
110 --fg-tertiary: #84a0c6;
111 --fg-muted: #6b7089;
112 --accent-purple: #a093c7;
113 --accent-cyan: #89b8c2;
114 --accent-blue: #84a0c6;
115 --accent-search: #e4aa80;
116 --color-error: #e27878;
117 --color-warning: #e2a478;
118 --color-success: #b4be82;
119 --color-info: #e4aa80;
120 --color-purple: #a093c7;
121 --line-numbers: #444b71;
122 --selection: #272c42;
123 --surface: var(--bg-primary);
124 --surface-elevated: var(--bg-secondary);
125 --surface-overlay: var(--bg-tertiary);
126 --text: var(--fg-primary);
127 --text-secondary: var(--fg-secondary);
128 --text-muted: var(--fg-muted);
129 --border: var(--line-numbers);
130 --accent: var(--accent-blue);
131 --accent-hover: var(--accent-cyan);
132 color-scheme: dark;
133}
134
135* {
136 margin: 0;
137 padding: 0;
138 box-sizing: border-box;
139}
140
141body {
142 font-family: 'Inter', sans-serif;
143 background-color: var(--surface);
144 color: var(--text);
145 line-height: 1.5;
146 -webkit-font-smoothing: antialiased;
147 -moz-osx-font-smoothing: grayscale;
148}
149
150button {
151 font-family: 'Inter', sans-serif;
152}
153
154::selection {
155 background-color: var(--accent);
156 color: var(--surface);
157}
158
159/* Markdown Styling */
160.markdown-body {
161 color: var(--text);
162 font-size: 1rem;
163 line-height: 1.6;
164}
165
166.markdown-body h1,
167.markdown-body h2,
168.markdown-body h3,
169.markdown-body h4,
170.markdown-body h5,
171.markdown-body h6 {
172 margin-top: 1.5em;
173 margin-bottom: 0.5em;
174 font-weight: 600;
175 line-height: 1.25;
176}
177
178.markdown-body h1 {
179 font-size: 2em;
180 border-bottom: 1px solid var(--border);
181 padding-bottom: 0.3em;
182}
183.markdown-body h2 {
184 font-size: 1.5em;
185 border-bottom: 1px solid var(--border);
186 padding-bottom: 0.3em;
187}
188.markdown-body h3 {
189 font-size: 1.25em;
190}
191.markdown-body h4 {
192 font-size: 1em;
193}
194
195.markdown-body p {
196 margin-bottom: 1em;
197}
198
199.markdown-body ul,
200.markdown-body ol {
201 padding-left: 2em;
202 margin-bottom: 1em;
203}
204
205.markdown-body blockquote {
206 padding: 0 1em;
207 color: var(--text-muted);
208 border-left: 0.25em solid var(--border);
209 margin-bottom: 1em;
210}
211
212.markdown-body code {
213 padding: 0.2em 0.4em;
214 margin: 0;
215 font-size: 85%;
216 background-color: var(--bg-secondary);
217 border-radius: 6px;
218 font-family:
219 ui-monospace,
220 SFMono-Regular,
221 SF Mono,
222 Menlo,
223 Consolas,
224 Liberation Mono,
225 monospace;
226}
227
228.markdown-body pre {
229 padding: 16px;
230 overflow: auto;
231 font-size: 85%;
232 line-height: 1.45;
233 background-color: var(--bg-secondary);
234 border-radius: 6px;
235 margin-bottom: 1em;
236}
237
238.markdown-body pre code {
239 background-color: transparent;
240 padding: 0;
241}
242
243.markdown-body a {
244 color: var(--accent);
245 text-decoration: none;
246}
247
248.markdown-body a:hover {
249 text-decoration: underline;
250}
251
252.markdown-body hr {
253 height: 0.25em;
254 padding: 0;
255 margin: 24px 0;
256 background-color: var(--border);
257 border: 0;
258}
259
260* {
261 margin: 0;
262 padding: 0;
263 box-sizing: border-box;
264}
265
266body {
267 font-family: 'Inter', sans-serif;
268 background-color: var(--surface);
269 color: var(--text);
270 line-height: 1.25;
271}
272
273button {
274 font-family: 'Inter', sans-serif;
275}
276
277::selection {
278 background-color: var(--accent);
279 color: var(--surface);
280}