/* Viscosity MD Portal — Servicedesk design system. Token-driven theme (light/dark), accent palette (7 options) and font family (4 options), all switchable at runtime via data-theme / data-palette / data-font on , persisted in localStorage and applied before first paint by the inline bootstrap script in base.html. */ /* ---------- fonts ---------- */ :root { --app-font: 'Montserrat', system-ui, Avenir, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace; } :root[data-font='montserrat'] { --app-font: 'Montserrat', system-ui, Avenir, Helvetica, Arial, sans-serif; } :root[data-font='outfit'] { --app-font: 'Outfit', system-ui, sans-serif; } :root[data-font='inter'] { --app-font: 'Inter', system-ui, sans-serif; } :root[data-font='system'] { --app-font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* ---------- theme tokens ---------- */ :root, [data-theme='light'] { --app-bg: #ffffff; --app-surface: #ffffff; --app-surface-2: #f7f8fa; --app-border: #eceef1; --app-border-strong: #d9dde3; --app-fg: #2e2e2e; --app-fg-muted: #6b7280; --app-fg-faint: #98a2b3; --app-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.04); --app-success: #2f9e6b; --app-danger: #d64545; --app-slate: #64748b; --app-blue: #377fd9; --app-amber: #d99a2b; --app-danger-wash: #fdf6f6; --app-danger-wash-hover: #fbeeee; --app-accent-wash: #eef4fc; color-scheme: light; } [data-theme='dark'] { --app-bg: #0a0e17; --app-surface: #151d2e; --app-surface-2: #1a2540; --app-border: #1e293b; --app-border-strong: #2d3a52; --app-fg: #e2e8f0; --app-fg-muted: #94a3b8; --app-fg-faint: #64748b; --app-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --app-success: #10b981; --app-danger: #ef4444; --app-slate: #94a3b8; --app-blue: #3b82f6; --app-amber: #f59e0b; --app-danger-wash: #241419; --app-danger-wash-hover: #2c1820; --app-accent-wash: #14233c; color-scheme: dark; } /* ---------- accent palettes ---------- */ :root, [data-palette='blue'] { --app-accent: #377fd9; --app-accent-hover: #2a6bc0; } [data-palette='cyan'] { --app-accent: #0891b2; --app-accent-hover: #0b7c99; } [data-palette='emerald'] { --app-accent: #059669; --app-accent-hover: #047d57; } [data-palette='violet'] { --app-accent: #7c3aed; --app-accent-hover: #6a2fce; } [data-palette='amber'] { --app-accent: #d97706; --app-accent-hover: #b8640a; } [data-palette='rose'] { --app-accent: #e11d48; --app-accent-hover: #c01840; } [data-palette='slate'] { --app-accent: #475569; --app-accent-hover: #3b4757; } * { box-sizing: border-box; margin: 0; } html, body { background: var(--app-bg); color: var(--app-fg); font-family: var(--app-font); } body { font-size: 15px; line-height: 1.55; transition: background-color .2s ease, color .2s ease; } h1, h2, h3 { font-family: var(--app-font); color: var(--app-fg); font-weight: 700; } h1 { font-size: 25px; letter-spacing: -.01em; margin-bottom: 4px; } h2 { font-size: 16px; margin: 28px 0 12px; letter-spacing: -.005em; } p { color: var(--app-fg-muted); } a { color: var(--app-accent); } ::selection { background: var(--app-accent-wash); } /* ---------- shell / sidebar ---------- */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 232px; flex: none; background: var(--app-surface); border-right: 1px solid var(--app-border); padding: 20px 12px; display: flex; flex-direction: column; gap: 2px; } .sidebar .logo { width: 84px; margin: 0 auto 22px; display: block; } [data-theme='dark'] .logo { filter: brightness(0) invert(1); opacity: .92; } .nav-section { display: flex; flex-direction: column; gap: 2px; } .nav-main { flex: 1; } .nav-bottom { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--app-border); } .sidebar a.nav-row { display: flex; align-items: center; gap: 8px; color: var(--app-fg-muted); text-decoration: none; padding: 8px 12px; border-radius: 6px; font-size: 13.5px; font-weight: 500; border-left: 3px solid transparent; transition: background .15s, color .15s; } .sidebar a.nav-row svg { width: 16px; height: 16px; flex: none; } .sidebar a.nav-row:hover { background: var(--app-surface-2); color: var(--app-fg); } .sidebar a.nav-row.active { color: var(--app-accent); font-weight: 600; background: var(--app-accent-wash); border-left: 3px solid var(--app-accent); padding-left: 9px; border-radius: 4px; } .sidebar a.nav-row.disabled { opacity: .5; pointer-events: none; } .badge { font-size: 10px; font-weight: 600; letter-spacing: .02em; background: var(--app-surface-2); color: var(--app-fg-muted); border: 1px solid var(--app-border); border-radius: 999px; padding: 1px 7px; margin-left: auto; } .logout { margin-top: 6px; } .logout button.btn-signout { width: 100%; background: none; border: 1px solid var(--app-border-strong); color: var(--app-fg-muted); padding: 8px 12px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500; transition: background .15s, border-color .15s, color .15s; } .logout button.btn-signout:hover { background: var(--app-surface-2); color: var(--app-fg); border-color: var(--app-border-strong); } /* ---------- content ---------- */ .content { flex: 1; padding: 32px 40px; max-width: 1040px; background: var(--app-surface-2); } .login-page { display: grid; place-items: center; min-height: 100vh; max-width: none; background: var(--app-surface-2); } /* ---------- page header ---------- */ .page-head { margin-bottom: 24px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .page-head .head-text h1 { margin-bottom: 4px; } .page-head .head-text p, .lede p { color: var(--app-fg-muted); font-size: 13px; max-width: 56ch; } .head-meta { font-family: var(--mono); font-size: 12.5px; color: var(--app-fg-muted); white-space: nowrap; } /* ---------- cards, forms ---------- */ .card { max-width: 420px; display: flex; flex-direction: column; gap: 16px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px; padding: 24px; box-shadow: var(--app-shadow); } .login-card { text-align: center; align-items: center; } .login-card form { width: 100%; display: flex; flex-direction: column; gap: 16px; } .login-page .logo { width: 40px; margin: 0 auto 4px; display: block; } .login-card h1 { font-size: 20px; } .login-footer { color: var(--app-fg-faint); font-size: 13px; margin-top: 4px; } .center-page { display: grid; place-items: center; min-height: calc(100vh - 64px); } .password-card { width: 400px; max-width: 100%; text-align: center; align-items: center; } .password-card h1 { font-size: 20px; } .password-card form { width: 100%; display: flex; flex-direction: column; gap: 16px; } .panel { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px; padding: 20px 22px; } .panel-form { max-width: 420px; display: flex; flex-direction: column; gap: 16px; } .field-block { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; } label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--app-fg); } input, select { height: 36px; padding: 0 12px; border: 1px solid var(--app-border-strong); border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--app-fg); background: var(--app-surface); transition: border-color .15s, box-shadow .15s; } input::placeholder { color: var(--app-fg-faint); } input:focus, select:focus { outline: none; border-color: var(--app-accent); box-shadow: inset 0 0 0 1px var(--app-accent); } .btn, button[type=submit] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; height: 36px; padding: 0 16px; font: inherit; font-size: 13.5px; font-weight: 500; color: #fff; background: var(--app-accent); border: 1px solid var(--app-accent); border-radius: 8px; transition: background .15s, border-color .15s; white-space: nowrap; } .btn:hover, button[type=submit]:hover { background: var(--app-accent-hover); border-color: var(--app-accent-hover); } .btn:active, button[type=submit]:active { transform: translateY(1px); } .btn-block { width: 100%; } .btn.ghost { color: var(--app-fg-muted); background: transparent; border-color: var(--app-border-strong); font-weight: 500; } .btn.ghost:hover { color: var(--app-fg); border-color: var(--app-fg-faint); background: var(--app-surface-2); } .btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 6px; } button.btn-link, a.btn-link { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; box-shadow: none; padding: 0; color: var(--app-accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; height: auto; } button.btn-link:hover, a.btn-link:hover { color: var(--app-accent-hover); text-decoration: underline; } button.btn-link.danger, a.btn-link.danger { color: var(--app-danger); } button.btn-link.danger:hover, a.btn-link.danger:hover { color: var(--app-danger); } .error { color: var(--app-danger); font-size: 13px; } /* ---------- table card ---------- */ .table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--app-border); background: var(--app-surface); } table { border-collapse: collapse; width: 100%; } thead th { background: var(--app-surface-2); border-bottom: 1px solid var(--app-border); color: var(--app-fg-muted); text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 10px 14px; } tr th { background: var(--app-surface-2); border-bottom: 1px solid var(--app-border); color: var(--app-fg-muted); text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 10px 14px; } td { padding: 11px 14px; border-bottom: 1px solid var(--app-border); font-size: 13.5px; } tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--app-surface-2); } /* ---------- pills / tags ---------- */ .tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .tag-success { color: var(--app-success); background: color-mix(in srgb, var(--app-success) 16%, var(--app-surface)); } .tag-off { color: var(--app-fg-faint); background: var(--app-surface-2); } .notice { background: var(--app-accent-wash); border: 1px solid var(--app-border); padding: 14px 16px; margin-bottom: 20px; border-radius: 10px; } .notice code { font-family: var(--mono); color: var(--app-accent); font-weight: 600; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 6px; padding: 2px 6px; } .actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .actions form { display: inline-block; margin: 0; } .empty-state { color: var(--app-fg-muted); background: var(--app-surface); border: 1px dashed var(--app-border-strong); border-radius: 12px; padding: 40px; text-align: center; } .empty-state strong { display: block; color: var(--app-fg); font-size: 15px; margin-bottom: 4px; } /* ---------- document links (documents.html) ---------- */ .doc-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .doc-link { display: inline-flex; align-items: center; gap: 5px; color: var(--app-fg-muted); text-decoration: none; font-size: 12.5px; font-weight: 500; } .doc-link svg { width: 15px; height: 15px; flex: none; } .doc-link:hover { color: var(--app-accent); } .doc-link.word-link:hover { color: var(--word-blue); } :root { --word-blue: #2b579a; } [data-theme='dark'] { --word-blue: #4a86e8; } /* ---------- settings page ---------- */ .settings-card { max-width: 480px; display: flex; flex-direction: column; gap: 22px; } .settings-card h2 { margin: 0 0 2px; font-size: 17px; } .settings-field { display: flex; flex-direction: column; gap: 8px; } .settings-field .f-label { font-weight: 600; font-size: 13.5px; color: var(--app-fg); } .settings-field .f-hint { font-size: 12.5px; color: var(--app-fg-muted); margin: -4px 0 2px; } .segmented { display: inline-flex; gap: 4px; padding: 3px; background: var(--app-surface-2); border: 1px solid var(--app-border); border-radius: 9px; width: fit-content; } .segmented button { cursor: pointer; border: none; background: transparent; color: var(--app-fg-muted); font: inherit; font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 7px; transition: background .15s, color .15s, box-shadow .15s; } .segmented button:hover { color: var(--app-fg); } .segmented button[aria-pressed="true"] { background: var(--app-surface); color: var(--app-fg); box-shadow: var(--app-shadow); font-weight: 600; } .swatches { display: flex; gap: 12px; flex-wrap: wrap; } .swatch { position: relative; width: 30px; height: 30px; border-radius: 999px; border: none; cursor: pointer; display: grid; place-items: center; padding: 0; } .swatch svg { width: 14px; height: 14px; color: #fff; opacity: 0; transition: opacity .12s; } .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--app-surface), 0 0 0 4px var(--swatch-color, var(--app-accent)); } .swatch[aria-pressed="true"] svg { opacity: 1; } /* ---------- activity page ---------- */ .filter-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-fg-muted); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .filter-pill:hover { color: var(--app-fg); border-color: var(--app-border-strong); } .filter-pill .dot { width: 7px; height: 7px; border-radius: 999px; flex: none; background: var(--app-fg-faint); } .filter-pill[aria-pressed="true"] { background: var(--app-accent-wash); color: var(--app-accent); border-color: var(--app-accent); font-weight: 600; } .act-when { font-family: var(--mono); font-size: 12.5px; color: var(--app-fg-muted); white-space: nowrap; } .act-action { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; } .act-action .dot { width: 7px; height: 7px; border-radius: 999px; flex: none; } .act-success .dot, .act-success { color: var(--app-success); } .act-danger .dot, .act-danger { color: var(--app-danger); } .act-blue .dot, .act-blue { color: var(--app-blue); } .act-amber .dot, .act-amber { color: var(--app-amber); } .act-success .dot { background: var(--app-success); } .act-danger .dot { background: var(--app-danger); } .act-blue .dot { background: var(--app-blue); } .act-amber .dot { background: var(--app-amber); } .act-row td:first-child { position: relative; } .act-row td:first-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--app-fg-faint); } .act-row.ev-success td:first-child::before { background: var(--app-success); } .act-row.ev-danger td:first-child::before { background: var(--app-danger); } .act-row.ev-blue td:first-child::before { background: var(--app-blue); } .act-row.ev-amber td:first-child::before { background: var(--app-amber); } .act-row.ev-danger td { background: var(--app-danger-wash); } .act-row.ev-danger:hover td { background: var(--app-danger-wash-hover); } .act-row.pill-hidden { display: none; } /* ---------- users page ---------- */ .users-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; } .users-head h1 { margin-bottom: 0; } /* ---------- MD to Word: lede + dropzone + options ---------- */ .lede { margin-bottom: 24px; } .lede h1 { margin-bottom: 6px; } .convert-form { display: flex; flex-direction: column; gap: 20px; max-width: 640px; } .dropzone { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: clamp(28px, 5vw, 48px) 24px; text-align: center; cursor: pointer; background: var(--app-surface); border: 1.5px dashed var(--app-border-strong); border-radius: 12px; box-shadow: var(--app-shadow); transition: border-color .2s, background .2s, transform .15s; } .dropzone:hover { border-color: var(--app-accent); transform: translateY(-1px); } .dropzone.dragover { border-color: var(--app-accent); border-style: solid; background: var(--app-accent-wash); } .dropzone.has-file { border-style: solid; border-color: var(--app-accent); } .dz-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; color: var(--app-accent); background: var(--app-accent-wash); border: 1px solid var(--app-border); } .dz-icon svg { width: 24px; height: 24px; } .dz-title { font-size: 15px; font-weight: 600; color: var(--app-fg); } .dz-title b { color: var(--app-accent); font-weight: 600; } .dz-hint { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--app-fg-muted); text-transform: uppercase; } .dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .opt-grid { display: flex; flex-wrap: wrap; gap: 10px; } .toggle { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; cursor: pointer; user-select: none; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--app-fg-muted); transition: border-color .15s, color .15s, background .15s; } .toggle:hover { border-color: var(--app-border-strong); } .toggle input { position: absolute; opacity: 0; pointer-events: none; } .toggle .dot { width: 16px; height: 16px; border-radius: 5px; flex: none; border: 1.5px solid var(--app-fg-faint); background: transparent; display: grid; place-items: center; transition: border-color .15s, background .15s; } .toggle .dot svg { width: 11px; height: 11px; opacity: 0; transform: scale(.5); transition: .15s; color: #fff; } .toggle input:checked + .dot { background: var(--app-accent); border-color: var(--app-accent); } .toggle input:checked + .dot svg { opacity: 1; transform: scale(1); } .toggle input:checked ~ .lbl { color: var(--app-fg); } .toggle input:focus-visible + .dot { outline: 2px solid var(--app-accent); outline-offset: 2px; } details.adv { margin-top: -6px; } details.adv summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--app-fg-muted); list-style: none; padding: 4px 2px; width: fit-content; } details.adv summary::-webkit-details-marker { display: none; } details.adv summary .chev { transition: transform .2s; } details.adv[open] summary .chev { transform: rotate(90deg); } .adv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--app-fg-muted); } .field input { width: 100%; } /* ---------- Gantt Chart: phase-rows editor ---------- */ .gantt-table { border-collapse: collapse; width: 100%; } .gantt-table th { background: var(--app-surface-2); border-bottom: 1px solid var(--app-border); color: var(--app-fg-muted); text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 10px 12px; } .gantt-table td { padding: 8px 12px; border-bottom: 1px solid var(--app-border); } .gantt-table tr:last-child td { border-bottom: none; } .gantt-table td:first-child { width: 46%; } .gantt-table td:nth-child(2), .gantt-table td:nth-child(3), .gantt-table td:nth-child(4) { width: 16%; } .gantt-table td:last-child { width: 1%; white-space: nowrap; } .gantt-table input { width: 100%; height: 34px; } .gantt-table input[type=number] { font-family: var(--mono); } .row-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; background: transparent; border: 1px solid var(--app-border-strong); color: var(--app-fg-muted); font-size: 15px; line-height: 1; padding: 0; transition: background .15s, border-color .15s, color .15s; } .row-remove:hover { background: var(--app-danger-wash); border-color: var(--app-danger); color: var(--app-danger); } /* ---------- document view / preview ---------- */ .doc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .source-wrap { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px; box-shadow: var(--app-shadow); overflow: auto; max-height: 70vh; } .source-view { margin: 0; padding: 20px 22px; overflow: auto; font: 13px/1.6 var(--mono); color: var(--app-fg); white-space: pre-wrap; word-break: break-word; } .preview-note { color: var(--app-fg-muted); font-size: 13px; } .preview-sheet-wrap { overflow-x: auto; padding: 22px 0; } .preview-sheet { background: #ffffff; color: #16233a; max-width: 840px; margin: 0 auto; border: 1px solid var(--app-border); border-radius: 10px; box-shadow: var(--app-shadow); padding: 16px; } .preview-sheet .docx-wrapper { background: transparent; padding: 0; } .preview-sheet .docx-wrapper > section.docx { margin: 0 auto 1rem; box-shadow: none !important; } :focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; } @media (max-width: 720px) { .shell { flex-direction: column; } .sidebar { width: 100%; } .content { padding: 20px; } .adv-fields { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .001ms !important; } }