From 72ca68d1e3218e0a6d80724e480c514306808e2d Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 26 Sep 2026 04:09:46 +0000 Subject: [PATCH] Give the remaining app pages a more polished layout Apply one shared style block to System Sync, Backup & Restore, Configuration, System Health, Needs attention, Activity, Terminal, Services, System inventory, Workflows, and Change timeline: an accent-tinted page header card, consistent 13px body text in place of the browser's 16px default, matching panel titles, rotating chevrons on collapsible sections, focus rings on inputs, accent checkboxes, centered empty states, and dashed placeholders for empty output boxes. Also style the Services and timeline search fields, size the Configuration source label like its sibling headings, and space the Workflows buttons. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01BUhabxL4SPejg19jgbSyYN --- src/styles.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/styles.css b/src/styles.css index 084f538..222b927 100644 --- a/src/styles.css +++ b/src/styles.css @@ -494,3 +494,24 @@ button:disabled { cursor:default; } #toolbox-view #toolbox-updates label { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); } #toolbox-view .toolbox-layout { margin-bottom:18px; } #toolbox-view pre.output:empty { display:none; } + +/* Shared polish for the remaining module pages */ +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) { --mod-tint: rgba(99,230,255,.12); --mod-tint: color-mix(in srgb, var(--cyan) 14%, transparent); --mod-tint-soft: rgba(99,230,255,.05); --mod-tint-soft: color-mix(in srgb, var(--cyan) 6%, transparent); font-size:13px; } +:root[data-text-size="large"] :is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) { font-size:15px; } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) > .module-heading { align-items:center; padding:24px 28px; border:1px solid var(--line); border-radius:14px; background:radial-gradient(circle at 92% 0%, var(--mod-tint), transparent 45%), linear-gradient(135deg, var(--mod-tint-soft), transparent 60%), var(--surface); } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) > .module-heading .eyebrow { color:var(--cyan); } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) .module-panel { transition:border-color .18s ease; } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) .module-panel:focus-within { border-color:var(--mod-tint); } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) .module-panel h3 { font-size:15px; } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) .module-empty { text-align:center; } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) details > summary { display:flex; align-items:center; gap:10px; font-weight:700; cursor:pointer; list-style:none; } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) details > summary::-webkit-details-marker { display:none; } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) details > summary::before { content:"›"; display:grid; place-items:center; flex-shrink:0; width:22px; height:22px; border-radius:6px; background:var(--mod-tint-soft); color:var(--cyan); font-size:15px; transition:transform .18s ease; } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) details[open] > summary::before { transform:rotate(90deg); } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { transition:border-color .15s ease, box-shadow .15s ease; } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--mod-tint); } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) input[type=checkbox] { accent-color:var(--cyan); } +:is(#sync-view,#backup-view,#config-view,#health-view,#attention-view,#activity-view,#terminal-view,#services-view,#inventory-view,#operations-view,#timeline-view) pre.output:empty { min-height:44px; border-style:dashed; background:transparent; } +#services-view #service-search, #timeline-view #timeline-search { flex:1; min-width:180px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); color:var(--text); font:inherit; } +#config-view label[for="config-text"] > strong { font-size:15px; } +#operations-view .module-panel > .secondary-button + .secondary-button { margin-left:8px; }