forked from SmartBench/CMVR-IOT-UI
zhanghao
181cff4277
- 调整了StatCards.vue中的字母间距，以提高可读性。 - 更新了RightBottomCharts.vue和RightTopCharts.vue中的图表样式，通过新的调色板和背景设置增强了视觉吸引力。 - 修改了图表中的工具提示和轴样式，以提高对比度和可见性。 - 将流程编辑器中的背景颜色更改为使用CSS变量，以保持一致性。 - 引入了新的网络主题风格，包括渐变和阴影，以提供沉浸式的暗色模式体验。 - 为各种组件添加了深色覆盖，以确保与新主题的兼容性。
354 lines
12 KiB
SCSS
354 lines
12 KiB
SCSS
// Immersive Dark Tech layer. Tokens live in variables.module.scss; this file
|
|
// is responsible for depth, glow, motion and component interaction states.
|
|
html.dark {
|
|
background: #0a0e17;
|
|
|
|
body,
|
|
#app,
|
|
.app-wrapper,
|
|
.main-container,
|
|
.app-main {
|
|
background-color: #0a0e17;
|
|
}
|
|
|
|
.app-wrapper,
|
|
.app-main {
|
|
background-image:
|
|
linear-gradient(rgba(6, 182, 212, 0.035) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(6, 182, 212, 0.035) 1px, transparent 1px),
|
|
radial-gradient(circle at 78% 12%, rgba(168, 85, 247, 0.07), transparent 34%);
|
|
background-size: 48px 48px, 48px 48px, 100% 100%;
|
|
}
|
|
|
|
.app-main {
|
|
isolation: isolate;
|
|
}
|
|
|
|
.app-main::before {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
height: 1px;
|
|
content: "";
|
|
pointer-events: none;
|
|
background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.55), rgba(168, 85, 247, 0.34), transparent);
|
|
box-shadow: 0 0 14px rgba(6, 182, 212, 0.35);
|
|
animation: cyber-scan 9s linear infinite;
|
|
}
|
|
|
|
.sidebar-container {
|
|
-webkit-backdrop-filter: blur(20px) saturate(125%);
|
|
backdrop-filter: blur(20px) saturate(125%);
|
|
background: rgba(10, 14, 23, 0.86) !important;
|
|
border-right: 1px solid rgba(6, 182, 212, 0.24);
|
|
box-shadow: 10px 0 34px rgba(0, 0, 0, 0.34), 1px 0 18px rgba(6, 182, 212, 0.08) !important;
|
|
}
|
|
|
|
.sidebar-logo-container {
|
|
background: rgba(10, 14, 23, 0.9) !important;
|
|
border-bottom: 1px solid rgba(6, 182, 212, 0.2);
|
|
}
|
|
|
|
.sidebar-logo-container .sidebar-logo {
|
|
filter: drop-shadow(0 0 7px rgba(34, 211, 238, 0.42));
|
|
}
|
|
|
|
.sidebar-logo-container .sidebar-title {
|
|
color: rgba(255, 255, 255, 0.9) !important;
|
|
text-shadow: 0 0 14px rgba(6, 182, 212, 0.22);
|
|
}
|
|
|
|
.sidebar-container .el-menu,
|
|
.sidebar-container .el-scrollbar,
|
|
.sidebar-container .scrollbar-wrapper {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.sidebar-container .el-menu-item,
|
|
.sidebar-container .el-sub-menu__title {
|
|
min-height: 48px;
|
|
margin: 3px 10px;
|
|
border: 1px solid transparent;
|
|
border-radius: 5px;
|
|
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.sidebar-container .el-menu-item:hover,
|
|
.sidebar-container .el-sub-menu__title:hover {
|
|
color: rgba(255, 255, 255, 0.9) !important;
|
|
background: rgba(6, 182, 212, 0.08) !important;
|
|
border-color: rgba(6, 182, 212, 0.18);
|
|
}
|
|
|
|
.sidebar-container .el-menu-item.is-active {
|
|
color: #a5f3fc !important;
|
|
background: linear-gradient(90deg, rgba(6, 182, 212, 0.18), rgba(168, 85, 247, 0.08)) !important;
|
|
border-color: rgba(34, 211, 238, 0.38);
|
|
box-shadow: inset 3px 0 0 #22d3ee, 0 0 18px rgba(6, 182, 212, 0.1);
|
|
text-shadow: 0 0 10px rgba(34, 211, 238, 0.32);
|
|
}
|
|
|
|
.navbar {
|
|
-webkit-backdrop-filter: blur(20px) saturate(125%);
|
|
backdrop-filter: blur(20px) saturate(125%);
|
|
background: rgba(10, 14, 23, 0.72) !important;
|
|
border-bottom: 1px solid rgba(6, 182, 212, 0.22);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 1px 14px rgba(6, 182, 212, 0.08) !important;
|
|
}
|
|
|
|
.navbar .right-menu-item:hover,
|
|
.navbar .hamburger-container:hover {
|
|
color: #67e8f9;
|
|
background: rgba(6, 182, 212, 0.1) !important;
|
|
text-shadow: 0 0 12px rgba(6, 182, 212, 0.5);
|
|
}
|
|
|
|
.tags-view-container {
|
|
-webkit-backdrop-filter: blur(20px);
|
|
backdrop-filter: blur(20px);
|
|
background: rgba(10, 14, 23, 0.68) !important;
|
|
border-bottom-color: rgba(168, 85, 247, 0.2) !important;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
|
|
}
|
|
|
|
.tags-view-container .tags-view-item {
|
|
background: rgba(20, 27, 45, 0.72) !important;
|
|
border-color: rgba(100, 116, 139, 0.24) !important;
|
|
transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.tags-view-container .tags-view-item:hover {
|
|
color: rgba(255, 255, 255, 0.9) !important;
|
|
border-color: rgba(6, 182, 212, 0.42) !important;
|
|
}
|
|
|
|
.tags-view-container .tags-view-item.active {
|
|
color: #e6fbff !important;
|
|
background: linear-gradient(105deg, rgba(6, 182, 212, 0.88), rgba(93, 92, 226, 0.82)) !important;
|
|
border-color: rgba(103, 232, 249, 0.72) !important;
|
|
box-shadow: 0 0 16px rgba(6, 182, 212, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
.app-container,
|
|
.el-card,
|
|
.el-dialog,
|
|
.el-drawer,
|
|
.el-popover,
|
|
.dashboard-panel,
|
|
.metric-card,
|
|
.row-cards .card,
|
|
.main-workspace .workspace-container > .left,
|
|
.main-workspace .workspace-container > .right,
|
|
.task-log,
|
|
.page-container > .left,
|
|
.page-container > .right {
|
|
-webkit-backdrop-filter: blur(20px) saturate(125%);
|
|
backdrop-filter: blur(20px) saturate(125%);
|
|
background-color: rgba(20, 27, 45, 0.78) !important;
|
|
background-image:
|
|
linear-gradient(145deg, rgba(6, 182, 212, 0.035), rgba(168, 85, 247, 0.025)),
|
|
repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.012) 0, rgba(255, 255, 255, 0.012) 1px, transparent 1px, transparent 5px) !important;
|
|
border-color: rgba(6, 182, 212, 0.22) !important;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 16px 36px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(6, 182, 212, 0.06) !important;
|
|
}
|
|
|
|
.metric-card,
|
|
.dashboard-panel,
|
|
.el-card,
|
|
.app-container {
|
|
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.metric-card:hover,
|
|
.dashboard-panel:hover,
|
|
.el-card:hover {
|
|
border-color: rgba(34, 211, 238, 0.46) !important;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 42px rgba(0, 0, 0, 0.26), 0 0 24px rgba(6, 182, 212, 0.1) !important;
|
|
}
|
|
|
|
.el-button--primary {
|
|
--el-button-text-color: #f5fdff;
|
|
--el-button-border-color: rgba(103, 232, 249, 0.64);
|
|
--el-button-hover-border-color: rgba(216, 180, 254, 0.76);
|
|
background: linear-gradient(110deg, #0891b2, #4f46c8) !important;
|
|
box-shadow: 0 0 16px rgba(6, 182, 212, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
.el-button--primary:hover,
|
|
.el-button--primary:focus {
|
|
background: linear-gradient(110deg, #06b6d4, #7c3aed) !important;
|
|
box-shadow: 0 0 22px rgba(6, 182, 212, 0.28), 0 0 16px rgba(168, 85, 247, 0.12);
|
|
}
|
|
|
|
.el-table::before,
|
|
.el-table__inner-wrapper::before {
|
|
background-color: rgba(6, 182, 212, 0.18) !important;
|
|
}
|
|
|
|
.el-table th.el-table__cell {
|
|
color: rgba(255, 255, 255, 0.78) !important;
|
|
background: rgba(20, 27, 45, 0.94) !important;
|
|
border-bottom-color: rgba(6, 182, 212, 0.22) !important;
|
|
}
|
|
|
|
.el-table td.el-table__cell {
|
|
border-bottom-color: rgba(100, 116, 139, 0.16) !important;
|
|
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.el-table__body tr:hover > td.el-table__cell {
|
|
background-color: rgba(6, 182, 212, 0.075) !important;
|
|
background-image: linear-gradient(90deg, rgba(6, 182, 212, 0.02), rgba(168, 85, 247, 0.08), rgba(6, 182, 212, 0.025)) !important;
|
|
box-shadow: inset 0 1px 0 rgba(34, 211, 238, 0.09), inset 0 -1px 0 rgba(168, 85, 247, 0.07);
|
|
}
|
|
|
|
.el-tabs__active-bar {
|
|
background: linear-gradient(90deg, #06b6d4, #a855f7);
|
|
box-shadow: 0 0 12px rgba(6, 182, 212, 0.48);
|
|
}
|
|
|
|
.el-dialog,
|
|
.el-drawer,
|
|
.el-popover,
|
|
.el-dropdown-menu {
|
|
border-color: rgba(6, 182, 212, 0.28) !important;
|
|
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.48), 0 0 28px rgba(6, 182, 212, 0.1), 0 0 34px rgba(168, 85, 247, 0.06) !important;
|
|
}
|
|
|
|
.el-overlay {
|
|
background-color: rgba(3, 6, 14, 0.68);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
.state-dot,
|
|
.task-status-dot,
|
|
.status-dot,
|
|
.el-badge__content.is-dot {
|
|
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08), 0 0 14px currentColor;
|
|
animation: cyber-pulse 2.4s ease-in-out infinite;
|
|
}
|
|
|
|
.control-point {
|
|
border-color: rgba(230, 251, 255, 0.9) !important;
|
|
background: rgba(6, 182, 212, 0.88) !important;
|
|
box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1), 0 0 18px rgba(6, 182, 212, 0.62) !important;
|
|
animation: cyber-marker-pulse 2.2s ease-in-out infinite;
|
|
}
|
|
|
|
.control-point.active {
|
|
background: rgba(168, 85, 247, 0.92) !important;
|
|
box-shadow: 0 0 0 5px rgba(168, 85, 247, 0.12), 0 0 22px rgba(168, 85, 247, 0.66) !important;
|
|
}
|
|
|
|
.home-dashboard .hero-panel {
|
|
border: 1px solid rgba(6, 182, 212, 0.28);
|
|
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34), 0 0 30px rgba(6, 182, 212, 0.08);
|
|
}
|
|
|
|
.home-dashboard .hero-panel::before {
|
|
background: linear-gradient(105deg, rgba(5, 9, 20, 0.94), rgba(10, 14, 23, 0.8) 55%, rgba(35, 18, 61, 0.68)) !important;
|
|
}
|
|
|
|
.home-dashboard .section-kicker {
|
|
color: #67e8f9;
|
|
text-shadow: 0 0 12px rgba(6, 182, 212, 0.42);
|
|
}
|
|
|
|
.home-dashboard .metric-icon--blue { color: #22d3ee !important; background: rgba(6, 182, 212, 0.12) !important; }
|
|
.home-dashboard .metric-icon--green { color: #34d399 !important; background: rgba(16, 185, 129, 0.12) !important; }
|
|
.home-dashboard .metric-icon--orange { color: #fbbf24 !important; background: rgba(251, 191, 36, 0.1) !important; }
|
|
.home-dashboard .metric-icon--red { color: #fb7185 !important; background: rgba(251, 113, 133, 0.1) !important; }
|
|
|
|
[data-echarts-instance] canvas,
|
|
div[_echarts_instance_] canvas {
|
|
filter: drop-shadow(0 0 5px rgba(6, 182, 212, 0.16));
|
|
}
|
|
|
|
::-webkit-scrollbar-track { background: rgba(10, 14, 23, 0.72); }
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg, rgba(6, 182, 212, 0.72), rgba(168, 85, 247, 0.58));
|
|
border: 2px solid rgba(10, 14, 23, 0.82);
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 8px rgba(6, 182, 212, 0.24);
|
|
}
|
|
|
|
.login,
|
|
.register {
|
|
position: relative;
|
|
isolation: isolate;
|
|
padding: 24px;
|
|
background-color: #0a0e17 !important;
|
|
background-image:
|
|
linear-gradient(105deg, rgba(3, 6, 14, 0.88), rgba(10, 14, 23, 0.76) 54%, rgba(40, 20, 68, 0.7)),
|
|
repeating-linear-gradient(180deg, rgba(103, 232, 249, 0.018) 0, rgba(103, 232, 249, 0.018) 1px, transparent 1px, transparent 5px),
|
|
url("../images/login-background.jpg") !important;
|
|
background-position: center;
|
|
background-size: cover, auto, cover;
|
|
}
|
|
|
|
.login::before,
|
|
.register::before {
|
|
display: none !important;
|
|
}
|
|
|
|
.login .login-form,
|
|
.register .register-form {
|
|
width: min(400px, 100%);
|
|
padding: 30px 34px 16px;
|
|
-webkit-backdrop-filter: blur(24px) saturate(135%);
|
|
backdrop-filter: blur(24px) saturate(135%);
|
|
background: linear-gradient(145deg, rgba(6, 182, 212, 0.06), rgba(168, 85, 247, 0.045)), rgba(10, 14, 23, 0.84) !important;
|
|
border: 1px solid rgba(6, 182, 212, 0.38);
|
|
border-radius: 8px !important;
|
|
box-shadow: 0 26px 80px rgba(0, 0, 0, 0.52), 0 0 32px rgba(6, 182, 212, 0.12), 0 0 42px rgba(168, 85, 247, 0.08);
|
|
}
|
|
|
|
.login .title,
|
|
.register .title {
|
|
color: rgba(255, 255, 255, 0.92) !important;
|
|
text-shadow: 0 0 18px rgba(6, 182, 212, 0.22);
|
|
}
|
|
|
|
.login .el-login-footer,
|
|
.register .el-register-footer {
|
|
color: rgba(203, 213, 225, 0.62) !important;
|
|
letter-spacing: 0 !important;
|
|
}
|
|
}
|
|
|
|
@keyframes cyber-scan {
|
|
0% { transform: translateY(0); opacity: 0; }
|
|
8% { opacity: 0.44; }
|
|
82% { opacity: 0.26; }
|
|
100% { transform: translateY(calc(100vh - 104px)); opacity: 0; }
|
|
}
|
|
|
|
@keyframes cyber-pulse {
|
|
0%, 100% { opacity: 0.78; filter: brightness(0.95); }
|
|
50% { opacity: 1; filter: brightness(1.3); }
|
|
}
|
|
|
|
@keyframes cyber-marker-pulse {
|
|
0%, 100% { opacity: 0.82; filter: brightness(0.94); }
|
|
50% { opacity: 1; filter: brightness(1.28); }
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
html.dark .login,
|
|
html.dark .register { padding: 20px; }
|
|
html.dark .login .login-form,
|
|
html.dark .register .register-form { padding: 28px 24px 12px; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html.dark .app-main::before,
|
|
html.dark .state-dot,
|
|
html.dark .task-status-dot,
|
|
html.dark .status-dot,
|
|
html.dark .el-badge__content.is-dot,
|
|
html.dark .control-point { animation: none; }
|
|
}
|