feat: add customer portal and RTC voice diagnostics
This commit is contained in:
Codex Local
@@ -891,3 +891,721 @@ form[aria-label="联调问题流转编辑"] label small { color: #7b898d; font-w
|
||||
.alert-config-form > div, .alert-config-form__wide { grid-column: auto; }
|
||||
.alert-config-form button { justify-self: stretch; }
|
||||
}
|
||||
|
||||
/* Customer portal: a separate family-facing shell. */
|
||||
.customer-layout {
|
||||
min-height: 100vh;
|
||||
color: #1f2329;
|
||||
background: #f5f6f8;
|
||||
}
|
||||
|
||||
.customer-layout button:hover { transform: none; }
|
||||
.customer-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 60px;
|
||||
padding: 0 22px 0 14px;
|
||||
border-bottom: 1px solid #e8eaee;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(31, 35, 41, 0.04);
|
||||
}
|
||||
|
||||
.customer-header__brand,
|
||||
.customer-header__actions,
|
||||
.customer-account-button,
|
||||
.customer-sider__title,
|
||||
.customer-sider__help,
|
||||
.customer-profile__identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.customer-header__brand { gap: 10px; color: #646a73; white-space: nowrap; }
|
||||
.customer-header__brand > strong { color: #1f2329; font-size: 18px; }
|
||||
.customer-brand-mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 7px;
|
||||
color: #fff;
|
||||
background: #5b5ce2;
|
||||
font-size: 17px;
|
||||
}
|
||||
.customer-brand-divider { width: 1px; height: 22px; margin: 0 5px; background: #e3e6eb; }
|
||||
.customer-header__actions { gap: 10px; }
|
||||
.customer-search { width: min(320px, 28vw); }
|
||||
.customer-account-button { gap: 8px; height: 42px; padding: 0 8px; color: #3f444c; background: transparent; }
|
||||
|
||||
.customer-layout__body { min-height: calc(100vh - 60px); }
|
||||
.customer-sider {
|
||||
position: sticky !important;
|
||||
top: 60px;
|
||||
align-self: flex-start;
|
||||
height: calc(100vh - 60px);
|
||||
overflow: auto;
|
||||
border-right: 1px solid #e8eaee;
|
||||
background: #fff !important;
|
||||
}
|
||||
.customer-sider__title { gap: 10px; height: 58px; padding: 0 24px; color: #30343b; font-weight: 700; }
|
||||
.customer-sider .ant-menu { border-inline-end: 0 !important; padding: 0 10px; background: transparent; }
|
||||
.customer-sider .ant-menu-item,
|
||||
.customer-sider .ant-menu-submenu-title { margin-block: 3px; font-size: 14px; }
|
||||
.customer-sider__help {
|
||||
gap: 10px;
|
||||
margin: 22px 14px;
|
||||
padding: 12px;
|
||||
border: 1px solid #e8eaee;
|
||||
border-radius: 8px;
|
||||
color: #5b5ce2;
|
||||
background: #f8f8ff;
|
||||
}
|
||||
.customer-sider__help div { display: grid; gap: 2px; }
|
||||
.customer-sider__help strong { color: #3f444c; font-size: 12px; }
|
||||
.customer-sider__help span { color: #8b9199; font-size: 10px; }
|
||||
|
||||
.customer-content { min-width: 0; background: #f5f6f8; }
|
||||
.customer-page {
|
||||
width: min(1440px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 22px 28px 48px;
|
||||
}
|
||||
.customer-page__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin: 14px 0 18px;
|
||||
}
|
||||
.customer-page__header h1 { max-width: none; color: #1f2329; font-family: inherit; font-size: 26px; line-height: 1.35; }
|
||||
.customer-page__header p { margin: 6px 0 0; color: #646a73; line-height: 1.6; }
|
||||
.customer-auth-state { display: flex; justify-content: center; }
|
||||
.customer-auth-state .ant-card-body { display: flex; align-items: center; gap: 12px; color: #646a73; }
|
||||
|
||||
.customer-page > .workspace {
|
||||
margin-top: 0;
|
||||
padding: 20px;
|
||||
border: 1px solid #e3e6eb;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
.customer-page .workspace__header { align-items: center; padding-bottom: 16px; border-bottom: 1px solid #eef0f3; }
|
||||
.customer-page .workspace__header h2 { color: #1f2329; font-size: 18px; }
|
||||
.customer-page .workspace__header > div:first-child > p:last-child { color: #7b818a; font-size: 13px; }
|
||||
.customer-page .eyebrow { margin-bottom: 5px; color: #5b5ce2; font-size: 10px; letter-spacing: .13em; }
|
||||
.customer-page .workspace__actions select { min-width: 160px; border-radius: 7px; }
|
||||
.customer-page .workspace__summary { margin-top: 16px; }
|
||||
.customer-page .metric { border: 1px solid #e8eaee; border-radius: 8px; background: #fafbfc; }
|
||||
.customer-page .conversation-readiness,
|
||||
.customer-page .conversation-readiness--ready,
|
||||
.customer-page .conversation-readiness--blocked { border-radius: 8px; background: #fff; }
|
||||
|
||||
.customer-welcome-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin-top: 16px;
|
||||
padding: 24px;
|
||||
border: 1px solid #dedfff;
|
||||
border-radius: 10px;
|
||||
background: #f7f7ff;
|
||||
}
|
||||
.customer-welcome-card h3 { color: #22263d; font-size: 22px; }
|
||||
.customer-welcome-card p:not(.eyebrow) { max-width: 650px; margin: 8px 0 0; color: #686e7b; line-height: 1.7; }
|
||||
.customer-welcome-card > button { flex: none; border-radius: 7px; color: #fff; background: #5b5ce2; }
|
||||
.customer-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
|
||||
.customer-quick-grid button {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
border: 1px solid #e6e8ec;
|
||||
border-radius: 8px;
|
||||
color: #646a73;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
.customer-quick-grid button:hover { border-color: #b8b9f5; background: #fafaff; }
|
||||
.customer-quick-grid strong { color: #1f2329; font-size: 24px; }
|
||||
.customer-quick-grid small { overflow: hidden; color: #8b9199; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.customer-action-list { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 12px; margin-top: 14px; }
|
||||
.customer-action-list > div,
|
||||
.customer-action-list > button { padding: 16px; border: 1px solid #e6e8ec; border-radius: 8px; background: #fff; text-align: left; }
|
||||
.customer-action-list > div { border: 0; padding-left: 0; }
|
||||
.customer-action-list > button { display: grid; gap: 6px; color: #1f2329; }
|
||||
.customer-action-list > button span { color: #8b9199; font-size: 12px; font-weight: 400; line-height: 1.5; }
|
||||
|
||||
.customer-billing-panel,
|
||||
.customer-message-panel { margin-top: 16px; }
|
||||
.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
|
||||
.panel-title h3 { color: #1f2329; font-size: 18px; }
|
||||
.panel-title p:not(.eyebrow) { margin: 6px 0 0; color: #7b818a; }
|
||||
.billing-total-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 14px 0; }
|
||||
.billing-total-grid article { padding: 20px; border: 1px solid #e6e8ec; border-radius: 8px; background: #fafbfc; }
|
||||
.billing-total-grid span,
|
||||
.billing-total-grid small { display: block; color: #7b818a; }
|
||||
.billing-total-grid strong { display: block; margin: 8px 0; color: #1f2329; font-size: 26px; }
|
||||
.billing-category-list { border: 1px solid #e6e8ec; border-radius: 8px; overflow: hidden; }
|
||||
.billing-category-list div { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eef0f3; }
|
||||
.billing-category-list div:last-child { border-bottom: 0; }
|
||||
.quota-note { margin-top: 14px; padding: 16px; border-left: 3px solid #5b5ce2; background: #f7f7ff; }
|
||||
.quota-note p { margin: 5px 0 0; color: #646a73; line-height: 1.65; }
|
||||
|
||||
.message-list,
|
||||
.message-timeline { display: grid; gap: 8px; }
|
||||
.message-item { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid #e6e8ec; border-radius: 8px; background: #fff; }
|
||||
.message-item > span { width: 8px; height: 8px; border-radius: 50%; background: #5b5ce2; }
|
||||
.message-item--warning > span { background: #d98b12; }
|
||||
.message-item strong { color: #30343b; }
|
||||
.message-item p { margin: 3px 0 0; color: #8b9199; }
|
||||
.message-timeline { margin-top: 18px; }
|
||||
.message-timeline h4 { margin: 0 0 4px; }
|
||||
.message-timeline article { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid #eef0f3; }
|
||||
.message-timeline time,
|
||||
.message-timeline p { color: #8b9199; }
|
||||
.message-timeline p { margin: 3px 0 0; }
|
||||
|
||||
.customer-login-card { max-width: 560px; margin: 70px auto 0; text-align: center; }
|
||||
.customer-login-card .ant-card-body { padding: 42px; }
|
||||
.customer-login-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 12px; color: #5b5ce2; background: #eeeeff; font-size: 23px; }
|
||||
.customer-login-notes { display: flex; justify-content: center; gap: 22px; margin-top: 24px; color: #7b818a; font-size: 12px; }
|
||||
.customer-profile { display: grid; gap: 16px; }
|
||||
.customer-profile__identity { gap: 18px; }
|
||||
.customer-profile__identity > div { flex: 1; }
|
||||
.customer-profile__identity h2,
|
||||
.customer-profile__identity p { margin: 0; }
|
||||
.customer-profile__identity p { margin-top: 4px; color: #8b9199; }
|
||||
.customer-membership-list { margin-top: 18px; }
|
||||
.customer-membership-list > div { padding: 12px 0; border-top: 1px solid #eef0f3; }
|
||||
.customer-membership-list > div > div { display: flex; justify-content: space-between; }
|
||||
.customer-membership-list small { color: #8b9199; }
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.customer-search { display: none; }
|
||||
.customer-quick-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.customer-action-list { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.customer-header { padding-inline: 8px; }
|
||||
.customer-header__brand > strong,
|
||||
.customer-header__brand > span:not(.customer-brand-mark),
|
||||
.customer-account-button > span,
|
||||
.customer-account-button > .anticon-down { display: none; }
|
||||
.customer-sider { position: fixed !important; z-index: 90; }
|
||||
.customer-content { margin-left: 72px; }
|
||||
.customer-page { padding: 16px 12px 32px; }
|
||||
.customer-page__header { flex-direction: column; gap: 8px; }
|
||||
.customer-page > .workspace { padding: 14px; }
|
||||
.customer-page .workspace__header,
|
||||
.customer-welcome-card { align-items: flex-start; flex-direction: column; }
|
||||
.customer-page .workspace__actions { align-items: stretch; flex-direction: column; width: 100%; }
|
||||
.customer-quick-grid,
|
||||
.billing-total-grid { grid-template-columns: 1fr; }
|
||||
.message-timeline article { grid-template-columns: 1fr; gap: 4px; }
|
||||
}
|
||||
|
||||
/* Ant Design enterprise console refresh */
|
||||
:root {
|
||||
color: #1f2329;
|
||||
background: #f5f6f8;
|
||||
--console-primary: #5b5ce2;
|
||||
--console-primary-soft: #ebe9ff;
|
||||
--console-text: #1f2329;
|
||||
--console-muted: #646a73;
|
||||
--console-border: #e3e6eb;
|
||||
--console-fill: #f7f8fa;
|
||||
--console-white: #fff;
|
||||
}
|
||||
|
||||
html { background: #f5f6f8; }
|
||||
|
||||
body {
|
||||
color: var(--console-text);
|
||||
background: #f5f6f8;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 34px;
|
||||
border: 1px solid var(--console-primary);
|
||||
border-radius: 8px;
|
||||
padding: 0.42rem 0.9rem;
|
||||
color: #fff;
|
||||
background: var(--console-primary);
|
||||
box-shadow: none;
|
||||
font-size: 0.82rem;
|
||||
transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: none;
|
||||
border-color: #7979eb;
|
||||
background: #6c6de8;
|
||||
}
|
||||
|
||||
button:disabled { opacity: 0.55; }
|
||||
|
||||
.button-secondary {
|
||||
border-color: #d8dbe2;
|
||||
color: #3d424a;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.app-layout { min-height: 100vh; }
|
||||
|
||||
.app-header {
|
||||
position: fixed;
|
||||
inset: 0 0 auto;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
height: 60px;
|
||||
padding: 0 22px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--console-border);
|
||||
line-height: normal;
|
||||
box-shadow: 0 1px 5px rgba(31, 35, 41, 0.04);
|
||||
}
|
||||
|
||||
.app-header__brand,
|
||||
.app-header__tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app-header__brand > strong {
|
||||
color: #15181d;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-header__collapse.ant-btn {
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
color: #3d424a;
|
||||
}
|
||||
|
||||
.brand-mark,
|
||||
.page-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #1677ff, #6c4cff);
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.header-search { width: min(300px, 24vw); }
|
||||
.header-user { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.app-layout__body { min-height: 100vh; padding-top: 60px; }
|
||||
|
||||
.app-sider {
|
||||
position: sticky !important;
|
||||
top: 60px;
|
||||
height: calc(100vh - 60px);
|
||||
overflow: auto;
|
||||
border-right: 1px solid var(--console-border);
|
||||
}
|
||||
|
||||
.app-sider .ant-layout-sider-children {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sider-product {
|
||||
display: flex;
|
||||
height: 58px;
|
||||
padding: 0 20px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #252a31;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sider-product .anticon { color: var(--console-primary); font-size: 18px; }
|
||||
.app-sider .ant-menu { flex: 1; border-inline-end: 0 !important; padding: 0 10px; }
|
||||
.app-sider .ant-menu-item { height: 42px; margin-block: 4px; line-height: 42px; }
|
||||
.app-sider .ant-menu-item-group-title { padding: 12px 14px 4px; color: #8f959e; font-size: 12px; }
|
||||
.app-sider .ant-menu-item-selected { font-weight: 600; }
|
||||
|
||||
.sider-meta {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
margin: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--console-border);
|
||||
border-radius: 8px;
|
||||
color: var(--console-muted);
|
||||
background: #fff;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.sider-meta strong { color: #363b43; font-size: 12px; }
|
||||
|
||||
.app-content { min-width: 0; background: #f5f6f8; }
|
||||
|
||||
.page-container {
|
||||
width: 100%;
|
||||
max-width: 1560px;
|
||||
margin: 0 auto;
|
||||
padding: 22px 28px 40px;
|
||||
}
|
||||
|
||||
.page-breadcrumb { margin-bottom: 14px; color: #8f959e; font-size: 12px; }
|
||||
|
||||
.hero {
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin: 0 0 20px;
|
||||
padding: 4px 0 2px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
max-width: none;
|
||||
color: #171a1f;
|
||||
font-family: inherit;
|
||||
font-size: 24px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.hero__description {
|
||||
max-width: 64rem;
|
||||
margin: 8px 0 0 46px;
|
||||
color: var(--console-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 7px;
|
||||
color: var(--console-primary);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 { color: var(--console-text); }
|
||||
h2 { font-size: 20px; }
|
||||
h3 { font-size: 16px; }
|
||||
|
||||
.status-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
min-height: 132px;
|
||||
padding: 0;
|
||||
border-color: var(--console-border);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.status-card .ant-card-body { padding: 18px 20px; }
|
||||
.status-card__topline { color: #7b818a; font-size: 13px; }
|
||||
.status-card strong { margin-top: 19px; color: #1f2329; font-size: 22px; line-height: 1.2; }
|
||||
.status-card p { overflow: hidden; margin: 8px 0 0; color: #7b818a; font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.identity-panel,
|
||||
.workspace-shell,
|
||||
.milestone-panel,
|
||||
.workspace,
|
||||
.ops-workspace {
|
||||
border: 1px solid var(--console-border);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.identity-panel {
|
||||
grid-template-columns: minmax(260px, 0.75fr) minmax(360px, 1.5fr);
|
||||
gap: 34px;
|
||||
margin-top: 14px;
|
||||
padding: 22px 24px;
|
||||
}
|
||||
|
||||
.identity-panel__intro > p:last-child,
|
||||
.identity-panel__state,
|
||||
.identity-panel__login,
|
||||
.identity-panel__login p {
|
||||
color: var(--console-muted);
|
||||
}
|
||||
|
||||
.identity-panel__intro h2 { font-size: 19px; }
|
||||
.identity-panel__login strong { color: var(--console-text); font-size: 16px; }
|
||||
.identity-panel__account-head span { color: #8a9099; }
|
||||
|
||||
.account-card {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--console-border);
|
||||
border-radius: 8px;
|
||||
background: var(--console-fill);
|
||||
}
|
||||
|
||||
.account-card > strong { color: var(--console-text); }
|
||||
.membership { border-color: var(--console-border); color: #535961; }
|
||||
|
||||
.workspace-shell {
|
||||
margin-top: 14px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workspace-shell__heading {
|
||||
align-items: center;
|
||||
padding: 18px 22px;
|
||||
border-bottom: 1px solid var(--console-border);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.workspace-shell__heading h2 { font-size: 19px; }
|
||||
.workspace-shell__heading > p { color: var(--console-muted); font-size: 12px; }
|
||||
.workspace-shell__content { padding: 0; }
|
||||
.workspace-shell__content > .workspace,
|
||||
.workspace-shell__content > .ops-workspace { margin-top: 0; }
|
||||
|
||||
.workspace,
|
||||
.ops-workspace {
|
||||
margin-top: 0;
|
||||
padding: 22px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.workspace__header,
|
||||
.ops-workspace__head { align-items: center; }
|
||||
.workspace__header > div:first-child > p:last-child,
|
||||
.ops-workspace__head p { color: var(--console-muted); }
|
||||
|
||||
.workspace__tabs {
|
||||
gap: 4px;
|
||||
margin: 20px 0 16px;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--console-border);
|
||||
border-radius: 8px;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
min-height: 32px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
color: #5f656d;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tab-button:hover { color: var(--console-primary); background: #f0efff; }
|
||||
.tab-button.active { color: var(--console-primary); background: #fff; box-shadow: 0 1px 4px rgba(31, 35, 41, 0.08); }
|
||||
|
||||
.workspace select,
|
||||
.workspace input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
|
||||
.workspace textarea,
|
||||
.ops-workspace select,
|
||||
.ops-workspace input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
|
||||
.ops-workspace textarea {
|
||||
min-height: 36px;
|
||||
border: 1px solid #d8dbe2;
|
||||
border-radius: 7px;
|
||||
padding: 7px 10px;
|
||||
color: #252a31;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workspace input:focus,
|
||||
.workspace select:focus,
|
||||
.workspace textarea:focus,
|
||||
.ops-workspace input:focus,
|
||||
.ops-workspace select:focus,
|
||||
.ops-workspace textarea:focus {
|
||||
outline: none;
|
||||
border-color: #7778e6;
|
||||
box-shadow: 0 0 0 2px rgba(91, 92, 226, 0.12);
|
||||
}
|
||||
|
||||
.workspace label,
|
||||
.ops-workspace label,
|
||||
.ops-config-form label,
|
||||
.billing-form label,
|
||||
.alert-config-form label,
|
||||
.diagnostic-search label {
|
||||
color: #5d636c;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tool-form,
|
||||
.subject-create-form,
|
||||
.profile-editor,
|
||||
.conversation-readiness,
|
||||
.panel-section,
|
||||
.ops-config-form,
|
||||
.ops-gate-card,
|
||||
.ops-rollout-panel,
|
||||
.billing-form,
|
||||
.conversation-usage,
|
||||
.diagnostic-search,
|
||||
.alert-config-form,
|
||||
.privacy-delete-confirmation,
|
||||
.firmware-recovery-form,
|
||||
.firmware-impact {
|
||||
border-color: var(--console-border);
|
||||
border-radius: 8px;
|
||||
background: var(--console-fill);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.summary-card,
|
||||
.device-card,
|
||||
.diagnostic-card,
|
||||
.billing-summary-grid article,
|
||||
.alert-summary-grid article,
|
||||
.ops-ledger,
|
||||
.ops-version-group,
|
||||
.billing-ledger,
|
||||
.billing-policy-list,
|
||||
.alert-ledger-grid > section,
|
||||
.firmware-key-ledger,
|
||||
.firmware-key-card,
|
||||
.firmware-impact__metrics article,
|
||||
.firmware-impact__devices article {
|
||||
border-color: var(--console-border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.workspace__split,
|
||||
.conversation-layout,
|
||||
.story-layout,
|
||||
.alert-queue-layout,
|
||||
.billing-rate-table {
|
||||
border-color: var(--console-border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.resource-list,
|
||||
.conversation-list,
|
||||
.story-sidebar,
|
||||
.alert-queue,
|
||||
.billing-rate-table > div,
|
||||
.ops-ledger > div,
|
||||
.ops-version-group > div:first-child,
|
||||
.billing-ledger > div,
|
||||
.billing-policy-list > div,
|
||||
.alert-queue__toolbar,
|
||||
.alert-ledger-grid section > div {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.resource-button,
|
||||
.conversation-row {
|
||||
border-radius: 7px;
|
||||
color: #50565e;
|
||||
}
|
||||
|
||||
.resource-button:hover,
|
||||
.conversation-row:hover { background: #eeeff2; }
|
||||
.resource-button.active,
|
||||
.conversation-row.active { color: var(--console-primary); background: #fff; box-shadow: 0 1px 4px rgba(31, 35, 41, 0.08); }
|
||||
|
||||
.ops-billing,
|
||||
.ops-alerts,
|
||||
.ops-diagnostics { background: #fff; }
|
||||
|
||||
.billing-summary-grid strong,
|
||||
.alert-summary-grid strong,
|
||||
.summary-card strong,
|
||||
.diagnostic-card__head strong { color: var(--console-text); }
|
||||
|
||||
.status-pill,
|
||||
.event-stream-status,
|
||||
.alert-severity,
|
||||
.alert-detail__title b {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.event-stream-status { color: #137a50; background: #e9f7f0; }
|
||||
.event-stream-status--connecting,
|
||||
.event-stream-status--reconnecting { color: #a86500; background: #fff5df; }
|
||||
|
||||
.workspace__inline-error { border: 1px solid #ffd6d2; border-radius: 7px; color: #b42318; background: #fff2f0; }
|
||||
.workspace__action-message { border: 1px solid #cdebdc; border-radius: 7px; color: #137a50; background: #edf9f3; }
|
||||
.workspace__readonly-note,
|
||||
.ops-config-form__note { border-radius: 7px; color: #646a73; background: #f2f3f5; }
|
||||
|
||||
.alert-queue li.selected { box-shadow: inset 3px 0 var(--console-primary); background: #f4f3ff; }
|
||||
.alert-timeline ol::before { background: #d8dbe2; }
|
||||
.alert-timeline li::before { background: var(--console-primary); box-shadow: 0 0 0 1px #c8c9f6; }
|
||||
|
||||
.milestone-panel {
|
||||
grid-template-columns: 300px 1fr;
|
||||
gap: 30px;
|
||||
margin-top: 14px;
|
||||
padding: 20px 24px;
|
||||
color: var(--console-text);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.milestone-panel h2 { color: var(--console-text); font-size: 18px; }
|
||||
.milestone-panel ol { gap: 10px; }
|
||||
.milestone-panel li { color: #8b9199; font-size: 11px; }
|
||||
.milestone-panel li span { margin-bottom: 7px; color: #a5abb3; font-size: 14px; font-weight: 700; }
|
||||
.milestone-panel li.done,
|
||||
.milestone-panel li.active { color: #4d535b; }
|
||||
.milestone-panel li.done span { color: #1f9d68; }
|
||||
.milestone-panel li.active span { color: var(--console-primary); }
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.header-search { display: none; }
|
||||
.identity-panel { grid-template-columns: 1fr; gap: 18px; }
|
||||
.milestone-panel { grid-template-columns: 1fr; }
|
||||
.milestone-panel ol { grid-template-columns: repeat(4, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.app-header { padding: 0 10px; }
|
||||
.app-header__brand > strong,
|
||||
.app-header__brand .ant-tag,
|
||||
.header-user,
|
||||
.app-header__tools > .ant-badge { display: none; }
|
||||
.app-sider { position: fixed !important; z-index: 80; }
|
||||
.app-sider:not(.ant-layout-sider-collapsed) { box-shadow: 8px 0 24px rgba(31, 35, 41, 0.12); }
|
||||
.app-content { margin-left: 72px; }
|
||||
.page-container { padding: 16px 12px 28px; }
|
||||
.hero { align-items: flex-start; gap: 14px; }
|
||||
.hero__description { margin-left: 0; }
|
||||
.status-grid { grid-template-columns: 1fr; }
|
||||
.identity-panel { gap: 16px; padding: 18px; }
|
||||
.workspace-shell__heading { align-items: flex-start; flex-direction: column; gap: 6px; }
|
||||
.workspace-shell__heading > p { text-align: left; }
|
||||
.workspace,
|
||||
.ops-workspace { padding: 16px; }
|
||||
.milestone-panel { padding: 18px; }
|
||||
.milestone-panel ol { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user