atproto blogging
nonbinary.computer
1/* Inline theme editor for notebook settings */
2
3.inline-theme-editor {
4 container-type: inline-size;
5 display: flex;
6 flex-direction: column;
7 gap: 1rem;
8 padding: 1rem;
9 background: var(--color-surface);
10 border: 1px solid var(--color-border);
11 border-radius: 0;
12}
13
14.inline-theme-editor-heading {
15 margin: 0;
16 font-size: 1rem;
17 font-weight: 600;
18 color: var(--color-text);
19}
20
21.inline-theme-editor-presets {
22 display: flex;
23 flex-direction: column;
24 gap: 0.25rem;
25}
26
27.inline-theme-editor-presets label {
28 font-size: 0.875rem;
29 color: var(--color-muted);
30}
31
32.inline-theme-editor-presets select {
33 padding: 0.5rem;
34 border: 1px solid var(--color-border);
35 border-radius: 0;
36 background: var(--color-base);
37 color: var(--color-text);
38 font-family: var(--font-ui);
39 font-size: 0.875rem;
40}
41
42.inline-theme-editor-presets select:focus {
43 outline: none;
44 border-color: var(--color-primary);
45}
46
47/* Main theme controls section - two columns when wide */
48.inline-theme-editor-main {
49 display: flex;
50 flex-direction: column;
51 gap: 1rem;
52}
53
54@container (min-width: 32rem) {
55 .inline-theme-editor-main {
56 display: grid;
57 grid-template-columns: 1fr 1fr;
58 gap: 1rem 1.5rem;
59 }
60}
61
62/* Left: colours and mode toggle */
63.inline-theme-editor-main-left {
64 display: flex;
65 flex-direction: column;
66 gap: 0.75rem;
67}
68
69/* Right: dropdowns */
70.inline-theme-editor-main-right {
71 display: flex;
72 flex-direction: column;
73 gap: 0.75rem;
74}
75
76.inline-theme-editor-colours {
77 display: grid;
78 grid-template-columns: 1fr;
79 gap: 0.75rem;
80}
81
82@container (min-width: 20rem) {
83 .inline-theme-editor-colours {
84 grid-template-columns: repeat(2, 1fr);
85 }
86}
87
88.inline-theme-editor-code-theme,
89.inline-theme-editor-mode {
90 display: flex;
91 flex-direction: column;
92 gap: 0.25rem;
93}
94
95.inline-theme-editor-code-theme label,
96.inline-theme-editor-mode label {
97 font-size: 0.875rem;
98 color: var(--color-muted);
99}
100
101.inline-theme-editor-code-theme select {
102 padding: 0.5rem;
103 border: 1px solid var(--color-border);
104 border-radius: 0;
105 background: var(--color-base);
106 color: var(--color-text);
107 font-family: var(--font-ui);
108 font-size: 0.875rem;
109}
110
111.inline-theme-editor-code-theme select:focus {
112 outline: none;
113 border-color: var(--color-primary);
114}
115
116.inline-theme-editor-mode {
117 gap: 0.5rem;
118}
119
120/* Advanced colour options - hidden by default in narrow containers */
121.inline-theme-editor-advanced {
122 display: none;
123}
124
125/* Show advanced when container is wide enough */
126@container (min-width: 40rem) {
127 .inline-theme-editor-advanced {
128 display: block;
129 }
130}
131
132/* Force show advanced via class (for prop override) */
133.inline-theme-editor-advanced.force-show {
134 display: block;
135}
136
137/* Force hide advanced via class (for prop override) */
138.inline-theme-editor-advanced.force-hide {
139 display: none;
140}
141
142.inline-theme-editor-advanced-content {
143 display: flex;
144 flex-direction: column;
145 gap: 1rem;
146 padding: 0.75rem;
147 background: var(--color-base);
148 border: 1px solid var(--color-border);
149 border-radius: 0;
150}
151
152/* Side-by-side variants when wide */
153@container (min-width: 40rem) {
154 .inline-theme-editor-advanced-content {
155 display: grid;
156 grid-template-columns: 1fr 1fr;
157 gap: 1.5rem;
158 }
159}
160
161.inline-theme-editor-variant {
162 display: flex;
163 flex-direction: column;
164 gap: 0.5rem;
165}
166
167.inline-theme-editor-variant h5 {
168 margin: 0;
169 font-size: 0.875rem;
170 font-weight: 600;
171 color: var(--color-muted);
172}
173
174.inline-theme-editor-full-link {
175 font-size: 0.875rem;
176 color: var(--color-link);
177 text-decoration: none;
178}
179
180.inline-theme-editor-full-link:hover {
181 text-decoration: underline;
182}
183
184/* Preview section */
185.inline-theme-editor-preview {
186 display: flex;
187 flex-direction: column;
188 gap: 0.5rem;
189 margin-top: 0.5rem;
190 border-top: 1px solid var(--color-border);
191 padding-top: 1rem;
192}
193
194.inline-theme-editor-preview-header {
195 display: flex;
196 align-items: center;
197 justify-content: space-between;
198 gap: 1rem;
199}
200
201.inline-theme-editor-preview-header h5 {
202 margin: 0;
203 font-size: 0.875rem;
204 font-weight: 600;
205 color: var(--color-muted);
206}
207
208.inline-theme-editor-preview .theme-preview {
209 border: 1px solid var(--color-border);
210 border-radius: 0;
211 max-height: 20rem;
212 overflow-y: auto;
213 padding: 1rem;
214}
215
216.inline-theme-editor-preview .theme-preview--loading,
217.inline-theme-editor-preview .theme-preview--error {
218 padding: 1rem;
219 font-size: 0.875rem;
220 color: var(--color-muted);
221}