This commit is contained in:
hectorzhao
+1
-1
@@ -4,7 +4,7 @@ import { HashRouter } from 'react-router-dom';
|
||||
import '@/styles/tokens.css';
|
||||
import '@/styles/reset.css';
|
||||
import '@/styles/shell.css';
|
||||
import '@/styles/global.css';
|
||||
import '@/styles/domains/index.css';
|
||||
import '@/styles/admin.css';
|
||||
import '@/styles/client.css';
|
||||
import '@/styles/components.css';
|
||||
|
||||
@@ -0,0 +1,318 @@
|
||||
/* Owner: shared operations gateway exceptions and dashboard. Extracted from global.css with original cascade order preserved. */
|
||||
.gateway-exception-time {
|
||||
font-size: 1rem !important;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.gateway-exception-command {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.gateway-exception-command pre {
|
||||
max-height: 22rem;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
background: var(--color-surface-muted);
|
||||
color: var(--color-text);
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.55;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.gateway-requeue-confirm .callout {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 0.9rem 1rem;
|
||||
border: 1px solid;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.gateway-requeue-confirm .callout p {
|
||||
margin: 0.25rem 0 0;
|
||||
}
|
||||
|
||||
.gateway-requeue-confirm .callout--warning {
|
||||
border-color: #f5c66f;
|
||||
background: #fff8e8;
|
||||
color: #8a5700;
|
||||
}
|
||||
|
||||
.gateway-requeue-confirm .callout--danger {
|
||||
border-color: #f2a4a4;
|
||||
background: #fff0f0;
|
||||
color: #a12222;
|
||||
}
|
||||
|
||||
.gateway-requeue-checkbox {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.6rem;
|
||||
color: var(--color-text);
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gateway-requeue-checkbox input {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.text-page-title {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
.text-section-title {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
.text-card-title {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-md);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.text-caption {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.overview-hero {
|
||||
align-items: center;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
gap: var(--space-5);
|
||||
justify-content: space-between;
|
||||
padding: var(--space-7);
|
||||
}
|
||||
|
||||
.overview-hero h1 {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.overview-hero .eyebrow {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
.overview-hero .muted {
|
||||
color: var(--color-text-muted);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.dashboard-grid--four {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.dashboard-grid--four {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.metric-card--featured {
|
||||
background: linear-gradient(180deg, var(--color-surface), var(--color-accent-soft));
|
||||
border-color: rgba(217, 195, 160, 0.72);
|
||||
}
|
||||
|
||||
.metric-card--featured span,
|
||||
.metric-card--featured small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.metric-card span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.metric-card strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: 30px;
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
.metric-card small {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.chart-grid {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chart-card h2 {
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.overview-grid {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
|
||||
}
|
||||
|
||||
.overview-grid--three {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.quick-grid {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.quick-action {
|
||||
background: var(--color-bg-subtle);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
color: var(--color-text);
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
justify-items: start;
|
||||
min-width: 0;
|
||||
padding: var(--space-4);
|
||||
text-align: left;
|
||||
transition:
|
||||
border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast),
|
||||
transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.quick-action:hover {
|
||||
border-color: rgba(37, 99, 235, 0.24);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.quick-action svg {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
.quick-action span {
|
||||
color: var(--color-text-strong);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.quick-action small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.progress-heading {
|
||||
align-items: center;
|
||||
color: var(--color-text-muted);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: var(--space-4) 0 var(--space-2);
|
||||
}
|
||||
|
||||
.progress-heading strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
background: var(--color-surface-muted);
|
||||
border-radius: var(--radius-full);
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-track span {
|
||||
background: linear-gradient(90deg, var(--color-selected), var(--color-accent));
|
||||
border-radius: inherit;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mini-status-card {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.mini-status-card svg {
|
||||
color: var(--color-selected);
|
||||
flex: 0 0 auto;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.mini-status-card div {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mini-status-card span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.mini-status-card strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.mini-status-card small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.mini-status-card--action {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
transition:
|
||||
border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast),
|
||||
transform var(--transition-fast);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mini-status-card--action:hover,
|
||||
.mini-status-card--action:focus-visible {
|
||||
border-color: var(--color-selected);
|
||||
box-shadow: var(--shadow-sm);
|
||||
outline: none;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
@@ -0,0 +1,756 @@
|
||||
/* Owner: client SMS and MMS sending and batch task lists. Extracted from global.css with original cascade order preserved. */
|
||||
.sms-send-page {
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.sms-send-title {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.sms-send-title h1 {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.sms-send-title__icon {
|
||||
align-items: center;
|
||||
background: var(--color-selected-soft);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-selected);
|
||||
display: inline-flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.sms-send-layout {
|
||||
align-items: start;
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
grid-template-columns: minmax(0, 1fr) 372px;
|
||||
}
|
||||
|
||||
.sms-send-main {
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.send-card,
|
||||
.sms-preview-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.send-card__title {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.send-card__title span {
|
||||
align-items: center;
|
||||
background: var(--color-selected);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-text-inverse);
|
||||
display: inline-flex;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-bold);
|
||||
height: 24px;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.send-card__title h2,
|
||||
.preview-title h2 {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.send-field {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.send-field span {
|
||||
color: var(--color-text-strong);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.send-field input,
|
||||
.receiver-table input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
color: var(--color-text);
|
||||
height: var(--control-height-md);
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.send-field input::placeholder,
|
||||
.receiver-table input::placeholder {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.send-form-row {
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
margin-top: var(--space-6);
|
||||
}
|
||||
|
||||
.template-trigger {
|
||||
align-items: center;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
height: var(--control-height-md);
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--control-padding-x);
|
||||
text-align: left;
|
||||
transition:
|
||||
border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast),
|
||||
background var(--transition-fast);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.template-trigger:hover,
|
||||
.template-trigger:focus-visible {
|
||||
border-color: var(--color-selected);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.template-trigger span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.template-trigger svg {
|
||||
color: var(--color-selected);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.template-trigger__placeholder {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.receiver-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.receiver-tabs button {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.receiver-tabs button.active {
|
||||
border-color: var(--color-selected);
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
.receiver-table {
|
||||
border: 1px solid var(--color-border);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.receiver-table__head,
|
||||
.receiver-table__row {
|
||||
display: grid;
|
||||
grid-template-columns: 120px minmax(0, 1fr) 96px;
|
||||
}
|
||||
|
||||
.receiver-table__head {
|
||||
background: var(--color-surface-muted);
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.receiver-table__head span,
|
||||
.receiver-table__row span,
|
||||
.receiver-table__row input,
|
||||
.receiver-table__row button {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
min-height: 50px;
|
||||
padding: 0 var(--space-4);
|
||||
}
|
||||
|
||||
.receiver-table__row span {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
.receiver-table__row button {
|
||||
background: transparent;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
color: var(--color-danger);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.receiver-table__row button:disabled {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.add-recipient {
|
||||
align-items: center;
|
||||
background: var(--color-bg-subtle);
|
||||
border: 1px dashed var(--color-selected);
|
||||
color: var(--color-selected);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
margin-top: var(--space-3);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.import-panel {
|
||||
align-items: center;
|
||||
border: 1px dashed var(--color-border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-muted);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-auto-rows: max-content;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
min-height: 190px;
|
||||
padding: var(--space-6);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.import-panel__icon {
|
||||
align-items: center;
|
||||
background: var(--color-selected-soft);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-selected);
|
||||
display: inline-flex;
|
||||
height: 48px;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.import-panel__icon svg {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
.import-panel strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.send-tip {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.send-submit-row {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.client-billing-page .client-billing-amount {
|
||||
background: none;
|
||||
color: var(--color-text-strong);
|
||||
font-family: inherit;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
font-variant-numeric: normal;
|
||||
font-weight: var(--font-weight-regular);
|
||||
letter-spacing: normal;
|
||||
line-height: 1.25;
|
||||
text-shadow: none;
|
||||
-webkit-background-clip: border-box;
|
||||
-webkit-text-fill-color: currentColor;
|
||||
}
|
||||
|
||||
.send-submit-hint {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.mms-send-page .send-card {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mms-send-tip {
|
||||
background: var(--color-selected-soft);
|
||||
border: 1px solid #bfdbfe;
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-4);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
.mms-import-mode {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.mms-import-rules {
|
||||
align-items: start;
|
||||
background: #e5e7eb;
|
||||
color: var(--color-text-muted);
|
||||
display: flex;
|
||||
gap: var(--space-5);
|
||||
justify-content: space-between;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.mms-import-rules strong {
|
||||
color: var(--color-text-strong);
|
||||
display: block;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.mms-import-rules p {
|
||||
margin: 0 0 var(--space-2);
|
||||
}
|
||||
|
||||
.mms-import-panel {
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
.mms-import-panel .import-panel__icon {
|
||||
border-radius: var(--radius-md);
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.sms-preview-card {
|
||||
position: sticky;
|
||||
top: calc(var(--topbar-height) + var(--space-6));
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
align-items: center;
|
||||
color: var(--color-selected);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.preview-title h2 {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.phone-preview {
|
||||
background: var(--color-surface-muted);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.phone-preview div {
|
||||
background: #dbe6ff;
|
||||
border: 1px solid #90b0ff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 5px rgba(37, 99, 235, 0.18);
|
||||
color: var(--color-text);
|
||||
min-height: 54px;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.preview-stats {
|
||||
display: grid;
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
.preview-stats div {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-4) 0;
|
||||
}
|
||||
|
||||
.preview-stats span {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.preview-stats strong {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
.preview-note {
|
||||
background: var(--color-surface-muted);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
margin-top: var(--space-5);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
.mms-preview-card {
|
||||
min-height: 340px;
|
||||
}
|
||||
|
||||
.mms-message-preview {
|
||||
background: #e5e7eb;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.mms-message-preview > div {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
color: var(--color-text);
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
min-height: 64px;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.mms-message-preview strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.mms-message-preview p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.template-picker {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.template-picker__list {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.template-picker__list button {
|
||||
align-items: center;
|
||||
background: var(--color-surface);
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
justify-content: space-between;
|
||||
padding: var(--space-4);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.template-picker__list button:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.template-picker__list button:hover,
|
||||
.template-picker__list button.active {
|
||||
background: var(--color-selected-soft);
|
||||
}
|
||||
|
||||
.template-picker__list button.active {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
.template-picker__list span {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.template-picker__list strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.template-picker__list small {
|
||||
color: var(--color-text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.batch-filter-card {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.batch-filter-card h2 {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.batch-filter-card p strong {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
.batch-filter-grid {
|
||||
align-items: end;
|
||||
display: grid;
|
||||
gap: var(--space-8);
|
||||
grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr);
|
||||
}
|
||||
|
||||
.batch-table-card {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.batch-table {
|
||||
min-width: 1080px;
|
||||
}
|
||||
|
||||
.batch-table th {
|
||||
background: #e5e7eb;
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.batch-table td {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.batch-table tbody tr:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.batch-main-row td {
|
||||
border-top: 12px solid var(--color-bg);
|
||||
position: relative;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
.batch-main-row td,
|
||||
.batch-template-row td {
|
||||
background: #fbfcff;
|
||||
}
|
||||
|
||||
.batch-task-id {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.batch-task-id strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.batch-template-row td {
|
||||
border-top: 0;
|
||||
height: auto;
|
||||
padding: 0 var(--space-4) var(--space-5);
|
||||
position: relative;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
.batch-main-row.batch-row--hovered td,
|
||||
.batch-template-row.batch-row--hovered td {
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.batch-template-content {
|
||||
align-items: flex-start;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid #edf0f5;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: inset 0 0 0 1px rgba(18, 18, 26, 0.01);
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
line-height: 1.7;
|
||||
margin-left: 0;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
transition:
|
||||
border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.batch-template-row.batch-row--hovered .batch-template-content {
|
||||
border-color: rgba(37, 99, 235, 0.18);
|
||||
box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
.batch-template-row.batch-row--hovered .ui-inline-text-preview {
|
||||
border-color: rgba(37, 99, 235, 0.18);
|
||||
box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
.batch-template-content > span:first-child {
|
||||
color: var(--color-text-muted);
|
||||
flex: 0 0 auto;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.batch-template-content p {
|
||||
color: var(--color-text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.batch-template-content p strong {
|
||||
color: var(--color-text-muted);
|
||||
font-weight: var(--font-weight-regular);
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.batch-send-time {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.batch-send-time span {
|
||||
align-items: center;
|
||||
color: var(--color-selected);
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.batch-send-time small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.batch-progress {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.batch-progress div:first-child {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.batch-progress span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.batch-progress strong {
|
||||
color: var(--color-selected);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.batch-progress__track {
|
||||
background: var(--color-border-strong);
|
||||
border-radius: var(--radius-full);
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.batch-progress__bar {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.batch-progress__bar--completed {
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.batch-progress__bar--sending {
|
||||
background: var(--color-selected);
|
||||
}
|
||||
|
||||
.batch-progress__bar--terminated {
|
||||
background: var(--color-danger);
|
||||
}
|
||||
|
||||
.batch-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.batch-actions .ui-button {
|
||||
min-width: 52px;
|
||||
}
|
||||
|
||||
.batch-actions .ui-button:last-child {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.mms-task-table td {
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.mms-task-content {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: 74px minmax(0, 1fr);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mms-task-content img {
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: var(--radius-sm);
|
||||
object-fit: cover;
|
||||
width: 74px;
|
||||
}
|
||||
|
||||
.mms-task-content div {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mms-task-content strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.mms-task-content p {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
color: var(--color-text-muted);
|
||||
display: -webkit-box;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mms-detail-row-content {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
grid-template-columns: 84px minmax(0, 1fr);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mms-detail-row-content img {
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: var(--radius-sm);
|
||||
object-fit: cover;
|
||||
width: 84px;
|
||||
}
|
||||
|
||||
.mms-detail-row-content div {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mms-detail-row-content strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
@@ -0,0 +1,725 @@
|
||||
/* Owner: client task detail, delivery records and uplink. Extracted from global.css with original cascade order preserved. */
|
||||
.mms-detail-row-content p {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
color: var(--color-text-muted);
|
||||
display: -webkit-box;
|
||||
line-height: 1.55;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mms-task-actions {
|
||||
grid-template-columns: repeat(2, minmax(62px, 1fr));
|
||||
}
|
||||
|
||||
.mms-task-actions .ui-button:last-child {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
.mms-detail-template {
|
||||
align-items: start;
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: 220px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.mms-detail-template img {
|
||||
aspect-ratio: 4 / 3;
|
||||
border-radius: var(--radius-sm);
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mms-detail-template div {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.mms-detail-template p {
|
||||
color: var(--color-text);
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.batch-pagination {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-4) var(--space-6);
|
||||
}
|
||||
|
||||
.batch-pagination > span {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.batch-pagination > div {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.task-detail-title {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.task-detail-title .sms-send-title__icon {
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #f6efe4 100%);
|
||||
border-color: rgba(37, 99, 235, 0.16);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
.task-detail-title h2 {
|
||||
color: var(--color-text-strong);
|
||||
font-size: 30px;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.task-detail-title p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
margin: var(--space-2) 0 0;
|
||||
}
|
||||
|
||||
.task-detail {
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.task-detail-section {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid rgba(209, 213, 219, 0.72);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xs);
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.task-detail-section > h3,
|
||||
.task-section-title h3 {
|
||||
align-items: center;
|
||||
color: var(--color-text-strong);
|
||||
display: flex;
|
||||
font-size: var(--font-size-xl);
|
||||
gap: var(--space-2);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.task-section-title {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.task-info-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.task-info-grid > div {
|
||||
background: linear-gradient(180deg, #fbfcfe 0%, #f7f8fa 100%);
|
||||
border: 1px solid rgba(209, 213, 219, 0.74);
|
||||
border-radius: var(--radius-sm);
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
min-height: 78px;
|
||||
padding: var(--space-4);
|
||||
transition:
|
||||
border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast),
|
||||
transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.task-info-grid > div:hover {
|
||||
border-color: rgba(37, 99, 235, 0.22);
|
||||
box-shadow: 0 8px 20px rgba(18, 18, 26, 0.05);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.task-info-grid span,
|
||||
.task-stat-card span,
|
||||
.task-total-progress span,
|
||||
.overall-rate-card span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.task-info-grid strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.task-info-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.task-info-full strong {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.task-send-type {
|
||||
align-items: center;
|
||||
color: var(--color-selected) !important;
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.text-blue {
|
||||
color: var(--color-selected) !important;
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: var(--color-success) !important;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.task-stat-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.task-stat-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid rgba(191, 219, 254, 0.9);
|
||||
border-radius: var(--radius-sm);
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
min-height: 96px;
|
||||
overflow: hidden;
|
||||
padding: var(--space-5);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.task-stat-card::before {
|
||||
content: '';
|
||||
height: 3px;
|
||||
inset: 0 0 auto;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.task-stat-card--blue::before {
|
||||
background: var(--color-selected);
|
||||
}
|
||||
|
||||
.task-stat-card--green {
|
||||
border-color: #bbf7d0;
|
||||
}
|
||||
|
||||
.task-stat-card--green::before {
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.task-stat-card strong {
|
||||
color: var(--color-selected);
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.task-stat-card--green strong {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.task-total-progress {
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(209, 213, 219, 0.72);
|
||||
border-radius: var(--radius-sm);
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.task-total-progress > div:first-child {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.task-total-progress strong {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
.overall-rate-card {
|
||||
align-items: center;
|
||||
background:
|
||||
radial-gradient(circle at 50% 24%, rgba(217, 195, 160, 0.24), transparent 28%),
|
||||
linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
|
||||
border: 1px solid rgba(191, 219, 254, 0.95);
|
||||
border-radius: var(--radius-sm);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
justify-items: center;
|
||||
min-height: 178px;
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.overall-rate-card strong {
|
||||
color: var(--color-success);
|
||||
font-size: 52px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.overall-rate-card small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.task-detail-section h4 {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-base);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.carrier-rate-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.carrier-rate-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(209, 213, 219, 0.78);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow-xs);
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.carrier-rate-card > div:first-child,
|
||||
.carrier-rate-card p {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.carrier-rate-card > div:first-child strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.carrier-rate-card > div:first-child span {
|
||||
color: var(--color-success);
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.carrier-rate-card p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.city-rate-table th {
|
||||
background: #f3f4f6;
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.city-rate-table td {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.city-rate-table tbody tr:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.task-detail-title .sms-send-title__icon {
|
||||
background: var(--color-brand);
|
||||
border-color: var(--color-brand);
|
||||
color: var(--color-accent);
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.task-detail-title h2 {
|
||||
font-size: 28px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.task-detail-title p {
|
||||
color: #8a93a3;
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.task-detail {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.task-detail-section {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e9edf3;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 8px 24px rgba(18, 18, 26, 0.04);
|
||||
gap: 18px;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.task-detail-section > h3,
|
||||
.task-section-title h3 {
|
||||
font-size: 18px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.task-section-title {
|
||||
border-bottom: 1px solid #eef1f5;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.task-info-grid {
|
||||
gap: 0;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
overflow: hidden;
|
||||
border: 1px solid #edf0f5;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.task-info-grid > div {
|
||||
background: #ffffff;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #edf0f5;
|
||||
border-right: 1px solid #edf0f5;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
min-height: 82px;
|
||||
padding: 16px 18px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.task-info-grid > div:nth-child(4n) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.task-info-grid > div:hover {
|
||||
background: #fbfcff;
|
||||
border-color: #edf0f5;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.task-info-grid span,
|
||||
.task-stat-card span,
|
||||
.task-total-progress span,
|
||||
.overall-rate-card span {
|
||||
color: #7b8494;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.task-info-grid strong {
|
||||
color: #18202f;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.task-info-full {
|
||||
background: #fbfcff !important;
|
||||
border-bottom: 0 !important;
|
||||
border-right: 0 !important;
|
||||
grid-column: 1 / -1;
|
||||
min-height: 92px !important;
|
||||
}
|
||||
|
||||
.task-info-full strong {
|
||||
color: #263244;
|
||||
font-size: 14px;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.task-stat-grid {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.task-stat-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e7ebf2;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 1px 2px rgba(18, 18, 26, 0.04);
|
||||
min-height: 106px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.task-stat-card::before {
|
||||
height: 100%;
|
||||
inset: 0 auto 0 0;
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.task-stat-card strong {
|
||||
font-size: 30px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.task-total-progress {
|
||||
background: #fbfcff;
|
||||
border-color: #e7ebf2;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.task-total-progress .batch-progress__track {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.overall-rate-card {
|
||||
background: linear-gradient(180deg, rgba(37, 99, 235, 0.08), transparent 58%), #ffffff;
|
||||
border-color: #d9e6ff;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.overall-rate-card strong {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.carrier-rate-grid {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.carrier-rate-card {
|
||||
border-color: #e7ebf2;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 1px 2px rgba(18, 18, 26, 0.04);
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.city-rate-table {
|
||||
min-width: 760px;
|
||||
}
|
||||
|
||||
.city-rate-table th {
|
||||
background: #f7f8fa;
|
||||
border-bottom: 1px solid #e7ebf2;
|
||||
color: #5f6878;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.city-rate-table td {
|
||||
height: 58px;
|
||||
}
|
||||
|
||||
.send-detail-table-card {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.send-detail-table {
|
||||
min-width: 1420px;
|
||||
}
|
||||
|
||||
.mms-send-detail-table {
|
||||
min-width: 1560px;
|
||||
}
|
||||
|
||||
.send-detail-table th {
|
||||
background: #e5e7eb;
|
||||
color: var(--color-text-strong);
|
||||
height: 58px;
|
||||
}
|
||||
|
||||
.send-detail-main-row td {
|
||||
background: #ffffff;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.send-detail-content-row td {
|
||||
background: #ffffff;
|
||||
border-top: 0;
|
||||
height: auto;
|
||||
padding: 0 var(--space-4) var(--space-5);
|
||||
}
|
||||
|
||||
.send-detail-message {
|
||||
color: var(--color-text-muted);
|
||||
display: block;
|
||||
line-height: 1.65;
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
.send-detail-content-block {
|
||||
align-items: flex-start;
|
||||
background: #fbfcff;
|
||||
border: 1px solid #edf0f5;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
line-height: 1.7;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
.send-detail-content-block span {
|
||||
color: var(--color-text-muted);
|
||||
flex: 0 0 auto;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.send-detail-content-block p {
|
||||
color: var(--color-text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.send-detail-app-name,
|
||||
.send-detail-count,
|
||||
.send-detail-time,
|
||||
.send-detail-region {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.send-detail-time,
|
||||
.send-detail-region {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.send-detail-time small,
|
||||
.send-detail-region small,
|
||||
.send-detail-count small {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.send-detail-count strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.send-detail-receipt-code {
|
||||
color: var(--color-success);
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.send-detail-carrier {
|
||||
color: #374151;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.uplink-table-card {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.uplink-table-card .ui-table th {
|
||||
background: #e5e7eb;
|
||||
color: var(--color-text-strong);
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
.uplink-table-card .ui-table td {
|
||||
height: 78px;
|
||||
}
|
||||
|
||||
.uplink-content {
|
||||
color: var(--color-text-strong);
|
||||
display: -webkit-box;
|
||||
line-height: 1.6;
|
||||
min-width: 320px;
|
||||
overflow: hidden;
|
||||
overflow-wrap: anywhere;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.uplink-detail {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.uplink-detail-hint {
|
||||
color: var(--color-text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.uplink-match-list {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.uplink-match-card {
|
||||
background: #f1f3f5;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.uplink-match-grid {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.uplink-match-grid div,
|
||||
.uplink-match-content {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.uplink-match-grid span,
|
||||
.uplink-match-content span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.uplink-match-grid strong,
|
||||
.uplink-match-content p {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.uplink-match-content p {
|
||||
line-height: 1.75;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.uplink-match-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mms-uplink-pagination {
|
||||
align-items: center;
|
||||
border-top: 1px solid #edf0f5;
|
||||
color: var(--color-text-muted);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px 22px;
|
||||
}
|
||||
|
||||
.mms-uplink-pagination > div {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mms-uplink-detail .task-detail-section:first-child {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.mms-uplink-match-card {
|
||||
background: #f4f6f8;
|
||||
}
|
||||
|
||||
.mms-uplink-image {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.mms-uplink-image span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.mms-uplink-image img {
|
||||
aspect-ratio: 16 / 7;
|
||||
border-radius: var(--radius-sm);
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,824 @@
|
||||
/* Owner: signature and drainage experiences. Extracted from global.css with original cascade order preserved. */
|
||||
.sms-app-grid {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: repeat(3, minmax(260px, 1fr));
|
||||
}
|
||||
|
||||
.sms-app-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.sms-app-card h2 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
.sms-app-card dl {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sms-app-card dl div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sms-app-card dt {
|
||||
color: var(--color-text-muted);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.sms-app-card dd {
|
||||
color: var(--color-text-strong);
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sms-app-card dd span {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
.sms-app-param-table {
|
||||
border: 1px solid var(--color-border);
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.sms-app-param-table div {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1fr);
|
||||
min-height: 58px;
|
||||
}
|
||||
|
||||
.sms-app-param-table div + div {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.sms-app-param-table span,
|
||||
.sms-app-param-table strong {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0 var(--space-5);
|
||||
}
|
||||
|
||||
.sms-app-param-table span {
|
||||
background: #f1f3f5;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.sms-app-param-table strong {
|
||||
background: #ffffff;
|
||||
color: var(--color-text-strong);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.signature-page-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.signature-search-row {
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.signature-list {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.signature-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.signature-card::before {
|
||||
content: '';
|
||||
inset: 0 auto 0 0;
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.signature-card--green::before {
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.signature-card--blue::before {
|
||||
background: var(--color-selected);
|
||||
}
|
||||
|
||||
.signature-card--amber::before {
|
||||
background: var(--color-warning);
|
||||
}
|
||||
|
||||
.signature-card--red::before {
|
||||
background: var(--color-danger);
|
||||
}
|
||||
|
||||
.signature-card--gray::before {
|
||||
background: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.signature-summary {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: 28px 1fr 1fr 1fr 1fr 1fr 1fr 110px;
|
||||
min-height: 112px;
|
||||
padding: var(--space-5) var(--space-6);
|
||||
}
|
||||
|
||||
.signature-summary > button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-text-muted);
|
||||
display: inline-flex;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.signature-summary div:not(.signature-actions) {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.signature-summary span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.signature-summary strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.signature-actions {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.drainage-panel {
|
||||
background: #f1f3f5;
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-5) var(--space-6);
|
||||
}
|
||||
|
||||
.drainage-panel h2 {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.drainage-table {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.drainage-table__head,
|
||||
.drainage-table__row {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: minmax(180px, 1.5fr) minmax(80px, 0.7fr) repeat(3, minmax(64px, 0.65fr)) minmax(196px, auto);
|
||||
min-height: 58px;
|
||||
}
|
||||
|
||||
.drainage-table__head {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.drainage-table__row {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.drainage-table__url {
|
||||
color: var(--color-text-strong);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.drainage-row-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.drainage-panel__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.admin-enterprise-signature-list .signature-summary {
|
||||
gap: var(--space-2);
|
||||
grid-template-columns:
|
||||
22px minmax(132px, 0.9fr) minmax(168px, 1.1fr) minmax(120px, 0.8fr) minmax(82px, 0.55fr)
|
||||
repeat(3, minmax(64px, 0.45fr)) minmax(68px, 0.45fr) 224px;
|
||||
min-height: 64px;
|
||||
min-width: 1160px;
|
||||
padding-inline: var(--space-3);
|
||||
}
|
||||
|
||||
.admin-enterprise-signature-list .signature-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
justify-self: end;
|
||||
min-width: 224px;
|
||||
width: 224px;
|
||||
}
|
||||
|
||||
.admin-enterprise-signature-list .signature-actions .ui-button,
|
||||
.admin-enterprise-signature-list .drainage-row-actions .ui-button {
|
||||
height: var(--control-height-sm);
|
||||
justify-content: center;
|
||||
min-height: var(--control-height-sm);
|
||||
min-width: 0;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.signature-summary .signature-summary__regular-value {
|
||||
color: var(--color-text-strong);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.admin-enterprise-signature-list {
|
||||
gap: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.admin-enterprise-signature-list .signature-card {
|
||||
border-radius: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.admin-enterprise-signature-list .signature-card:last-of-type {
|
||||
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
||||
}
|
||||
|
||||
.enterprise-signature-table__head {
|
||||
align-items: center;
|
||||
background: var(--color-surface-subtle);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
color: var(--color-text-muted);
|
||||
display: grid;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
gap: var(--space-2);
|
||||
grid-template-columns:
|
||||
22px minmax(132px, 0.9fr) minmax(168px, 1.1fr) minmax(120px, 0.8fr) minmax(82px, 0.55fr)
|
||||
repeat(3, minmax(64px, 0.45fr)) minmax(68px, 0.45fr) 224px;
|
||||
min-height: 46px;
|
||||
min-width: 1160px;
|
||||
padding-inline: var(--space-3);
|
||||
}
|
||||
|
||||
.enterprise-signature-table__signature {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.enterprise-signature-table__signature strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.enterprise-signature-pending-summary {
|
||||
align-items: center;
|
||||
background: var(--color-surface-subtle);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
min-height: 46px;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
}
|
||||
|
||||
.enterprise-signature-pending-summary strong {
|
||||
color: var(--color-primary);
|
||||
font-size: var(--font-size-xl);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.enterprise-signature-pending-summary .ui-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.carrier-report-count {
|
||||
align-items: center;
|
||||
border-radius: var(--radius-sm);
|
||||
display: inline-grid;
|
||||
font-size: var(--font-size-xs);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
gap: 1px;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
line-height: 1.2;
|
||||
min-width: 64px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.carrier-report-count small {
|
||||
font-size: 11px;
|
||||
font-weight: var(--font-weight-medium);
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.carrier-report-count--success {
|
||||
background: var(--color-success-soft);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.carrier-report-count--warning {
|
||||
background: var(--color-warning-soft);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.carrier-report-count--danger {
|
||||
background: var(--color-danger-soft);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.carrier-report-count--info {
|
||||
background: var(--color-info-soft);
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.carrier-report-count--neutral {
|
||||
background: var(--color-surface-subtle);
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.signature-report-status {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.signature-report-status__context {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2) var(--space-3);
|
||||
}
|
||||
|
||||
.signature-report-status__context span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.signature-report-status__carriers {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.signature-report-status__carrier {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.signature-report-status__carrier > header {
|
||||
align-items: center;
|
||||
background: var(--color-surface-subtle);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-height: 54px;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
.signature-report-status__carrier > header > span:last-child {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.signature-report-status__list {
|
||||
max-height: 280px;
|
||||
min-height: 190px;
|
||||
overflow: auto;
|
||||
padding: 0 var(--space-4);
|
||||
}
|
||||
|
||||
.signature-report-status__row {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: minmax(0, 1fr) 168px;
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.signature-report-status__row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.signature-report-status__row strong {
|
||||
font-size: var(--font-size-sm);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.signature-report-status__empty {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
padding: var(--space-7) 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.signature-report-status__carriers {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.signature-report-status__list {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap__total {
|
||||
color: var(--color-text-strong);
|
||||
font-weight: 700;
|
||||
background: var(--color-surface-muted);
|
||||
}
|
||||
|
||||
.carrier-report-summary {
|
||||
align-items: flex-start;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.carrier-report-summary small {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-list {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row {
|
||||
align-items: center;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: minmax(220px, 1.15fr) minmax(280px, 1.6fr) minmax(136px, 0.65fr) 188px;
|
||||
min-width: 0;
|
||||
padding: var(--space-5);
|
||||
transition:
|
||||
border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row:hover {
|
||||
border-color: var(--color-border-strong);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__identity,
|
||||
.admin-enterprise-template-row__content,
|
||||
.admin-enterprise-template-row__meta {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__title {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__title > strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row dl {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
margin: var(--space-3) 0 0;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row dl div {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row dt,
|
||||
.admin-enterprise-template-row__content > span,
|
||||
.admin-enterprise-template-row__meta > span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row dd {
|
||||
color: var(--color-text-strong);
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__content p {
|
||||
color: var(--color-text-strong);
|
||||
display: -webkit-box;
|
||||
line-height: 1.65;
|
||||
margin: var(--space-2) 0;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__content small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__meta {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__meta strong {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__actions {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__actions .ui-button {
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.admin-enterprise-template-row {
|
||||
grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.35fr) 168px;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__meta {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__actions {
|
||||
grid-column: 3;
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.admin-enterprise-template-row {
|
||||
align-items: stretch;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-enterprise-template-row__meta,
|
||||
.admin-enterprise-template-row__actions {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.system-log-filters__actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.detail-grid div {
|
||||
background: var(--color-bg-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.detail-grid span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.detail-grid strong {
|
||||
color: var(--color-text-strong);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.detail-grid__wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.signature-modal-title h2 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
.signature-modal-title p {
|
||||
color: var(--color-text-muted);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.signature-form {
|
||||
display: grid;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.signature-form section {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.signature-form h3 {
|
||||
border-left: 5px solid var(--color-selected);
|
||||
padding-left: var(--space-3);
|
||||
}
|
||||
|
||||
.signature-form-grid {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.signature-form-grid__wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.report-requirement-heading {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.report-requirement-heading h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.report-field-source {
|
||||
color: var(--color-text-muted);
|
||||
display: block;
|
||||
line-height: 1.6;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.report-requirement-explanation > p {
|
||||
background: var(--color-selected-soft);
|
||||
border: 1px solid #bfdbfe;
|
||||
line-height: 1.7;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.report-source-group {
|
||||
border-left: 3px solid var(--color-selected);
|
||||
margin-top: var(--space-5);
|
||||
padding-left: var(--space-4);
|
||||
}
|
||||
|
||||
.report-source-channel {
|
||||
background: var(--color-bg-subtle);
|
||||
margin-top: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
.report-source-channel ul {
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.signature-upload {
|
||||
align-items: center;
|
||||
border: 2px dashed var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
justify-items: center;
|
||||
min-height: 170px;
|
||||
padding: var(--space-5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.signature-upload > span:first-child {
|
||||
justify-self: start;
|
||||
color: var(--color-text-strong);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.signature-upload svg {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.signature-upload strong {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
.signature-upload small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.signature-upload--compact {
|
||||
min-height: 118px;
|
||||
}
|
||||
|
||||
.signature-file-line {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.signature-file-line > span {
|
||||
color: var(--color-text-muted);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.signature-file-line small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.drainage-edit-form .signature-upload {
|
||||
min-height: 112px;
|
||||
}
|
||||
|
||||
.drainage-form-note {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.drainage-form-note ol {
|
||||
margin: 0;
|
||||
padding-left: var(--space-5);
|
||||
}
|
||||
|
||||
.drainage-file-picker {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.drainage-file-picker > span {
|
||||
color: var(--color-text-strong);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.drainage-file-picker > div {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
.drainage-file-picker em {
|
||||
background: var(--color-surface-subtle);
|
||||
color: var(--color-text-muted);
|
||||
font-style: normal;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
.mms-signature-table-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mms-signature-table-card .ui-table th {
|
||||
background: #e1e5ea;
|
||||
color: #7b8494;
|
||||
font-size: var(--font-size-sm);
|
||||
height: 58px;
|
||||
}
|
||||
|
||||
.mms-signature-table-card .ui-table td {
|
||||
color: var(--color-text);
|
||||
height: 86px;
|
||||
}
|
||||
|
||||
.mms-signature-table-card .ui-table th:first-child,
|
||||
.mms-signature-table-card .ui-table td:first-child {
|
||||
padding-left: var(--space-6);
|
||||
}
|
||||
@@ -0,0 +1,833 @@
|
||||
/* Owner: SMS and MMS template experiences. Extracted from global.css with original cascade order preserved. */
|
||||
.mms-signature-name {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.mms-signature-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.mms-signature-actions .ui-button:disabled {
|
||||
background: #f5f6f8;
|
||||
border-color: #e5e7eb;
|
||||
color: var(--color-text-subtle);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mms-signature-delete {
|
||||
border-color: rgba(239, 68, 68, 0.22);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.mms-signature-delete:hover {
|
||||
background: rgba(239, 68, 68, 0.06);
|
||||
border-color: rgba(239, 68, 68, 0.36);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.mms-pagination {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
justify-content: center;
|
||||
padding: var(--space-3) 0;
|
||||
}
|
||||
|
||||
.mms-pagination button {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text);
|
||||
height: 36px;
|
||||
min-width: 36px;
|
||||
padding: 0 var(--space-3);
|
||||
transition:
|
||||
background var(--transition-fast),
|
||||
border-color var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
}
|
||||
|
||||
.mms-pagination button:hover:not(:disabled),
|
||||
.mms-pagination button.active {
|
||||
background: var(--color-selected);
|
||||
border-color: var(--color-selected);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
|
||||
.mms-pagination button:disabled {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.mms-template-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mms-template-header .sms-send-title {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mms-template-header p {
|
||||
color: var(--color-text-muted);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.mms-template-toolbar {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.mms-template-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(3, minmax(320px, 1fr));
|
||||
}
|
||||
|
||||
.mms-template-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition:
|
||||
border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast),
|
||||
transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.mms-template-card:hover {
|
||||
border-color: rgba(37, 99, 235, 0.2);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.mms-template-card::before {
|
||||
content: '';
|
||||
inset: 0 auto 0 0;
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.mms-template-card--green::before {
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.mms-template-card--blue::before {
|
||||
background: var(--color-selected);
|
||||
}
|
||||
|
||||
.mms-template-card--gray::before {
|
||||
background: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.mms-template-card__body {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: var(--space-5) var(--space-5) var(--space-4);
|
||||
}
|
||||
|
||||
.mms-template-meta {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
padding-right: 128px;
|
||||
}
|
||||
|
||||
.mms-template-card h2 {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.mms-template-card h3 {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: 1.28;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.mms-template-code {
|
||||
color: var(--color-text-muted);
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.28;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mms-template-card img {
|
||||
aspect-ratio: 16 / 7.2;
|
||||
border-radius: var(--radius-sm);
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mms-template-content {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
color: var(--color-text-muted);
|
||||
display: -webkit-box;
|
||||
line-height: 1.45;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mms-template-app-tag {
|
||||
background: var(--color-selected-soft);
|
||||
border: 1px solid rgba(37, 99, 235, 0.16);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-selected);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
padding: 5px 10px;
|
||||
position: absolute;
|
||||
right: var(--space-5);
|
||||
top: var(--space-5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mms-template-status {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.mms-template-status > span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.mms-template-status > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.mms-template-status section {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mms-template-status small {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.mms-template-card__footer {
|
||||
align-items: center;
|
||||
background: #f4f6f8;
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
justify-content: space-between;
|
||||
min-height: 48px;
|
||||
padding: 0 var(--space-5);
|
||||
}
|
||||
|
||||
.mms-template-card__footer > span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.mms-template-card__footer div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.mms-template-card__footer button {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-selected);
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mms-template-card__footer button:nth-child(2) {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.mms-template-card__footer button:last-child {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.mms-template-modal-title h2 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
.mms-template-modal-title p {
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.55;
|
||||
margin-top: var(--space-2);
|
||||
max-width: 980px;
|
||||
}
|
||||
|
||||
.mms-template-form {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.mms-template-form-grid {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.mms-frame-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mms-frame-header div {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.mms-frame-header strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.mms-frame-header span {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.mms-frame-list {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.mms-frame {
|
||||
background: #eef0f2;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.mms-frame__top {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: auto 124px 1fr;
|
||||
}
|
||||
|
||||
.mms-frame__top > strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.mms-frame__top > button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-danger);
|
||||
justify-self: end;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mms-frame-type .ui-field__label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mms-frame-type .ui-select button {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.mms-frame .ui-textarea {
|
||||
background: var(--color-surface);
|
||||
border-color: transparent;
|
||||
min-height: 106px;
|
||||
}
|
||||
|
||||
.mms-file-drop {
|
||||
align-items: center;
|
||||
background: var(--color-surface);
|
||||
border: 2px dashed var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
justify-items: center;
|
||||
min-height: 132px;
|
||||
padding: var(--space-5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mms-file-drop div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.mms-file-drop strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.mms-file-drop small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.mms-save-button {
|
||||
background: #7c3aed;
|
||||
border-color: #7c3aed;
|
||||
}
|
||||
|
||||
.mms-save-button:hover {
|
||||
background: #6d28d9;
|
||||
border-color: #6d28d9;
|
||||
}
|
||||
|
||||
.mms-preview {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.mms-preview img {
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: var(--radius-md);
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mms-preview p {
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.mms-preview-frames {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.mms-preview-frames span {
|
||||
align-items: center;
|
||||
background: var(--color-bg-subtle);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-text-muted);
|
||||
display: inline-flex;
|
||||
gap: var(--space-1);
|
||||
min-height: 30px;
|
||||
padding: 0 var(--space-3);
|
||||
}
|
||||
|
||||
.template-toolbar {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.template-card-grid {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.template-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
min-height: 300px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
padding: var(--space-6);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.template-card::before {
|
||||
content: '';
|
||||
inset: 0 auto 0 0;
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.template-card--green::before {
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.template-card--blue::before {
|
||||
background: var(--color-selected);
|
||||
}
|
||||
|
||||
.template-card--red::before {
|
||||
background: var(--color-danger);
|
||||
}
|
||||
|
||||
.template-card h2 {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.template-hash {
|
||||
color: var(--color-text-muted);
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.template-content {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-lg);
|
||||
line-height: 1.65;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.template-vars {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.template-vars span {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.template-vars strong,
|
||||
.template-current-vars strong {
|
||||
background: #e8f0ff;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-selected);
|
||||
font-weight: var(--font-weight-medium);
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.template-card-footer {
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
justify-content: space-between;
|
||||
margin-top: auto;
|
||||
padding-top: var(--space-4);
|
||||
}
|
||||
|
||||
.template-card-footer span {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.template-card-footer div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.template-card-footer button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-selected);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.template-card-footer button:last-child {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.template-form {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.template-form .ui-textarea {
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.template-form-meta {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.template-form-meta button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-selected);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.template-form-meta span {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.template-variable-panel {
|
||||
border: 1px solid var(--color-border);
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.template-variable-panel h3 {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.template-variable-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.template-variable-buttons button {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text);
|
||||
min-height: 36px;
|
||||
padding: 0 var(--space-4);
|
||||
}
|
||||
|
||||
.template-variable-buttons button:hover {
|
||||
border-color: var(--color-selected);
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
.template-custom-variable {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: minmax(0, 1fr) 96px;
|
||||
}
|
||||
|
||||
.template-info-tip {
|
||||
align-items: center;
|
||||
background: var(--color-selected-soft);
|
||||
border-left: 4px solid var(--color-selected);
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
line-height: 1.7;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.template-info-tip svg {
|
||||
color: var(--color-selected);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.template-current-vars {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.task-detail-title h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.task-stat-layout {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
|
||||
}
|
||||
|
||||
.task-progress-card {
|
||||
background: linear-gradient(180deg, rgba(37, 99, 235, 0.08), transparent 64%), #ffffff;
|
||||
border: 1px solid #dbe7ff;
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.task-progress-card span,
|
||||
.task-stat-list span {
|
||||
color: #7b8494;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.task-progress-card strong {
|
||||
color: var(--color-selected);
|
||||
font-size: 42px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.task-progress-card small {
|
||||
color: #7b8494;
|
||||
}
|
||||
|
||||
.task-stat-list {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e7ebf2;
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-stat-list > div {
|
||||
align-content: center;
|
||||
border-right: 1px solid #edf0f5;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-height: 138px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.task-stat-list > div:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.task-stat-list strong {
|
||||
color: #18202f;
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.overall-rate-card {
|
||||
min-height: 188px;
|
||||
}
|
||||
|
||||
.overall-rate-split {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(2, minmax(120px, 1fr));
|
||||
width: min(420px, 100%);
|
||||
}
|
||||
|
||||
.overall-rate-split div {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border: 1px solid rgba(209, 213, 219, 0.72);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
justify-items: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.overall-rate-split b {
|
||||
color: #18202f;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.rate-tone-low,
|
||||
.rate-tone-low .batch-progress__bar {
|
||||
--rate-color: var(--color-danger);
|
||||
}
|
||||
|
||||
.rate-tone-medium,
|
||||
.rate-tone-medium .batch-progress__bar {
|
||||
--rate-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.rate-tone-high,
|
||||
.rate-tone-high .batch-progress__bar {
|
||||
--rate-color: var(--color-success);
|
||||
}
|
||||
|
||||
.overall-rate-card.rate-tone-low {
|
||||
background: linear-gradient(180deg, rgba(220, 38, 38, 0.09), transparent 58%), #ffffff;
|
||||
border-color: rgba(220, 38, 38, 0.28);
|
||||
}
|
||||
|
||||
.overall-rate-card.rate-tone-medium {
|
||||
background: linear-gradient(180deg, rgba(217, 119, 6, 0.1), transparent 58%), #ffffff;
|
||||
border-color: rgba(217, 119, 6, 0.28);
|
||||
}
|
||||
|
||||
.overall-rate-card.rate-tone-high {
|
||||
background: linear-gradient(180deg, rgba(22, 163, 74, 0.09), transparent 58%), #ffffff;
|
||||
border-color: rgba(22, 163, 74, 0.26);
|
||||
}
|
||||
|
||||
.overall-rate-card.rate-tone-low strong,
|
||||
.carrier-rate-card.rate-tone-low > div:first-child span,
|
||||
.rate-text.rate-tone-low {
|
||||
color: var(--color-danger) !important;
|
||||
}
|
||||
|
||||
.overall-rate-card.rate-tone-medium strong,
|
||||
.carrier-rate-card.rate-tone-medium > div:first-child span,
|
||||
.rate-text.rate-tone-medium {
|
||||
color: var(--color-warning) !important;
|
||||
}
|
||||
|
||||
.overall-rate-card.rate-tone-high strong,
|
||||
.carrier-rate-card.rate-tone-high > div:first-child span,
|
||||
.rate-text.rate-tone-high {
|
||||
color: var(--color-success) !important;
|
||||
}
|
||||
|
||||
.rate-text {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.carrier-rate-card .batch-progress__bar,
|
||||
.city-rate-table .batch-progress__bar {
|
||||
background: var(--rate-color, var(--color-success));
|
||||
}
|
||||
|
||||
.detail-message {
|
||||
color: var(--color-text-muted);
|
||||
display: block;
|
||||
max-width: 330px;
|
||||
}
|
||||
|
||||
.receipt {
|
||||
color: var(--color-success);
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.receipt--failed {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr);
|
||||
}
|
||||
|
||||
.soft-panel {
|
||||
background: var(--color-bg-subtle);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
min-width: 0;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.soft-panel h3 {
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.summary-list {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.summary-list div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.summary-list span {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,491 @@
|
||||
/* Owner: channel metrics, groups and routing. Extracted from global.css with original cascade order preserved. */
|
||||
.channel-selected-field-index {
|
||||
align-items: center;
|
||||
background: var(--color-selected);
|
||||
border-radius: var(--radius-sm);
|
||||
color: white;
|
||||
display: inline-flex;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.channel-selected-field-order {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.channel-selected-field-order button,
|
||||
.channel-selected-field-controls > button {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
padding: var(--space-1);
|
||||
}
|
||||
|
||||
.channel-selected-field-order button:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.channel-selected-field-controls {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.channel-selected-field-controls label {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.channel-selected-field-controls > button {
|
||||
color: var(--color-danger);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mms-channel-page .page-heading {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mms-channel-filter {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: minmax(260px, 1fr) 180px 180px auto;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.mms-channel-list {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mms-channel-list .ui-table-wrap {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mms-channel-list .ui-table {
|
||||
min-width: 900px;
|
||||
}
|
||||
|
||||
.mms-channel-list .ui-table th,
|
||||
.mms-channel-list .ui-table td {
|
||||
padding: var(--space-4);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mms-channel-list .ui-table tbody tr:nth-child(even) {
|
||||
background: var(--color-surface-subtle);
|
||||
}
|
||||
|
||||
.mms-channel-identity {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mms-channel-identity span,
|
||||
.mms-channel-identity small {
|
||||
color: var(--color-text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mms-channel-identity small {
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.mms-channel-carrier {
|
||||
align-items: flex-start;
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.mms-channel-quality {
|
||||
background: var(--color-surface-subtle);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.mms-channel-metric {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.mms-channel-metric small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.mms-channel-metric strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.mms-channel-metric--success strong {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.mms-channel-metric--warning strong {
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.mms-channel-metric--danger strong {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.mms-channel-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mms-channel-modal-title h2,
|
||||
.mms-channel-modal-title p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mms-channel-modal-title p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-regular);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.mms-channel-form {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.mms-channel-form__wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.sms-channel-group-page .page-heading {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.channel-group-filter {
|
||||
align-items: end;
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
|
||||
}
|
||||
|
||||
.channel-group-filter__actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.channel-group-list {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.channel-group-config-list {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.channel-group-config-item {
|
||||
align-items: center;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: minmax(180px, 1.15fr) minmax(210px, 0.9fr) minmax(200px, 0.95fr) minmax(220px, 1.2fr) minmax(
|
||||
82px,
|
||||
auto
|
||||
);
|
||||
min-width: 0;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.channel-group-config-item__identity {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-group-config-item__icon {
|
||||
align-items: center;
|
||||
background: #eef5ff;
|
||||
border: 1px solid #cfe2ff;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-selected);
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
height: 38px;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
.channel-group-config-item__identity div {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-group-config-item__identity strong {
|
||||
color: var(--color-text-strong);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.channel-group-config-item__identity span:last-child,
|
||||
.channel-group-config-item__metrics span,
|
||||
.channel-group-config-item__policy span,
|
||||
.channel-group-config-item__channels span {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.channel-group-config-item__metrics {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-group-config-item__metrics div {
|
||||
border-left: 1px solid var(--color-border);
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
padding-left: var(--space-3);
|
||||
}
|
||||
|
||||
.channel-group-config-item__metrics strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.channel-group-config-item__policy {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-group-config-item__policy span {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
gap: var(--space-1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.channel-group-config-item__channels {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-group-config-item__channels span {
|
||||
background: var(--color-surface-subtle);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
max-width: 160px;
|
||||
overflow: hidden;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.channel-group-config-item__actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
justify-content: flex-end;
|
||||
justify-self: end;
|
||||
min-width: 82px;
|
||||
}
|
||||
|
||||
.channel-group-config-item__actions button {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-selected);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
gap: var(--space-1);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.channel-group-config-item__actions button.is-danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.channel-group-form-page {
|
||||
min-width: 1040px;
|
||||
}
|
||||
|
||||
.channel-group-form-section {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.channel-group-form-section h2 {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-left: 5px solid var(--color-selected);
|
||||
margin: 0;
|
||||
padding: 0 0 var(--space-4) var(--space-3);
|
||||
}
|
||||
|
||||
.channel-group-base-form {
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
grid-template-columns: 190px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.channel-group-base-form > .ui-field,
|
||||
.channel-group-retry-limit,
|
||||
.channel-group-radio-row,
|
||||
.channel-group-switch-row {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.channel-group-radio-row,
|
||||
.channel-group-switch-row {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-7);
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.channel-group-radio-row > span,
|
||||
.channel-group-switch-row > span {
|
||||
color: var(--color-text-strong);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.channel-group-radio-row label {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.channel-group-switch-row button {
|
||||
background: #d1d5db;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
padding: 3px;
|
||||
transition: background 0.18s ease;
|
||||
width: 54px;
|
||||
}
|
||||
|
||||
.channel-group-switch-row button i {
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: block;
|
||||
height: 24px;
|
||||
transition: transform 0.18s ease;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.channel-group-switch-row button.is-on {
|
||||
background: var(--color-selected);
|
||||
}
|
||||
|
||||
.channel-group-switch-row button.is-on i {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
.channel-group-row-actions {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.channel-group-row-actions button {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-selected);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
gap: var(--space-1);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.channel-group-row-actions button.is-danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.channel-group-retry-limit {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: 150px 150px minmax(220px, 1fr);
|
||||
}
|
||||
|
||||
.channel-group-retry-limit > span {
|
||||
color: var(--color-text-strong);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.channel-group-retry-limit small {
|
||||
align-self: center;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.channel-route-card-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(3, minmax(220px, 1fr));
|
||||
}
|
||||
|
||||
.channel-route-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
min-height: 188px;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.channel-route-card > div {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.channel-route-card strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.channel-route-card span,
|
||||
.channel-route-card small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.channel-route-card p {
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@@ -0,0 +1,774 @@
|
||||
/* Owner: signature retirement and quality matrix. Extracted from global.css with original cascade order preserved. */
|
||||
.channel-route-card footer {
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--space-1);
|
||||
padding-top: var(--space-3);
|
||||
}
|
||||
|
||||
.channel-route-card footer button {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-selected);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
gap: var(--space-1);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.channel-route-card footer button.is-danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.channel-route-empty {
|
||||
align-items: center;
|
||||
background: var(--color-surface-subtle);
|
||||
border: 1px dashed var(--color-border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-muted);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 120px;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.channel-route-modal {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-route-modal__channel-select {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.channel-route-modal .ui-select__dropdown {
|
||||
max-height: min(360px, calc(100vh - 360px));
|
||||
}
|
||||
|
||||
.channel-route-modal .ui-select__dropdown button {
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
line-height: 1.45;
|
||||
min-height: 42px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.channel-route-modal__note {
|
||||
align-items: center;
|
||||
background: #eff6ff;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.channel-route-modal__note svg {
|
||||
color: var(--color-selected);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.channel-group-form-footer {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
justify-content: center;
|
||||
padding: var(--space-4) 0;
|
||||
}
|
||||
|
||||
.channel-group-form-footer .ui-button {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.recovery-status-explainer {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.recovery-status-explainer > svg {
|
||||
color: var(--color-primary);
|
||||
flex: 0 0 auto;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.recovery-status-explainer strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.recovery-status-explainer p {
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.7;
|
||||
margin: var(--space-1) 0 0;
|
||||
}
|
||||
|
||||
.signature-quality-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-return-link {
|
||||
color: var(--color-text-strong);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
justify-self: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-return-link:hover {
|
||||
color: var(--color-selected);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap {
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap__heading,
|
||||
.signature-retirement-heatmap__actions {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap__actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap__actions .ui-field {
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap__scroll {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap table {
|
||||
border-collapse: collapse;
|
||||
min-width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap th,
|
||||
.signature-retirement-heatmap td {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-right: 1px solid var(--color-border);
|
||||
font-size: 12px;
|
||||
min-width: 48px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap th:first-child {
|
||||
background: var(--color-surface);
|
||||
left: 0;
|
||||
min-width: 280px;
|
||||
position: sticky;
|
||||
text-align: left;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap tbody th {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap__identity {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap__identity strong {
|
||||
color: var(--color-text-strong);
|
||||
cursor: help;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap__identity small {
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap td.is-zero {
|
||||
background: #f3f4f6;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap td.is-inapplicable {
|
||||
background: repeating-linear-gradient(135deg, #f8fafc, #f8fafc 4px, #eef2f7 4px, #eef2f7 8px);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap td.is-rate-red {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap td.is-rate-orange {
|
||||
background: #ffedd5;
|
||||
color: #ea580c;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap td.is-rate-yellow {
|
||||
background: #fef9c3;
|
||||
color: #ca8a04;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap td.is-rate-blue {
|
||||
background: #dbeafe;
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap td.is-rate-green {
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap td.is-rate-deep-green {
|
||||
background: #d1fae5;
|
||||
color: #047857;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ui-table__long-text {
|
||||
display: block;
|
||||
line-height: 1.55;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.signature-retirement-message-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.signature-retirement-message-filter {
|
||||
align-items: end;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: repeat(4, minmax(180px, 1fr));
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.signature-retirement-message-filter__actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.signature-retirement-suppression-modes {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.signature-retirement-suppression-modes label {
|
||||
align-items: flex-start;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.signature-retirement-suppression-modes label.is-selected {
|
||||
background: var(--color-selected-soft);
|
||||
border-color: var(--color-selected);
|
||||
}
|
||||
|
||||
.signature-retirement-suppression-modes input {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.signature-retirement-suppression-modes span {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.signature-retirement-suppression-modes small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.signature-quality-card__heading {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
gap: var(--space-5);
|
||||
justify-content: space-between;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.signature-quality-card__heading h2,
|
||||
.signature-quality-section h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.signature-quality-card__heading p,
|
||||
.signature-quality-section__heading p {
|
||||
margin: var(--space-1) 0 0;
|
||||
}
|
||||
|
||||
.section-heading__title {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.signature-quality-card__query {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex: 0 1 390px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.signature-quality-card__query .ui-field {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.signature-quality-card__note {
|
||||
background: color-mix(in srgb, var(--color-primary) 6%, white);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-top: 1px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
padding: 10px var(--space-5);
|
||||
}
|
||||
|
||||
.signature-quality-card .ui-table-wrap {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.signature-quality-card > .ui-pagination {
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
}
|
||||
|
||||
.signature-quality-name {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.signature-quality-name strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.signature-quality-name span,
|
||||
.signature-quality-name small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.quality-number--success {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.quality-number--warning {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.quality-number--danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.signature-quality-rate {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.signature-quality-rate > div {
|
||||
background: var(--color-surface-muted);
|
||||
border-radius: 99px;
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.signature-quality-rate > div span {
|
||||
background: var(--color-success);
|
||||
border-radius: inherit;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.signature-quality-rate strong {
|
||||
min-width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.signature-quality-drawer__backdrop {
|
||||
background: rgb(15 23 42 / 42%);
|
||||
inset: 0;
|
||||
position: fixed;
|
||||
z-index: 1200;
|
||||
}
|
||||
|
||||
.signature-quality-drawer {
|
||||
animation: signature-quality-drawer-in 180ms ease-out;
|
||||
background: var(--color-bg);
|
||||
box-shadow: -18px 0 48px rgb(15 23 42 / 18%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
max-width: min(1120px, calc(100vw - 72px));
|
||||
width: 88vw;
|
||||
}
|
||||
|
||||
@keyframes signature-quality-drawer-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(28px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.signature-quality-drawer__header {
|
||||
align-items: flex-start;
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
gap: var(--space-5);
|
||||
justify-content: space-between;
|
||||
padding: var(--space-5) var(--space-6);
|
||||
}
|
||||
|
||||
.signature-quality-drawer__header p {
|
||||
color: var(--color-primary);
|
||||
font-size: 13px;
|
||||
margin: 0 0 var(--space-2);
|
||||
}
|
||||
|
||||
.signature-quality-drawer__header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.signature-quality-drawer__header span {
|
||||
color: var(--color-text-muted);
|
||||
display: block;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.signature-quality-drawer__header > button {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
padding: var(--space-2);
|
||||
}
|
||||
|
||||
.signature-quality-drawer__header > button:hover {
|
||||
background: var(--color-surface-muted);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.signature-quality-drawer__body {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
overflow: auto;
|
||||
padding: var(--space-5) var(--space-6) var(--space-7);
|
||||
}
|
||||
|
||||
.signature-quality-overview {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.signature-quality-metric {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.signature-quality-metric span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.signature-quality-metric strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.signature-quality-metric--success strong {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.signature-quality-metric--warning strong {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.signature-quality-metric--danger strong {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.signature-quality-section {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
min-width: 0;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.signature-quality-section__heading {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.signature-quality-section__heading p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.signature-carrier-grid {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.signature-carrier-card {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.signature-carrier-card > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.signature-carrier-card > div strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.signature-carrier-card dl {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
margin: var(--space-4) 0 0;
|
||||
}
|
||||
|
||||
.signature-carrier-card dl div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.signature-carrier-card dt {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.signature-carrier-card dd {
|
||||
color: var(--color-text-strong);
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.signature-quality-matrix {
|
||||
background: var(--color-surface-muted);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-primary));
|
||||
border-radius: var(--radius-lg);
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.signature-quality-matrix table {
|
||||
border-collapse: collapse;
|
||||
min-width: 760px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.signature-quality-matrix th,
|
||||
.signature-quality-matrix td {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-right: 1px solid var(--color-border);
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.signature-quality-matrix th:last-child,
|
||||
.signature-quality-matrix td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.signature-quality-matrix tr:last-child th,
|
||||
.signature-quality-matrix tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.signature-quality-matrix thead th {
|
||||
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
|
||||
color: var(--color-text-muted);
|
||||
font-size: 13px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.signature-quality-matrix tbody th {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-strong);
|
||||
min-width: 210px;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.signature-quality-matrix__metric {
|
||||
background: var(--color-surface);
|
||||
border-left: 3px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
min-width: 150px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.signature-quality-matrix__metric--success {
|
||||
border-left-color: var(--color-success);
|
||||
}
|
||||
|
||||
.signature-quality-matrix__metric--warning {
|
||||
border-left-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.signature-quality-matrix__metric--danger {
|
||||
border-left-color: var(--color-danger);
|
||||
}
|
||||
|
||||
.signature-quality-matrix__metric > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.signature-quality-matrix__metric strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.signature-quality-matrix__metric small {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.signature-quality-matrix__metric em {
|
||||
color: var(--color-warning);
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.signature-quality-matrix__drainage-label {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 13px;
|
||||
min-width: 88px;
|
||||
}
|
||||
|
||||
.signature-quality-matrix__rate {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.signature-quality-matrix__empty {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.signature-quality-matrix__zero {
|
||||
color: var(--color-text-strong);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.signature-quality-drawer__footnote {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.signature-retirement-message-filter,
|
||||
.signature-retirement-suppression-modes {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap__heading,
|
||||
.signature-retirement-heatmap__actions {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.signature-retirement-heatmap__actions .ui-field {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.signature-quality-card__heading,
|
||||
.signature-quality-card__query {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.signature-quality-card__query {
|
||||
flex-basis: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.signature-quality-drawer {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.signature-quality-overview,
|
||||
.signature-carrier-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.signature-quality-drawer__header,
|
||||
.signature-quality-drawer__body {
|
||||
padding-left: var(--space-4);
|
||||
padding-right: var(--space-4);
|
||||
}
|
||||
|
||||
.signature-quality-overview,
|
||||
.signature-carrier-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,541 @@
|
||||
/* Owner: downstream delivery, report tasks and MMS operations. Extracted from global.css with original cascade order preserved. */
|
||||
.downstream-delivery-toolbar {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
justify-content: space-between;
|
||||
padding: var(--space-4) var(--space-5);
|
||||
}
|
||||
|
||||
.downstream-delivery-toolbar p {
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.downstream-delivery-toolbar p strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.downstream-requeue-confirm,
|
||||
.downstream-requeue-result {
|
||||
align-items: flex-start;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.downstream-requeue-confirm {
|
||||
background: #fffbeb;
|
||||
border-color: #fde68a;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.downstream-requeue-confirm > div,
|
||||
.downstream-requeue-result > div {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.downstream-requeue-confirm p,
|
||||
.downstream-requeue-confirm small,
|
||||
.downstream-requeue-confirm strong,
|
||||
.downstream-requeue-result p,
|
||||
.downstream-requeue-result small {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.downstream-requeue-confirm strong {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.downstream-requeue-result--success {
|
||||
background: #f0fdf4;
|
||||
border-color: #bbf7d0;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.downstream-requeue-result--partial {
|
||||
background: #fffbeb;
|
||||
border-color: #fde68a;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.downstream-requeue-result--failed {
|
||||
background: #fef2f2;
|
||||
border-color: #fecaca;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.downstream-requeue-result p,
|
||||
.downstream-requeue-result li {
|
||||
line-height: 1.6;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.downstream-requeue-result ul {
|
||||
margin: 0;
|
||||
max-height: 180px;
|
||||
overflow: auto;
|
||||
padding-left: var(--space-5);
|
||||
}
|
||||
|
||||
.downstream-delivery-toolbar > div,
|
||||
.downstream-delivery-list__actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.downstream-delivery-list {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.downstream-delivery-list__header,
|
||||
.downstream-delivery-list__row {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: 36px 140px minmax(150px, 1fr) minmax(165px, 1.05fr) 126px 54px minmax(170px, 1.2fr) 136px;
|
||||
min-width: 1080px;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.downstream-delivery-list__header {
|
||||
background: var(--color-bg-subtle);
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.downstream-delivery-list__row {
|
||||
border-top: 1px solid var(--color-border);
|
||||
min-height: 104px;
|
||||
}
|
||||
|
||||
.downstream-delivery-list__row:first-of-type {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.downstream-delivery-list__row:hover {
|
||||
background: color-mix(in srgb, var(--color-selected-soft) 28%, transparent);
|
||||
}
|
||||
|
||||
.downstream-delivery-list__select,
|
||||
.downstream-delivery-list__retry {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.downstream-delivery-list__meta,
|
||||
.downstream-delivery-list__owner,
|
||||
.downstream-delivery-list__retry {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.downstream-delivery-list__meta strong,
|
||||
.downstream-delivery-list__owner strong,
|
||||
.downstream-delivery-list__retry strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.downstream-delivery-list__meta span,
|
||||
.downstream-delivery-list__owner span,
|
||||
.downstream-delivery-list__retry span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.downstream-delivery-list__message strong {
|
||||
color: var(--color-text-strong);
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
font-size: var(--font-size-sm);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.downstream-delivery-list__error {
|
||||
background: #fff7ed;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: var(--radius-md);
|
||||
color: #9a3412;
|
||||
display: -webkit-box;
|
||||
line-height: 1.55;
|
||||
overflow: hidden;
|
||||
padding: var(--space-3);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.downstream-delivery-list__error.is-empty {
|
||||
background: var(--color-bg-subtle);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.downstream-delivery-list__actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.downstream-delivery-list__empty {
|
||||
color: var(--color-text-muted);
|
||||
padding: 48px var(--space-5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.downstream-delivery-toolbar {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.downstream-delivery-toolbar > div {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.report-page-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.report-task-time {
|
||||
color: var(--color-text-muted);
|
||||
display: grid;
|
||||
font-size: var(--font-size-xs);
|
||||
gap: 4px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.report-task-time span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-remark-cell {
|
||||
background: var(--color-bg-subtle);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text);
|
||||
display: -webkit-box;
|
||||
line-height: 1.6;
|
||||
max-width: 360px;
|
||||
min-width: 220px;
|
||||
overflow: hidden;
|
||||
padding: var(--space-3);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.admin-remark-cell--empty {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.report-task-generate {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.report-task-generate section,
|
||||
.report-task-detail .admin-task-card {
|
||||
background: var(--color-bg-subtle);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.report-task-generate h3,
|
||||
.report-receipt-preview h3 {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: 700;
|
||||
margin: 0 0 var(--space-4);
|
||||
}
|
||||
|
||||
.report-task-preview {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.report-task-preview > div,
|
||||
.report-receipt-preview > div {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.report-task-preview span,
|
||||
.report-receipt-preview span {
|
||||
color: var(--color-text-muted);
|
||||
display: block;
|
||||
font-size: var(--font-size-xs);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.report-task-preview strong,
|
||||
.report-receipt-preview strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
.report-receipt-modal {
|
||||
align-items: start;
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
|
||||
}
|
||||
|
||||
.report-receipt-modal .ui-field {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.report-upload-drop {
|
||||
align-content: center;
|
||||
background: var(--color-bg-subtle);
|
||||
border: 1px dashed var(--color-border-strong);
|
||||
border-radius: var(--radius-lg);
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
min-height: 180px;
|
||||
padding: var(--space-6);
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.report-upload-drop svg {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.report-upload-drop strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.report-upload-drop span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.report-receipt-preview {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.admin-app-route-card > .ui-field {
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.downstream-attempt-timeline {
|
||||
border-top: 0 !important;
|
||||
display: grid !important;
|
||||
gap: var(--space-4) !important;
|
||||
grid-template-columns: 1fr !important;
|
||||
padding: var(--space-2) 0 0 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.downstream-attempt-timeline::before {
|
||||
background: var(--color-border);
|
||||
bottom: 24px;
|
||||
content: '';
|
||||
left: 19px;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.downstream-attempt-card {
|
||||
align-items: start;
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: 40px minmax(0, 1fr);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.downstream-attempt-marker {
|
||||
align-items: center;
|
||||
background: var(--color-bg-subtle);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: 50%;
|
||||
color: var(--color-text-muted);
|
||||
display: flex;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 700;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.downstream-attempt-marker--success {
|
||||
background: #ecfdf3;
|
||||
border-color: #86efac;
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.downstream-attempt-marker--danger {
|
||||
background: #fef2f2;
|
||||
border-color: #fca5a5;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.downstream-attempt-marker--info {
|
||||
background: #eff6ff;
|
||||
border-color: #93c5fd;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.downstream-attempt-card__body {
|
||||
background: var(--color-bg-subtle);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.downstream-attempt-card__body > header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.downstream-attempt-card dl {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.downstream-attempt-card dl > div {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.downstream-attempt-card dt {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.downstream-attempt-card dd {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-sm);
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.downstream-attempt-card__identifiers dd {
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
}
|
||||
|
||||
.downstream-attempt-result {
|
||||
align-items: center;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
justify-content: space-between;
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.downstream-attempt-result--error {
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.downstream-attempt-timeline > p {
|
||||
color: var(--color-text-muted);
|
||||
margin: var(--space-3) 0 0;
|
||||
}
|
||||
|
||||
.admin-mms-task-page .page-heading {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-mms-task-table-card .ui-table {
|
||||
min-width: 1360px;
|
||||
}
|
||||
|
||||
.admin-mms-task-table-card .ui-table-wrap {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.admin-mms-task-table-card {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.admin-mms-task-table-card .mms-task-content {
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.admin-mms-task-table-card .mms-task-content p {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-mms-task-table-card .mms-task-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.admin-mms-task-table-card .mms-task-actions .ui-button {
|
||||
padding: 0 9px;
|
||||
}
|
||||
|
||||
.admin-mms-task-detail .mms-detail-template small {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.admin-mms-city-list {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.admin-mms-city-list > div {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
grid-template-columns: 120px minmax(140px, 1fr) 80px;
|
||||
}
|
||||
|
||||
.admin-mms-city-list strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.admin-mms-city-list span {
|
||||
color: var(--color-text-muted);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.admin-mms-city-list b {
|
||||
color: var(--color-selected);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.admin-mms-city-list .ui-progress-bar {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,490 @@
|
||||
/* Owner: client signature and drainage materials. Extracted from global.css with original cascade order preserved. */
|
||||
.client-signature-page {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.client-signature-heading,
|
||||
.client-signature-title,
|
||||
.client-drainage-panel__head {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.client-signature-title {
|
||||
justify-content: flex-start;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.client-signature-title__icon {
|
||||
align-items: center;
|
||||
background: #e9f6f0;
|
||||
border: 1px solid #d3ebe1;
|
||||
border-radius: 12px;
|
||||
color: #187352;
|
||||
display: inline-flex;
|
||||
height: 46px;
|
||||
justify-content: center;
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
.client-signature-title h1,
|
||||
.client-signature-title p,
|
||||
.client-drainage-panel h3,
|
||||
.client-drainage-panel p,
|
||||
.client-signature-form-section h3,
|
||||
.client-signature-form-section p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.client-signature-title h1 {
|
||||
color: var(--text-strong);
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.client-signature-title p,
|
||||
.client-drainage-panel p,
|
||||
.client-signature-form-section p {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.client-signature-overview {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.client-signature-overview > div {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
padding: 18px 22px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.client-signature-overview > div + div::before {
|
||||
background: var(--border);
|
||||
content: '';
|
||||
height: 34px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.client-signature-overview span {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.client-signature-overview strong {
|
||||
color: var(--text-strong);
|
||||
font-size: 25px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.client-signature-toolbar {
|
||||
align-items: end;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: minmax(240px, 1fr) 190px 160px auto;
|
||||
}
|
||||
|
||||
.client-signature-list-shell {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.client-signature-list-head,
|
||||
.client-signature-list-row {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
grid-template-columns: 24px minmax(120px, 1.05fr) minmax(110px, 0.85fr) minmax(360px, 2.2fr) 142px minmax(144px, auto);
|
||||
min-width: 1030px;
|
||||
}
|
||||
|
||||
.client-signature-list-head {
|
||||
background: #f7f9f8;
|
||||
border-bottom: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
padding: 12px 18px;
|
||||
}
|
||||
|
||||
.client-signature-row-wrap {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 62px;
|
||||
}
|
||||
|
||||
.client-signature-row-wrap + .client-signature-row-wrap {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.client-signature-list-row {
|
||||
min-height: 62px;
|
||||
padding: 10px 18px;
|
||||
}
|
||||
|
||||
.client-signature-list-row > span {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.client-signature-list-row > strong {
|
||||
color: var(--text-strong);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.client-signature-expand {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.client-signature-expand:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.client-carrier-status-group {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.client-carrier-status {
|
||||
align-items: center;
|
||||
background: #f8faf9;
|
||||
border: 1px solid #e3e9e6;
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
grid-template-columns: auto 7px minmax(0, 1fr);
|
||||
min-height: 34px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.client-carrier-status strong {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.client-carrier-status__dot {
|
||||
background: #b5c0bb;
|
||||
border-radius: 50%;
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
.client-carrier-status--available {
|
||||
background: #f1faf6;
|
||||
border-color: #cfe8dc;
|
||||
}
|
||||
|
||||
.client-carrier-status--available strong {
|
||||
color: #176b49;
|
||||
}
|
||||
|
||||
.client-carrier-status--available .client-carrier-status__dot {
|
||||
background: #24a06b;
|
||||
box-shadow: 0 0 0 3px rgba(36, 160, 107, 0.12);
|
||||
}
|
||||
|
||||
.client-signature-inline-reason,
|
||||
.client-signature-reason,
|
||||
.client-drainage-reason {
|
||||
background: #fff8f0;
|
||||
color: #9a4d12;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.client-signature-inline-reason {
|
||||
border-top: 1px solid #f5dfc8;
|
||||
padding: 9px 56px;
|
||||
}
|
||||
|
||||
.client-signature-reason {
|
||||
border: 1px solid #f5dfc8;
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.client-drainage-panel {
|
||||
background: #f8fbfa;
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 18px 56px 22px;
|
||||
}
|
||||
|
||||
.client-drainage-panel__head {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.client-drainage-panel h3 {
|
||||
align-items: center;
|
||||
color: var(--text-strong);
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.client-drainage-table {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 9px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.client-drainage-table__head,
|
||||
.client-drainage-table__row {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
grid-template-columns: minmax(220px, 1.35fr) minmax(360px, 2.2fr) 142px minmax(144px, auto);
|
||||
min-width: 940px;
|
||||
}
|
||||
|
||||
.client-drainage-table__head {
|
||||
background: #f5f8f7;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.client-drainage-table__row {
|
||||
border-top: 1px solid var(--border);
|
||||
min-height: 56px;
|
||||
padding: 9px 14px;
|
||||
}
|
||||
|
||||
.client-drainage-target {
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.client-drainage-reason {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0 -14px -9px;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.client-signature-list-empty,
|
||||
.client-signature-empty-hint {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
padding: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.client-signature-form-section {
|
||||
background: #f8fbfa;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.client-signature-form-section .client-signature-empty-hint {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.client-signature-list-shell {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
.enterprise-flow-card {
|
||||
min-height: 0;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.enterprise-stepper {
|
||||
justify-content: flex-start;
|
||||
margin-bottom: var(--space-8);
|
||||
overflow-x: auto;
|
||||
padding-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.enterprise-stepper__item {
|
||||
flex: 0 0 auto;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.enterprise-stepper__dot {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.enterprise-stepper__arrow {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 var(--space-2);
|
||||
}
|
||||
|
||||
.enterprise-form-panel,
|
||||
.enterprise-upload {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.enterprise-upload {
|
||||
padding: var(--space-4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.enterprise-upload strong {
|
||||
max-width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.enterprise-upload .file-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.enterprise-address-selects > div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.enterprise-address-selects .ui-field {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.client-signature-heading,
|
||||
.client-drainage-panel__head {
|
||||
align-items: stretch;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.client-signature-overview {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.client-signature-overview > div:nth-child(3)::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.client-signature-toolbar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.client-drainage-panel {
|
||||
padding: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
.overview-hero {
|
||||
align-items: stretch;
|
||||
display: grid;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.content-grid,
|
||||
.plan-grid,
|
||||
.chart-grid,
|
||||
.overview-grid,
|
||||
.overview-grid--three,
|
||||
.quick-grid,
|
||||
.sms-send-layout,
|
||||
.send-form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sms-preview-card {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.receiver-table__head,
|
||||
.receiver-table__row {
|
||||
grid-template-columns: 64px minmax(0, 1fr) 64px;
|
||||
}
|
||||
|
||||
.batch-filter-grid {
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.batch-pagination {
|
||||
align-items: stretch;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.task-info-grid,
|
||||
.task-stat-grid,
|
||||
.carrier-rate-grid,
|
||||
.sms-app-grid,
|
||||
.template-card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.template-toolbar,
|
||||
.template-custom-variable {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.task-detail-title h2 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.admin-uplink-filter,
|
||||
.admin-recharge-filter,
|
||||
.admin-recharge-filter__actions,
|
||||
.phone-segment-overview,
|
||||
.phone-segment-tabs,
|
||||
.admin-drainage-toolbar,
|
||||
.channel-route-card-grid,
|
||||
.detail-grid,
|
||||
.admin-mms-city-list > div,
|
||||
.admin-uplink-info-grid,
|
||||
.admin-uplink-match-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-recharge-pagination {
|
||||
align-items: stretch;
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,745 @@
|
||||
/* Owner: shared responsive rules and downstream requeue workbench. Extracted from global.css with original cascade order preserved. */
|
||||
/* Shared responsive layouts for report filters and compact record rows. */
|
||||
|
||||
.client-http-credential-row {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: 1fr 1.5fr 100px 1fr auto;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.client-http-credential-row code {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-report-target-row {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: minmax(0, 1fr) 220px;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
.login-page {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
padding: 28px 22px 24px;
|
||||
}
|
||||
|
||||
.login-brand {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.login-captcha-row {
|
||||
grid-template-columns: minmax(0, 1fr) 112px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.admin-dashboard-main-grid,
|
||||
.admin-metric-grid,
|
||||
.admin-workload-grid,
|
||||
.enterprise-summary-grid,
|
||||
.enterprise-query-grid,
|
||||
.system-log-filters,
|
||||
.channel-report-filter-grid,
|
||||
.channel-group-filter,
|
||||
.channel-group-config-item,
|
||||
.channel-group-base-form,
|
||||
.channel-group-retry-limit,
|
||||
.report-receipt-modal,
|
||||
.phone-segment-query,
|
||||
.client-http-credential-row,
|
||||
.admin-report-target-row,
|
||||
.admin-app-form-grid,
|
||||
.admin-app-route-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.admin-app-protocol-header {
|
||||
align-items: stretch;
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.admin-app-protocol-header > .admin-switch {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.admin-metric-grid,
|
||||
.enterprise-summary-grid,
|
||||
.admin-workload-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.enterprise-query-actions,
|
||||
.phone-segment-query__actions {
|
||||
align-items: stretch;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.enterprise-query-actions .ui-button,
|
||||
.phone-segment-query__actions .ui-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.channel-report-page,
|
||||
.channel-group-form-page {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.channel-report-heading,
|
||||
.channel-report-filter-footer {
|
||||
align-items: stretch;
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.channel-report-config-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.channel-report-filter-footer > div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.channel-report-table {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.channel-report-table__head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.channel-report-row {
|
||||
align-items: stretch;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
margin-bottom: var(--space-3);
|
||||
min-height: 0;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.channel-report-row > :first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.channel-report-name--flow {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.channel-report-row > :nth-child(3),
|
||||
.channel-report-row > :nth-child(4),
|
||||
.channel-report-row > :nth-child(5),
|
||||
.channel-report-row > :nth-child(6) {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: 88px minmax(0, 1fr);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-report-row > :nth-child(3)::before {
|
||||
color: var(--color-text-muted);
|
||||
content: '报备状态';
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
.channel-report-row > :nth-child(4)::before {
|
||||
color: var(--color-text-muted);
|
||||
content: '提交报备时间';
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
.channel-report-row > :nth-child(5)::before {
|
||||
color: var(--color-text-muted);
|
||||
content: '报备成功时间';
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
.channel-report-row > :nth-child(6)::before {
|
||||
color: var(--color-text-muted);
|
||||
content: '上次发送成功';
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.channel-report-stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.channel-report-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.channel-signature-grid,
|
||||
.channel-status-options {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.channel-group-base-form > .ui-field,
|
||||
.channel-group-retry-limit,
|
||||
.channel-group-radio-row,
|
||||
.channel-group-switch-row {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.channel-group-radio-row,
|
||||
.channel-group-switch-row {
|
||||
align-items: flex-start;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.channel-group-filter__actions,
|
||||
.channel-group-config-item__actions,
|
||||
.channel-group-row-actions {
|
||||
justify-content: flex-start;
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.channel-group-config-item__metrics {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.channel-group-retry-limit > span,
|
||||
.channel-group-retry-limit small {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.phone-segment-tab-content > .phone-segment-query {
|
||||
margin: var(--space-4);
|
||||
}
|
||||
|
||||
.phone-segment-heading > p {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.55;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.phone-segment-workbench__tabs .ui-tabs__list {
|
||||
padding: 0 var(--space-3);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.phone-segment-workbench__tabs .ui-tabs__tab {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.phone-segment-summary {
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: 44px minmax(0, 1fr);
|
||||
margin: 0 var(--space-4);
|
||||
min-height: 0;
|
||||
padding: var(--space-5) 0;
|
||||
}
|
||||
|
||||
.phone-segment-summary__icon {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.phone-segment-summary__value {
|
||||
border-right: 0;
|
||||
min-width: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.phone-segment-summary__value strong {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.phone-segment-summary p {
|
||||
grid-column: 1 / -1;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.phone-segment-panel .ui-table tbody {
|
||||
padding: 0 var(--space-4) var(--space-4);
|
||||
}
|
||||
|
||||
.phone-segment-panel .ui-pagination {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.sms-bulk-actions,
|
||||
.sms-audit-toolbar {
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Signature and drainage rows use true mobile cards. */
|
||||
.client-signature-list-shell {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.client-signature-list-head,
|
||||
.client-drainage-table__head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.client-signature-row-wrap {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.client-signature-row-wrap + .client-signature-row-wrap {
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.client-signature-list-row {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 32px minmax(0, 1fr);
|
||||
min-width: 0;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.client-signature-list-row > :nth-child(n + 3):nth-child(-n + 7) {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: 92px minmax(0, 1fr);
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.client-signature-list-row > :nth-child(3)::before {
|
||||
color: var(--text-muted);
|
||||
content: '所属应用';
|
||||
font-size: 12px;
|
||||
}
|
||||
.client-signature-list-row > :nth-child(4)::before {
|
||||
color: var(--text-muted);
|
||||
content: '移动';
|
||||
font-size: 12px;
|
||||
}
|
||||
.client-signature-list-row > :nth-child(5)::before {
|
||||
color: var(--text-muted);
|
||||
content: '联通';
|
||||
font-size: 12px;
|
||||
}
|
||||
.client-signature-list-row > :nth-child(6)::before {
|
||||
color: var(--text-muted);
|
||||
content: '电信';
|
||||
font-size: 12px;
|
||||
}
|
||||
.client-signature-list-row > :nth-child(7)::before {
|
||||
color: var(--text-muted);
|
||||
content: '更新时间';
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.client-signature-list-row > .table-actions {
|
||||
grid-column: 1 / -1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.client-signature-inline-reason,
|
||||
.client-drainage-panel {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.client-drainage-table {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.client-drainage-table__row {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 88px minmax(0, 1fr);
|
||||
min-width: 0;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.client-drainage-table__row > * {
|
||||
grid-column: 1 / -1;
|
||||
min-width: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.client-drainage-table__row > a {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.client-drainage-reason {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.login-captcha-row,
|
||||
.admin-metric-grid,
|
||||
.enterprise-summary-grid,
|
||||
.admin-workload-grid,
|
||||
.channel-report-config-actions,
|
||||
.channel-report-filter-footer > div,
|
||||
.enterprise-query-actions,
|
||||
.phone-segment-query__actions {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.application-unit-price {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-base);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.downstream-page-size {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.downstream-page-size select {
|
||||
min-width: 76px;
|
||||
height: 36px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.downstream-requeue-task-heading {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.downstream-requeue-task-card > .downstream-requeue-task-heading {
|
||||
padding: var(--space-6) var(--space-6) var(--space-5);
|
||||
}
|
||||
|
||||
.downstream-requeue-task-heading__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.downstream-requeue-task-heading__actions .ui-field {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.downstream-requeue-task-list {
|
||||
display: grid;
|
||||
margin: 0 var(--space-6);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.downstream-requeue-task-list article {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(190px, 0.9fr) minmax(260px, 1.35fr) minmax(250px, 1fr) auto;
|
||||
gap: 22px;
|
||||
align-items: center;
|
||||
padding: 18px var(--space-5);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.downstream-requeue-task-list article:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.downstream-requeue-task-list > .muted {
|
||||
margin: 0;
|
||||
padding: var(--space-6);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.downstream-requeue-task-card > .ui-pagination {
|
||||
padding: var(--space-5) var(--space-6) var(--space-6);
|
||||
}
|
||||
|
||||
.downstream-requeue-task-list article > div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.downstream-requeue-task-list__identity,
|
||||
.downstream-requeue-task-list__scope,
|
||||
.downstream-requeue-task-list__progress {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.downstream-requeue-task-list__identity > strong {
|
||||
color: var(--text-strong);
|
||||
font-size: 14px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.downstream-requeue-task-list__identity > span,
|
||||
.downstream-requeue-task-list__identity > small,
|
||||
.downstream-requeue-task-list__scope > span,
|
||||
.downstream-requeue-task-list__progress > small {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.downstream-requeue-task-list__scope > strong {
|
||||
overflow: hidden;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.downstream-requeue-task-list__progress > div:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.downstream-requeue-task-list__meter {
|
||||
height: 5px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: var(--surface-subtle, #eef2f6);
|
||||
}
|
||||
|
||||
.downstream-requeue-task-list__meter > span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: var(--brand, #2f6f91);
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.downstream-requeue-task-list__actions {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.downstream-requeue-preview {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.downstream-requeue-preview__summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.downstream-requeue-preview__summary > div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
background: var(--surface-subtle, #f8fafc);
|
||||
}
|
||||
|
||||
.downstream-requeue-preview__summary > div.is-primary {
|
||||
border-color: color-mix(in srgb, var(--brand, #2f6f91) 28%, var(--border));
|
||||
background: color-mix(in srgb, var(--brand, #2f6f91) 7%, white);
|
||||
}
|
||||
|
||||
.downstream-requeue-preview__summary span,
|
||||
.downstream-requeue-preview__summary small {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.downstream-requeue-preview__summary strong {
|
||||
color: var(--text-strong);
|
||||
font-size: 24px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.downstream-requeue-preview__meta {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.downstream-requeue-preview__distribution {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.downstream-requeue-preview__distribution > span {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.downstream-requeue-preview__distribution > div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.downstream-requeue-reason {
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface-subtle, #f8fafc);
|
||||
}
|
||||
|
||||
.downstream-requeue-reason .ui-textarea {
|
||||
min-height: 124px;
|
||||
background: var(--color-surface);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.downstream-requeue-warning {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 10px;
|
||||
background: var(--warning-soft, #fff7ed);
|
||||
color: var(--warning-text, #9a3412);
|
||||
}
|
||||
|
||||
.downstream-requeue-warning > div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.downstream-requeue-warning p {
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.downstream-requeue-task-detail {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.downstream-requeue-detail-alert {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
padding: 12px 14px;
|
||||
border-radius: 10px;
|
||||
background: var(--warning-soft, #fff7ed);
|
||||
color: var(--warning-text, #9a3412);
|
||||
}
|
||||
|
||||
.downstream-requeue-detail-section {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.downstream-requeue-detail-filter {
|
||||
display: grid;
|
||||
grid-template-columns: 180px minmax(240px, 1fr) auto;
|
||||
gap: 10px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.downstream-requeue-detail-items {
|
||||
display: grid;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.downstream-requeue-detail-items > div {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(160px, 1fr) 125px 130px minmax(220px, 1.5fr) 155px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 11px 14px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.downstream-requeue-detail-items > div:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.downstream-requeue-detail-items__head {
|
||||
background: var(--surface-subtle, #f8fafc);
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.downstream-requeue-detail-items time {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.downstream-requeue-task-list article {
|
||||
grid-template-columns: 1fr 1.4fr;
|
||||
}
|
||||
.downstream-requeue-task-list__actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.downstream-requeue-preview__summary {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
.downstream-requeue-task-card > .downstream-requeue-task-heading {
|
||||
padding: var(--space-5) var(--space-4) var(--space-4);
|
||||
}
|
||||
.downstream-requeue-task-heading,
|
||||
.downstream-requeue-task-heading__actions {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
.downstream-requeue-task-list {
|
||||
margin: 0 var(--space-4);
|
||||
}
|
||||
.downstream-requeue-task-list article,
|
||||
.downstream-requeue-preview__summary,
|
||||
.downstream-requeue-detail-filter {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.downstream-requeue-task-card > .ui-pagination {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
.downstream-requeue-detail-items {
|
||||
border: 0;
|
||||
overflow: visible;
|
||||
gap: 10px;
|
||||
}
|
||||
.downstream-requeue-detail-items__head {
|
||||
display: none !important;
|
||||
}
|
||||
.downstream-requeue-detail-items > div {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/* Ordered business-domain stylesheet entry. Keep imports in source-cascade order. */
|
||||
@import './01-operations-dashboard.css';
|
||||
@import './02-client-sending.css';
|
||||
@import './03-client-records.css';
|
||||
@import './04-signatures.css';
|
||||
@import './05-templates.css';
|
||||
@import './06-auth-enterprise.css';
|
||||
@import './07-admin-operations.css';
|
||||
@import './08-reporting.css';
|
||||
@import './09-channels.css';
|
||||
@import './10-signature-quality.css';
|
||||
@import './11-deliveries-reporting.css';
|
||||
@import './12-admin-configuration.css';
|
||||
@import './13-client-signatures.css';
|
||||
@import './14-responsive-requeue.css';
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user