atproto blogging
nonbinary.computer
1/* Notebook editor form component */
2
3.notebook-editor {
4 container-type: inline-size;
5 display: flex;
6 flex-direction: column;
7 gap: 1rem;
8}
9
10.notebook-editor-title {
11 margin: 0;
12 font-size: 1.25rem;
13 font-weight: 600;
14}
15
16.notebook-editor-form {
17 display: flex;
18 flex-direction: column;
19 gap: 1rem;
20}
21
22/* Top fields section - two columns when wide */
23.notebook-editor-top {
24 display: flex;
25 flex-direction: column;
26 gap: 1rem;
27}
28
29@container (min-width: 40rem) {
30 .notebook-editor-top {
31 display: grid;
32 grid-template-columns: 1fr 1fr;
33 gap: 1rem 1.5rem;
34 }
35}
36
37/* Left column: title, path */
38.notebook-editor-top-left {
39 display: flex;
40 flex-direction: column;
41 gap: 1rem;
42}
43
44/* Right column: publish globally, tags */
45.notebook-editor-top-right {
46 display: flex;
47 flex-direction: column;
48 gap: 1rem;
49}
50
51.notebook-editor-field {
52 display: flex;
53 flex-direction: column;
54 gap: 0.25rem;
55}
56
57.notebook-editor-field label {
58 font-size: 0.875rem;
59 font-weight: 500;
60}
61
62.notebook-editor-field input[type="text"] {
63 padding: 0.5rem;
64 border: 1px solid var(--color-border);
65 border-radius: 0;
66 background: var(--color-base);
67 color: var(--color-text);
68 font-size: 0.875rem;
69}
70
71.notebook-editor-field input[type="text"]:focus {
72 outline: 2px solid var(--color-primary);
73 outline-offset: -1px;
74}
75
76.notebook-editor-hint {
77 font-size: 0.75rem;
78 color: var(--color-muted);
79}
80
81.notebook-editor-toggle {
82 /* Keep column direction from .notebook-editor-field, just adjust gap */
83 gap: 0.25rem;
84}
85
86.notebook-editor-toggle label {
87 display: flex;
88 align-items: center;
89 gap: 0.5rem;
90 cursor: pointer;
91}
92
93.notebook-editor-toggle input[type="checkbox"] {
94 appearance: none;
95 width: 1rem;
96 height: 1rem;
97 border: 1px solid var(--color-border);
98 border-radius: 0;
99 background: var(--color-base);
100 cursor: pointer;
101 flex-shrink: 0;
102}
103
104.notebook-editor-toggle input[type="checkbox"]:checked {
105 background: var(--color-primary);
106 border-color: var(--color-primary);
107}
108
109.notebook-editor-toggle input[type="checkbox"]:checked::after {
110 content: "✓";
111 display: block;
112 color: var(--color-base);
113 font-size: 0.75rem;
114 text-align: center;
115 line-height: 1rem;
116}
117
118.notebook-editor-toggle input[type="checkbox"]:focus {
119 border-color: var(--color-primary);
120}
121
122.notebook-editor-tags {
123 display: flex;
124 flex-wrap: wrap;
125 gap: 0.5rem;
126 padding: 0.5rem;
127 border: 1px solid var(--color-border);
128 border-radius: 0;
129 background: var(--color-base);
130}
131
132.notebook-editor-tag {
133 display: flex;
134 align-items: center;
135 gap: 0.25rem;
136 padding: 0.25rem 0.5rem;
137 background: var(--color-surface);
138 font-size: 0.75rem;
139}
140
141.notebook-editor-tag-remove {
142 background: none;
143 border: none;
144 color: var(--color-muted);
145 cursor: pointer;
146 padding: 0;
147 font-size: 1rem;
148 line-height: 1;
149}
150
151.notebook-editor-tag-remove:hover {
152 color: var(--color-error);
153}
154
155.notebook-editor-tags-input {
156 flex: 1;
157 min-width: 8rem;
158 border: none;
159 background: transparent;
160 font-size: 0.875rem;
161 color: var(--color-text);
162}
163
164.notebook-editor-tags-input:focus {
165 outline: none;
166}
167
168.notebook-editor-error {
169 padding: 0.75rem;
170 background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
171 border: 1px solid var(--color-error);
172 color: var(--color-error);
173 font-size: 0.875rem;
174}
175
176.notebook-editor-actions {
177 display: flex;
178 gap: 0.5rem;
179 justify-content: flex-end;
180 padding-top: 0.5rem;
181}
182
183/* Content settings section */
184.notebook-editor-content-settings {
185 display: flex;
186 flex-direction: column;
187 gap: 1rem;
188 padding-top: 1rem;
189 border-top: 1px solid var(--color-border);
190}
191
192.notebook-editor-content-settings h4 {
193 margin: 0;
194 font-size: 0.875rem;
195 font-weight: 600;
196 color: var(--color-muted);
197 text-transform: uppercase;
198 letter-spacing: 0.05em;
199}
200
201.notebook-editor-warning {
202 background: color-mix(in srgb, var(--color-warning) 15%, var(--color-surface));
203 border: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent);
204}
205
206.notebook-editor-field select {
207 padding: 0.5rem;
208 padding-right: 2rem;
209 border: 1px solid var(--color-border);
210 border-radius: 0;
211 background: var(--color-base);
212 color: var(--color-text);
213 font-size: 0.875rem;
214 font-family: inherit;
215 appearance: none;
216 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");
217 background-repeat: no-repeat;
218 background-position: right 0.5rem center;
219 cursor: pointer;
220}
221
222.notebook-editor-field select:focus {
223 outline: 2px solid var(--color-primary);
224 outline-offset: -1px;
225}
226
227.notebook-editor-field select option {
228 background: var(--color-surface);
229 color: var(--color-text);
230 padding: 0.5rem;
231}