/* ============================================================================
synth-shell.css
----------------------------------------------------------------------------
Canonical sidebar + shell stylesheet for every Synthology product.
Served at /synth-shell.css by hosts that reference Synthology.Shared.Web.
Brand color: ONE knob — --brand — set per product in host :
============================================================================ */
/* --- Theme variables (dark default, light + system overrides) ------------- */
:root {
--bg: #0f1117;
--surface: #1a1d2e;
--card: #1e2235;
--border: #2d3148;
--accent: #4f8ef7;
--accent2: #7c3aed;
--green: #22c55e;
--red: #ef4444;
--yellow: #f59e0b;
--orange: #f97316;
--text: #e2e8f0;
--muted: #64748b;
--font: 'Segoe UI', system-ui, sans-serif;
--sidebar-width: 220px;
/* Brand defaults to a neutral slate; every product SHOULD override. */
--brand: #4f8ef7;
--brand-rgb: 79, 142, 247;
}
[data-theme="light"] {
--bg: #f8fafc;
--surface: #ffffff;
--card: #f1f5f9;
--border: #e2e8f0;
--green: #16a34a;
--red: #dc2626;
--yellow: #d97706;
--orange: #ea580c;
--text: #1e293b;
--muted: #64748b;
}
@media (prefers-color-scheme: light) {
[data-theme="system"] {
--bg: #f8fafc;
--surface: #ffffff;
--card: #f1f5f9;
--border: #e2e8f0;
--green: #16a34a;
--red: #dc2626;
--yellow: #d97706;
--orange: #ea580c;
--text: #1e293b;
--muted: #64748b;
}
}
/* --- Reset + base --------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font);
min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
/* --- Layout container ----------------------------------------------------- */
.layout, .app { display: flex; min-height: 100vh; }
/* ==========================================================================
SIDEBAR
========================================================================== */
.sidebar {
width: var(--sidebar-width);
background: var(--surface);
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
position: fixed; height: 100vh; z-index: 100;
}
.sidebar-resize-handle {
position: absolute; top: 0; right: -3px;
width: 6px; height: 100%;
cursor: ew-resize; z-index: 200;
background: transparent;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
background: rgba(var(--brand-rgb), .4);
}
/* Sticky header (product name + version) */
.sidebar-header { flex-shrink: 0; }
.sidebar-logo {
padding: 20px 16px 16px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 10px;
}
.sidebar-logo .mark {
width: 32px; height: 32px; border-radius: 7px;
background: linear-gradient(135deg, var(--brand), var(--accent));
color: var(--surface); font-weight: 800; font-size: 13px;
display: flex; align-items: center; justify-content: center;
letter-spacing: -0.3px;
}
/* When config.discPath is set, SynthShell.init() adds `.has-disc` to the
mark element and replaces its 2-letter text with an ![]()
.
Strip the gradient/letter styling and render the SVG disc as a circular
32×32 badge — the brand-color circle is baked into the disc SVG itself,
so this container needs no background or border. */
.sidebar-logo .mark.has-disc {
background: none;
border-radius: 50%;
overflow: hidden;
padding: 0;
letter-spacing: normal;
font-size: 0;
}
.sidebar-logo .mark.has-disc img.disc {
width: 100%;
height: 100%;
display: block;
}
.sidebar-logo svg { width: 28px; height: 28px; }
.sidebar-logo .title,
.sidebar-logo span {
font-size: 14px; font-weight: 700;
color: var(--brand); letter-spacing: .5px;
}
.sidebar-logo small {
display: block; font-size: 10px;
color: var(--muted); font-weight: 400;
}
/* Identity widget (below header, above search) */
.sidebar-user {
display: none; /* JS reveals on /api/auth/whoami success */
padding: 10px 14px;
border-bottom: 1px solid var(--border);
background: rgba(var(--brand-rgb), .06);
}
.sidebar-user-row {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
min-width: 0; /* let flex children shrink */
}
.sidebar-user-row > * { min-width: 0; } /* same for inner wrappers */
.sidebar-user-name {
font-size: 12px; font-weight: 600; color: var(--brand);
/* Long org emails (e.g. firstname.lastname@long-org-domain.tld)
overflowed the sidebar width into the main content area. Allow
word-break inside the local-part / domain so the email wraps to
a second line instead of overflowing horizontally. */
overflow-wrap: anywhere;
word-break: break-word;
}
.sidebar-user-role {
font-size: 10px; color: var(--muted); text-transform: uppercase;
}
.sidebar-user-actions { display: flex; gap: 4px; }
.sidebar-user-actions button {
background: transparent; border: 1px solid var(--border);
color: var(--muted); padding: 3px 6px;
border-radius: 4px; cursor: pointer; font-size: 11px;
}
.sidebar-user-actions button:hover {
color: var(--text); border-color: var(--brand);
}
/* Live-filter search */
.sidebar-search {
padding: 6px 12px 8px;
flex-shrink: 0;
border-bottom: 1px solid var(--border);
}
.sidebar-search-wrap { position: relative; }
.sidebar-search-wrap::before {
content: '🔍';
position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
font-size: 10px; pointer-events: none;
}
.sidebar-search input {
width: 100%;
font-size: 11px; padding: 5px 8px 5px 26px;
border-radius: 5px;
background: var(--bg); border: 1px solid var(--border);
color: var(--text); outline: none;
}
.sidebar-search input:focus { border-color: var(--brand); }
/* Scrollable nav region */
.sidebar nav,
.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
/* Section headers + collapsible groups */
.sidebar-section {
padding: 12px 16px 4px;
font-size: 10px; font-weight: 700;
color: var(--muted); letter-spacing: 1px;
text-transform: uppercase;
}
.sidebar-section.collapsible {
cursor: pointer;
display: flex; justify-content: space-between; align-items: center;
user-select: none;
}
.sidebar-section.collapsible:hover { color: var(--text); }
.sidebar-section .caret {
transition: transform .2s;
font-style: normal; font-size: 10px;
}
.sidebar-section.collapsed .caret { transform: rotate(-90deg); }
.section-alert-badge {
margin-left: auto;
background: var(--red); color: #fff;
border-radius: 10px; padding: 1px 7px;
font-size: 10px; font-weight: 700;
min-width: 18px; text-align: center;
}
.sidebar-group {
overflow: hidden;
transition: max-height .25s ease;
}
.sidebar-group.collapsed { max-height: 0 !important; }
/* Nav links */
nav a,
.sidebar-nav a {
display: flex; align-items: center; gap: 10px;
padding: 11px 16px;
color: var(--muted); cursor: pointer;
font-size: 13px; font-weight: 500;
transition: all .15s;
border-left: 3px solid transparent;
}
nav a:hover,
.sidebar-nav a:hover {
color: var(--text);
background: rgba(var(--brand-rgb), .06);
}
nav a.active,
.sidebar-nav a.active {
color: var(--text);
background: rgba(var(--brand-rgb), .10);
border-left-color: var(--brand);
}
nav a svg,
.sidebar-nav a svg { width: 16px; height: 16px; flex-shrink: 0; }
nav a .ico,
.sidebar-nav a .ico {
width: 16px; display: inline-block; text-align: center;
}
nav a .locked,
nav a .nav-lock-badge {
margin-left: auto;
font-size: 9px; color: var(--muted); letter-spacing: .5px;
}
/* License-lock states */
.nav-item-locked { opacity: .55; }
.nav-item-hidden { display: none !important; }
/* Drag-reorder affordances */
.sidebar-drag-item { cursor: grab; }
.sidebar-drag-item.dragging { opacity: .35; }
.sidebar-drag-over,
.sidebar-item-drag-over {
outline: 2px dashed var(--brand);
outline-offset: -2px;
border-radius: 4px;
}
.sidebar-item-drag-over { background: rgba(var(--brand-rgb), .06); }
.sidebar-hidden-item { display: none !important; }
/* ==========================================================================
SIDEBAR FOOTER
========================================================================== */
.sidebar-footer {
padding: 12px 14px;
border-top: 1px solid var(--border);
background: var(--surface);
position: sticky; bottom: 0;
flex-shrink: 0;
}
.sidebar-footer .footer-copyright {
text-align: center;
font-size: 10px;
color: var(--brand);
padding: 4px 8px;
font-weight: 600;
line-height: 1.3;
}
.sidebar-footer .footer-copyright a {
color: inherit;
text-decoration: underline;
opacity: .85;
}
/* Theme chip row (3 discrete buttons: ☀ 🌙 SYS) + Save/Reset pair */
.sidebar-footer .footer-row {
display: flex; align-items: center; justify-content: space-between;
padding: 4px 4px;
border-top: 1px solid rgba(255, 255, 255, .08);
margin-top: 4px;
gap: 6px;
}
.theme-btn,
.prefs-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
padding: 4px 8px;
border-radius: 5px;
cursor: pointer;
font-size: 11px;
display: inline-flex; align-items: center; gap: 4px;
transition: color .15s, border-color .15s, background .15s;
}
.theme-btn:hover,
.prefs-btn:hover {
color: var(--text); border-color: var(--brand);
}
.theme-btn.active {
color: var(--brand);
border-color: var(--brand);
background: rgba(var(--brand-rgb), .10);
}
.sidebar-footer .theme-group,
.sidebar-footer .prefs-group { display: flex; gap: 4px; }
/* Full-width utility buttons (Collapse All, Hide Unlicensed) */
.sidebar-footer .btn-sidebar-util {
width: 100%;
margin-top: 6px;
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
padding: 6px 10px;
border-radius: 5px;
cursor: pointer;
font-size: 11px;
}
.sidebar-footer .btn-sidebar-util:hover {
color: var(--text);
border-color: var(--brand);
}
.sidebar-footer .btn-sidebar-util.active {
color: var(--brand);
border-color: var(--brand);
background: rgba(var(--brand-rgb), .08);
}
/* Restart & Reload License (dangerous, orange tint) */
.sidebar-footer .btn-restart-reload {
width: 100%;
display: flex; align-items: center; justify-content: center;
gap: 7px;
font-size: 12px;
padding: 7px 10px;
margin-top: 8px;
background: rgba(var(--brand-rgb), .08);
border: 1px solid rgba(var(--brand-rgb), .25);
color: var(--brand);
border-radius: 6px;
cursor: pointer;
transition: background .15s, border-color .15s;
font-weight: 600; letter-spacing: .2px;
}
.sidebar-footer .btn-restart-reload:hover {
background: rgba(var(--brand-rgb), .16);
border-color: rgba(var(--brand-rgb), .5);
}
.sidebar-footer .btn-restart-reload:disabled {
opacity: .5; cursor: not-allowed;
}
.sidebar-footer .restart-status {
margin-top: 6px;
font-size: 11px;
text-align: center;
color: var(--muted);
min-height: 14px;
transition: color .2s;
}
/* HIPAA / compliance mode badge (optional, rendered by host) */
.sidebar-footer .hipaa-badge {
margin-top: 8px;
padding: 6px 8px;
background: rgba(34, 197, 94, .12);
border: 1px solid rgba(34, 197, 94, .35);
border-radius: 6px;
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: .5px;
color: var(--green); text-align: center;
}
/* ==========================================================================
MAIN CONTENT AREA
========================================================================== */
.main, .content {
margin-left: var(--sidebar-width);
padding: 28px 32px 40px;
flex: 1; min-width: 0;
transition: margin-left .1s;
}
.page, .pane { display: none; }
.page.active, .pane.active { display: block; }
.page-hdr, .page-header {
position: sticky; top: 0; z-index: 50;
background: var(--bg);
padding: 16px 0 12px;
border-bottom: 1px solid var(--border);
margin-bottom: 20px;
display: flex; justify-content: space-between;
align-items: flex-start; gap: 16px;
}
.page-hdr h1, .page-header h1 { margin: 0 0 2px; color: var(--brand); }
.page-hdr .subtitle, .page-header .subtitle {
margin: 0; color: var(--muted); font-size: 13px;
}
.page-hdr-actions, .page-header-actions {
display: flex; gap: 8px; align-items: center;
flex-shrink: 0; flex-wrap: wrap; padding-top: 4px;
}
/* Small-screen: sidebar collapses off-canvas */
@media (max-width: 900px) {
.sidebar { transform: translateX(-100%); }
.main, .content { margin-left: 0; padding: 18px; }
}