|
|
@@ -1341,6 +1341,15 @@ html, body {
|
|
|
.agent-feed-card .agent-video-play { top: 63px; }
|
|
|
.agent-system-message { display: flex; justify-content: center; margin: 8px 0 16px; }
|
|
|
.agent-system-message span { max-width: 80%; padding: 4px 9px; border-radius: 4px; color: #919b96; background: rgba(218,224,221,.7); font-size: 9px; text-align: center; }
|
|
|
+.agent-message-media { display: flex; align-items: center; justify-content: center; min-width: 118px; min-height: 54px; max-width: min(360px, 100%); overflow: hidden; border: 1px solid var(--agent-line); border-radius: 4px 14px 14px 14px; color: var(--agent-text-secondary); background: var(--agent-panel); }
|
|
|
+.agent-message-media.image { min-height: 120px; background: #f3f5f4; }
|
|
|
+.agent-message-media.image img { display: block; width: auto; max-width: 100%; max-height: 360px; object-fit: contain; }
|
|
|
+.agent-message-media.unavailable,
|
|
|
+.agent-media-unavailable { padding: 12px 14px; font-size: 10px; line-height: 1.5; }
|
|
|
+.agent-message-media.unavailable { gap: 10px; justify-content: space-between; }
|
|
|
+.agent-media-retry { flex: 0 0 auto; min-height: 28px; padding: 4px 8px; border: 1px solid var(--agent-line); border-radius: 5px; color: var(--agent-brand); background: var(--agent-panel); font: inherit; font-size: 9px; cursor: pointer; }
|
|
|
+.agent-media-retry:disabled { cursor: wait; opacity: .55; }
|
|
|
+.agent-media-unavailable[hidden] { display: none; }
|
|
|
.agent-message.agent .agent-financial-card,
|
|
|
.agent-message.human .agent-financial-card,
|
|
|
.agent-message.agent .agent-media-message,
|
|
|
@@ -1444,6 +1453,17 @@ html, body {
|
|
|
|
|
|
.voice-profile-modal { width: min(92vw, 680px); }
|
|
|
.voice-profile-modal-body { display: grid; gap: 14px; padding: 4px 0 2px; }
|
|
|
+.voice-token-panel { display: grid; gap: 7px; padding: 12px; border: 1px solid #dfe8e3; border-radius: 8px; background: #f8fbf9; }
|
|
|
+.voice-token-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
|
+.voice-token-panel-head strong { color: #2f4038; font-size: 12px; }
|
|
|
+.voice-token-panel > small { color: #7b8982; font-size: 10px; line-height: 1.55; }
|
|
|
+.voice-token-state { padding: 2px 7px; border-radius: 9px; color: #7b8982; background: #e9eeeb; font-size: 9px; }
|
|
|
+.voice-token-state.ready { color: #166b50; background: #d9f0e4; }
|
|
|
+.voice-token-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
|
|
|
+.voice-token-input { min-width: 0; min-height: 38px; padding: 8px 10px; border: 1px solid #d7e0dc; border-radius: 8px; color: #33443e; background: #fff; font: inherit; font-size: 11px; }
|
|
|
+.voice-token-input:focus { outline: none; border-color: var(--agent-green); box-shadow: 0 0 0 3px rgba(34,160,107,.1); }
|
|
|
+.voice-token-row .btn { min-height: 38px; white-space: nowrap; }
|
|
|
+.voice-token-status { min-height: 14px; color: #78857f; font-size: 10px; overflow-wrap: anywhere; }
|
|
|
.voice-profile-status { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid #e1e7e4; border-radius: 8px; background: #f7f9f8; }
|
|
|
.voice-profile-status.ready { border-color: #cce5d8; background: #f1f9f5; }
|
|
|
.voice-profile-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #aeb9b4; }
|
|
|
@@ -3316,7 +3336,9 @@ body.business-modal-open { overflow: hidden; }
|
|
|
|
|
|
.knowledge-layout { min-height: 720px; display: grid; grid-template-columns: 285px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
|
|
|
.knowledge-tree-panel { border-right: 1px solid var(--border); background: #f7faf8; }
|
|
|
-.knowledge-tree-panel > header { padding: 16px 17px; border-bottom: 1px solid var(--border); background: #fff; }
|
|
|
+.knowledge-tree-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 16px 17px; border-bottom: 1px solid var(--border); background: #fff; }
|
|
|
+.knowledge-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
|
|
|
+.knowledge-toolbar .btn { white-space: nowrap; }
|
|
|
.knowledge-tree-panel > header strong, .knowledge-tree-panel > header span { display: block; }
|
|
|
.knowledge-tree-panel > header strong { font-size: 14px; }
|
|
|
.knowledge-tree-panel > header span { margin-top: 3px; color: var(--text-muted); font-size: 9px; }
|
|
|
@@ -3331,6 +3353,11 @@ body.business-modal-open { overflow: hidden; }
|
|
|
.knowledge-tree-folder > summary span { color: #348064; font-size: 10px; }
|
|
|
.knowledge-tree-folder > summary strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
.knowledge-tree-folder > summary em { padding: 2px 5px; border-radius: 8px; color: #779087; background: #e5eeea; font-size: 8px; font-style: normal; }
|
|
|
+.knowledge-tree-folder.is-writable > summary { color: #205f49; }
|
|
|
+.knowledge-node-actions { display: flex; align-items: center; gap: 2px; margin-left: 2px; }
|
|
|
+.knowledge-node-action { min-width: 18px; height: 18px; padding: 0 3px; border: 1px solid #cfe1d9; border-radius: 4px; color: #32785f; background: #f5fbf8; font-size: 8px; line-height: 16px; cursor: pointer; }
|
|
|
+.knowledge-node-action:hover { border-color: #6ba88f; color: #fff; background: #3d8c6c; }
|
|
|
+.knowledge-node-action.danger:hover { border-color: #cf765c; background: #c75d42; }
|
|
|
.knowledge-tree-file { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 7px 7px 7px calc(8px + var(--tree-depth) * 12px); border: 0; border-radius: 7px; text-align: left; color: #63726c; background: transparent; cursor: pointer; }
|
|
|
.knowledge-tree-file:hover { background: #edf4f1; }
|
|
|
.knowledge-tree-file.active { color: #17674f; background: #deefe7; box-shadow: inset 3px 0 #238463; }
|
|
|
@@ -3344,6 +3371,9 @@ body.business-modal-open { overflow: hidden; }
|
|
|
.knowledge-view-header p { margin: 0; color: var(--text-muted); font-size: 9px; }
|
|
|
.knowledge-view-header code { max-width: 48%; overflow: hidden; color: #8b9893; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
.knowledge-view-header > em { padding: 4px 7px; border-radius: 6px; color: #257254; background: #e3f2eb; font-size: 8px; font-style: normal; }
|
|
|
+.knowledge-file-header-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
|
|
|
+.knowledge-file-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
|
|
|
+.knowledge-file-actions .btn { min-height: 28px; padding: 0 9px; font-size: 9px; }
|
|
|
.knowledge-viewer > .markdown-view { padding: 22px 26px 40px; }
|
|
|
.knowledge-viewer > .code-view { margin: 20px 22px 30px; }
|
|
|
.json-summary { margin: 18px 22px -5px; color: #668078; font-size: 10px; }
|
|
|
@@ -3586,6 +3616,10 @@ body.business-modal-open { overflow: hidden; }
|
|
|
.skill-package-list { border-right: 0; border-bottom: 1px solid var(--border); }
|
|
|
.skill-card-grid, .property-card-grid { grid-template-columns: 1fr; }
|
|
|
.knowledge-tree-panel { border-right: 0; border-bottom: 1px solid var(--border); }
|
|
|
+ .knowledge-tree-panel > header { display: block; }
|
|
|
+ .knowledge-toolbar { justify-content: flex-start; margin-top: 10px; }
|
|
|
+ .knowledge-file-header-side { align-items: flex-start; }
|
|
|
+ .knowledge-file-actions { justify-content: flex-start; }
|
|
|
.knowledge-tree { max-height: 330px; }
|
|
|
.meeting-stat-row { grid-template-columns: repeat(2, 1fr); }
|
|
|
.meeting-cli-banner, .meeting-sync-form, .meeting-browser { display: block; }
|
|
|
@@ -4410,6 +4444,7 @@ body.business-modal-open { overflow: hidden; }
|
|
|
.voice-composer-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
|
|
|
.agent-composer .voice-action-button { min-height: 44px; }
|
|
|
.voice-capture-row { grid-template-columns: 1fr; }
|
|
|
+ .voice-token-row { grid-template-columns: 1fr; }
|
|
|
.voice-preview-row { grid-template-columns: 1fr; }
|
|
|
.voice-preview-tone, .voice-preview-button { width: 100%; }
|
|
|
.voice-profile-card { flex-direction: column; align-items: stretch; }
|
|
|
@@ -5141,3 +5176,928 @@ body.business-modal-open { overflow: hidden; }
|
|
|
.agent-conversation-modes { width: 100%; justify-content: flex-start; }
|
|
|
}
|
|
|
|
|
|
+/* ==================== Desktop density pass: analytics, customers and status ==================== */
|
|
|
+@media (min-width: 761px) {
|
|
|
+ .analytics-root {
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: auto auto minmax(360px, 1fr) auto;
|
|
|
+ height: calc(100dvh - 76px);
|
|
|
+ min-height: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .analytics-root .analytics-hero { margin-bottom: 0; }
|
|
|
+ .analytics-commandbar {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: minmax(0, 1fr) auto;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ min-height: 54px;
|
|
|
+ padding: 7px 10px;
|
|
|
+ border: 1px solid #dfe6e8;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .analytics-kpi-strip {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
+ gap: 1px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #e0e7e8;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #e0e7e8;
|
|
|
+ }
|
|
|
+ .analytics-kpi-strip > div { min-width: 0; padding: 5px 9px; background: #fbfcfd; }
|
|
|
+ .analytics-kpi-strip span,
|
|
|
+ .analytics-kpi-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
+ .analytics-kpi-strip span { color: #74828a; font-size: 9px; }
|
|
|
+ .analytics-kpi-strip strong { margin-top: 2px; color: #314a58; font-size: 16px; line-height: 1.05; }
|
|
|
+ .analytics-tabs { display: flex; gap: 2px; padding: 3px; border: 1px solid #dfe6e8; border-radius: 7px; background: #f4f7f8; }
|
|
|
+ .analytics-tabs button {
|
|
|
+ min-height: 30px;
|
|
|
+ padding: 4px 9px;
|
|
|
+ border: 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ color: #6d7b83;
|
|
|
+ background: transparent;
|
|
|
+ font: inherit;
|
|
|
+ font-size: 11px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .analytics-tabs button:hover { color: #31566b; background: #e9f0f3; }
|
|
|
+ .analytics-tabs button.active { color: #fff; background: #356b85; box-shadow: 0 1px 2px rgba(29, 64, 82, .18); }
|
|
|
+ .analytics-domains { position: relative; min-height: 0; overflow: hidden; }
|
|
|
+ .analytics-domain {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ display: block;
|
|
|
+ min-height: 0;
|
|
|
+ padding: 0 1px 4px;
|
|
|
+ overflow: auto;
|
|
|
+ scrollbar-gutter: stable;
|
|
|
+ }
|
|
|
+ .analytics-domain[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
|
|
|
+ .analytics-domain:not([hidden]) { visibility: visible; }
|
|
|
+ .analytics-domain-header { position: sticky; top: 0; z-index: 1; min-height: 30px; margin: 0 0 5px; padding: 7px 2px 5px; background: #f7f9fa; }
|
|
|
+ .analytics-domain-header small { color: #87949b; font-size: 10px; }
|
|
|
+ .analytics-domain .analytics-chart-grid { padding-bottom: 4px; }
|
|
|
+
|
|
|
+ .customer-master-layout:has(.library-empty.large) {
|
|
|
+ min-height: 0;
|
|
|
+ height: clamp(360px, calc(100dvh - 440px), 460px);
|
|
|
+ }
|
|
|
+ .customer-master-layout:has(.library-empty.large) .library-empty.large {
|
|
|
+ display: grid;
|
|
|
+ min-height: 0;
|
|
|
+ height: 100%;
|
|
|
+ align-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-page-layout {
|
|
|
+ grid-template-columns: minmax(0, 1fr);
|
|
|
+ grid-template-rows: auto minmax(0, 1fr);
|
|
|
+ min-height: calc(100dvh - 76px);
|
|
|
+ }
|
|
|
+ .status-page-layout .status-cards {
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ grid-template-rows: none;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ .status-page-layout .status-card { min-height: 104px; padding: 13px; }
|
|
|
+ .status-accounts-card { min-height: 0; max-height: none; }
|
|
|
+ .status-accounts-card .empty-state { display: grid; min-height: 0; height: 100%; align-content: center; }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 761px) and (max-width: 1180px) {
|
|
|
+ .analytics-commandbar { grid-template-columns: 1fr; }
|
|
|
+ .analytics-tabs { justify-content: space-between; }
|
|
|
+ .analytics-tabs button { flex: 1 1 auto; }
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================== 紧凑运营工作台(非消息页) ====================
|
|
|
+ 消息工作台使用固定高度的三栏操作面;其余模块沿用同一信息密度:
|
|
|
+ 控制页面纵向滚动、减少装饰性留白,并让列表/详情保持在同一个工作区内。 */
|
|
|
+:root {
|
|
|
+ --compact-gap: 10px;
|
|
|
+ --compact-panel-padding: 14px;
|
|
|
+ --compact-control-height: 34px;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar { width: 188px; }
|
|
|
+.main { margin-left: 188px; }
|
|
|
+.brand { min-height: 52px; gap: 8px; padding: 10px 12px; }
|
|
|
+.brand-icon { width: 31px; height: 31px; border-radius: 8px; }
|
|
|
+.brand-icon svg { width: 19px; height: 19px; }
|
|
|
+.brand-text { font-size: 15px; }
|
|
|
+.nav { padding: 10px 9px 14px; }
|
|
|
+.nav-group { margin-bottom: 14px; }
|
|
|
+.nav-label { margin-bottom: 4px; padding: 0 9px; font-size: 10px; }
|
|
|
+.nav-item { min-height: 32px; gap: 8px; margin-bottom: 2px; padding: 6px 8px; border-radius: 7px; font-size: 12px; }
|
|
|
+.nav-item svg { width: 17px; height: 17px; }
|
|
|
+
|
|
|
+.topbar { height: 48px; gap: 12px; padding: 0 14px; box-shadow: 0 1px 3px rgba(31, 35, 41, .06); }
|
|
|
+.page-title { font-size: 16px; }
|
|
|
+.account-btn { min-height: 32px; gap: 7px; padding: 5px 9px; border-radius: 7px; font-size: 12px; }
|
|
|
+.account-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
+.account-chevron { width: 14px; height: 14px; }
|
|
|
+.content { padding: 12px 14px 16px; }
|
|
|
+.content.agent-content { padding: 10px; }
|
|
|
+
|
|
|
+/* Shared operational primitives */
|
|
|
+.page:not(.agent-page) { animation-duration: 180ms; }
|
|
|
+.page:not(.agent-page) .section-title { margin-bottom: 9px; font-size: 13px; }
|
|
|
+.page:not(.agent-page) .card {
|
|
|
+ margin-bottom: var(--compact-gap);
|
|
|
+ padding: var(--compact-panel-padding);
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+.page:not(.agent-page) .card:hover { box-shadow: 0 4px 14px rgba(25, 43, 35, .07); transform: none; }
|
|
|
+.page:not(.agent-page) .card-header { margin-bottom: 11px; gap: 8px; }
|
|
|
+.page:not(.agent-page) .card-title { font-size: 14px; }
|
|
|
+.page:not(.agent-page) .card-subtitle { margin-top: 2px; font-size: 11px; }
|
|
|
+.page:not(.agent-page) .form-row { gap: 12px; margin-bottom: 12px; }
|
|
|
+.page:not(.agent-page) .form-group { gap: 5px; min-width: 150px; }
|
|
|
+.page:not(.agent-page) .form-group label,
|
|
|
+.page:not(.agent-page) .checkbox-row { font-size: 12px; }
|
|
|
+.page:not(.agent-page) .form-group input,
|
|
|
+.page:not(.agent-page) .form-group select,
|
|
|
+.page:not(.agent-page) .form-group textarea,
|
|
|
+.page:not(.agent-page) .filter-bar input,
|
|
|
+.page:not(.agent-page) .filter-bar select {
|
|
|
+ min-height: var(--compact-control-height);
|
|
|
+ padding: 6px 9px;
|
|
|
+ border-radius: 7px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.page:not(.agent-page) .btn { min-height: var(--compact-control-height); padding: 6px 12px; border-radius: 7px; font-size: 12px; box-shadow: none; }
|
|
|
+.page:not(.agent-page) .btn-sm { min-height: 29px; padding: 4px 9px; font-size: 11px; }
|
|
|
+.page:not(.agent-page) .badge { min-height: 21px; padding: 2px 7px; font-size: 10px; }
|
|
|
+.page:not(.agent-page) .table-wrap { border-radius: 7px; }
|
|
|
+.page:not(.agent-page) table { font-size: 12px; }
|
|
|
+.page:not(.agent-page) th,
|
|
|
+.page:not(.agent-page) td { padding: 9px 10px; }
|
|
|
+.page:not(.agent-page) th { font-size: 10px; }
|
|
|
+.page:not(.agent-page) .empty-state { padding: 34px 16px; }
|
|
|
+.page:not(.agent-page) .empty-state svg { width: 42px; height: 42px; margin-bottom: 10px; }
|
|
|
+.page:not(.agent-page) .hint-box { gap: 8px; margin-bottom: 12px; padding: 10px 12px; border-radius: 7px; font-size: 12px; }
|
|
|
+
|
|
|
+/* Summary bands: retain page identity without consuming a full screen of vertical space. */
|
|
|
+.workspace-hero,
|
|
|
+.customer-workspace-hero,
|
|
|
+.customer-master-hero,
|
|
|
+.group-ops-page .group-ops-hero {
|
|
|
+ min-height: 0;
|
|
|
+ margin-bottom: var(--compact-gap);
|
|
|
+ padding: 11px 14px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+.workspace-hero > div:first-child > span,
|
|
|
+.customer-master-hero span,
|
|
|
+.group-ops-page .group-ops-hero .group-ops-hero-kicker { font-size: 8px; }
|
|
|
+.workspace-hero h2,
|
|
|
+.customer-master-hero h2,
|
|
|
+.group-ops-page .group-ops-hero h2 { margin: 2px 0; font-size: 18px; }
|
|
|
+.workspace-hero p,
|
|
|
+.customer-master-hero p,
|
|
|
+.group-ops-page .group-ops-hero p { font-size: 10px; line-height: 1.45; }
|
|
|
+.workspace-stat-row { gap: 6px; }
|
|
|
+.workspace-stat-row > div { min-width: 62px; padding: 5px 8px; border-radius: 6px; }
|
|
|
+.workspace-stat-row strong { font-size: 14px; }
|
|
|
+.workspace-stat-row span { font-size: 8px; }
|
|
|
+
|
|
|
+/* Knowledge and skills stay inside the viewport like the conversation workbench. */
|
|
|
+.skills-page,
|
|
|
+.knowledge-page { min-height: calc(100dvh - 76px); }
|
|
|
+.skill-toolbar { gap: 12px; margin-bottom: var(--compact-gap); padding: 10px 12px; border-radius: 8px; box-shadow: none; }
|
|
|
+.skill-toolbar strong { font-size: 13px; }
|
|
|
+.skill-toolbar span { font-size: 10px; }
|
|
|
+.skill-toolbar input { min-height: var(--compact-control-height); padding: 6px 9px; border-radius: 7px; font-size: 12px; }
|
|
|
+.skill-hub-layout { min-height: 0; height: calc(100dvh - 158px); grid-template-columns: 192px minmax(340px, 1fr) minmax(275px, .7fr); border-radius: 8px; box-shadow: none; }
|
|
|
+.skill-package-list { padding: 7px; }
|
|
|
+.skill-package-item { gap: 3px 7px; margin-bottom: 3px; padding: 8px 9px; border-radius: 6px; }
|
|
|
+.skill-card-panel { max-height: none; padding: 12px; }
|
|
|
+.skill-card-panel > header { gap: 10px; margin-bottom: 10px; padding-bottom: 9px; }
|
|
|
+.skill-card-grid { gap: 7px; }
|
|
|
+.skill-capability-card { min-height: 112px; padding: 10px; border-radius: 7px; }
|
|
|
+.skill-capability-card p { min-height: 38px; margin: 7px 0; line-height: 1.5; }
|
|
|
+.skill-detail-panel { max-height: none; }
|
|
|
+.skill-detail-heading,
|
|
|
+.skill-markdown { padding: 13px; }
|
|
|
+.skill-detail-heading h3 { margin: 4px 0 5px; font-size: 16px; }
|
|
|
+.markdown-view { font-size: 11px; line-height: 1.65; }
|
|
|
+.markdown-view h2 { font-size: 17px; }
|
|
|
+.markdown-view h3 { font-size: 14px; }
|
|
|
+.markdown-view h4 { font-size: 12px; }
|
|
|
+
|
|
|
+.knowledge-layout { min-height: 0; height: calc(100dvh - 134px); border-radius: 8px; box-shadow: none; }
|
|
|
+.knowledge-tree-panel > header { padding: 11px 12px; }
|
|
|
+.knowledge-tree { max-height: none; padding: 6px 5px 12px; }
|
|
|
+.knowledge-tree-folder > summary { min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
|
|
|
+.knowledge-tree-file { min-height: 28px; padding-top: 5px; padding-bottom: 5px; }
|
|
|
+.knowledge-viewer { max-height: none; }
|
|
|
+.knowledge-view-header { gap: 12px; padding: 13px 15px; }
|
|
|
+.knowledge-view-header h3 { margin: 3px 0; font-size: 16px; }
|
|
|
+.knowledge-file-header-side { gap: 6px; }
|
|
|
+.knowledge-viewer > .markdown-view { padding: 14px 16px 24px; }
|
|
|
+.knowledge-viewer > .code-view { margin: 13px 15px 20px; padding: 11px; }
|
|
|
+
|
|
|
+/* Customer, portrait, transfer, group and status pages. */
|
|
|
+.customer-master-shell { gap: var(--compact-gap); margin-bottom: 12px; }
|
|
|
+.customer-master-stats { gap: 8px; }
|
|
|
+.customer-master-stats > div { padding: 10px 12px; border-radius: 7px; }
|
|
|
+.customer-master-stats strong { font-size: 19px; }
|
|
|
+.customer-master-layout { min-height: calc(100dvh - 166px); border-radius: 8px; box-shadow: none; }
|
|
|
+.customer-master-layout > aside > header { gap: 7px; padding: 12px; }
|
|
|
+.customer-master-layout > aside > div { gap: 4px; padding: 6px; }
|
|
|
+.customer-master-list-item { gap: 4px; padding: 9px; border-radius: 7px; }
|
|
|
+.customer-master-detail { gap: 10px; padding: 13px; }
|
|
|
+.customer-master-detail-head h3 { font-size: 18px; }
|
|
|
+.customer-master-score-row { gap: 7px; }
|
|
|
+.customer-master-score-row > div { padding: 8px 9px; border-radius: 7px; }
|
|
|
+.customer-master-score-row strong { font-size: 15px; }
|
|
|
+.customer-profile-fields,
|
|
|
+.customer-next-action-section,
|
|
|
+.customer-recommendation-section,
|
|
|
+.customer-timeline-section { gap: 8px; padding: 10px; border-radius: 8px; }
|
|
|
+.customer-profile-fields > div { gap: 6px; }
|
|
|
+.customer-profile-fields > div > div { min-height: 58px; padding: 8px; border-radius: 6px; }
|
|
|
+.customer-master-intelligence-grid { gap: 8px; }
|
|
|
+.customer-next-action-card,
|
|
|
+.customer-recommendation-card { padding: 9px; border-radius: 7px; }
|
|
|
+
|
|
|
+.customer-workspace-page { gap: var(--compact-gap); }
|
|
|
+.customer-workspace-page .customer-workspace-hero { min-height: 0; }
|
|
|
+.kpi-row { gap: 8px; margin-bottom: 0; }
|
|
|
+.kpi-row .kpi-card { min-height: 82px; padding: 10px 12px; border-radius: 7px; box-shadow: none; }
|
|
|
+.operation-toolbar { gap: 8px; padding: 9px 10px; border-radius: 8px; box-shadow: none; }
|
|
|
+.data-table-card { padding: 12px; border-radius: 8px; box-shadow: none; }
|
|
|
+.data-table-card .filter-bar { gap: 7px; }
|
|
|
+.data-table-card .table-wrap { border-radius: 7px; }
|
|
|
+.group-workspace { gap: var(--compact-gap); }
|
|
|
+.transfer-stage-board { padding: 11px; border-radius: 8px; }
|
|
|
+.transfer-stage { min-height: 82px; padding: 9px; border-radius: 7px; }
|
|
|
+.transfer-stage strong { font-size: 18px; }
|
|
|
+
|
|
|
+.status-page-layout { gap: var(--compact-gap); }
|
|
|
+.status-page-layout .status-card,
|
|
|
+.status-accounts-card { border-radius: 8px; box-shadow: none; }
|
|
|
+.status-page-layout .status-card { min-height: 104px; padding: 13px; }
|
|
|
+.status-icon { width: 36px; height: 36px; }
|
|
|
+.status-content h3 { font-size: 13px; }
|
|
|
+.status-content p,
|
|
|
+.status-content .status-detail { font-size: 11px; }
|
|
|
+
|
|
|
+.analytics-root { gap: 8px; }
|
|
|
+.analytics-domain-header { margin: 6px 1px 4px; }
|
|
|
+.analytics-domain .card { min-height: 168px; }
|
|
|
+.analytics-domain .card .card-header { margin-bottom: 5px; }
|
|
|
+
|
|
|
+@media (max-width: 1100px) {
|
|
|
+ .workspace-hero,
|
|
|
+ .customer-workspace-hero,
|
|
|
+ .customer-master-hero,
|
|
|
+ .group-ops-page .group-ops-hero { align-items: flex-start; flex-direction: column; }
|
|
|
+ .workspace-stat-row { width: 100%; overflow-x: auto; padding-bottom: 1px; }
|
|
|
+ .skill-hub-layout { height: auto; min-height: 680px; grid-template-columns: 180px minmax(0, 1fr); }
|
|
|
+ .skill-detail-panel { grid-column: 1 / -1; min-height: 240px; border-top: 1px solid var(--border); border-left: 0; }
|
|
|
+ .knowledge-layout { height: auto; min-height: 680px; }
|
|
|
+ .customer-master-layout { min-height: 620px; }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 760px) {
|
|
|
+ .sidebar { width: 220px; }
|
|
|
+ .main { margin-left: 0; }
|
|
|
+ .content { padding: 10px; }
|
|
|
+ .topbar { padding: 0 10px; }
|
|
|
+ .account-name { max-width: 110px; }
|
|
|
+ .workspace-hero,
|
|
|
+ .customer-workspace-hero,
|
|
|
+ .customer-master-hero,
|
|
|
+ .group-ops-page .group-ops-hero { padding: 10px; }
|
|
|
+ .workspace-hero h2,
|
|
|
+ .customer-master-hero h2,
|
|
|
+ .group-ops-page .group-ops-hero h2 { font-size: 17px; }
|
|
|
+ .workspace-stat-row > div { min-width: 58px; }
|
|
|
+ .skills-page,
|
|
|
+ .knowledge-page { min-height: 0; }
|
|
|
+ .skill-toolbar { align-items: stretch; flex-direction: column; }
|
|
|
+ .skill-toolbar input { width: 100%; }
|
|
|
+ .skill-hub-layout { min-height: 0; height: auto; grid-template-columns: 1fr; }
|
|
|
+ .skill-package-list { max-height: 220px; overflow: auto; border-right: 0; border-bottom: 1px solid var(--border); }
|
|
|
+ .skill-card-panel { max-height: 520px; }
|
|
|
+ .skill-detail-panel { grid-column: auto; min-height: 0; max-height: 560px; }
|
|
|
+ .skill-card-grid { grid-template-columns: 1fr; }
|
|
|
+ .knowledge-layout { min-height: 0; height: auto; grid-template-columns: 1fr; }
|
|
|
+ .knowledge-tree-panel { max-height: 310px; overflow: auto; border-right: 0; border-bottom: 1px solid var(--border); }
|
|
|
+ .knowledge-viewer { min-height: 400px; }
|
|
|
+ .customer-master-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
|
+ .customer-master-layout { min-height: 0; grid-template-columns: 1fr; }
|
|
|
+ .customer-master-layout > aside { max-height: 300px; overflow: auto; border-right: 0; border-bottom: 1px solid #e6ebe8; }
|
|
|
+ .customer-master-score-row,
|
|
|
+ .customer-profile-fields > div,
|
|
|
+ .customer-master-intelligence-grid,
|
|
|
+ .customer-next-action-section > div,
|
|
|
+ .customer-recommendation-section > div { grid-template-columns: 1fr; }
|
|
|
+ .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
|
+ .operation-toolbar { align-items: stretch; flex-direction: column; }
|
|
|
+ .operation-toolbar .toolbar-left,
|
|
|
+ .operation-toolbar .toolbar-right { justify-content: flex-start; }
|
|
|
+ .data-table-card { padding: 10px; }
|
|
|
+ .status-page-layout .status-card { min-height: 0; }
|
|
|
+}
|
|
|
+
|
|
|
+/* ==================== 社群运营桌面工作区 ====================
|
|
|
+ 各页签都是独立的操作面。显式处理 hidden,避免通用 .card / grid 声明
|
|
|
+ 覆盖浏览器默认样式并让未激活面板仍然占用整页高度。 */
|
|
|
+.group-ops-page [data-group-ops-panel][hidden] { display: none !important; }
|
|
|
+
|
|
|
+.group-ops-view-context {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 16px;
|
|
|
+ min-width: 0;
|
|
|
+ padding: 8px 12px;
|
|
|
+ border: 1px solid #dfe7eb;
|
|
|
+ border-left: 3px solid #537798;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.group-ops-view-title { display: flex; align-items: center; min-width: 0; gap: 10px; }
|
|
|
+.group-ops-view-title > span {
|
|
|
+ display: inline-flex;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ align-items: center;
|
|
|
+ min-width: 54px;
|
|
|
+ color: #55708a;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.group-ops-view-title h3 { margin: 0; color: #283d4b; font-size: 14px; line-height: 1.3; }
|
|
|
+.group-ops-view-title p { margin: 2px 0 0; color: #77868f; font-size: 11px; line-height: 1.4; }
|
|
|
+.group-ops-view-summary { flex: 0 0 auto; min-width: 132px; padding-left: 14px; border-left: 1px solid #e4ebee; }
|
|
|
+.group-ops-view-summary > span { display: block; color: #84919a; font-size: 10px; }
|
|
|
+.group-ops-view-summary strong { display: block; margin-top: 2px; color: #2c485d; font-size: 13px; }
|
|
|
+.group-ops-view-context.is-workbench { border-left-color: #b67832; background: #fffdfa; }
|
|
|
+.group-ops-view-context.is-workbench .group-ops-view-title > span,
|
|
|
+.group-ops-view-context.is-workbench .group-ops-view-summary strong { color: #986026; }
|
|
|
+.group-ops-view-context.is-groups { border-left-color: #43847b; background: #fbfefd; }
|
|
|
+.group-ops-view-context.is-groups .group-ops-view-title > span,
|
|
|
+.group-ops-view-context.is-groups .group-ops-view-summary strong { color: #2c7167; }
|
|
|
+.group-ops-view-context.is-playbooks { border-left-color: #8068a3; background: #fdfcff; }
|
|
|
+.group-ops-view-context.is-playbooks .group-ops-view-title > span,
|
|
|
+.group-ops-view-context.is-playbooks .group-ops-view-summary strong { color: #685287; }
|
|
|
+.group-ops-view-context.is-quality { border-left-color: #b75550; background: #fffafa; }
|
|
|
+.group-ops-view-context.is-quality .group-ops-view-title > span,
|
|
|
+.group-ops-view-context.is-quality .group-ops-view-summary strong { color: #9d4744; }
|
|
|
+.group-ops-view-context.is-automation { border-left-color: #476b8c; background: #fbfcfe; }
|
|
|
+
|
|
|
+.group-ops-section-label { display: flex; align-items: center; gap: 7px; min-height: 22px; color: #52636e; font-size: 11px; }
|
|
|
+.group-ops-section-label > span { color: #7b8891; font-size: 10px; font-weight: 700; }
|
|
|
+.group-ops-section-label strong { color: #435662; font-size: 12px; }
|
|
|
+.group-ops-insight-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #dce9e5; border-radius: 7px; background: #dce9e5; }
|
|
|
+.group-ops-insight-strip > div { min-width: 0; padding: 8px 10px; background: #fbfefd; }
|
|
|
+.group-ops-insight-strip span,
|
|
|
+.group-ops-insight-strip small { display: block; color: #748782; font-size: 10px; }
|
|
|
+.group-ops-insight-strip strong { display: block; margin: 2px 0; color: #2f7168; font-size: 18px; line-height: 1; }
|
|
|
+.group-ops-sop-layout { display: grid; grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr); min-height: 0; gap: 12px; }
|
|
|
+.group-ops-sop-composer,
|
|
|
+.group-ops-sop-library,
|
|
|
+.group-ops-quality-rules,
|
|
|
+.group-ops-quality-queue { min-width: 0; min-height: 0; padding: 10px; border: 1px solid #e0e6e9; border-radius: 7px; background: #fbfcfd; }
|
|
|
+.group-ops-sop-composer { border-top: 2px solid #8b72aa; }
|
|
|
+.group-ops-sop-library { display: grid; grid-template-rows: auto minmax(0, 1fr); border-top: 2px solid #b49acb; }
|
|
|
+.group-ops-quality-layout { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); min-height: 0; gap: 12px; }
|
|
|
+.group-ops-quality-rules { border-top: 2px solid #bd8460; }
|
|
|
+.group-ops-quality-queue { display: grid; grid-template-rows: auto minmax(0, 1fr); border-top: 2px solid #c45c57; }
|
|
|
+
|
|
|
+@media (min-width: 761px) {
|
|
|
+ .status-page-layout {
|
|
|
+ min-height: calc(100dvh - 76px);
|
|
|
+ align-items: start;
|
|
|
+ }
|
|
|
+ .status-page-layout .status-cards { align-content: start; }
|
|
|
+ .status-accounts-card {
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: auto minmax(0, 1fr);
|
|
|
+ max-height: calc(100dvh - 76px);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .status-accounts-card .table-wrap { min-height: 0; overflow: auto; }
|
|
|
+
|
|
|
+ .group-ops-page {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+ height: calc(100dvh - 76px);
|
|
|
+ min-height: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-hero { min-height: 70px; padding: 10px 14px; }
|
|
|
+ .group-ops-page .group-ops-hero h2 { font-size: 18px; }
|
|
|
+ .group-ops-page .group-ops-hero p { max-width: 560px; }
|
|
|
+ .group-ops-hero-status > span { min-width: 62px; padding: 6px 8px; border-radius: 7px; }
|
|
|
+ .group-ops-hero-status strong { margin-bottom: 1px; font-size: 15px; }
|
|
|
+ .group-ops-refresh { min-height: 32px; padding: 6px 10px; font-size: 11px; }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-tabs { padding: 3px; border-radius: 8px; }
|
|
|
+ .group-ops-page .group-ops-tabs button { min-height: 32px; padding: 5px 11px; font-size: 11px; }
|
|
|
+ .group-ops-page .group-ops-tabs button span { display: inline-block; margin-right: 3px; color: #90a0aa; font-size: 9px; }
|
|
|
+ .group-ops-page .group-ops-tabs button.active span { color: inherit; }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-view-context { min-height: 48px; padding: 6px 10px; }
|
|
|
+ .group-ops-page .group-ops-view-title { gap: 8px; }
|
|
|
+ .group-ops-page .group-ops-view-title > span { min-width: 48px; font-size: 9px; }
|
|
|
+ .group-ops-page .group-ops-view-title h3 { font-size: 13px; }
|
|
|
+ .group-ops-page .group-ops-view-title p { max-width: 720px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
|
|
|
+ .group-ops-page .group-ops-view-summary { min-width: 122px; padding-left: 10px; }
|
|
|
+ .group-ops-page .group-ops-view-summary > span { font-size: 9px; }
|
|
|
+ .group-ops-page .group-ops-view-summary strong { font-size: 12px; }
|
|
|
+
|
|
|
+ .group-ops-page > [data-group-ops-panel]:not([hidden]) {
|
|
|
+ flex: 1 1 0;
|
|
|
+ min-height: 0;
|
|
|
+ max-height: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-stats[data-group-ops-panel]:not([hidden]) {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ align-self: start;
|
|
|
+ grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
|
+ max-height: none;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-stats .kpi-card { min-height: 66px; padding: 8px 10px; }
|
|
|
+ .group-ops-page .group-ops-stats .kpi-value { margin-top: 3px; font-size: 20px; }
|
|
|
+ .group-ops-page .group-ops-stats .kpi-sub { margin-top: 3px; }
|
|
|
+
|
|
|
+ .group-ops-page > .card[data-group-ops-panel]:not([hidden]) {
|
|
|
+ display: grid;
|
|
|
+ min-height: 0;
|
|
|
+ margin: 0;
|
|
|
+ padding: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ .group-ops-page > .card[data-group-ops-panel]:not([hidden]) > .card-header {
|
|
|
+ min-height: 32px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .group-ops-page > .card[data-group-ops-panel]:not([hidden]) > .card-header p { display: none; }
|
|
|
+ .group-ops-page > .card[data-group-ops-panel]:not([hidden]) .table-wrap {
|
|
|
+ min-height: 0;
|
|
|
+ max-height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ .group-ops-page > .card[data-group-ops-panel]:not([hidden]) .table-wrap + .card-header { margin-top: 10px; }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-workbench[data-group-ops-panel="overview"] { grid-template-rows: auto minmax(0, 1fr); }
|
|
|
+ .group-ops-page .group-ops-workbench[data-group-ops-panel="groups"] { grid-template-rows: auto auto minmax(96px, 1fr) auto minmax(96px, 1fr); }
|
|
|
+ .group-ops-page .group-ops-workbench[data-group-ops-panel="workbench"] { grid-template-rows: auto auto minmax(0, 1fr); }
|
|
|
+ .group-ops-page .group-ops-risks[data-group-ops-panel="quality"] { grid-template-rows: auto minmax(0, 1fr); }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-insight-strip { min-height: 53px; margin-bottom: 8px; }
|
|
|
+ .group-ops-page .group-ops-insight-strip > div { padding: 7px 9px; }
|
|
|
+ .group-ops-page .group-ops-insight-strip strong { font-size: 16px; }
|
|
|
+ .group-ops-page .group-ops-insights-panel > .card-header:nth-of-type(2) { margin-top: 8px; }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-tasks-panel[data-group-ops-panel="workbench"] { flex: 0 1 186px; }
|
|
|
+ .group-ops-page .group-ops-plan-panel[data-group-ops-panel="workbench"] { flex: 1 1 0; }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-builder[data-group-ops-panel]:not([hidden]) { grid-template-rows: auto minmax(0, 1fr) auto; }
|
|
|
+ .group-ops-page .group-ops-sop-layout { min-height: 0; gap: 9px; }
|
|
|
+ .group-ops-page .group-ops-sop-composer,
|
|
|
+ .group-ops-page .group-ops-sop-library,
|
|
|
+ .group-ops-page .group-ops-quality-rules,
|
|
|
+ .group-ops-page .group-ops-quality-queue { padding: 8px; border-radius: 6px; }
|
|
|
+ .group-ops-page .group-ops-sop-composer .group-ops-form { margin-top: 6px; }
|
|
|
+ .group-ops-page .group-ops-sop-library .group-ops-playbooks { margin-top: 6px; }
|
|
|
+ .group-ops-page .group-ops-plan-form { margin: 8px 0 0; }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-quality-layout { min-height: 0; gap: 9px; }
|
|
|
+ .group-ops-page .group-ops-quality-rules .group-ops-inline-form { display: grid; grid-template-columns: auto minmax(0, 1fr); margin-top: 6px; }
|
|
|
+ .group-ops-page .group-ops-quality-rules .group-ops-inline-form .btn { grid-column: 2; justify-self: start; }
|
|
|
+ .group-ops-page .group-ops-quality-queue .group-ops-list { margin-top: 6px; }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-form,
|
|
|
+ .group-ops-page .group-ops-inline-form { gap: 7px 10px; margin-bottom: 9px; padding: 9px 10px; border-radius: 7px; }
|
|
|
+ .group-ops-page .group-ops-form input,
|
|
|
+ .group-ops-page .group-ops-form textarea,
|
|
|
+ .group-ops-page .group-ops-inline-form input,
|
|
|
+ .group-ops-page .group-ops-inline-form select,
|
|
|
+ .group-ops-page .group-ops-form .btn,
|
|
|
+ .group-ops-page .group-ops-inline-form .btn { min-height: 34px; }
|
|
|
+ .group-ops-page .group-ops-form textarea { min-height: 54px; }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-task-list,
|
|
|
+ .group-ops-page .group-ops-list,
|
|
|
+ .group-ops-page .group-ops-playbooks { min-height: 0; margin-top: 0; overflow: auto; }
|
|
|
+ .group-ops-page .group-ops-task-list article,
|
|
|
+ .group-ops-page .group-ops-playbooks article,
|
|
|
+ .group-ops-page .group-ops-risk { min-height: 0; padding: 8px 10px; }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-automation[data-group-ops-panel]:not([hidden]) {
|
|
|
+ grid-template-rows: auto minmax(0, 1fr) auto minmax(76px, .42fr);
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-automation-grid { min-height: 0; gap: 10px; overflow: hidden; }
|
|
|
+ .group-ops-page .group-ops-automation-grid > .group-ops-form { min-height: 0; overflow: auto; }
|
|
|
+ .group-ops-page .group-ops-automation-summary { padding: 11px; border-radius: 7px; }
|
|
|
+ .group-ops-page .group-ops-automation-summary h4 { margin-bottom: 8px; font-size: 13px; }
|
|
|
+ .group-ops-page .group-ops-automation-summary dl { gap: 6px; }
|
|
|
+ .group-ops-page .group-ops-automation-summary dl div { padding: 7px; }
|
|
|
+ .group-ops-page .group-ops-automation-actions { gap: 6px; margin-top: 9px; }
|
|
|
+ .group-ops-page .group-ops-automation-log-header { min-height: 28px; margin-top: 10px; padding-top: 9px !important; }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-builder .group-ops-playbooks { max-height: none; }
|
|
|
+
|
|
|
+ .group-ops-page > .card[data-group-ops-panel].is-empty:not([hidden]) {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ align-self: stretch;
|
|
|
+ min-height: 0;
|
|
|
+ }
|
|
|
+ .group-ops-page > .group-ops-command-center.is-empty[data-group-ops-panel]:not([hidden]) {
|
|
|
+ grid-template-rows: auto auto;
|
|
|
+ }
|
|
|
+ .group-ops-page > .group-ops-command-center.is-empty .group-ops-command-grid { min-height: 128px; }
|
|
|
+ .group-ops-page > .group-ops-queue-workspace.is-empty[data-group-ops-panel]:not([hidden]) {
|
|
|
+ grid-template-rows: auto auto auto auto;
|
|
|
+ }
|
|
|
+ .group-ops-page > .group-ops-signal-workspace.is-empty[data-group-ops-panel]:not([hidden]) {
|
|
|
+ grid-template-rows: auto auto auto;
|
|
|
+ }
|
|
|
+ .group-ops-page > .group-ops-quality-workspace.is-empty[data-group-ops-panel]:not([hidden]) {
|
|
|
+ grid-template-rows: auto auto auto;
|
|
|
+ }
|
|
|
+ .group-ops-page > .group-ops-automation.is-empty[data-group-ops-panel]:not([hidden]) {
|
|
|
+ grid-template-rows: auto auto auto auto;
|
|
|
+ }
|
|
|
+ .group-ops-empty-action { align-content: center; }
|
|
|
+ .group-ops-empty-action .btn { width: max-content; margin-top: 8px; }
|
|
|
+}
|
|
|
+
|
|
|
+/* 社群运营使用控制台式页签头:页签切换时首屏即呈现不同的工作面,而不是重复的大横幅。 */
|
|
|
+@media (min-width: 761px) {
|
|
|
+ .group-ops-page .group-ops-consolebar {
|
|
|
+ min-height: 64px;
|
|
|
+ padding: 8px 13px;
|
|
|
+ border: 1px solid #dfe6e8;
|
|
|
+ border-left: 4px solid #567b98;
|
|
|
+ border-radius: 8px;
|
|
|
+ color: #30434f;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 3px 12px rgba(34, 50, 60, .035);
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-consolebar::before,
|
|
|
+ .group-ops-page .group-ops-consolebar::after { display: none; }
|
|
|
+ .group-ops-page .group-ops-consolebar h2 {
|
|
|
+ margin: 2px 0 1px;
|
|
|
+ color: #30434f;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 1.25;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-consolebar p {
|
|
|
+ max-width: 660px;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #78868d;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 1.35;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .group-ops-hero-copy { min-width: 0; }
|
|
|
+ .group-ops-crumb {
|
|
|
+ display: block;
|
|
|
+ color: #59778f;
|
|
|
+ font-size: 9px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-hero-status > span {
|
|
|
+ min-width: 58px;
|
|
|
+ padding: 5px 8px;
|
|
|
+ border-color: #dce6ea;
|
|
|
+ border-radius: 6px;
|
|
|
+ color: #7a8990;
|
|
|
+ background: #f7fafb;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-hero-status strong {
|
|
|
+ color: #3a5567;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-hero-status .is-risk {
|
|
|
+ border-color: #f0d8d5;
|
|
|
+ background: #fffafa;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-hero-status .is-risk strong { color: #b65750; }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-console-metrics {
|
|
|
+ display: flex;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ gap: 5px;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-console-metrics > span {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: auto auto;
|
|
|
+ column-gap: 5px;
|
|
|
+ align-items: baseline;
|
|
|
+ min-width: 78px;
|
|
|
+ padding: 5px 8px;
|
|
|
+ border: 1px solid #dce6ea;
|
|
|
+ border-radius: 6px;
|
|
|
+ color: #7a8990;
|
|
|
+ background: #f7fafb;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-console-metrics small {
|
|
|
+ grid-column: 1 / -1;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #7a8990;
|
|
|
+ font-size: 9px;
|
|
|
+ line-height: 1.2;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-console-metrics strong { color: #3a5567; font-size: 15px; line-height: 1.2; }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-console-metrics em {
|
|
|
+ overflow: hidden;
|
|
|
+ color: #87949a;
|
|
|
+ font-size: 8px;
|
|
|
+ font-style: normal;
|
|
|
+ text-align: right;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-console-metrics > .is-risk { border-color: #f0d8d5; background: #fffafa; }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-console-metrics > .is-risk strong { color: #b65750; }
|
|
|
+ .group-ops-page .group-ops-console-action { min-height: 30px; padding: 5px 9px; font-size: 10px; white-space: nowrap; }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-refresh {
|
|
|
+ display: grid;
|
|
|
+ width: 30px;
|
|
|
+ min-height: 30px;
|
|
|
+ padding: 0;
|
|
|
+ place-items: center;
|
|
|
+ border-color: #cfdde4;
|
|
|
+ color: #355b76;
|
|
|
+ background: #f4f8fa;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-refresh svg { width: 15px; height: 15px; }
|
|
|
+ .group-ops-page .group-ops-consolebar .group-ops-refresh:hover { background: #eaf2f5; }
|
|
|
+ .group-ops-page .group-ops-consolebar.is-workbench { border-left-color: #bc7b32; background: #fffefd; }
|
|
|
+ .group-ops-page .group-ops-consolebar.is-workbench .group-ops-crumb { color: #9a6429; }
|
|
|
+ .group-ops-page .group-ops-consolebar.is-groups { border-left-color: #43847b; background: #fbfefd; }
|
|
|
+ .group-ops-page .group-ops-consolebar.is-groups .group-ops-crumb { color: #2f7268; }
|
|
|
+ .group-ops-page .group-ops-consolebar.is-playbooks { border-left-color: #8b72aa; background: #fefcff; }
|
|
|
+ .group-ops-page .group-ops-consolebar.is-playbooks .group-ops-crumb { color: #6a5488; }
|
|
|
+ .group-ops-page .group-ops-consolebar.is-quality { border-left-color: #bf5b55; background: #fffdfd; }
|
|
|
+ .group-ops-page .group-ops-consolebar.is-quality .group-ops-crumb { color: #a44c47; }
|
|
|
+ .group-ops-page .group-ops-consolebar.is-automation { border-left-color: #476b8c; background: #fbfcfe; }
|
|
|
+ .group-ops-page .group-ops-consolebar.is-automation .group-ops-crumb { color: #3e6282; }
|
|
|
+
|
|
|
+ .group-ops-page .group-ops-tabs {
|
|
|
+ gap: 2px;
|
|
|
+ padding: 3px;
|
|
|
+ border-radius: 7px;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-tabs button {
|
|
|
+ position: relative;
|
|
|
+ min-height: 31px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ font-size: 11px;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-tabs button.active {
|
|
|
+ color: #274b66;
|
|
|
+ background: #edf3f6;
|
|
|
+ box-shadow: inset 0 0 0 1px #d7e3e9;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-tabs button.active::before {
|
|
|
+ position: absolute;
|
|
|
+ top: 7px;
|
|
|
+ bottom: 7px;
|
|
|
+ left: 5px;
|
|
|
+ width: 2px;
|
|
|
+ border-radius: 2px;
|
|
|
+ content: '';
|
|
|
+ background: currentColor;
|
|
|
+ }
|
|
|
+ .group-ops-page .group-ops-tabs button.active:nth-child(2) { color: #9b6227; background: #fff9ee; box-shadow: inset 0 0 0 1px #f0dfc4; }
|
|
|
+ .group-ops-page .group-ops-tabs button.active:nth-child(3) { color: #2f7368; background: #f0f9f7; box-shadow: inset 0 0 0 1px #d6ebe5; }
|
|
|
+ .group-ops-page .group-ops-tabs button.active:nth-child(4) { color: #6d568c; background: #f8f5fc; box-shadow: inset 0 0 0 1px #e2d9ef; }
|
|
|
+ .group-ops-page .group-ops-tabs button.active:nth-child(5) { color: #a24b46; background: #fff7f6; box-shadow: inset 0 0 0 1px #f0d7d5; }
|
|
|
+ .group-ops-page .group-ops-tabs button.active:nth-child(6) { color: #3e6688; background: #f3f8fb; box-shadow: inset 0 0 0 1px #d8e5ed; }
|
|
|
+}
|
|
|
+
|
|
|
+/* Six group-operation tabs are intentionally different work surfaces, not six table variants. */
|
|
|
+@media (min-width: 761px) {
|
|
|
+ .group-ops-page > .group-ops-command-center[data-group-ops-panel]:not([hidden]) {
|
|
|
+ grid-template-rows: auto minmax(0, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ .group-ops-overview-metrics {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
+ gap: 1px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #d9e4e8;
|
|
|
+ border-radius: 7px;
|
|
|
+ background: #d9e4e8;
|
|
|
+ }
|
|
|
+ .group-ops-overview-metrics > div { min-width: 0; padding: 8px 10px; background: #fbfcfd; }
|
|
|
+ .group-ops-overview-metrics > div.is-risk { background: #fffafa; }
|
|
|
+ .group-ops-overview-metrics span,
|
|
|
+ .group-ops-overview-metrics small { display: block; color: #72818a; font-size: 10px; }
|
|
|
+ .group-ops-overview-metrics strong { display: block; margin: 3px 0 2px; color: #355a72; font-size: 19px; line-height: 1; }
|
|
|
+ .group-ops-overview-metrics .is-risk strong { color: #ae514c; }
|
|
|
+ .group-ops-command-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); min-height: 0; gap: 10px; }
|
|
|
+ .group-ops-priority-panel,
|
|
|
+ .group-ops-store-board {
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: auto minmax(0, 1fr);
|
|
|
+ min-width: 0;
|
|
|
+ min-height: 0;
|
|
|
+ border-top: 2px solid #b96d64;
|
|
|
+ background: #fffdfd;
|
|
|
+ }
|
|
|
+ .group-ops-store-board { border-top-color: #567b98; background: #fbfdff; }
|
|
|
+ .group-ops-priority-panel > header,
|
|
|
+ .group-ops-store-board > header,
|
|
|
+ .group-ops-signal-list > header,
|
|
|
+ .group-ops-health-ledger > header,
|
|
|
+ .group-ops-task-tray > header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ min-height: 39px;
|
|
|
+ padding: 0 9px;
|
|
|
+ border-bottom: 1px solid #e4ebee;
|
|
|
+ }
|
|
|
+ .group-ops-priority-panel header span,
|
|
|
+ .group-ops-store-board header span,
|
|
|
+ .group-ops-signal-list header span,
|
|
|
+ .group-ops-health-ledger header span,
|
|
|
+ .group-ops-task-tray header span { display: block; color: #7c8990; font-size: 9px; font-weight: 700; }
|
|
|
+ .group-ops-priority-panel header h3,
|
|
|
+ .group-ops-store-board header h3 { margin: 1px 0 0; color: #35444e; font-size: 13px; }
|
|
|
+ .group-ops-priority-panel > header > strong { color: #a74d49; font-size: 19px; }
|
|
|
+ .group-ops-priority-list,
|
|
|
+ .group-ops-store-list,
|
|
|
+ .group-ops-signal-list > div,
|
|
|
+ .group-ops-task-tray > div { min-height: 0; overflow: auto; }
|
|
|
+ .group-ops-priority-list { padding: 2px 0; }
|
|
|
+ .group-ops-priority-list article {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 9px minmax(0, 1fr) auto;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ min-height: 46px;
|
|
|
+ padding: 6px 9px;
|
|
|
+ border-bottom: 1px solid #eef1f2;
|
|
|
+ }
|
|
|
+ .group-ops-priority-list article:last-child { border-bottom: 0; }
|
|
|
+ .group-ops-priority-list article i { width: 7px; height: 7px; border-radius: 50%; background: #cc5e55; }
|
|
|
+ .group-ops-priority-list article.task i { background: #c18c42; }
|
|
|
+ .group-ops-priority-list article strong,
|
|
|
+ .group-ops-priority-list article span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
+ .group-ops-priority-list article strong { color: #45545d; font-size: 11px; }
|
|
|
+ .group-ops-priority-list article span { margin-top: 2px; color: #7f8b91; font-size: 10px; }
|
|
|
+ .group-ops-store-list { padding: 1px 9px; }
|
|
|
+ .group-ops-store-list article {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: minmax(122px, .9fr) minmax(100px, 1.1fr) auto;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ min-height: 47px;
|
|
|
+ border-bottom: 1px solid #edf1f3;
|
|
|
+ }
|
|
|
+ .group-ops-store-list article:last-child { border-bottom: 0; }
|
|
|
+ .group-ops-store-name strong,
|
|
|
+ .group-ops-store-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
+ .group-ops-store-name strong { color: #3c505d; font-size: 11px; }
|
|
|
+ .group-ops-store-name span { margin-top: 2px; color: #7c8b94; font-size: 10px; }
|
|
|
+ .group-ops-store-progress { display: grid; grid-template-columns: minmax(48px, 1fr) auto; align-items: center; gap: 7px; }
|
|
|
+ .group-ops-store-progress > span { height: 6px; overflow: hidden; border-radius: 99px; background: #e4edf2; }
|
|
|
+ .group-ops-store-progress i { display: block; width: var(--progress); min-width: 3px; height: 100%; border-radius: inherit; background: #5c819e; }
|
|
|
+ .group-ops-store-progress strong { color: #45647d; font-size: 10px; }
|
|
|
+ .group-ops-store-list em { color: #aa5651; font-size: 10px; font-style: normal; white-space: nowrap; }
|
|
|
+ .group-ops-store-list em.is-clear { color: #4e856f; }
|
|
|
+
|
|
|
+ .group-ops-page > .group-ops-queue-workspace[data-group-ops-panel]:not([hidden]) {
|
|
|
+ grid-template-rows: auto auto minmax(0, 1fr) auto;
|
|
|
+ gap: 8px;
|
|
|
+ border-top: 2px solid #bb7e38;
|
|
|
+ }
|
|
|
+ .group-ops-batch-strip { margin: 0 !important; background: #fffdf9 !important; }
|
|
|
+ .group-ops-empty-launch {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 18px;
|
|
|
+ min-height: 126px;
|
|
|
+ padding: 16px 18px;
|
|
|
+ border: 1px dashed #dbc7a8;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fffdf9;
|
|
|
+ }
|
|
|
+ .group-ops-empty-launch > div:first-child { min-width: 0; }
|
|
|
+ .group-ops-empty-launch span { display: block; color: #a8773d; font-size: 9px; font-weight: 700; }
|
|
|
+ .group-ops-empty-launch h4 { margin: 4px 0; color: #584837; font-size: 14px; }
|
|
|
+ .group-ops-empty-launch p { max-width: 570px; margin: 0; color: #83766a; font-size: 10px; line-height: 1.55; }
|
|
|
+ .group-ops-empty-launch > div:last-child { display: flex; flex: 0 0 auto; gap: 7px; }
|
|
|
+ .group-ops-empty-launch .btn { min-height: 30px; padding: 5px 9px; font-size: 10px; }
|
|
|
+ .group-ops-queue-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 0; gap: 9px; }
|
|
|
+ .group-ops-queue-column { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; border: 1px solid #e1e8ec; border-radius: 7px; background: #fcfdfd; }
|
|
|
+ .group-ops-queue-column > header { display: flex; align-items: center; justify-content: space-between; min-height: 31px; padding: 0 9px; border-bottom: 1px solid #e5ebee; }
|
|
|
+ .group-ops-queue-column > header span { color: #63737e; font-size: 10px; font-weight: 700; }
|
|
|
+ .group-ops-queue-column > header strong { font-size: 14px; }
|
|
|
+ .group-ops-queue-column.is-review > header strong { color: #af7130; }
|
|
|
+ .group-ops-queue-column.is-scheduled > header strong { color: #547898; }
|
|
|
+ .group-ops-queue-column.is-done > header strong { color: #4c806d; }
|
|
|
+ .group-ops-queue-column > div { min-height: 0; padding: 5px; overflow: auto; }
|
|
|
+ .group-ops-queue-column article { display: grid; gap: 4px; margin-bottom: 5px; padding: 7px; border: 1px solid #e8edef; border-radius: 6px; background: #fff; }
|
|
|
+ .group-ops-queue-column article:last-child { margin-bottom: 0; }
|
|
|
+ .group-ops-queue-column article strong { overflow: hidden; color: #43545e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
+ .group-ops-queue-column article p { display: -webkit-box; margin: 0; overflow: hidden; color: #718089; font-size: 10px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
|
|
|
+ .group-ops-queue-column footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
|
|
|
+ .group-ops-queue-column footer span { color: #88959c; font-size: 9px; }
|
|
|
+ .group-ops-column-empty { display: grid; min-height: 74px; place-items: center; color: #8a969d; font-size: 10px; text-align: center; }
|
|
|
+ .group-ops-task-tray { display: grid; grid-template-columns: 104px minmax(0, 1fr); min-height: 42px; border-top: 1px solid #e1e8ec; }
|
|
|
+ .group-ops-task-tray > header { min-height: 42px; padding: 0 9px 0 0; border-bottom: 0; border-right: 1px solid #e5ebee; }
|
|
|
+ .group-ops-task-tray > header strong { color: #ae6145; font-size: 12px; }
|
|
|
+ .group-ops-task-tray > div { display: flex; align-items: center; gap: 7px; padding: 4px 8px; }
|
|
|
+ .group-ops-task-tray article { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; max-width: 360px; min-width: 220px; padding: 4px 7px; border: 1px solid #e8edef; border-radius: 6px; background: #fff; }
|
|
|
+ .group-ops-task-tray article > div { min-width: 0; margin-right: auto; }
|
|
|
+ .group-ops-task-tray article strong,
|
|
|
+ .group-ops-task-tray article span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
+ .group-ops-task-tray article strong { color: #485762; font-size: 10px; }
|
|
|
+ .group-ops-task-tray article span { margin-top: 1px; color: #89949a; font-size: 9px; }
|
|
|
+
|
|
|
+ .group-ops-page > .group-ops-signal-workspace[data-group-ops-panel]:not([hidden]) { grid-template-rows: auto auto minmax(0, 1fr); gap: 9px; border-top: 2px solid #43847b; }
|
|
|
+ .group-ops-signal-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #dce9e5; border-radius: 7px; background: #dce9e5; }
|
|
|
+ .group-ops-signal-summary > div { min-width: 0; padding: 8px 10px; background: #fbfefd; }
|
|
|
+ .group-ops-signal-summary > div.is-risk { background: #fffafa; }
|
|
|
+ .group-ops-signal-summary span,
|
|
|
+ .group-ops-signal-summary small { display: block; color: #72867f; font-size: 10px; }
|
|
|
+ .group-ops-signal-summary strong { display: block; margin: 3px 0 2px; color: #317368; font-size: 18px; line-height: 1; }
|
|
|
+ .group-ops-signal-summary .is-risk strong { color: #b2544e; }
|
|
|
+ .group-ops-signal-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(245px, .58fr); min-height: 0; gap: 10px; }
|
|
|
+ .group-ops-signal-list { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; border-top: 2px solid #579487; background: #fbfefd; }
|
|
|
+ .group-ops-signal-list header strong,
|
|
|
+ .group-ops-health-ledger header strong { color: #3a665f; font-size: 11px; }
|
|
|
+ .group-ops-signal-list > div { padding: 0 9px; }
|
|
|
+ .group-ops-signal-list article { display: grid; grid-template-columns: minmax(128px, .9fr) minmax(154px, 1.1fr) 43px minmax(150px, 1fr); align-items: center; gap: 10px; min-height: 46px; border-bottom: 1px solid #e7efec; }
|
|
|
+ .group-ops-signal-list article:last-child { border-bottom: 0; }
|
|
|
+ .group-ops-signal-name strong,
|
|
|
+ .group-ops-signal-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
+ .group-ops-signal-name strong { color: #3c5652; font-size: 11px; }
|
|
|
+ .group-ops-signal-name span { margin-top: 2px; color: #7d908a; font-size: 9px; }
|
|
|
+ .group-ops-signal-meter > span { display: block; height: 6px; overflow: hidden; border-radius: 99px; background: #dfece8; }
|
|
|
+ .group-ops-signal-meter i { display: block; width: var(--signal); height: 100%; border-radius: inherit; background: #4b998b; }
|
|
|
+ .group-ops-signal-meter small { display: block; margin-top: 3px; color: #7e908b; font-size: 9px; }
|
|
|
+ .group-ops-signal-health { text-align: right; }
|
|
|
+ .group-ops-signal-health strong,
|
|
|
+ .group-ops-signal-health span { display: block; }
|
|
|
+ .group-ops-signal-health strong { color: #3a806f; font-size: 16px; line-height: 1; }
|
|
|
+ .group-ops-signal-health span { margin-top: 3px; color: #7a8d88; font-size: 9px; }
|
|
|
+ .group-ops-signal-health.is-risk strong { color: #b45a53; }
|
|
|
+ .group-ops-signal-list article > p { margin: 0; overflow: hidden; color: #6e817c; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
+ .group-ops-health-ledger { min-width: 0; min-height: 0; padding: 0 9px; border-top: 2px solid #80a992; background: #f9fdfb; }
|
|
|
+ .group-ops-health-ledger > header { margin: 0 -9px; }
|
|
|
+ .group-ops-health-ledger dl { display: grid; gap: 0; margin: 6px 0; }
|
|
|
+ .group-ops-health-ledger dl div { display: flex; align-items: center; justify-content: space-between; min-height: 31px; border-bottom: 1px solid #e2ece7; }
|
|
|
+ .group-ops-health-ledger dt { color: #617671; font-size: 10px; }
|
|
|
+ .group-ops-health-ledger dd { margin: 0; color: #3f655c; font-size: 10px; font-weight: 700; }
|
|
|
+ .group-ops-health-ledger p { margin: 8px 0 0; color: #788984; font-size: 10px; line-height: 1.5; }
|
|
|
+
|
|
|
+ .group-ops-page > .group-ops-quality-workspace[data-group-ops-panel]:not([hidden]) { grid-template-rows: auto auto minmax(0, 1fr); gap: 9px; border-top: 2px solid #b75550; }
|
|
|
+ .group-ops-quality-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
|
|
|
+ .group-ops-quality-meters > div { min-width: 0; padding: 8px 10px; border-left: 2px solid #c37b58; background: #fffdfb; }
|
|
|
+ .group-ops-quality-meters > div:nth-child(2) { border-left-color: #c45c57; background: #fffafa; }
|
|
|
+ .group-ops-quality-meters > div:nth-child(3) { border-left-color: #8a74a6; background: #fdfcff; }
|
|
|
+ .group-ops-quality-meters span,
|
|
|
+ .group-ops-quality-meters small { display: block; color: #7c898d; font-size: 10px; }
|
|
|
+ .group-ops-quality-meters strong { display: block; margin: 3px 0 2px; color: #954a45; font-size: 16px; line-height: 1; }
|
|
|
+ .group-ops-quality-workspace .group-ops-quality-layout { min-height: 0; }
|
|
|
+ .group-ops-quality-workspace .group-ops-quality-rules { display: grid; grid-template-rows: auto minmax(0, 1fr); background: #fffdfa; }
|
|
|
+ .group-ops-quality-workspace .group-ops-quality-form { align-content: start; min-height: 0; overflow: auto; }
|
|
|
+ .group-ops-quality-workspace .group-ops-quality-queue { background: #fffdfd; }
|
|
|
+
|
|
|
+ .group-ops-empty-inline { display: grid; align-content: center; gap: 4px; min-height: 86px; padding: 12px; color: #728189; text-align: center; }
|
|
|
+ .group-ops-empty-inline strong { color: #5f7079; font-size: 11px; }
|
|
|
+ .group-ops-empty-inline span { font-size: 10px; line-height: 1.45; }
|
|
|
+}
|
|
|
+
|
|
|
+/* Keep the connection page as a single operational column after the legacy desktop rules. */
|
|
|
+@media (min-width: 1101px) {
|
|
|
+ .status-page-layout {
|
|
|
+ grid-template-columns: minmax(0, 1fr);
|
|
|
+ grid-template-rows: auto minmax(0, 1fr);
|
|
|
+ min-height: calc(100dvh - 76px);
|
|
|
+ }
|
|
|
+ .status-page-layout .status-cards {
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ grid-template-rows: none;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ .status-page-layout .status-card { min-height: 104px; padding: 13px; }
|
|
|
+ .status-accounts-card { min-height: 0; max-height: none; }
|
|
|
+ .status-accounts-card .empty-state { display: grid; min-height: 0; height: 100%; align-content: center; }
|
|
|
+}
|
|
|
+
|