atproto blogging
nonbinary.computer
1/* Full theme editor page */
2
3.theme-editor-page {
4 display: grid;
5 grid-template-columns: 1fr;
6 gap: 2rem;
7 padding: 1.5rem;
8 max-width: 100rem;
9}
10
11@media (min-width: 60rem) {
12 .theme-editor-page {
13 grid-template-columns: 1fr 400px;
14 }
15}
16
17/* Left column: controls */
18.theme-editor-controls {
19 display: flex;
20 flex-direction: column;
21 gap: 1.5rem;
22}
23
24/* Right column: preview */
25.theme-editor-preview {
26 position: sticky;
27 top: 1rem;
28 align-self: start;
29 max-height: calc(100vh - 2rem);
30 overflow-y: auto;
31}
32
33/* Section styling */
34.theme-editor-section {
35 display: flex;
36 flex-direction: column;
37 gap: 0.75rem;
38 padding: 1rem;
39 background: var(--color-surface);
40 border: 1px solid var(--color-border);
41}
42
43.theme-editor-section-header {
44 display: flex;
45 align-items: center;
46 justify-content: space-between;
47 gap: 1rem;
48}
49
50.theme-editor-scheme-preset {
51 padding: 0.375rem 0.5rem;
52 padding-right: 1.75rem;
53 border: 1px solid var(--color-border);
54 background: var(--color-base);
55 color: var(--color-text);
56 font-family: var(--font-ui);
57 font-size: 0.75rem;
58 appearance: none;
59 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
60 background-repeat: no-repeat;
61 background-position: right 0.375rem center;
62 cursor: pointer;
63}
64
65.theme-editor-scheme-preset:focus {
66 outline: none;
67 border-color: var(--color-primary);
68}
69
70.theme-editor-scheme-preset option {
71 background: var(--color-surface);
72 color: var(--color-text);
73}
74
75.theme-editor-section h3 {
76 margin: 0;
77 font-size: 1rem;
78 font-weight: 600;
79 color: var(--color-text);
80}
81
82/* Colour grid - 4 columns */
83.theme-editor-colours {
84 display: grid;
85 grid-template-columns: repeat(2, 1fr);
86 gap: 0.75rem;
87}
88
89@media (min-width: 30rem) {
90 .theme-editor-colours {
91 grid-template-columns: repeat(4, 1fr);
92 }
93}
94
95/* Colour groups */
96.theme-editor-colour-group {
97 display: flex;
98 flex-direction: column;
99 gap: 0.5rem;
100}
101
102.theme-editor-colour-group-label {
103 font-size: 0.75rem;
104 font-weight: 600;
105 color: var(--color-muted);
106 text-transform: uppercase;
107 letter-spacing: 0.05em;
108}
109
110.theme-editor-colour-group-items {
111 display: grid;
112 grid-template-columns: repeat(2, 1fr);
113 gap: 0.5rem;
114}
115
116@container (min-width: 30rem) {
117 .theme-editor-colour-group-items {
118 grid-template-columns: repeat(4, 1fr);
119 }
120}
121
122/* Fonts section */
123.theme-editor-fonts {
124 display: grid;
125 grid-template-columns: 1fr;
126 gap: 0.75rem;
127}
128
129@container (min-width: 30rem) {
130 .theme-editor-fonts {
131 grid-template-columns: repeat(3, 1fr);
132 }
133}
134
135.theme-editor-font-field {
136 display: flex;
137 flex-direction: column;
138 gap: 0.25rem;
139}
140
141.theme-editor-font-field label {
142 font-size: 0.875rem;
143 color: var(--color-muted);
144}
145
146.theme-editor-font-field input,
147.theme-editor-font-field select {
148 padding: 0.5rem;
149 border: 1px solid var(--color-border);
150 background: var(--color-base);
151 color: var(--color-text);
152 font-family: var(--font-ui);
153 font-size: 0.875rem;
154}
155
156.theme-editor-font-field input:focus,
157.theme-editor-font-field select:focus {
158 outline: none;
159 border-color: var(--color-primary);
160}
161
162/* Spacing section */
163.theme-editor-spacing {
164 display: grid;
165 grid-template-columns: repeat(3, 1fr);
166 gap: 0.75rem;
167}
168
169.theme-editor-spacing-field {
170 display: flex;
171 flex-direction: column;
172 gap: 0.25rem;
173}
174
175.theme-editor-spacing-field label {
176 font-size: 0.875rem;
177 color: var(--color-muted);
178}
179
180.theme-editor-spacing-field input {
181 padding: 0.5rem;
182 border: 1px solid var(--color-border);
183 background: var(--color-base);
184 color: var(--color-text);
185 font-family: var(--font-mono);
186 font-size: 0.875rem;
187 text-align: center;
188}
189
190.theme-editor-spacing-field input:focus {
191 outline: none;
192 border-color: var(--color-primary);
193}
194
195/* Code themes */
196.theme-editor-code-themes {
197 display: grid;
198 grid-template-columns: 1fr 1fr;
199 gap: 0.75rem;
200}
201
202.theme-editor-code-theme {
203 display: flex;
204 flex-direction: column;
205 gap: 0.25rem;
206}
207
208.theme-editor-code-theme label {
209 font-size: 0.875rem;
210 color: var(--color-muted);
211}
212
213.theme-editor-code-theme select {
214 padding: 0.5rem;
215 border: 1px solid var(--color-border);
216 background: var(--color-base);
217 color: var(--color-text);
218 font-family: var(--font-ui);
219 font-size: 0.875rem;
220}
221
222.theme-editor-code-theme select:focus {
223 outline: none;
224 border-color: var(--color-primary);
225}
226
227/* Mode toggle */
228.theme-editor-mode {
229 display: flex;
230 align-items: center;
231 gap: 1rem;
232}
233
234.theme-editor-mode label {
235 font-size: 0.875rem;
236 color: var(--color-muted);
237}
238
239/* Actions row */
240.theme-editor-actions {
241 display: flex;
242 justify-content: flex-end;
243 gap: 0.75rem;
244 padding-top: 1rem;
245 border-top: 1px solid var(--color-border);
246}
247
248/* Preview header */
249.theme-editor-preview-header {
250 display: flex;
251 align-items: center;
252 justify-content: space-between;
253 gap: 1rem;
254 margin-bottom: 0.5rem;
255}
256
257.theme-editor-preview-header h3 {
258 margin: 0;
259 font-size: 1rem;
260 font-weight: 600;
261 color: var(--color-muted);
262}
263
264.theme-editor-preview .theme-preview {
265 padding: 1rem;
266 border: 1px solid var(--color-border);
267 max-width: none;
268}
269
270.theme-editor-preview .theme-preview--loading,
271.theme-editor-preview .theme-preview--error {
272 padding: 2rem;
273 text-align: center;
274 color: var(--color-muted);
275}
276
277/* Preset selector */
278.theme-editor-preset {
279 display: flex;
280 flex-direction: column;
281 gap: 0.25rem;
282}
283
284.theme-editor-preset label {
285 font-size: 0.875rem;
286 color: var(--color-muted);
287}
288
289.theme-editor-preset select {
290 padding: 0.5rem;
291 border: 1px solid var(--color-border);
292 background: var(--color-base);
293 color: var(--color-text);
294 font-family: var(--font-ui);
295 font-size: 0.875rem;
296}
297
298.theme-editor-preset select:focus {
299 outline: none;
300 border-color: var(--color-primary);
301}
302
303/* Back link */
304.theme-editor-back {
305 display: inline-flex;
306 align-items: center;
307 gap: 0.5rem;
308 color: var(--color-link);
309 text-decoration: none;
310 font-size: 0.875rem;
311 margin-bottom: 1rem;
312}
313
314.theme-editor-back:hover {
315 text-decoration: underline;
316}
317
318/* Select dropdown styling */
319.theme-editor-section select,
320.theme-editor-preset select,
321.theme-editor-code-theme select {
322 appearance: none;
323 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
324 background-repeat: no-repeat;
325 background-position: right 0.5rem center;
326 padding-right: 2rem;
327 cursor: pointer;
328}
329
330.theme-editor-section select option,
331.theme-editor-preset select option,
332.theme-editor-code-theme select option {
333 background: var(--color-surface);
334 color: var(--color-text);
335 padding: 0.5rem;
336}