source: Klonkt/src/views/pages/admin-site-edit.ejs@ c2a9522

main
Last change on this file since c2a9522 was 544cd86, checked in by roboburr <roboburr@…>, 3 months ago

Appearance: full page translated to English (consistent with the rest of Admin)

All labels/headings/hints/buttons translated (Identity, Appearance,
Behaviour, Save changes, etc.) + Twitter→Twitter/X. Text only; no
functional changes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>
  • Property mode set to 100644
File size: 23.3 KB
Line 
1<div class="container admin-site-edit-page">
2 <p><a href="/admin" class="btn">&larr; Beheer</a></p>
3 <h1><%= isNew ? 'Nieuwe site' : 'Uiterlijk: ' + site.title %></h1>
4
5 <% if (typeof success !== 'undefined' && success) { %><div class="audio-flash audio-flash--ok"><%= success %></div><% } %>
6 <% if (error) { %><div class="audio-flash audio-flash--err"><%= error %></div><% } %>
7
8 <form method="post" action="<%= isNew ? '/admin/sites/create' : '/admin/sites/' + site.slug + '/save' %>" class="site-form">
9
10 <fieldset>
11 <legend>Identiteit</legend>
12 <label>
13 <span>Slug <% if (!isNew) { %><em>(vast)</em><% } %></span>
14 <input type="text" name="slug" value="<%= site.slug %>" required <% if (!isNew) { %>readonly<% } %>
15 pattern="[a-z0-9_-]{2,40}"
16 placeholder="bedrijf1">
17 </label>
18 <label>
19 <span>Titel <small class="form-hint-inline">— getoond in de kop en als weergavenaam</small></span>
20 <input type="text" name="title" value="<%= site.title || '' %>" required maxlength="200">
21 </label>
22 <label>
23 <span>Tagline <small class="form-hint-inline">— korte oneliner</small></span>
24 <input type="text" name="tagline" value="<%= site.tagline || '' %>" maxlength="200">
25 </label>
26 <label>
27 <span>Bio / omschrijving <small class="form-hint-inline">— getoond in de profielkop en gebruikt voor SEO</small></span>
28 <textarea name="description" rows="3" maxlength="500"><%= site.description || '' %></textarea>
29 </label>
30 <label>
31 <span>Profielfoto</span>
32 <div class="photo-picker" id="photo-picker">
33 <div class="photo-thumb" id="photo-thumb" <%= site.profile_photo ? '' : 'data-empty' %>>
34 <img id="photo-preview" src="<%= site.profile_photo || '' %>" alt="" <%= site.profile_photo ? '' : 'hidden' %>>
35 <span class="photo-empty" aria-hidden="true">
36 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
37 </span>
38 </div>
39 <div class="photo-controls">
40 <input type="text" name="profile_photo" id="photo-url" value="<%= site.profile_photo || '' %>" placeholder="/media/avatars/foo.jpg of https://…">
41 <div class="photo-actions">
42 <button type="button" class="btn" id="photo-upload-trigger">📷 Uploaden</button>
43 <button type="button" class="btn" id="photo-clear" <%= site.profile_photo ? '' : 'hidden' %>>Verwijder</button>
44 <small id="photo-status" class="form-hint photo-status"></small>
45 </div>
46 <input type="file" id="photo-upload-field" accept="image/jpeg,image/png,image/webp,image/gif" hidden>
47 </div>
48 </div>
49 </label>
50 <label>
51 <span>Taal (ISO-code)</span>
52 <input type="text" name="language" value="<%= site.language || 'nl' %>" maxlength="8">
53 </label>
54 <label class="cb">
55 <input type="checkbox" name="profile_enabled" value="1" <%= site.profile_enabled ? 'checked' : '' %>>
56 <span>Profielkop tonen onder de navigatie</span>
57 </label>
58 </fieldset>
59
60 <fieldset>
61 <legend>Vormgeving</legend>
62
63 <%# ── Curated accent picker ───────────────────────────────────────
64 Was a free-form <input type="color">; now a fixed set of 8 hand-
65 picked colors that work in both light and dark themes. The hex is
66 still what's stored in the DB — we just constrain WHICH hex. %>
67 <fieldset class="accent-grid">
68 <legend>Accentkleur</legend>
69 <% const _curAccent = (site.accent || '#c2410c').toLowerCase(); %>
70 <% accents.forEach(function(a) { %>
71 <label class="accent-swatch" title="<%= a.name %>">
72 <input type="radio" name="accent" value="<%= a.color %>" <%= a.color.toLowerCase() === _curAccent ? 'checked' : '' %>>
73 <span class="accent-dot" style="background: <%= a.color %>;" aria-hidden="true"></span>
74 <span class="accent-swatch-name"><%= a.name %></span>
75 </label>
76 <% }); %>
77 </fieldset>
78
79 <%# ── Default theme for new visitors ───────────────────────────
80 'auto' (empty value) lets the browser/OS decide via prefers-color-scheme.
81 'light' / 'dark' force the site default for visitors who haven't picked
82 their own preference yet. Logged-in users with users.theme set, and
83 visitors with a localStorage override, still win over this default. %>
84 <fieldset class="theme-default">
85 <legend>Standaardthema voor nieuwe bezoekers</legend>
86 <% const td = site.theme_override || ''; %>
87 <label class="cb">
88 <input type="radio" name="theme_override" value="" <%= td === '' ? 'checked' : '' %>>
89 <span>Auto (volg device-voorkeur)</span>
90 </label>
91 <label class="cb">
92 <input type="radio" name="theme_override" value="light" <%= td === 'light' ? 'checked' : '' %>>
93 <span>Licht</span>
94 </label>
95 <label class="cb">
96 <input type="radio" name="theme_override" value="dark" <%= td === 'dark' ? 'checked' : '' %>>
97 <span>Donker</span>
98 </label>
99 </fieldset>
100
101 <fieldset class="palette-grid">
102 <legend>Palet</legend>
103 <% palettes.forEach(function(p) { %>
104 <label class="palette-swatch">
105 <input type="radio" name="palette" value="<%= p.key %>" <%= (site.palette || 'sage') === p.key ? 'checked' : '' %>>
106 <span class="palette-preview" aria-hidden="true">
107 <span class="pp-half pp-light" style="background: <%= p.light.paper %>; color: <%= p.light.ink %>;">
108 <span class="pp-letter">Aa</span>
109 <span class="pp-accent" style="background: <%= p.light.accent %>;"></span>
110 </span>
111 <span class="pp-half pp-dark" style="background: <%= p.dark.paper %>; color: <%= p.dark.ink %>;">
112 <span class="pp-letter">Aa</span>
113 <span class="pp-accent" style="background: <%= p.dark.accent %>;"></span>
114 </span>
115 </span>
116 <span class="palette-swatch-name"><%= p.name %></span>
117 </label>
118 <% }); %>
119 </fieldset>
120 </fieldset>
121
122 <fieldset>
123 <legend>Gedrag</legend>
124 <label class="cb">
125 <input type="checkbox" name="is_public" value="1" <%= site.is_public ? 'checked' : '' %>>
126 <span>Publieke site (uitvinken voor een besloten kring)</span>
127 </label>
128 <label class="cb">
129 <input type="checkbox" name="robots_index" value="1" <%= site.robots_index ? 'checked' : '' %>>
130 <span>Zoekmachines mogen indexeren (sitemap.xml is verborgen indien uit)</span>
131 </label>
132 <label class="cb">
133 <input type="checkbox" name="require_login_to_comment" value="1" <%= site.require_login_to_comment ? 'checked' : '' %>>
134 <span>Inloggen vereist om te reageren</span>
135 </label>
136 <label>
137 <span>Reactie-moderatie</span>
138 <select name="comments_moderation_mode">
139 <option value="trust" <%= (site.comments_moderation_mode || 'trust') === 'trust' ? 'selected' : '' %>>Vertrouwen (automatisch goedkeuren)</option>
140 <option value="moderate" <%= site.comments_moderation_mode === 'moderate' ? 'selected' : '' %>>Modereren (eerst in de wachtrij)</option>
141 </select>
142 </label>
143 <label class="cb">
144 <input type="checkbox" name="enable_audio_player" value="1" <%= site.enable_audio_player ? 'checked' : '' %>>
145 <span>Audiospeler + embeds inschakelen</span>
146 </label>
147 <%# Prutter is een Hub-only premium-functie — toggle alleen tonen in Hub-modus. %>
148 <% if (typeof tenancy !== 'undefined' && tenancy === 'hub') { %>
149 <label class="cb">
150 <input type="checkbox" name="enable_prutter" value="1" <%= site.enable_prutter ? 'checked' : '' %>>
151 <span>Prutter (DM&rsquo;s tussen leden) inschakelen <small class="form-hint-inline">— Hub-functie, premium</small></span>
152 </label>
153 <% } %>
154 </fieldset>
155
156 <fieldset class="profile-links-fieldset">
157 <legend>Social / streaming-links</legend>
158 <p class="form-hint">Getoond als merk-iconen op de profielkop. Voeg er zoveel toe als je wilt.</p>
159
160 <div id="profile-links-rows">
161 <% (parsedLinks || []).forEach(function(l) { %>
162 <div class="profile-link-row">
163 <select name="profile_link_platform[]">
164 <% platforms.forEach(function(p) { %>
165 <option value="<%= p.key %>" <%= l.platform === p.key ? 'selected' : '' %>><%= p.label %></option>
166 <% }); %>
167 </select>
168 <input type="text" name="profile_link_url[]" value="<%= l.url %>" placeholder="https://…" required>
169 <button type="button" class="btn btn-danger pl-remove">×</button>
170 </div>
171 <% }); %>
172 </div>
173
174 <template id="profile-link-template">
175 <div class="profile-link-row">
176 <select name="profile_link_platform[]">
177 <% platforms.forEach(function(p) { %>
178 <option value="<%= p.key %>"><%= p.label %></option>
179 <% }); %>
180 </select>
181 <input type="text" name="profile_link_url[]" placeholder="https://…" required>
182 <button type="button" class="btn btn-danger pl-remove">×</button>
183 </div>
184 </template>
185
186 <button type="button" id="profile-link-add" class="btn">+ Link toevoegen</button>
187 </fieldset>
188
189 <fieldset>
190 <legend>Feed-weergave</legend>
191 <label>
192 <span>Standaardweergave voor de homepage</span>
193 <select name="feed_view_default">
194 <option value="timeline" <%= (site.feed_view_default || 'timeline') === 'timeline' ? 'selected' : '' %>>Tijdlijn (chronologische lijst)</option>
195 <option value="grid" <%= site.feed_view_default === 'grid' ? 'selected' : '' %>>Grid (kaarten)</option>
196 </select>
197 </label>
198 <label class="cb">
199 <input type="checkbox" name="feed_view_switch" value="1" <%= site.feed_view_switch ? 'checked' : '' %>>
200 <span>Tijdlijn ↔ grid-schakelaar boven de feed tonen</span>
201 </label>
202 <label class="cb">
203 <input type="checkbox" name="show_search" value="1" <%= site.show_search ? 'checked' : '' %>>
204 <span>Zoekknop in de navigatie tonen</span>
205 </label>
206 <label class="cb">
207 <input type="checkbox" name="show_archive_link" value="1" <%= site.show_archive_link ? 'checked' : '' %>>
208 <span>Archief-link in de navigatie tonen</span>
209 </label>
210 </fieldset>
211
212 <fieldset>
213 <legend>SEO &amp; social</legend>
214 <label>
215 <span>Titel-sjabloon (gebruik {title} en {site})</span>
216 <input type="text" name="title_template" value="<%= site.title_template || '{title} — {site}' %>" maxlength="200">
217 </label>
218 <label>
219 <span>Canonieke basis-URL (voor productie-HTTPS)</span>
220 <input type="text" name="canonical" value="<%= site.canonical || '' %>" placeholder="https://jouw-domein.com">
221 </label>
222 <label>
223 <span>Twitter / X-handle (met @)</span>
224 <input type="text" name="twitter" value="<%= site.twitter || '' %>" placeholder="@jouwnaam" maxlength="64">
225 </label>
226 <details>
227 <summary>Zoekmachine-verificatie</summary>
228 <label>
229 <span>Google site-verificatie</span>
230 <input type="text" name="google_verification" value="<%= site.google_verification || '' %>" maxlength="200">
231 </label>
232 <label>
233 <span>Bing (msvalidate.01)</span>
234 <input type="text" name="bing_verification" value="<%= site.bing_verification || '' %>" maxlength="200">
235 </label>
236 <label>
237 <span>Pinterest (p:domain_verify)</span>
238 <input type="text" name="pinterest_verification" value="<%= site.pinterest_verification || '' %>" maxlength="200">
239 </label>
240 <label>
241 <span>Yandex</span>
242 <input type="text" name="yandex_verification" value="<%= site.yandex_verification || '' %>" maxlength="200">
243 </label>
244 </details>
245 </fieldset>
246
247 <fieldset>
248 <legend>Eigen CSS &amp; HTML <em>(optioneel)</em></legend>
249 <label>
250 <span>Eigen CSS (geïnjecteerd als &lt;style&gt; in &lt;head&gt;)</span>
251 <textarea name="custom_css" rows="3" placeholder=".foo { color: red; }"><%= site.custom_css || '' %></textarea>
252 </label>
253 <label>
254 <span>Eigen &lt;head&gt;-HTML (analytics, extra meta&rsquo;s)</span>
255 <textarea name="custom_head_html" rows="3" placeholder="<meta name=&quot;...&quot;>"><%= site.custom_head_html || '' %></textarea>
256 </label>
257 <label>
258 <span>Eigen footer-HTML</span>
259 <textarea name="custom_foot_html" rows="3"><%= site.custom_foot_html || '' %></textarea>
260 </label>
261 </fieldset>
262
263 <button type="submit" class="btn btn-primary"><%= isNew ? 'Site aanmaken' : 'Wijzigingen opslaan' %></button>
264 </form>
265</div>
266
267<script>
268(function() {
269 // Profile-links repeater: add row from <template>, remove on click.
270 var rows = document.getElementById('profile-links-rows');
271 var tpl = document.getElementById('profile-link-template');
272 var add = document.getElementById('profile-link-add');
273 if (!rows || !tpl || !add) return;
274
275 add.addEventListener('click', function() {
276 var clone = tpl.content.cloneNode(true);
277 rows.appendChild(clone);
278 });
279 rows.addEventListener('click', function(e) {
280 if (e.target && e.target.classList.contains('pl-remove')) {
281 var row = e.target.closest('.profile-link-row');
282 if (row) row.remove();
283 }
284 });
285})();
286
287// P63 — Profile photo picker: upload via /admin/sites/upload-photo,
288// then write the returned URL into the visible input. Live thumb preview.
289(function() {
290 var picker = document.getElementById('photo-picker');
291 if (!picker) return;
292 var thumb = document.getElementById('photo-thumb');
293 var preview = document.getElementById('photo-preview');
294 var urlEl = document.getElementById('photo-url');
295 var trigger = document.getElementById('photo-upload-trigger');
296 var clear = document.getElementById('photo-clear');
297 var field = document.getElementById('photo-upload-field');
298 var status = document.getElementById('photo-status');
299
300 function showPreview(url) {
301 if (url) {
302 preview.src = url;
303 preview.hidden = false;
304 thumb.removeAttribute('data-empty');
305 clear.hidden = false;
306 } else {
307 preview.src = '';
308 preview.hidden = true;
309 thumb.setAttribute('data-empty', '');
310 clear.hidden = true;
311 }
312 }
313
314 if (urlEl) {
315 urlEl.addEventListener('input', function() {
316 showPreview(urlEl.value.trim());
317 });
318 }
319
320 if (trigger && field) {
321 trigger.addEventListener('click', function() { field.click(); });
322 field.addEventListener('change', async function() {
323 var file = field.files && field.files[0];
324 if (!file) return;
325 status.classList.remove('is-error');
326 status.textContent = 'Uploaden…';
327 try {
328 var fd = new FormData();
329 fd.append('photo', file);
330 var r = await fetch('/admin/sites/upload-photo', {
331 method: 'POST',
332 body: fd,
333 credentials: 'same-origin',
334 });
335 var j = await r.json();
336 if (!r.ok || !j.ok) throw new Error(j.error || ('Upload mislukt (' + r.status + ')'));
337 urlEl.value = j.url;
338 showPreview(j.url);
339 status.textContent = 'Geüpload ✓';
340 setTimeout(function() { status.textContent = ''; }, 2000);
341 } catch (e) {
342 status.classList.add('is-error');
343 status.textContent = 'Mislukt: ' + e.message;
344 } finally {
345 field.value = '';
346 }
347 });
348 }
349
350 if (clear) {
351 clear.addEventListener('click', function() {
352 urlEl.value = '';
353 showPreview('');
354 status.textContent = '';
355 // Note: doesn't delete the file from disk — saving the form with empty
356 // URL leaves the file orphaned on the server. Acceptable for now.
357 });
358 }
359})();
360</script>
361
362<style>
363.admin-site-edit-page { max-width: 760px; margin: 3rem auto; padding: 0 1rem; }
364.admin-site-edit-page h1 { font-family: var(--font-display, serif); font-size: 1.8rem; margin: 0 0 1.5rem; }
365
366.site-form { display: flex; flex-direction: column; gap: 1.5rem; }
367.site-form fieldset {
368 border: 1px solid var(--rule);
369 border-radius: 8px;
370 padding: 1rem 1.25rem;
371 background: var(--paper-2);
372 display: flex;
373 flex-direction: column;
374 gap: 0.75rem;
375}
376.site-form fieldset.palette-grid {
377 display: grid;
378 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
379 background: var(--paper);
380 margin-top: 0.5rem;
381}
382/* Theme default radios — horizontal, sits between accent + palette */
383.site-form fieldset.theme-default {
384 display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem;
385 background: var(--paper);
386 margin-top: 0.5rem;
387}
388.site-form fieldset.theme-default label.cb { font-size: 0.9rem; color: var(--ink); }
389.site-form fieldset legend { font-family: var(--font-display, serif); font-size: 1rem; padding: 0 0.4rem; }
390.site-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--ink-muted, var(--ink-soft)); }
391.site-form label.cb { flex-direction: row; align-items: center; gap: 0.5rem; }
392.site-form input[type="text"], .site-form input[type="color"], .site-form textarea {
393 padding: 0.55rem 0.85rem;
394 border: 1px solid var(--rule);
395 border-radius: 5px;
396 background: var(--paper);
397 color: var(--ink);
398 font-family: inherit;
399 font-size: 0.95rem;
400}
401.site-form input[type="color"] { padding: 0.2rem; height: 38px; }
402.site-form textarea { resize: vertical; min-height: 60px; font-family: var(--font-mono, monospace); font-size: 0.85rem; }
403.site-form input[readonly] { opacity: 0.6; cursor: not-allowed; background: var(--paper-2); }
404
405/* Selects: zelfde look als de inputs, met een eigen chevron i.p.v. de kale
406 native pijl. De geopende optielijst blijft door de browser gerenderd. */
407.site-form select {
408 appearance: none;
409 -webkit-appearance: none;
410 padding: 0.55rem 2.2rem 0.55rem 0.85rem;
411 border: 1px solid var(--rule);
412 border-radius: 5px;
413 background-color: var(--paper);
414 color: var(--ink);
415 font-family: inherit;
416 font-size: 0.95rem;
417 cursor: pointer;
418 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
419 background-repeat: no-repeat;
420 background-position: right 0.7rem center;
421 transition: border-color 0.15s ease, box-shadow 0.15s ease;
422}
423.site-form select:hover { border-color: var(--ink-soft, #888); }
424.site-form select:focus,
425.site-form input[type="text"]:focus,
426.site-form textarea:focus {
427 outline: none;
428 border-color: var(--accent, #c2410c);
429 box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #c2410c) 22%, transparent);
430}
431
432/* Reuse the palette-swatch styles from account.ejs */
433.palette-swatch {
434 display: flex; flex-direction: column; gap: 0.4rem;
435 padding: 0.5rem;
436 border: 1px solid var(--rule); border-radius: 6px; background: var(--paper);
437 cursor: pointer; font-size: 0.85rem; transition: border-color 120ms;
438}
439.palette-swatch:hover { border-color: var(--accent); }
440.palette-swatch input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
441.palette-swatch:has(input[type="radio"]:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
442.palette-preview {
443 display: grid; grid-template-columns: 1fr 1fr;
444 width: 100%; height: 44px; border-radius: 4px; overflow: hidden;
445 border: 1px solid var(--rule);
446}
447.pp-half {
448 position: relative;
449 display: flex; align-items: center; justify-content: center;
450 font-family: var(--font-display, serif); font-weight: 600; font-size: 1rem;
451}
452.pp-letter { line-height: 1; }
453.pp-accent {
454 position: absolute; bottom: 4px; right: 4px;
455 width: 9px; height: 9px; border-radius: 50%;
456 border: 1px solid rgba(0,0,0,0.12);
457}
458.palette-swatch-name { font-weight: 500; color: var(--ink); text-align: center; }
459
460/* Accent picker: row of small colored swatches */
461.site-form fieldset.accent-grid {
462 display: grid;
463 grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
464 gap: 0.5rem;
465 background: var(--paper);
466 margin-top: 0.5rem;
467}
468.accent-swatch {
469 display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
470 padding: 0.55rem 0.4rem;
471 border: 1px solid var(--rule); border-radius: 6px; background: var(--paper);
472 cursor: pointer; font-size: 0.78rem;
473 transition: border-color 120ms, box-shadow 120ms;
474}
475.accent-swatch:hover { border-color: var(--accent); }
476.accent-swatch input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
477.accent-swatch:has(input[type="radio"]:checked) {
478 border-color: var(--accent);
479 box-shadow: 0 0 0 2px var(--accent);
480}
481.accent-dot {
482 width: 28px; height: 28px; border-radius: 50%;
483 border: 1px solid rgba(0,0,0,0.1);
484 box-shadow: inset 0 -2px 4px rgba(0,0,0,0.12);
485}
486.accent-swatch-name { color: var(--ink); text-align: center; font-weight: 500; }
487
488.audio-flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
489.audio-flash--ok { background: rgba(40, 160, 90, 0.15); color: #2a9d5e; border: 1px solid rgba(40, 160, 90, 0.3); }
490.audio-flash--err { background: rgba(200, 60, 60, 0.15); color: #c33; border: 1px solid rgba(200, 60, 60, 0.3); }
491
492.form-hint { font-size: 0.8rem; color: var(--ink-muted, var(--ink-soft)); margin: 0; }
493.form-hint-inline { font-size: 0.78rem; color: var(--ink-muted, var(--ink-soft)); font-weight: 400; margin-left: .25rem; }
494
495/* P63 — Profile photo picker
496 Mobile-first: thumb stacks above input/buttons. ≥520px the thumb floats
497 to the left and the controls fill the remaining width. */
498.photo-picker {
499 display: flex;
500 flex-direction: column;
501 gap: .65rem;
502 align-items: stretch;
503}
504.photo-thumb {
505 position: relative;
506 width: 88px; height: 88px;
507 border-radius: 50%;
508 border: 1px solid var(--rule);
509 background: var(--paper-2);
510 overflow: hidden;
511 flex-shrink: 0;
512 display: flex; align-items: center; justify-content: center;
513}
514.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
515.photo-thumb .photo-empty {
516 display: flex; color: var(--ink-muted, var(--ink-soft)); opacity: .55;
517}
518.photo-thumb .photo-empty svg { width: 36px; height: 36px; }
519.photo-thumb:not([data-empty]) .photo-empty { display: none; }
520.photo-thumb[data-empty] img { display: none; }
521
522.photo-controls {
523 display: flex;
524 flex-direction: column;
525 gap: .5rem;
526 flex: 1;
527 min-width: 0;
528}
529.photo-controls input[type="text"] { width: 100%; }
530.photo-actions {
531 display: flex; align-items: center; flex-wrap: wrap;
532 gap: .4rem;
533}
534.photo-actions .btn { padding: .45rem .75rem; font-size: .85rem; }
535.photo-status { margin-left: .25rem; }
536.photo-status.is-error { color: #c2410c; }
537
538@media (min-width: 520px) {
539 .photo-picker { flex-direction: row; align-items: flex-start; gap: 1rem; }
540 .photo-controls { gap: .55rem; }
541}
542.profile-link-row {
543 display: grid; grid-template-columns: 160px 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem;
544}
545.profile-link-row select { padding: 0.45rem 0.6rem; }
546.profile-links-fieldset details > label { margin-top: 0.4rem; }
547</style>
Note: See TracBrowser for help on using the repository browser.