atproto blogging
nonbinary.computer
1/* Notebook settings page */
2
3.notebook-settings {
4 display: grid;
5 grid-template-columns: 200px 1fr;
6 gap: 2rem;
7 max-width: 100rem;
8 margin: 0 auto;
9 padding: 1.5rem;
10 min-height: calc(100vh - 4rem);
11}
12
13@media (max-width: 768px) {
14 .notebook-settings {
15 grid-template-columns: 1fr;
16 gap: 1rem;
17 }
18}
19
20/* Sidebar navigation */
21.notebook-settings-nav {
22 display: flex;
23 flex-direction: column;
24 gap: 0.25rem;
25 position: sticky;
26 top: 1rem;
27 align-self: start;
28}
29
30@media (max-width: 768px) {
31 .notebook-settings-nav {
32 flex-direction: row;
33 flex-wrap: wrap;
34 position: static;
35 border-bottom: 1px solid var(--color-border);
36 padding-bottom: 1rem;
37 }
38}
39
40.notebook-settings-nav button {
41 padding: 0.75rem 1rem;
42 text-align: left;
43 background: transparent;
44 border: none;
45 color: var(--color-muted);
46 font-size: 0.875rem;
47 cursor: pointer;
48 transition: color 0.15s, background 0.15s;
49}
50
51.notebook-settings-nav button:hover {
52 color: var(--color-text);
53 background: var(--color-surface);
54}
55
56.notebook-settings-nav button.active {
57 color: var(--color-text);
58 background: var(--color-surface);
59 font-weight: 600;
60}
61
62/* Content area */
63.notebook-settings-content {
64 min-width: 0;
65}
66
67/* Section styling */
68.notebook-settings-section {
69 display: flex;
70 flex-direction: column;
71 gap: 1.5rem;
72}
73
74.notebook-settings-section h2 {
75 margin: 0;
76 font-size: 1.5rem;
77 font-weight: 600;
78 color: var(--color-text);
79 padding-bottom: 0.75rem;
80 border-bottom: 1px solid var(--color-border);
81}
82
83.notebook-settings-description {
84 margin: 0;
85 color: var(--color-muted);
86 font-size: 0.875rem;
87}
88
89/* Form fields */
90.notebook-settings-field {
91 display: flex;
92 flex-direction: column;
93 gap: 0.5rem;
94}
95
96.notebook-settings-field label {
97 font-size: 0.875rem;
98 font-weight: 500;
99 color: var(--color-text);
100}
101
102.notebook-settings-field input[type="text"],
103.notebook-settings-field select {
104 padding: 0.625rem 0.75rem;
105 border: 1px solid var(--color-border);
106 background: var(--color-base);
107 color: var(--color-text);
108 font-family: var(--font-ui);
109 font-size: 0.875rem;
110}
111
112.notebook-settings-field input:focus,
113.notebook-settings-field select:focus {
114 outline: none;
115 border-color: var(--color-primary);
116}
117
118.notebook-settings-hint {
119 font-size: 0.75rem;
120 color: var(--color-muted);
121}
122
123/* Toggle field */
124.notebook-settings-toggle label {
125 display: flex;
126 align-items: center;
127 gap: 0.5rem;
128 cursor: pointer;
129}
130
131.notebook-settings-toggle input[type="checkbox"] {
132 width: 1rem;
133 height: 1rem;
134}
135
136/* Tags */
137.notebook-settings-tags {
138 display: flex;
139 flex-wrap: wrap;
140 gap: 0.5rem;
141 padding: 0.5rem;
142 border: 1px solid var(--color-border);
143 background: var(--color-base);
144 min-height: 2.5rem;
145}
146
147.notebook-settings-tag {
148 display: inline-flex;
149 align-items: center;
150 gap: 0.25rem;
151 padding: 0.25rem 0.5rem;
152 background: var(--color-surface);
153 border: 1px solid var(--color-border);
154 font-size: 0.75rem;
155 color: var(--color-text);
156}
157
158.notebook-settings-tag-remove {
159 background: none;
160 border: none;
161 padding: 0;
162 margin-left: 0.25rem;
163 color: var(--color-muted);
164 cursor: pointer;
165 font-size: 1rem;
166 line-height: 1;
167}
168
169.notebook-settings-tag-remove:hover {
170 color: var(--color-error);
171}
172
173.notebook-settings-tags-input {
174 flex: 1;
175 min-width: 100px;
176 border: none !important;
177 background: transparent !important;
178 padding: 0.25rem !important;
179}
180
181.notebook-settings-tags-input:focus {
182 outline: none;
183}
184
185/* Actions */
186.notebook-settings-actions {
187 display: flex;
188 justify-content: flex-start;
189 gap: 0.75rem;
190 padding-top: 1rem;
191 border-top: 1px solid var(--color-border);
192}
193
194/* Error display */
195.notebook-settings-error {
196 padding: 0.75rem 1rem;
197 background: color-mix(in srgb, var(--color-error) 10%, transparent);
198 border: 1px solid var(--color-error);
199 color: var(--color-error);
200 font-size: 0.875rem;
201}
202
203/* Theme section - needs full width */
204.notebook-settings-theme {
205 container-type: inline-size;
206}
207
208.notebook-settings-theme .theme-editor-page {
209 padding: 0;
210 max-width: none;
211}
212
213/* On smaller screens, stack the theme editor */
214@container (max-width: 50rem) {
215 .notebook-settings-theme .theme-editor-page {
216 grid-template-columns: 1fr;
217 }
218
219 .notebook-settings-theme .theme-editor-preview {
220 position: static;
221 max-height: none;
222 }
223}
224
225/* Danger zone */
226.notebook-settings-danger h2 {
227 color: var(--color-error);
228 border-color: var(--color-error);
229}
230
231.notebook-settings-danger-item {
232 display: flex;
233 align-items: center;
234 justify-content: space-between;
235 gap: 1.5rem;
236 padding: 1rem;
237 background: color-mix(in srgb, var(--color-error) 5%, transparent);
238 border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
239}
240
241.notebook-settings-danger-info h3 {
242 margin: 0 0 0.25rem;
243 font-size: 1rem;
244 font-weight: 600;
245 color: var(--color-text);
246}
247
248.notebook-settings-danger-info p {
249 margin: 0;
250 font-size: 0.875rem;
251 color: var(--color-muted);
252}
253
254/* Confirm dialog */
255.notebook-settings-confirm-overlay {
256 position: fixed;
257 inset: 0;
258 background: rgba(0, 0, 0, 0.5);
259 display: flex;
260 align-items: center;
261 justify-content: center;
262 z-index: 1000;
263}
264
265.notebook-settings-confirm-dialog {
266 background: var(--color-surface);
267 border: 1px solid var(--color-border);
268 padding: 1.5rem;
269 max-width: 400px;
270 width: 90%;
271}
272
273.notebook-settings-confirm-dialog h3 {
274 margin: 0 0 0.5rem;
275 font-size: 1.125rem;
276 font-weight: 600;
277 color: var(--color-text);
278}
279
280.notebook-settings-confirm-dialog p {
281 margin: 0 0 1.5rem;
282 color: var(--color-muted);
283 font-size: 0.875rem;
284}
285
286.notebook-settings-confirm-actions {
287 display: flex;
288 justify-content: flex-end;
289 gap: 0.75rem;
290}
291
292/* Unauthorized state */
293.notebook-settings-unauthorized {
294 display: flex;
295 flex-direction: column;
296 align-items: center;
297 justify-content: center;
298 min-height: 50vh;
299 text-align: center;
300 padding: 2rem;
301}
302
303.notebook-settings-unauthorized h1 {
304 margin: 0 0 0.5rem;
305 font-size: 1.5rem;
306 color: var(--color-text);
307}
308
309.notebook-settings-unauthorized p {
310 margin: 0;
311 color: var(--color-muted);
312}
313
314/* Placeholder */
315.notebook-settings-placeholder {
316 padding: 2rem;
317 text-align: center;
318 color: var(--color-muted);
319 background: var(--color-surface);
320 border: 1px dashed var(--color-border);
321}