1389 lines
25 KiB
CSS
1389 lines
25 KiB
CSS
:root {
|
||
color: var(--text-primary);
|
||
background: var(--bg-page);
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
min-width: 320px;
|
||
background: var(--bg-page);
|
||
}
|
||
|
||
a {
|
||
color: var(--primary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
#finance-root {
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.finance-shell {
|
||
display: grid;
|
||
min-height: 100vh;
|
||
grid-template-columns: 248px minmax(0, 1fr);
|
||
background: var(--bg-page);
|
||
}
|
||
|
||
.finance-sidebar {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
flex-direction: column;
|
||
gap: var(--space-4);
|
||
border-right: 1px solid #1c2a44;
|
||
background: #101b2d;
|
||
padding: var(--space-5) var(--space-3);
|
||
}
|
||
|
||
.finance-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
min-height: 40px;
|
||
}
|
||
|
||
.finance-brand span {
|
||
display: inline-grid;
|
||
width: 36px;
|
||
height: 36px;
|
||
place-items: center;
|
||
border-radius: var(--radius-control);
|
||
background: var(--primary);
|
||
color: var(--active-contrast);
|
||
font-weight: 800;
|
||
}
|
||
|
||
.finance-brand {
|
||
padding: 0 var(--space-2);
|
||
}
|
||
|
||
.finance-brand strong {
|
||
display: block;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.finance-brand small {
|
||
color: #7e8db0;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.finance-brand span {
|
||
background: linear-gradient(135deg, #2557d6, #0e7490);
|
||
color: #fff;
|
||
}
|
||
|
||
.finance-nav {
|
||
display: grid;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.finance-nav__group {
|
||
display: grid;
|
||
gap: 2px;
|
||
}
|
||
|
||
.finance-nav__label {
|
||
margin: var(--space-3) var(--space-3) var(--space-1);
|
||
color: #5a6c89;
|
||
font-size: 10.5px;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.finance-nav button {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
width: 100%;
|
||
height: 38px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
color: #93a1b8;
|
||
cursor: pointer;
|
||
font: inherit;
|
||
font-size: 13.5px;
|
||
padding: 0 var(--space-3);
|
||
text-align: left;
|
||
transition: background-color 160ms ease, color 160ms ease;
|
||
}
|
||
|
||
.finance-nav button:hover {
|
||
background: rgb(255 255 255 / 6%);
|
||
color: #dce4f0;
|
||
}
|
||
|
||
.finance-nav button.is-active {
|
||
background: #1b2a44;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.finance-user {
|
||
display: grid;
|
||
gap: 4px;
|
||
margin-top: auto;
|
||
padding-left: var(--space-3);
|
||
color: #dce4f0;
|
||
border-top: 1px solid #1c2a44;
|
||
padding-top: var(--space-4);
|
||
}
|
||
|
||
.finance-user small {
|
||
color: #7e8db0;
|
||
}
|
||
|
||
.finance-stack small {
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
.finance-main {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.finance-progress {
|
||
flex: 0 0 auto;
|
||
height: 2px;
|
||
}
|
||
|
||
.finance-content {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
min-width: 0;
|
||
padding: var(--space-6);
|
||
}
|
||
|
||
.finance-panel {
|
||
display: grid;
|
||
gap: var(--space-5);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-card);
|
||
background: var(--bg-card);
|
||
box-shadow: var(--shadow-soft);
|
||
padding: var(--space-5);
|
||
}
|
||
|
||
.finance-form-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(180px, 1fr));
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.finance-evidence-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(260px, 360px) minmax(280px, 1fr);
|
||
gap: var(--space-4);
|
||
align-items: stretch;
|
||
}
|
||
|
||
.finance-toolbar {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
|
||
gap: var(--space-3);
|
||
align-items: center;
|
||
}
|
||
|
||
.finance-toolbar--with-action {
|
||
grid-template-columns: repeat(4, minmax(140px, 1fr)) auto auto;
|
||
}
|
||
|
||
.finance-toolbar--recharge-details {
|
||
grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.85fr) minmax(250px, 1.3fr) minmax(160px, 1fr) auto auto auto;
|
||
}
|
||
|
||
.finance-switch-field {
|
||
display: inline-flex;
|
||
height: var(--control-height);
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-1);
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
font-size: var(--control-font-size);
|
||
font-weight: 650;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.finance-kpi-band {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.finance-kpi {
|
||
display: grid;
|
||
gap: 4px;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-card);
|
||
border-left: 4px solid var(--border);
|
||
background: var(--bg-card-strong);
|
||
padding: var(--space-4);
|
||
text-align: left;
|
||
font: inherit;
|
||
color: inherit;
|
||
cursor: pointer;
|
||
transition:
|
||
border-color 0.15s ease,
|
||
box-shadow 0.15s ease,
|
||
transform 0.15s ease;
|
||
}
|
||
|
||
.finance-kpi:hover {
|
||
box-shadow: var(--shadow-soft);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.finance-kpi--total {
|
||
border-left-color: var(--text-secondary);
|
||
}
|
||
|
||
.finance-kpi--google {
|
||
border-left-color: #34a853;
|
||
}
|
||
|
||
.finance-kpi--thirdparty {
|
||
border-left-color: #4285f4;
|
||
}
|
||
|
||
.finance-kpi--coinseller {
|
||
border-left-color: #f9ab00;
|
||
}
|
||
|
||
.finance-kpi--withdrawal {
|
||
border-left-color: #be185d;
|
||
}
|
||
|
||
.finance-kpi--salary {
|
||
border-left-color: #7c3aed;
|
||
cursor: default;
|
||
}
|
||
|
||
.finance-kpi--active {
|
||
border-color: var(--primary, #4285f4);
|
||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #4285f4) 24%, transparent);
|
||
}
|
||
|
||
.finance-kpi__label {
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
font-weight: 650;
|
||
}
|
||
|
||
.finance-kpi__value {
|
||
font-size: 24px;
|
||
line-height: 1.2;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.finance-kpi__meta {
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
.finance-filterbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-3);
|
||
align-items: center;
|
||
}
|
||
|
||
.finance-filterbar__field {
|
||
min-width: 150px;
|
||
}
|
||
|
||
.finance-filterbar__field--search {
|
||
min-width: 240px;
|
||
flex: 1;
|
||
}
|
||
|
||
.finance-actionbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-3);
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.finance-actionbar__presets {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.finance-actionbar__actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-3);
|
||
align-items: center;
|
||
}
|
||
|
||
.finance-chip {
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
padding: 4px 12px;
|
||
font: inherit;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition:
|
||
border-color 0.15s ease,
|
||
background 0.15s ease,
|
||
color 0.15s ease;
|
||
}
|
||
|
||
.finance-chip:hover {
|
||
border-color: var(--primary, #4285f4);
|
||
color: var(--primary, #4285f4);
|
||
}
|
||
|
||
.finance-chip--active {
|
||
border-color: var(--primary, #4285f4);
|
||
background: color-mix(in srgb, var(--primary, #4285f4) 12%, transparent);
|
||
color: var(--primary, #4285f4);
|
||
font-weight: 650;
|
||
}
|
||
|
||
.finance-badge {
|
||
display: inline-block;
|
||
border-radius: 999px;
|
||
padding: 2px 10px;
|
||
font-size: 12px;
|
||
font-weight: 650;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.finance-badge--google {
|
||
background: color-mix(in srgb, #34a853 14%, transparent);
|
||
color: #1e7e34;
|
||
}
|
||
|
||
.finance-badge--thirdparty {
|
||
background: color-mix(in srgb, #4285f4 14%, transparent);
|
||
color: #2b6cd4;
|
||
}
|
||
|
||
.finance-badge--coinseller {
|
||
background: color-mix(in srgb, #f9ab00 18%, transparent);
|
||
color: #b07503;
|
||
}
|
||
|
||
.finance-amount {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.finance-amount--negative {
|
||
color: var(--danger);
|
||
}
|
||
|
||
.finance-order-cell {
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.finance-remark-cell {
|
||
max-width: 180px;
|
||
color: var(--text-secondary);
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.finance-pagination__meta {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.finance-pagination__buttons {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.finance-error {
|
||
border: 1px solid color-mix(in srgb, var(--danger) 24%, transparent);
|
||
border-radius: var(--radius-control);
|
||
background: color-mix(in srgb, var(--danger) 8%, transparent);
|
||
color: var(--danger);
|
||
padding: var(--space-3);
|
||
}
|
||
|
||
.finance-table-wrap {
|
||
max-height: calc(100vh - 220px);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-control);
|
||
}
|
||
|
||
.finance-table {
|
||
min-width: 1280px;
|
||
}
|
||
|
||
.finance-table--recharge-details {
|
||
min-width: 1240px;
|
||
}
|
||
|
||
.finance-table--recharge-details-with-coins {
|
||
min-width: 1480px;
|
||
}
|
||
|
||
.finance-table th {
|
||
background: var(--bg-card-strong);
|
||
color: var(--text-secondary);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.finance-table td,
|
||
.finance-table th {
|
||
border-bottom-color: var(--border);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.finance-time-cell {
|
||
min-width: 132px;
|
||
}
|
||
|
||
.finance-stack,
|
||
.finance-evidence {
|
||
display: grid;
|
||
gap: 3px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.finance-address {
|
||
display: inline-block;
|
||
max-width: 240px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
vertical-align: bottom;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.finance-row-actions {
|
||
display: inline-flex;
|
||
gap: 8px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.finance-evidence span {
|
||
max-width: 220px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.finance-status {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 64px;
|
||
height: var(--admin-tag-height);
|
||
border-radius: var(--admin-tag-radius);
|
||
font-size: var(--admin-tag-font-size);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.finance-status--success {
|
||
background: color-mix(in srgb, var(--success) 10%, transparent);
|
||
color: var(--success);
|
||
}
|
||
|
||
.finance-status--warning {
|
||
background: color-mix(in srgb, var(--warning) 12%, transparent);
|
||
color: var(--warning);
|
||
}
|
||
|
||
.finance-status--danger {
|
||
background: color-mix(in srgb, var(--danger) 10%, transparent);
|
||
color: var(--danger);
|
||
}
|
||
|
||
.finance-row-actions {
|
||
display: inline-flex;
|
||
justify-content: flex-end;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.finance-pagination {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-3);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.finance-audit-dialog {
|
||
display: grid;
|
||
gap: var(--space-4);
|
||
padding-top: var(--space-2) !important;
|
||
}
|
||
|
||
.finance-audit-hint {
|
||
color: var(--danger);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.finance-create-dialog {
|
||
padding: var(--space-2) var(--space-5) var(--space-5) !important;
|
||
}
|
||
|
||
.finance-create-dialog-paper {
|
||
width: min(920px, calc(100vw - 64px));
|
||
max-width: min(920px, calc(100vw - 64px)) !important;
|
||
border-radius: var(--radius-card) !important;
|
||
}
|
||
|
||
.finance-create-dialog-paper--coin-seller {
|
||
width: min(760px, calc(100vw - 64px));
|
||
max-width: min(760px, calc(100vw - 64px)) !important;
|
||
}
|
||
|
||
.finance-create-dialog-paper .MuiDialogTitle-root {
|
||
padding: var(--space-5) var(--space-5) var(--space-2);
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.finance-form--dialog {
|
||
display: grid;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.finance-form--dialog .finance-form-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.finance-form--dialog .finance-form-grid--coin-seller-create {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
|
||
.finance-form--dialog .finance-form-grid--coin-seller-no-chain {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
|
||
.finance-rate-config {
|
||
display: grid;
|
||
gap: 24px;
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.finance-rate-config__section {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.finance-rate-config__heading {
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.finance-rate-config__heading h3 {
|
||
font-size: 15px;
|
||
margin: 0;
|
||
}
|
||
|
||
.finance-rate-config__table {
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.finance-rate-config__row {
|
||
align-items: center;
|
||
border-bottom: 1px solid var(--border);
|
||
display: grid;
|
||
gap: 12px;
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.finance-rate-config__row:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.finance-rate-config__row--3 {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr)) 72px;
|
||
}
|
||
|
||
.finance-rate-config__row--2 {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr)) 72px;
|
||
}
|
||
|
||
.finance-rate-config__row--head {
|
||
background: var(--bg-card-strong);
|
||
color: var(--text-secondary);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.finance-rate-config__empty {
|
||
color: var(--text-secondary);
|
||
padding: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
.finance-receipt-field {
|
||
display: grid;
|
||
min-width: 0;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.finance-receipt-result {
|
||
align-items: center;
|
||
}
|
||
|
||
.finance-form--dialog .finance-evidence-grid {
|
||
grid-template-columns: 320px minmax(0, 1fr);
|
||
gap: var(--space-4);
|
||
align-items: start;
|
||
}
|
||
|
||
.finance-form--dialog .finance-credential-preview {
|
||
height: 172px;
|
||
min-height: 172px;
|
||
}
|
||
|
||
.finance-form--dialog .MuiInputBase-root.MuiInputBase-multiline {
|
||
min-height: 232px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.finance-form-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: var(--space-2);
|
||
padding-top: var(--space-1);
|
||
}
|
||
|
||
.finance-audit-summary {
|
||
display: grid;
|
||
gap: var(--space-1);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-control);
|
||
background: var(--bg-card-strong);
|
||
padding: var(--space-3);
|
||
}
|
||
|
||
.finance-state-screen {
|
||
display: grid;
|
||
min-height: 100vh;
|
||
place-items: center;
|
||
background: var(--bg-page);
|
||
padding: var(--space-6);
|
||
}
|
||
|
||
.finance-state-panel {
|
||
display: grid;
|
||
gap: var(--space-3);
|
||
width: min(420px, 100%);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-card);
|
||
background: var(--bg-card);
|
||
box-shadow: var(--shadow-soft);
|
||
padding: var(--space-6);
|
||
text-align: center;
|
||
}
|
||
|
||
.finance-state-panel h1 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.finance-skeleton {
|
||
min-height: 360px;
|
||
border-radius: var(--radius-control);
|
||
background: linear-gradient(90deg, var(--bg-card-strong), var(--bg-page), var(--bg-card-strong));
|
||
background-size: 240% 100%;
|
||
animation: finance-shimmer 1.2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes finance-shimmer {
|
||
from {
|
||
background-position: 120% 0;
|
||
}
|
||
to {
|
||
background-position: -120% 0;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.finance-shell {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.finance-sidebar {
|
||
min-height: auto;
|
||
}
|
||
|
||
.finance-nav {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.finance-form-grid,
|
||
.finance-evidence-grid,
|
||
.finance-toolbar {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.finance-kpi-band {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.finance-create-dialog-paper {
|
||
width: calc(100vw - 32px);
|
||
max-width: calc(100vw - 32px) !important;
|
||
}
|
||
|
||
.finance-form--dialog .finance-form-grid,
|
||
.finance-form--dialog .finance-form-grid--coin-seller-create,
|
||
.finance-form--dialog .finance-form-grid--coin-seller-no-chain,
|
||
.finance-form--dialog .finance-evidence-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.001ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
scroll-behavior: auto !important;
|
||
transition-duration: 0.001ms !important;
|
||
}
|
||
}
|
||
|
||
|
||
/* ===== 财务中台 v2：全局变量与新版组件 ===== */
|
||
:root {
|
||
--fin-ink: #17212f;
|
||
--fin-google: #1b873f;
|
||
--fin-third: #0e7490;
|
||
--fin-seller: #b45309;
|
||
--fin-pos: #16a34a;
|
||
--fin-neg: #dc2626;
|
||
}
|
||
|
||
.num {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.finance-topbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
min-height: 64px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--bg-card);
|
||
padding: var(--space-3) var(--space-6);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 20;
|
||
}
|
||
|
||
.finance-topbar__title {
|
||
margin-right: auto;
|
||
}
|
||
|
||
.finance-topbar__title h1 {
|
||
margin: 0;
|
||
font-size: 17px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.finance-topbar__title small {
|
||
color: var(--text-tertiary);
|
||
font-size: 11.5px;
|
||
}
|
||
|
||
.finance-topbar__tools {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.finance-seg {
|
||
display: inline-flex;
|
||
gap: 2px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
background: var(--bg-card);
|
||
padding: 3px;
|
||
}
|
||
|
||
.finance-seg button {
|
||
border: none;
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
font: inherit;
|
||
font-size: 12.5px;
|
||
padding: 5px 12px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.finance-seg button.is-on {
|
||
background: var(--fin-ink);
|
||
color: #fff;
|
||
font-weight: 650;
|
||
}
|
||
|
||
.finance-appbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-right: auto;
|
||
}
|
||
|
||
.finance-appchip {
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
background: var(--bg-card);
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
font: inherit;
|
||
font-size: 12.5px;
|
||
font-weight: 650;
|
||
padding: 5px 14px;
|
||
transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
|
||
}
|
||
|
||
.finance-appchip:hover {
|
||
border-color: var(--text-tertiary);
|
||
}
|
||
|
||
.finance-appchip.is-on {
|
||
border-color: var(--fin-ink);
|
||
box-shadow: inset 0 0 0 1px var(--fin-ink);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.finance-overview {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.finance-overview__split {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.finance-alerts {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.finance-alert {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
border: 1px solid transparent;
|
||
border-radius: 8px;
|
||
font-size: 12.5px;
|
||
font-weight: 650;
|
||
padding: 8px 13px;
|
||
}
|
||
|
||
.finance-alert button {
|
||
border: none;
|
||
background: none;
|
||
color: inherit;
|
||
cursor: pointer;
|
||
font: inherit;
|
||
font-weight: 750;
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
padding: 0;
|
||
}
|
||
|
||
.finance-alert--warn {
|
||
background: color-mix(in srgb, #b45309 10%, transparent);
|
||
border-color: color-mix(in srgb, #b45309 28%, transparent);
|
||
color: #8a4b06;
|
||
}
|
||
|
||
.finance-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-card);
|
||
background: var(--bg-card);
|
||
box-shadow: var(--shadow-soft);
|
||
min-width: 0;
|
||
}
|
||
|
||
.finance-card__head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: var(--space-3) var(--space-4);
|
||
}
|
||
|
||
.finance-card__title {
|
||
font-size: 13.5px;
|
||
font-weight: 750;
|
||
}
|
||
|
||
.finance-card__title small {
|
||
color: var(--text-tertiary);
|
||
font-weight: 400;
|
||
margin-left: var(--space-2);
|
||
}
|
||
|
||
.finance-card__tools {
|
||
margin-left: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.finance-card__body {
|
||
padding: var(--space-4);
|
||
}
|
||
|
||
.finance-card__divider {
|
||
border-top: 1px solid var(--border);
|
||
margin: var(--space-4) 0;
|
||
}
|
||
|
||
.finance-hint {
|
||
margin: 0;
|
||
color: var(--text-tertiary);
|
||
font-size: 12px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.finance-sparkline {
|
||
width: 100%;
|
||
height: 28px;
|
||
margin-top: var(--space-2);
|
||
}
|
||
|
||
.finance-chartlegend {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
color: var(--text-secondary);
|
||
font-size: 11.5px;
|
||
}
|
||
|
||
.finance-chartlegend i {
|
||
display: inline-block;
|
||
width: 9px;
|
||
height: 9px;
|
||
border-radius: 3px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.finance-trend {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 3px;
|
||
height: 190px;
|
||
}
|
||
|
||
.finance-trend__col {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column-reverse;
|
||
gap: 1px;
|
||
min-width: 4px;
|
||
border-radius: 3px 3px 0 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.finance-trend__col:hover {
|
||
filter: brightness(0.94);
|
||
}
|
||
|
||
.finance-trend__seg {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
.finance-trend__seg--googlePlay {
|
||
background: var(--fin-google);
|
||
}
|
||
|
||
.finance-trend__seg--thirdParty {
|
||
background: var(--fin-third);
|
||
}
|
||
|
||
.finance-trend__seg--coinSeller {
|
||
background: var(--fin-seller);
|
||
}
|
||
|
||
.finance-trend__axis {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-top: 1px solid var(--border);
|
||
color: var(--text-tertiary);
|
||
font-size: 10.5px;
|
||
margin-top: var(--space-2);
|
||
padding-top: var(--space-2);
|
||
}
|
||
|
||
.finance-mixbar {
|
||
display: flex;
|
||
height: 12px;
|
||
border-radius: 999px;
|
||
overflow: hidden;
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
.finance-mixbar span {
|
||
display: block;
|
||
}
|
||
|
||
.finance-mixrow {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
border-top: 1px solid var(--border);
|
||
font-size: 12.5px;
|
||
padding: 7px 0;
|
||
}
|
||
|
||
.finance-mixrow:first-of-type {
|
||
border-top: none;
|
||
}
|
||
|
||
.finance-mixrow i {
|
||
width: 9px;
|
||
height: 9px;
|
||
flex: none;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.finance-mixrow__name {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.finance-mixrow__amt {
|
||
margin-left: auto;
|
||
font-weight: 750;
|
||
}
|
||
|
||
.finance-mixrow__pct {
|
||
width: 48px;
|
||
color: var(--text-tertiary);
|
||
text-align: right;
|
||
}
|
||
|
||
.finance-rankrow {
|
||
display: grid;
|
||
grid-template-columns: 18px 96px minmax(0, 1fr) 96px;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
font-size: 12.5px;
|
||
padding: 6px 0;
|
||
}
|
||
|
||
.finance-rankrow__idx {
|
||
color: var(--text-tertiary);
|
||
font-weight: 650;
|
||
}
|
||
|
||
.finance-rankrow__name {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.finance-rankrow__amt {
|
||
font-weight: 750;
|
||
text-align: right;
|
||
}
|
||
|
||
.finance-rankbar {
|
||
display: block;
|
||
height: 7px;
|
||
border-radius: 999px;
|
||
background: var(--bg-card-strong);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.finance-rankbar i {
|
||
display: block;
|
||
height: 100%;
|
||
border-radius: 999px;
|
||
background: var(--primary, #2557d6);
|
||
}
|
||
|
||
.finance-tablewrap {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.finance-flat-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.finance-flat-table th {
|
||
background: var(--bg-card-strong);
|
||
border-bottom: 1px solid var(--border);
|
||
color: var(--text-tertiary);
|
||
font-size: 11px;
|
||
font-weight: 750;
|
||
letter-spacing: 0.06em;
|
||
padding: 9px 14px;
|
||
text-align: left;
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.finance-flat-table td {
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 10px 14px;
|
||
vertical-align: middle;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.finance-flat-table th.r,
|
||
.finance-flat-table td.r {
|
||
text-align: right;
|
||
}
|
||
|
||
.finance-flat-table__row:hover td {
|
||
background: var(--bg-card-strong);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.finance-flat-table--bills {
|
||
min-width: 1180px;
|
||
}
|
||
|
||
.finance-flat-table--orders {
|
||
min-width: 1740px;
|
||
}
|
||
|
||
.finance-views {
|
||
display: flex;
|
||
gap: 2px;
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 0 var(--space-2);
|
||
}
|
||
|
||
.finance-views button {
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
background: none;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
font: inherit;
|
||
font-size: 12.5px;
|
||
font-weight: 650;
|
||
margin-bottom: -1px;
|
||
padding: 11px 14px;
|
||
}
|
||
|
||
.finance-views button.is-on {
|
||
border-bottom-color: var(--primary, #2557d6);
|
||
color: var(--primary, #2557d6);
|
||
}
|
||
|
||
.finance-views__cnt {
|
||
color: var(--text-tertiary);
|
||
font-weight: 400;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.finance-filterrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-3) var(--space-4);
|
||
}
|
||
|
||
.finance-filterrow__region {
|
||
min-width: 140px;
|
||
}
|
||
|
||
.finance-filterrow__search {
|
||
min-width: 220px;
|
||
}
|
||
|
||
.finance-filterrow__spacer {
|
||
flex: 1;
|
||
}
|
||
|
||
.finance-fchip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
border: 1px solid color-mix(in srgb, var(--primary, #2557d6) 40%, transparent);
|
||
border-radius: 999px;
|
||
background: color-mix(in srgb, var(--primary, #2557d6) 10%, transparent);
|
||
color: var(--primary, #2557d6);
|
||
cursor: pointer;
|
||
font: inherit;
|
||
font-size: 12px;
|
||
font-weight: 650;
|
||
padding: 4px 12px;
|
||
}
|
||
|
||
.finance-fchip span {
|
||
opacity: 0.7;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.finance-detailrow td {
|
||
background: var(--bg-card-strong);
|
||
padding: 0 var(--space-4) var(--space-4);
|
||
white-space: normal;
|
||
}
|
||
|
||
.finance-detail {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
|
||
gap: var(--space-4);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-control);
|
||
background: var(--bg-card);
|
||
margin-top: var(--space-3);
|
||
padding: var(--space-4);
|
||
}
|
||
|
||
.finance-kv {
|
||
display: grid;
|
||
grid-template-columns: auto minmax(0, 1fr);
|
||
align-content: start;
|
||
gap: 5px 16px;
|
||
font-size: 12px;
|
||
margin: 0;
|
||
}
|
||
|
||
.finance-kv dt {
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
.finance-kv dd {
|
||
font-weight: 650;
|
||
margin: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.finance-wfall {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 7px;
|
||
}
|
||
|
||
.finance-wfall__row {
|
||
display: grid;
|
||
grid-template-columns: 104px minmax(0, 1fr) 130px;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.finance-wfall__label {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.finance-wfall__track {
|
||
display: block;
|
||
height: 14px;
|
||
}
|
||
|
||
.finance-wfall__track i {
|
||
display: block;
|
||
height: 100%;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.finance-wfall__val {
|
||
font-weight: 750;
|
||
text-align: right;
|
||
}
|
||
|
||
.finance-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
border-radius: 999px;
|
||
font-size: 11.5px;
|
||
font-weight: 750;
|
||
padding: 2px 10px;
|
||
}
|
||
|
||
.finance-pill i {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: currentcolor;
|
||
}
|
||
|
||
.finance-pill--ok {
|
||
background: color-mix(in srgb, #16a34a 12%, transparent);
|
||
color: #136b31;
|
||
}
|
||
|
||
.finance-pill--warn {
|
||
background: color-mix(in srgb, #b45309 14%, transparent);
|
||
color: #8a4b06;
|
||
}
|
||
|
||
.finance-recon-toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.finance-recon-toolbar__month {
|
||
font-size: 15px;
|
||
font-weight: 750;
|
||
}
|
||
|
||
.finance-recon-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.finance-recon-line {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: var(--space-3);
|
||
border-top: 1px solid var(--border);
|
||
font-size: 12.5px;
|
||
padding: 7px 0;
|
||
}
|
||
|
||
.finance-recon-line:first-of-type {
|
||
border-top: none;
|
||
}
|
||
|
||
.finance-recon-line--total {
|
||
border-top: 2px solid var(--border);
|
||
font-weight: 800;
|
||
}
|
||
|
||
@media (max-width: 1050px) {
|
||
.finance-overview__split,
|
||
.finance-recon-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.finance-detail {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|