606 lines
14 KiB
Plaintext
606 lines
14 KiB
Plaintext
:root {
|
|
--panel-bg: rgba(8, 18, 38, 0.68);
|
|
--panel-bg-strong: rgba(8, 20, 44, 0.88);
|
|
--panel-border: rgba(103, 232, 249, 0.24);
|
|
--panel-border-strong: rgba(34, 211, 238, 0.72);
|
|
--panel-radius: 18px;
|
|
--panel-blur: 18px;
|
|
--panel-shadow: 0 18px 50px rgba(2, 8, 23, 0.48);
|
|
--glow-cyan: #22d3ee;
|
|
--glow-blue: #3b82f6;
|
|
--glow-violet: #8b5cf6;
|
|
--text-primary: #e6f7ff;
|
|
--text-secondary: rgba(226, 242, 255, 0.68);
|
|
--grid-line: rgba(56, 189, 248, 0.08);
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: var(--text-primary);
|
|
font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
background:
|
|
radial-gradient(circle at 12% 8%, rgba(34, 211, 238, 0.2), transparent 30%),
|
|
radial-gradient(circle at 88% 2%, rgba(139, 92, 246, 0.2), transparent 32%),
|
|
linear-gradient(135deg, #020617, #071120 48%, #0f172a);
|
|
}
|
|
|
|
body::before,
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
body::before {
|
|
z-index: 0;
|
|
background-image:
|
|
linear-gradient(var(--grid-line) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
|
|
background-size: 36px 36px;
|
|
mask-image: linear-gradient(to bottom, black, transparent 88%);
|
|
}
|
|
|
|
body::after {
|
|
z-index: 0;
|
|
background: radial-gradient(circle at 50% 78%, rgba(59, 130, 246, 0.14), transparent 36%);
|
|
animation: aurora 28s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes aurora {
|
|
from { transform: translate3d(-1.5%, 0, 0) scale(1); }
|
|
to { transform: translate3d(1.5%, -2%, 1.04); }
|
|
}
|
|
|
|
.ant-layout,
|
|
.ant-layout-has-sider {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.glass-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
padding: 0 20px;
|
|
background: rgba(4, 13, 30, 0.72) !important;
|
|
border-bottom: 1px solid rgba(103, 232, 249, 0.2);
|
|
box-shadow: 0 12px 34px rgba(2, 8, 23, 0.38);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.brand-block {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.brand-block img {
|
|
width: 40px;
|
|
height: 40px;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.75));
|
|
}
|
|
|
|
.brand-title {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: var(--text-primary);
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
text-shadow: 0 0 18px rgba(34, 211, 238, 0.38);
|
|
}
|
|
|
|
.user-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 7px 10px;
|
|
border: 1px solid rgba(103, 232, 249, 0.22);
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
cursor: pointer;
|
|
transition: border-color 0.25s ease, box-shadow 0.25s ease;
|
|
}
|
|
|
|
.user-chip:hover {
|
|
border-color: rgba(34, 211, 238, 0.7);
|
|
box-shadow: 0 0 22px rgba(34, 211, 238, 0.16);
|
|
}
|
|
|
|
.user-chip .ant-avatar {
|
|
border: 1px solid rgba(103, 232, 249, 0.45);
|
|
}
|
|
|
|
.user-name {
|
|
color: var(--text-primary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.glass-sider {
|
|
background: rgba(4, 13, 30, 0.58) !important;
|
|
border-right: 1px solid rgba(103, 232, 249, 0.16);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.glass-sider .ant-menu {
|
|
padding: 10px 8px;
|
|
background: transparent !important;
|
|
border-inline-end: 0 !important;
|
|
}
|
|
|
|
.glass-sider .ant-menu-item,
|
|
.glass-sider .ant-menu-submenu-title {
|
|
height: 42px;
|
|
margin-inline: 0;
|
|
border-radius: 12px;
|
|
color: rgba(230, 247, 255, 0.76);
|
|
}
|
|
|
|
.glass-sider .ant-menu-item:hover,
|
|
.glass-sider .ant-menu-submenu-title:hover {
|
|
color: #a5f3fc !important;
|
|
background: rgba(34, 211, 238, 0.1) !important;
|
|
}
|
|
|
|
.glass-sider .ant-menu-item-selected {
|
|
color: #ecfeff !important;
|
|
background: linear-gradient(90deg, rgba(34, 211, 238, 0.28), rgba(139, 92, 246, 0.18)) !important;
|
|
box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.35), 0 0 20px rgba(34, 211, 238, 0.14);
|
|
}
|
|
|
|
.glass-sider .ant-menu-submenu-selected > .ant-menu-submenu-title {
|
|
color: #a5f3fc;
|
|
}
|
|
|
|
.panel-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
height: calc(100vh - 64px - 36px);
|
|
overflow: auto;
|
|
background: transparent;
|
|
}
|
|
|
|
.glass-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
height: 36px;
|
|
padding: 0 16px;
|
|
color: var(--text-secondary);
|
|
background: rgba(4, 13, 30, 0.7);
|
|
border-top: 1px solid rgba(103, 232, 249, 0.18);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.glass-footer a {
|
|
color: #67e8f9;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.glass-footer a:hover {
|
|
color: #cffafe;
|
|
text-shadow: 0 0 12px rgba(34, 211, 238, 0.75);
|
|
}
|
|
|
|
.footer-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ant-card {
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--panel-border);
|
|
border-radius: var(--panel-radius);
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), var(--panel-bg) 42%, rgba(255, 255, 255, 0.03));
|
|
box-shadow: var(--panel-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: blur(var(--panel-blur));
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ant-card-head {
|
|
min-height: 48px;
|
|
color: var(--text-primary);
|
|
background: rgba(34, 211, 238, 0.06);
|
|
border-bottom: 1px solid rgba(103, 232, 249, 0.16);
|
|
}
|
|
|
|
.ant-card-head-title,
|
|
.ant-card-extra {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ant-card-body {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ant-table {
|
|
color: var(--text-primary);
|
|
background: transparent;
|
|
}
|
|
|
|
.ant-table-thead > tr > th {
|
|
color: #cffafe !important;
|
|
background: rgba(34, 211, 238, 0.1) !important;
|
|
border-bottom-color: rgba(103, 232, 249, 0.2) !important;
|
|
}
|
|
|
|
.ant-table-tbody > tr > td,
|
|
.ant-table-summary > tr > th,
|
|
.ant-table-summary > tr > td {
|
|
color: var(--text-primary) !important;
|
|
background: transparent !important;
|
|
border-bottom-color: rgba(103, 232, 249, 0.12) !important;
|
|
}
|
|
|
|
.ant-table-tbody > tr.ant-table-row:hover > td {
|
|
background: rgba(34, 211, 238, 0.08) !important;
|
|
}
|
|
|
|
.ant-pagination .ant-pagination-item,
|
|
.ant-pagination .ant-pagination-prev .ant-pagination-item-link,
|
|
.ant-pagination .ant-pagination-next .ant-pagination-item-link {
|
|
color: #a5f3fc;
|
|
border-color: rgba(103, 232, 249, 0.25);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.ant-pagination .ant-pagination-item-active {
|
|
border-color: var(--panel-border-strong);
|
|
box-shadow: 0 0 14px rgba(34, 211, 238, 0.16);
|
|
}
|
|
|
|
.ant-pagination .ant-pagination-item-ellipsis,
|
|
.ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link-icon,
|
|
.ant-pagination .ant-pagination-jump-next .ant-pagination-item-link-icon {
|
|
color: #a5f3fc !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
.ant-descriptions .ant-descriptions-item-label,
|
|
.ant-descriptions .ant-descriptions-item-content {
|
|
color: var(--text-primary);
|
|
background: transparent;
|
|
}
|
|
|
|
.ant-descriptions .ant-descriptions-view,
|
|
.ant-descriptions .ant-descriptions-row > th,
|
|
.ant-descriptions .ant-descriptions-row > td {
|
|
border-color: rgba(103, 232, 249, 0.14);
|
|
}
|
|
|
|
.ant-btn-primary {
|
|
border: 0;
|
|
background: linear-gradient(135deg, #0e7490, #1d4ed8 52%, #6d28d9);
|
|
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
|
|
}
|
|
|
|
.ant-btn-primary:hover,
|
|
.ant-btn-primary:focus {
|
|
background: linear-gradient(135deg, #0891b2, #2563eb 52%, #7c3aed) !important;
|
|
box-shadow: 0 0 26px rgba(34, 211, 238, 0.26) !important;
|
|
}
|
|
|
|
.ant-btn-default {
|
|
color: #a5f3fc;
|
|
border-color: rgba(103, 232, 249, 0.28);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.ant-btn-default:hover {
|
|
color: #cffafe !important;
|
|
border-color: rgba(34, 211, 238, 0.7) !important;
|
|
}
|
|
|
|
.ant-tag {
|
|
border-color: rgba(103, 232, 249, 0.28);
|
|
background: rgba(34, 211, 238, 0.1);
|
|
}
|
|
|
|
.ant-modal-content,
|
|
.ant-drawer-content {
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--panel-border);
|
|
background: var(--panel-bg-strong);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.ant-modal-header,
|
|
.ant-drawer-header,
|
|
.ant-modal-footer {
|
|
color: var(--text-primary);
|
|
background: transparent;
|
|
}
|
|
|
|
.ant-modal-title,
|
|
.ant-drawer-title,
|
|
.ant-drawer-header-title,
|
|
.ant-drawer-close,
|
|
.ant-modal-close {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ant-select-dropdown {
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--panel-border);
|
|
background: var(--panel-bg-strong);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.ant-select-item {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ant-select-item-option-active,
|
|
.ant-select-item-option-selected {
|
|
background: rgba(34, 211, 238, 0.16) !important;
|
|
}
|
|
|
|
.ant-spin-dot-item {
|
|
background-color: #67e8f9;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid rgba(103, 232, 249, 0.85);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.glass-header {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.brand-title {
|
|
display: none;
|
|
}
|
|
|
|
.footer-group {
|
|
gap: 8px;
|
|
}
|
|
|
|
.footer-hide-sm {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
/* Dark-theme fallback: prevent component library default white surfaces from showing inside dark panels. */
|
|
#root .ant-card,
|
|
#root .ant-table,
|
|
#root .ant-descriptions-view,
|
|
#root .ant-modal-content,
|
|
#root .ant-drawer-content,
|
|
#root .ant-select-dropdown,
|
|
#root .ant-picker-dropdown .ant-picker-panel-container,
|
|
#root .ant-popover-inner,
|
|
#root .ant-collapse,
|
|
#root .ant-list,
|
|
#root .ant-pagination .ant-pagination-item,
|
|
#root .ant-pagination .ant-pagination-item-link {
|
|
color: #e6f7ff;
|
|
}
|
|
|
|
#root .ant-table,
|
|
#root .ant-descriptions-view,
|
|
#root .ant-modal-content,
|
|
#root .ant-drawer-content,
|
|
#root .ant-select-dropdown,
|
|
#root .ant-picker-dropdown .ant-picker-panel-container,
|
|
#root .ant-popover-inner,
|
|
#root .ant-collapse {
|
|
background-color: rgba(7, 18, 39, 0.9);
|
|
}
|
|
|
|
#root .ant-table-cell {
|
|
background-color: transparent;
|
|
color: #e6f7ff;
|
|
}
|
|
|
|
#root .ant-picker,
|
|
#root .ant-input,
|
|
#root .ant-input-affix-wrapper,
|
|
#root .ant-select-selector,
|
|
#root .ant-input-number,
|
|
#root .ant-btn-default {
|
|
color: #e6f7ff;
|
|
}
|
|
|
|
#root .ant-descriptions-item-label,
|
|
#root .ant-descriptions-item-content,
|
|
#root .ant-form-item,
|
|
#root .ant-list-item,
|
|
#root .ant-select-selection-item,
|
|
#root .ant-select-selection-placeholder,
|
|
#root .ant-picker-input > input {
|
|
color: inherit;
|
|
}
|
|
|
|
#root .ant-empty-description,
|
|
#root .ant-typography,
|
|
#root .ant-modal .ant-modal-title,
|
|
#root .ant-drawer .ant-drawer-title {
|
|
color: #e6f7ff;
|
|
}
|
|
/* Dark panel contrast hardening: alerts, status tags and auxiliary controls */
|
|
.ant-alert {
|
|
color: var(--text-primary);
|
|
border-color: rgba(103, 232, 249, 0.24);
|
|
background: linear-gradient(135deg, rgba(15, 35, 66, 0.88), rgba(7, 18, 39, 0.9));
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.ant-alert-message,
|
|
.ant-alert-description {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.ant-alert-icon {
|
|
color: #67e8f9 !important;
|
|
}
|
|
|
|
.ant-alert.ant-alert-warning {
|
|
border-color: rgba(251, 191, 36, 0.32);
|
|
background: linear-gradient(135deg, rgba(67, 48, 12, 0.86), rgba(28, 24, 12, 0.9));
|
|
}
|
|
|
|
.ant-alert.ant-alert-warning .ant-alert-icon {
|
|
color: #fbbf24 !important;
|
|
}
|
|
|
|
.ant-tag-green,
|
|
.ant-tag-cyan,
|
|
.ant-tag-blue,
|
|
.ant-tag-gold,
|
|
.ant-tag-orange,
|
|
.ant-tag-red,
|
|
.ant-tag-purple,
|
|
.ant-tag-magenta {
|
|
color: #dffbff;
|
|
border-color: rgba(103, 232, 249, 0.28);
|
|
background: rgba(34, 211, 238, 0.14);
|
|
}
|
|
|
|
.ant-tag-green {
|
|
color: #bbf7d0;
|
|
border-color: rgba(74, 222, 128, 0.32);
|
|
background: rgba(34, 197, 94, 0.15);
|
|
}
|
|
|
|
.ant-tag-cyan {
|
|
color: #a5f3fc;
|
|
border-color: rgba(34, 211, 238, 0.36);
|
|
background: rgba(8, 145, 178, 0.18);
|
|
}
|
|
|
|
.ant-tag-blue {
|
|
color: #bfdbfe;
|
|
border-color: rgba(96, 165, 250, 0.34);
|
|
background: rgba(37, 99, 235, 0.18);
|
|
}
|
|
|
|
.ant-tag-gold,
|
|
.ant-tag-orange {
|
|
color: #fde68a;
|
|
border-color: rgba(251, 191, 36, 0.34);
|
|
background: rgba(217, 119, 6, 0.18);
|
|
}
|
|
|
|
.ant-tag-red {
|
|
color: #fecdd3;
|
|
border-color: rgba(251, 113, 133, 0.34);
|
|
background: rgba(225, 29, 72, 0.18);
|
|
}
|
|
|
|
.ant-tag-purple {
|
|
color: #ddd6fe;
|
|
border-color: rgba(167, 139, 250, 0.34);
|
|
background: rgba(124, 58, 237, 0.18);
|
|
}
|
|
|
|
.ant-select-arrow,
|
|
.ant-select-suffix .anticon,
|
|
.ant-input-password-icon,
|
|
.ant-input-suffix .anticon,
|
|
.ant-input-clear-icon {
|
|
color: #a5f3fc !important;
|
|
}
|
|
|
|
.ant-input-number-handler,
|
|
.ant-input-number-handler-up-inner,
|
|
.ant-input-number-handler-down-inner {
|
|
color: #a5f3fc !important;
|
|
background: rgba(14, 30, 56, 0.92);
|
|
}
|
|
|
|
.ant-form-item-extra,
|
|
.ant-form-item-explain,
|
|
.ant-form-item-explain-success,
|
|
.ant-form-item-explain-warning,
|
|
.ant-form-item-explain-error {
|
|
color: #b7d7e8 !important;
|
|
}
|
|
|
|
.ant-modal-close,
|
|
.ant-drawer-close {
|
|
color: #a5f3fc !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.ant-modal-close:hover,
|
|
.ant-drawer-close:hover {
|
|
color: #ecfeff !important;
|
|
background: rgba(34, 211, 238, 0.12) !important;
|
|
}
|
|
.ant-alert-close-icon,
|
|
.ant-alert-close-icon .anticon,
|
|
.ant-alert-close-icon .anticon-close {
|
|
color: #a5f3fc !important;
|
|
}
|
|
|
|
.ant-alert-close-icon:hover,
|
|
.ant-alert-close-icon:hover .anticon,
|
|
.ant-alert-close-icon:hover .anticon-close {
|
|
color: #ecfeff !important;
|
|
}
|
|
/* Static message/notification calls (message.error etc.) do not consume ConfigProvider
|
|
dark theme in antd v5 — force dark glass panel so no white popup appears in dark shell. */
|
|
.ant-message .ant-message-notice-content,
|
|
.ant-notification .ant-notification-notice {
|
|
color: #e6f7ff;
|
|
border: 1px solid rgba(103, 232, 249, 0.28);
|
|
background: linear-gradient(145deg, rgba(14, 30, 56, 0.96), rgba(7, 18, 39, 0.96));
|
|
box-shadow: 0 16px 44px rgba(2, 8, 23, 0.55), 0 0 24px rgba(34, 211, 238, 0.12);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.ant-message .ant-message-notice-content .ant-message-custom-content,
|
|
.ant-notification .ant-notification-notice-message,
|
|
.ant-notification .ant-notification-notice-description {
|
|
color: #e6f7ff !important;
|
|
}
|
|
|
|
.ant-message .ant-message-notice-content .anticon-close-circle,
|
|
.ant-message .ant-message-notice-content .anticon-close {
|
|
color: #fb7185 !important;
|
|
}
|
|
|
|
.ant-message .ant-message-notice-content .anticon-exclamation-circle {
|
|
color: #fbbf24 !important;
|
|
}
|
|
|
|
.ant-message .ant-message-notice-content .anticon-check-circle {
|
|
color: #4ade80 !important;
|
|
}
|
|
|
|
.ant-message .ant-message-notice-content .anticon-info-circle {
|
|
color: #67e8f9 !important;
|
|
}
|
|
|
|
.ant-message .ant-message-notice-content .anticon-loading {
|
|
color: #67e8f9 !important;
|
|
}
|