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; }