daveadmin
2e2b0b45fa
Rebuild the dashboard as a Drive-style document management system on top of the existing CaveauAI hybrid RAG pipeline. Backend: - 5 migrations (versions, trash soft-delete, saved searches, categories, audit) - DMS helpers (folder ACL walker, disk storage, audit, version snapshot, XLSX/PPTX/HTML/CSV/MD extractors) - New APIs: folders, document-versions, trash, bulk, preview, saved-searches, categories, diagnostics - Extended APIs: documents (folder_id, soft-delete, ACL filter, sort), upload (9 file types, version-collision detection with replace/new/keep-both, disk persistence), chat-stream (folder scoping + graph related-documents) - 30-day trash purge cron with Qdrant + disk + graph cleanup Frontend: - Drive-style two-pane browser with folder tree, drag-drop, bulk-action bar, right-click context menu, multi-select - New pages: folders (tree + per-folder ACL editor), trash (restore/purge) - Extended pages: upload (folder picker, version-collision modal, 9 file type chips), document (Preview/Versions/Permissions tabs with PDF.js + mammoth.js + audio), index (DMS KPIs + activity feed), settings (live diagnostics ping MariaDB/Qdrant/LiteLLM/FalkorDB/disk), chat (folder scope chips + related-authorities chips) - New CSS (dms.css) + JS bundle (dms.js) exposing window.DBN_DMS - Sidebar nav adds Folders + Trash items All routes return HTTP 200 in local smoke test; all 32 files lint clean. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
720 lines
17 KiB
CSS
720 lines
17 KiB
CSS
/* ============================================================
|
|
* DMS — Document Management System styles
|
|
* Two-pane Drive-style browser, folder tree, list, modals.
|
|
* Reuses dashboard.css design tokens (paper, navy, red, gold, line).
|
|
* ============================================================ */
|
|
|
|
:root {
|
|
--dms-tree-w: 240px;
|
|
--dms-row-h: 48px;
|
|
--dms-radius: 10px;
|
|
--dms-radius-sm: 6px;
|
|
--dms-stroke: rgba(22,19,15,0.16);
|
|
--dms-stroke-soft: rgba(22,19,15,0.08);
|
|
--dms-hover: rgba(0,32,91,0.06);
|
|
--dms-selected: rgba(184,138,44,0.16);
|
|
--dms-paper: #f6f2ea;
|
|
--dms-navy: #00205b;
|
|
--dms-red: #ba0c2f;
|
|
--dms-gold: #b88a2c;
|
|
--dms-shadow-soft: 0 1px 0 var(--dms-stroke);
|
|
--dms-shadow-modal: 0 12px 48px rgba(0,0,0,0.18);
|
|
}
|
|
|
|
/* ─── Drive-style two-pane shell (lives inside .dash-main__body) ─── */
|
|
.dms-shell {
|
|
display: grid;
|
|
grid-template-columns: var(--dms-tree-w) minmax(0, 1fr);
|
|
gap: 16px;
|
|
min-height: 60vh;
|
|
}
|
|
.dms-shell--single { grid-template-columns: 1fr; }
|
|
|
|
/* ─── Tree sidebar ─── */
|
|
.dms-tree {
|
|
background: #fff;
|
|
border: 1px solid var(--dms-stroke);
|
|
border-radius: var(--dms-radius);
|
|
padding: 8px 6px;
|
|
height: fit-content;
|
|
position: sticky;
|
|
top: 16px;
|
|
max-height: calc(100vh - 32px);
|
|
overflow-y: auto;
|
|
}
|
|
.dms-tree__section {
|
|
padding: 8px 8px 4px;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: rgba(22,19,15,0.55);
|
|
font-weight: 600;
|
|
}
|
|
.dms-tree__list { list-style: none; margin: 0; padding: 0; }
|
|
.dms-tree__node {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 8px;
|
|
border-radius: var(--dms-radius-sm);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
font-size: 14px;
|
|
color: #1a1c2c;
|
|
line-height: 1.2;
|
|
}
|
|
.dms-tree__node:hover { background: var(--dms-hover); }
|
|
.dms-tree__node.is-active {
|
|
background: var(--dms-selected);
|
|
color: var(--dms-navy);
|
|
font-weight: 600;
|
|
}
|
|
.dms-tree__node.is-drop-target {
|
|
background: rgba(0,32,91,0.10);
|
|
outline: 2px dashed var(--dms-navy);
|
|
outline-offset: -2px;
|
|
}
|
|
.dms-tree__caret {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 0.15s;
|
|
opacity: 0.6;
|
|
}
|
|
.dms-tree__caret.is-open { transform: rotate(90deg); }
|
|
.dms-tree__caret--empty { visibility: hidden; }
|
|
.dms-tree__icon { width: 16px; flex: 0 0 16px; }
|
|
.dms-tree__dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--dms-stroke);
|
|
flex: 0 0 8px;
|
|
}
|
|
.dms-tree__label {
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.dms-tree__count {
|
|
font-size: 11px;
|
|
color: rgba(22,19,15,0.55);
|
|
background: var(--dms-stroke-soft);
|
|
padding: 1px 6px;
|
|
border-radius: 999px;
|
|
}
|
|
.dms-tree__node.is-active .dms-tree__count {
|
|
background: rgba(255,255,255,0.6);
|
|
color: var(--dms-navy);
|
|
}
|
|
.dms-tree__children {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
}
|
|
.dms-tree__btn {
|
|
width: 100%;
|
|
background: none;
|
|
border: 0;
|
|
padding: 6px 8px;
|
|
text-align: left;
|
|
color: var(--dms-navy);
|
|
cursor: pointer;
|
|
border-radius: var(--dms-radius-sm);
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
margin-top: 4px;
|
|
}
|
|
.dms-tree__btn:hover { background: var(--dms-hover); }
|
|
|
|
/* ─── Main pane ─── */
|
|
.dms-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
.dms-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
background: #fff;
|
|
border: 1px solid var(--dms-stroke);
|
|
border-radius: var(--dms-radius);
|
|
padding: 10px 12px;
|
|
}
|
|
.dms-toolbar__crumbs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
font-size: 14px;
|
|
color: #1a1c2c;
|
|
min-width: 0;
|
|
}
|
|
.dms-toolbar__crumbs a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
}
|
|
.dms-toolbar__crumbs a:hover { background: var(--dms-hover); }
|
|
.dms-toolbar__crumb-sep { opacity: 0.4; font-size: 12px; }
|
|
.dms-toolbar__crumb--current { font-weight: 600; color: var(--dms-navy); }
|
|
.dms-toolbar__actions {
|
|
margin-left: auto;
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.dms-filters {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: 8px 12px;
|
|
background: #fdfaf3;
|
|
border: 1px solid var(--dms-stroke-soft);
|
|
border-radius: var(--dms-radius);
|
|
}
|
|
.dms-filters input[type=search],
|
|
.dms-filters select {
|
|
border: 1px solid var(--dms-stroke);
|
|
border-radius: var(--dms-radius-sm);
|
|
padding: 6px 10px;
|
|
background: #fff;
|
|
font-size: 13px;
|
|
min-width: 0;
|
|
}
|
|
.dms-filters input[type=search] { flex: 1 1 240px; }
|
|
|
|
/* Chips */
|
|
.dms-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
background: var(--dms-stroke-soft);
|
|
font-size: 12px;
|
|
color: #1a1c2c;
|
|
}
|
|
.dms-chip--cat { background: rgba(0,32,91,0.10); color: var(--dms-navy); }
|
|
.dms-chip--tag { background: rgba(184,138,44,0.16); color: #6c5212; }
|
|
.dms-chip--folder{ background: rgba(255,255,255,0.6); color: var(--dms-navy); border: 1px solid var(--dms-stroke-soft); }
|
|
.dms-chip__x {
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
margin-left: 2px;
|
|
}
|
|
.dms-chip__x:hover { opacity: 1; }
|
|
|
|
/* ─── Doc list (table style) ─── */
|
|
.dms-list {
|
|
background: #fff;
|
|
border: 1px solid var(--dms-stroke);
|
|
border-radius: var(--dms-radius);
|
|
overflow: hidden;
|
|
}
|
|
.dms-list__head,
|
|
.dms-list__row {
|
|
display: grid;
|
|
grid-template-columns: 36px minmax(0,3.5fr) 1.2fr 1.2fr 110px 90px 36px;
|
|
gap: 8px;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
}
|
|
.dms-list__head {
|
|
background: #fdfaf3;
|
|
border-bottom: 1px solid var(--dms-stroke);
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: rgba(22,19,15,0.65);
|
|
font-weight: 600;
|
|
}
|
|
.dms-list__head button {
|
|
background: none;
|
|
border: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
color: inherit;
|
|
font: inherit;
|
|
text-transform: inherit;
|
|
letter-spacing: inherit;
|
|
}
|
|
.dms-list__head button.is-sorted { color: var(--dms-navy); }
|
|
.dms-list__row {
|
|
border-bottom: 1px solid var(--dms-stroke-soft);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: background 0.1s;
|
|
}
|
|
.dms-list__row:hover { background: var(--dms-hover); }
|
|
.dms-list__row.is-selected { background: var(--dms-selected); }
|
|
.dms-list__row.is-dragging { opacity: 0.4; }
|
|
.dms-list__row[data-status="pending"] { color: #6c5212; }
|
|
.dms-list__row[data-status="processing"] { color: #6c5212; }
|
|
.dms-list__row[data-status="error"] { color: var(--dms-red); }
|
|
.dms-list__title {
|
|
font-weight: 600;
|
|
color: var(--dms-navy);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
}
|
|
.dms-list__title-icon {
|
|
width: 18px;
|
|
flex: 0 0 18px;
|
|
opacity: 0.7;
|
|
}
|
|
.dms-list__cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
|
|
.dms-list__cell--muted { color: rgba(22,19,15,0.55); font-size: 13px; }
|
|
.dms-list__more {
|
|
background: none;
|
|
border: 0;
|
|
cursor: pointer;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
opacity: 0.5;
|
|
}
|
|
.dms-list__more:hover { opacity: 1; background: var(--dms-hover); }
|
|
.dms-list__empty {
|
|
padding: 60px 24px;
|
|
text-align: center;
|
|
color: rgba(22,19,15,0.55);
|
|
}
|
|
.dms-list__empty strong {
|
|
display: block;
|
|
color: var(--dms-navy);
|
|
font-size: 16px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
/* ─── Bulk-action bar (sticky bottom of list when selection > 0) ─── */
|
|
.dms-bulk-bar {
|
|
position: sticky;
|
|
bottom: 12px;
|
|
margin-top: 8px;
|
|
background: var(--dms-navy);
|
|
color: #fff;
|
|
padding: 8px 12px;
|
|
border-radius: var(--dms-radius);
|
|
box-shadow: 0 6px 24px rgba(0,32,91,0.30);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
z-index: 10;
|
|
}
|
|
.dms-bulk-bar__count {
|
|
font-weight: 600;
|
|
margin-right: 4px;
|
|
}
|
|
.dms-bulk-bar__btn {
|
|
background: rgba(255,255,255,0.10);
|
|
border: 1px solid rgba(255,255,255,0.20);
|
|
color: #fff;
|
|
padding: 4px 10px;
|
|
border-radius: var(--dms-radius-sm);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
}
|
|
.dms-bulk-bar__btn:hover { background: rgba(255,255,255,0.20); }
|
|
.dms-bulk-bar__btn--danger { background: var(--dms-red); border-color: var(--dms-red); }
|
|
.dms-bulk-bar__btn--danger:hover { background: #8c0822; }
|
|
.dms-bulk-bar__cancel {
|
|
margin-left: auto;
|
|
background: none;
|
|
border: 0;
|
|
color: rgba(255,255,255,0.7);
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ─── Context menu (right-click) ─── */
|
|
.dms-ctx-menu {
|
|
position: fixed;
|
|
z-index: 50;
|
|
background: #fff;
|
|
border: 1px solid var(--dms-stroke);
|
|
border-radius: var(--dms-radius-sm);
|
|
box-shadow: var(--dms-shadow-modal);
|
|
padding: 4px;
|
|
min-width: 180px;
|
|
font-size: 13px;
|
|
}
|
|
.dms-ctx-menu__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: #1a1c2c;
|
|
}
|
|
.dms-ctx-menu__item:hover { background: var(--dms-hover); }
|
|
.dms-ctx-menu__item--danger { color: var(--dms-red); }
|
|
.dms-ctx-menu__sep {
|
|
height: 1px;
|
|
background: var(--dms-stroke-soft);
|
|
margin: 4px 0;
|
|
}
|
|
|
|
/* ─── Modal ─── */
|
|
.dms-modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(10,15,30,0.40);
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
}
|
|
.dms-modal {
|
|
background: #fff;
|
|
border-radius: var(--dms-radius);
|
|
box-shadow: var(--dms-shadow-modal);
|
|
max-width: 520px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.dms-modal--wide { max-width: 760px; }
|
|
.dms-modal__head {
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--dms-stroke-soft);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.dms-modal__title {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
color: var(--dms-navy);
|
|
margin: 0;
|
|
}
|
|
.dms-modal__body {
|
|
padding: 16px 20px;
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
}
|
|
.dms-modal__foot {
|
|
padding: 12px 20px;
|
|
border-top: 1px solid var(--dms-stroke-soft);
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
flex-wrap: wrap;
|
|
}
|
|
.dms-modal__close {
|
|
margin-left: auto;
|
|
background: none;
|
|
border: 0;
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
color: rgba(22,19,15,0.55);
|
|
cursor: pointer;
|
|
padding: 0 6px;
|
|
}
|
|
|
|
/* ─── Form bits ─── */
|
|
.dms-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.dms-field label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: rgba(22,19,15,0.7);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.dms-field input,
|
|
.dms-field select,
|
|
.dms-field textarea {
|
|
border: 1px solid var(--dms-stroke);
|
|
border-radius: var(--dms-radius-sm);
|
|
padding: 8px 10px;
|
|
font-size: 14px;
|
|
background: #fff;
|
|
font-family: inherit;
|
|
}
|
|
.dms-field textarea { min-height: 80px; resize: vertical; }
|
|
.dms-field--inline {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ─── Tabs (document.php) ─── */
|
|
.dms-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
border-bottom: 1px solid var(--dms-stroke);
|
|
margin-bottom: 16px;
|
|
}
|
|
.dms-tab {
|
|
padding: 10px 16px;
|
|
border: 0;
|
|
background: none;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
color: rgba(22,19,15,0.65);
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
font-weight: 500;
|
|
}
|
|
.dms-tab.is-active {
|
|
color: var(--dms-navy);
|
|
border-bottom-color: var(--dms-navy);
|
|
font-weight: 600;
|
|
}
|
|
.dms-tab__pill {
|
|
display: inline-block;
|
|
background: var(--dms-stroke-soft);
|
|
color: rgba(22,19,15,0.7);
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
padding: 1px 7px;
|
|
margin-left: 4px;
|
|
}
|
|
.dms-tab-panel { display: none; }
|
|
.dms-tab-panel.is-active { display: block; }
|
|
|
|
/* ─── Version timeline ─── */
|
|
.dms-version {
|
|
display: grid;
|
|
grid-template-columns: 60px 1fr auto;
|
|
gap: 12px;
|
|
align-items: start;
|
|
padding: 12px;
|
|
border: 1px solid var(--dms-stroke-soft);
|
|
border-radius: var(--dms-radius);
|
|
margin-bottom: 8px;
|
|
}
|
|
.dms-version__num {
|
|
background: var(--dms-navy);
|
|
color: #fff;
|
|
border-radius: var(--dms-radius-sm);
|
|
padding: 4px 8px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
}
|
|
.dms-version__meta {
|
|
font-size: 13px;
|
|
color: rgba(22,19,15,0.7);
|
|
}
|
|
.dms-version__title {
|
|
color: var(--dms-navy);
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
.dms-version__actions { display: flex; gap: 6px; }
|
|
.dms-version--current {
|
|
border-left: 3px solid var(--dms-gold);
|
|
background: #fdfaf3;
|
|
}
|
|
|
|
/* ─── Permissions panel ─── */
|
|
.dms-perm-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 70px 70px 70px 32px;
|
|
gap: 8px;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--dms-stroke-soft);
|
|
font-size: 13px;
|
|
}
|
|
.dms-perm-row__head {
|
|
background: #fdfaf3;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: rgba(22,19,15,0.65);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ─── Preview frames ─── */
|
|
.dms-preview-frame {
|
|
width: 100%;
|
|
height: 70vh;
|
|
border: 1px solid var(--dms-stroke);
|
|
border-radius: var(--dms-radius);
|
|
background: #f9f7f1;
|
|
}
|
|
.dms-preview-audio {
|
|
width: 100%;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
/* ─── Drop overlay for upload drag-anywhere ─── */
|
|
.dms-drop-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,32,91,0.85);
|
|
color: #fff;
|
|
z-index: 200;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
.dms-drop-overlay.is-visible { opacity: 1; }
|
|
|
|
/* ─── KPI tiles ─── */
|
|
.dms-kpis {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.dms-kpi {
|
|
background: #fff;
|
|
border: 1px solid var(--dms-stroke);
|
|
border-radius: var(--dms-radius);
|
|
padding: 14px 16px;
|
|
}
|
|
.dms-kpi__label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: rgba(22,19,15,0.6);
|
|
font-weight: 600;
|
|
margin: 0 0 6px;
|
|
}
|
|
.dms-kpi__value {
|
|
font-size: 28px;
|
|
line-height: 1;
|
|
color: var(--dms-navy);
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
.dms-kpi__hint {
|
|
font-size: 12px;
|
|
color: rgba(22,19,15,0.55);
|
|
margin: 6px 0 0;
|
|
}
|
|
|
|
/* ─── Activity feed ─── */
|
|
.dms-activity {
|
|
background: #fff;
|
|
border: 1px solid var(--dms-stroke);
|
|
border-radius: var(--dms-radius);
|
|
padding: 8px 0;
|
|
}
|
|
.dms-activity__row {
|
|
display: grid;
|
|
grid-template-columns: 28px 1fr auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
border-bottom: 1px solid var(--dms-stroke-soft);
|
|
}
|
|
.dms-activity__row:last-child { border-bottom: 0; }
|
|
.dms-activity__icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: var(--dms-stroke-soft);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--dms-navy);
|
|
font-size: 12px;
|
|
}
|
|
.dms-activity__time {
|
|
font-size: 11px;
|
|
color: rgba(22,19,15,0.5);
|
|
}
|
|
|
|
/* ─── Settings diagnostics ─── */
|
|
.dms-diag {
|
|
background: #fff;
|
|
border: 1px solid var(--dms-stroke);
|
|
border-radius: var(--dms-radius);
|
|
overflow: hidden;
|
|
}
|
|
.dms-diag__row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr auto;
|
|
gap: 12px;
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid var(--dms-stroke-soft);
|
|
font-size: 13px;
|
|
align-items: center;
|
|
}
|
|
.dms-diag__row:last-child { border-bottom: 0; }
|
|
.dms-diag__label { font-weight: 600; color: var(--dms-navy); }
|
|
.dms-diag__value { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 12px; }
|
|
.dms-diag__status {
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
.dms-diag__status--ok { background: rgba(4,120,87,0.12); color: #047857; }
|
|
.dms-diag__status--warn { background: rgba(180,138,44,0.16); color: #6c5212; }
|
|
.dms-diag__status--err { background: rgba(186,12,47,0.12); color: var(--dms-red); }
|
|
|
|
/* ─── Loading / empty states ─── */
|
|
.dms-loading {
|
|
padding: 40px 16px;
|
|
text-align: center;
|
|
color: rgba(22,19,15,0.5);
|
|
font-size: 14px;
|
|
}
|
|
.dms-loading::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid var(--dms-stroke);
|
|
border-top-color: var(--dms-navy);
|
|
border-radius: 50%;
|
|
animation: dms-spin 0.8s linear infinite;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
@keyframes dms-spin { to { transform: rotate(360deg); } }
|
|
|
|
/* ─── Responsive ─── */
|
|
@media (max-width: 880px) {
|
|
.dms-shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.dms-tree {
|
|
position: relative;
|
|
max-height: 280px;
|
|
}
|
|
.dms-list__head,
|
|
.dms-list__row {
|
|
grid-template-columns: 36px 1fr 90px 36px;
|
|
}
|
|
.dms-list__head > :nth-child(n+4):nth-child(-n+6),
|
|
.dms-list__row > :nth-child(n+4):nth-child(-n+6) {
|
|
display: none;
|
|
}
|
|
}
|