chore: checkpoint admin restore state
This commit is contained in:
john
+561
-1
@@ -373,6 +373,26 @@ body,
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.admin-service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-service-card {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.admin-service-card h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.admin-inline-link {
|
||||
color: var(--color-text-link);
|
||||
text-decoration: none;
|
||||
@@ -426,6 +446,85 @@ body,
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.providers-page {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.providers-hero {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 16px 18px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(180deg, rgba(24, 34, 47, 0.98), rgba(18, 24, 32, 0.98));
|
||||
}
|
||||
|
||||
.providers-hero h2 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.providers-hero-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.providers-hero-stat {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
padding: 10px 12px;
|
||||
min-width: 140px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(15, 20, 25, 0.6);
|
||||
}
|
||||
|
||||
.providers-hero-label {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.providers-hero strong {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.providers-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.providers-panel {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.providers-panel-primary,
|
||||
.providers-panel-secondary {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.providers-panel-head {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.providers-panel-head h3 {
|
||||
margin: 0 0 3px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.providers-panel-head .muted {
|
||||
max-width: 44ch;
|
||||
}
|
||||
|
||||
.admin-card h2 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 16px;
|
||||
@@ -454,6 +553,18 @@ body,
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.admin-form label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.admin-form label > span {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.admin-form textarea {
|
||||
grid-column: 1 / -1;
|
||||
min-height: 88px;
|
||||
@@ -466,6 +577,57 @@ body,
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.form-span-all {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
background: rgba(4, 8, 13, 0.72);
|
||||
}
|
||||
|
||||
.modal-panel {
|
||||
width: min(720px, 100%);
|
||||
max-height: min(760px, calc(100vh - 48px));
|
||||
overflow: auto;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-bg-surface);
|
||||
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
|
||||
.modal-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 18px 20px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.modal-head h3 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.provider-dialog-form {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.global-model-card {
|
||||
margin-bottom: 16px;
|
||||
padding: 14px;
|
||||
@@ -488,23 +650,267 @@ body,
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.providers-table-wrap {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.providers-table {
|
||||
min-width: 760px;
|
||||
}
|
||||
|
||||
.admin-table th,
|
||||
.admin-table td {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: 10px 8px;
|
||||
padding: 11px 10px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.admin-table thead th {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
background: rgba(15, 20, 25, 0.65);
|
||||
}
|
||||
|
||||
.admin-table tbody tr:hover {
|
||||
background: rgba(26, 48, 80, 0.28);
|
||||
}
|
||||
|
||||
.admin-table .mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.providers-actions {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.providers-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.providers-provider {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.providers-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.provider-list-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(15, 20, 25, 0.45);
|
||||
}
|
||||
|
||||
.provider-list-main {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.provider-list-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.provider-list-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.provider-state {
|
||||
flex: 0 0 auto;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.provider-state.is-active {
|
||||
background: rgba(46, 170, 101, 0.14);
|
||||
color: #8dd6aa;
|
||||
}
|
||||
|
||||
.provider-state.is-disabled {
|
||||
background: rgba(197, 77, 62, 0.14);
|
||||
color: #ffb4b0;
|
||||
}
|
||||
|
||||
.provider-list-actions {
|
||||
flex: 0 0 auto;
|
||||
align-self: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.executor-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.executor-card {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(15, 20, 25, 0.52);
|
||||
}
|
||||
|
||||
.executor-card h3 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.inline-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.executor-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.executor-card input,
|
||||
.executor-card select {
|
||||
background: var(--color-bg-base);
|
||||
}
|
||||
|
||||
.executor-card input,
|
||||
.executor-card select,
|
||||
.provider-form input,
|
||||
.provider-form select,
|
||||
.provider-form textarea {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.executor-meta {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.executor-footer {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.executor-note {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.executor-instruction {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 9px 10px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border-input);
|
||||
background: var(--color-bg-base);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.executor-actions {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.executor-log {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.providers-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.providers-table {
|
||||
min-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.providers-hero {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.providers-hero-meta {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.providers-hero-stat {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.wechat-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wechat-toolbar input,
|
||||
.wechat-toolbar select {
|
||||
width: 220px;
|
||||
max-width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border-input);
|
||||
background: var(--color-bg-base);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.wechat-ok {
|
||||
color: #78d39b;
|
||||
}
|
||||
|
||||
/* ── Admin detail / dl ───────────────────────────────── */
|
||||
|
||||
.admin-dl {
|
||||
@@ -1100,3 +1506,157 @@ body,
|
||||
color: var(--color-text-faint);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Subscription tab */
|
||||
.admin-select {
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--color-border-input);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-bg-base);
|
||||
color: var(--color-text-base);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.billing-status-select {
|
||||
width: 110px;
|
||||
flex-shrink: 0;
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.billing-toolbar .admin-select {
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.admin-btn-danger {
|
||||
padding: 4px 10px;
|
||||
border: 1px solid var(--color-danger, #ef4444);
|
||||
border-radius: var(--radius-sm, 6px);
|
||||
background: transparent;
|
||||
color: var(--color-danger, #ef4444);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-btn-danger:hover:not(:disabled) {
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
}
|
||||
|
||||
.admin-btn-danger:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ledger-type-active {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.ledger-type-expired {
|
||||
background: rgba(156, 163, 175, 0.2);
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.ledger-type-cancelled {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
/* ── Secondary button ───────────────────────────────────────────── */
|
||||
.admin-btn-secondary {
|
||||
padding: 5px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.admin-btn-secondary:hover:not(:disabled) {
|
||||
background: var(--color-bg-hover);
|
||||
}
|
||||
|
||||
/* ── Plan form modal ────────────────────────────────────────────── */
|
||||
.modal-box {
|
||||
width: min(540px, 100%);
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-bg-surface);
|
||||
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-muted);
|
||||
padding: 0 4px;
|
||||
}
|
||||
.modal-close:hover { color: var(--color-text); }
|
||||
|
||||
.plan-form {
|
||||
padding: 16px 20px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.plan-form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 140px 1fr;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.plan-form-row input,
|
||||
.plan-form-row select {
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg-input, var(--color-bg-surface));
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.plan-form-hint {
|
||||
grid-column: 2;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-muted);
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.plan-form-check {
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.plan-form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ── Plan catalog table extras ──────────────────────────────────── */
|
||||
.plan-desc {
|
||||
font-size: 11px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.plan-actions {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user