diff --git a/src/assets/styles/cyber-theme.scss b/src/assets/styles/cyber-theme.scss index 49c7044..9e0952e 100644 --- a/src/assets/styles/cyber-theme.scss +++ b/src/assets/styles/cyber-theme.scss @@ -351,3 +351,602 @@ html.dark { html.dark .el-badge__content.is-dot, html.dark .control-point { animation: none; } } + +/* Global CMVR NEXUS shell. These selectors intentionally live outside the + * dark-mode scope so a stored light-mode preference still receives the same + * cyberpunk product language. */ +:root { + color-scheme: dark; + --main-fill-bg: #070b14; + --surface-0: rgba(16, 23, 39, 0.9); + --surface-1: rgba(21, 31, 52, 0.92); + --surface-2: rgba(29, 42, 68, 0.94); + --line-subtle: rgba(34, 211, 238, 0.2); + --el-bg-color-page: #070b14; + --el-bg-color: #101727; + --el-bg-color-overlay: #151f34; + --el-fill-color-blank: #101727; + --el-fill-color: rgba(25, 38, 62, 0.92); + --el-fill-color-light: rgba(35, 52, 82, 0.82); + --el-fill-color-lighter: rgba(41, 60, 92, 0.62); + --el-color-primary: #22d3ee; + --el-color-primary-light-3: #67e8f9; + --el-color-primary-light-5: #a5f3fc; + --el-color-primary-light-9: rgba(34, 211, 238, 0.12); + --el-color-success: #34d399; + --el-color-warning: #fbbf24; + --el-color-danger: #fb7185; + --el-text-color-primary: rgba(241, 248, 255, 0.94); + --el-text-color-regular: rgba(211, 225, 242, 0.78); + --el-text-color-secondary: rgba(170, 192, 219, 0.62); + --el-text-color-placeholder: rgba(143, 169, 200, 0.5); + --el-border-color: rgba(34, 211, 238, 0.28); + --el-border-color-light: rgba(34, 211, 238, 0.2); + --el-border-color-lighter: rgba(109, 139, 177, 0.2); + --el-border-color-extra-light: rgba(109, 139, 177, 0.14); + --el-box-shadow-light: 0 14px 36px rgba(0, 0, 0, 0.34), 0 0 18px rgba(34, 211, 238, 0.08); + --sidebar-bg: rgba(7, 11, 20, 0.94); + --sidebar-text: rgba(211, 225, 242, 0.72); + --sidebar-logo-text: rgba(241, 248, 255, 0.95); + --navbar-bg: rgba(7, 11, 20, 0.78); + --navbar-text: rgba(211, 225, 242, 0.76); + --tags-bg: rgba(7, 11, 20, 0.72); + --tags-item-bg: rgba(16, 23, 39, 0.88); + --tags-item-border: rgba(34, 211, 238, 0.2); + --tags-item-text: rgba(211, 225, 242, 0.7); + --tags-item-hover: rgba(34, 211, 238, 0.12); + --tags-close-hover: rgba(244, 114, 182, 0.6); +} + +html.dark { + --main-fill-bg: #070b14; + --el-bg-color-page: #070b14; + --el-bg-color: #101727; + --el-bg-color-overlay: #151f34; +} + +html, +body, +#app { + min-height: 100%; + background: #070b14; +} + +body { + color: var(--el-text-color-primary); + background-image: + linear-gradient(rgba(34, 211, 238, 0.025) 1px, transparent 1px), + linear-gradient(90deg, rgba(34, 211, 238, 0.025) 1px, transparent 1px), + radial-gradient(circle at 82% 4%, rgba(168, 85, 247, 0.12), transparent 32%), + radial-gradient(circle at 5% 90%, rgba(34, 211, 238, 0.07), transparent 28%); + background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%; +} + +.app-wrapper { + isolation: isolate; + overflow: hidden; + background: transparent !important; +} + +.app-wrapper::before { + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + content: ""; + background: linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px), linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px); + background-size: 88px 88px; + mask-image: linear-gradient(to bottom, black, transparent 90%); +} + +.cyber-scanline { + position: fixed; + top: 0; + left: 0; + z-index: 1200; + width: 100%; + height: 1px; + pointer-events: none; + background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.7), rgba(244, 114, 182, 0.45), transparent); + box-shadow: 0 0 14px rgba(34, 211, 238, 0.42); + animation: cyber-scanline 12s linear infinite; +} + +.cyber-corner { + position: fixed; + z-index: 1100; + width: 82px; + height: 82px; + pointer-events: none; + opacity: 0.72; +} + +.cyber-corner::before, +.cyber-corner::after { + position: absolute; + content: ""; + background: #22d3ee; + box-shadow: 0 0 10px rgba(34, 211, 238, 0.65); +} + +.cyber-corner--top { top: 16px; right: 18px; border-top: 1px solid rgba(34, 211, 238, 0.25); border-right: 1px solid rgba(34, 211, 238, 0.25); } +.cyber-corner--top::before { top: -1px; right: 0; width: 28px; height: 2px; } +.cyber-corner--top::after { top: 0; right: -1px; width: 2px; height: 28px; } +.cyber-corner--bottom { right: 18px; bottom: 16px; border-right: 1px solid rgba(244, 114, 182, 0.26); border-bottom: 1px solid rgba(244, 114, 182, 0.26); } +.cyber-corner--bottom::before { right: -1px; bottom: 0; width: 28px; height: 2px; background: #f472b6; box-shadow: 0 0 10px rgba(244, 114, 182, 0.65); } +.cyber-corner--bottom::after { right: -1px; bottom: 0; width: 2px; height: 28px; background: #f472b6; box-shadow: 0 0 10px rgba(244, 114, 182, 0.65); } + +.main-container { background: transparent !important; } + +.app-main { + background: transparent !important; + padding: 26px 30px 30px !important; +} + +.fixed-header + .app-main { padding-top: 78px !important; } +.hasTagsView .fixed-header + .app-main { padding-top: 118px !important; } + +.app-container { + position: relative; + padding: 22px !important; + overflow: hidden; + background: linear-gradient(145deg, rgba(16, 23, 39, 0.92), rgba(12, 19, 34, 0.84)) !important; + border: 1px solid rgba(34, 211, 238, 0.2) !important; + border-radius: 8px !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 44px rgba(0, 0, 0, 0.2) !important; +} + +.app-container::before, +.el-card::before { + position: absolute; + top: 0; + left: 18px; + width: 46px; + height: 2px; + content: ""; + background: #22d3ee; + box-shadow: 0 0 12px rgba(34, 211, 238, 0.8); +} + +.el-card, +.el-dialog, +.el-drawer, +.el-popover, +.el-dropdown-menu { + position: relative; + color: var(--el-text-color-primary); + background: linear-gradient(145deg, rgba(19, 29, 48, 0.96), rgba(14, 22, 38, 0.94)) !important; + border: 1px solid rgba(34, 211, 238, 0.2) !important; + border-radius: 7px !important; + box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28), 0 0 20px rgba(34, 211, 238, 0.06) !important; +} + +.el-card__header, +.el-dialog__header, +.el-drawer__header { + color: var(--el-text-color-primary) !important; + background: rgba(34, 211, 238, 0.035) !important; + border-bottom-color: rgba(34, 211, 238, 0.16) !important; +} + +.el-card__body { color: var(--el-text-color-regular); } + +.el-button { + border-radius: 4px !important; + font-family: inherit; + letter-spacing: 0.02em; +} + +.el-button--primary { + color: #06131a !important; + background: linear-gradient(105deg, #22d3ee, #a78bfa) !important; + border-color: #67e8f9 !important; + box-shadow: 0 0 18px rgba(34, 211, 238, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.36) !important; +} + +.el-button--primary:hover, +.el-button--primary:focus { background: linear-gradient(105deg, #67e8f9, #c4b5fd) !important; box-shadow: 0 0 24px rgba(34, 211, 238, 0.34) !important; } +.el-button:not([class*="el-button--"]) { color: var(--el-text-color-regular); background: rgba(26, 41, 66, 0.58); border-color: rgba(109, 139, 177, 0.3); } +.el-button:not([class*="el-button--"]):hover { color: var(--el-color-primary-light-3); border-color: rgba(34, 211, 238, 0.55); background: rgba(34, 211, 238, 0.1); } + +.el-input__wrapper, +.el-textarea__inner, +.el-select .el-input__wrapper, +.el-date-editor.el-input__wrapper { + color: var(--el-text-color-primary) !important; + background: rgba(8, 15, 28, 0.72) !important; + border: 1px solid rgba(109, 139, 177, 0.28) !important; + box-shadow: inset 0 0 0 1px transparent, 0 0 0 transparent !important; +} + +.el-input__wrapper:hover, +.el-input__wrapper.is-focus, +.el-textarea__inner:focus { border-color: rgba(34, 211, 238, 0.68) !important; box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.18), 0 0 16px rgba(34, 211, 238, 0.1) !important; } +.el-input__inner, +.el-textarea__inner { color: var(--el-text-color-primary) !important; } + +.el-table { + color: var(--el-text-color-regular) !important; + background: rgba(10, 17, 30, 0.5) !important; + --el-table-header-bg-color: rgba(34, 211, 238, 0.07); + --el-table-tr-bg-color: transparent; + --el-table-row-hover-bg-color: rgba(34, 211, 238, 0.08); + --el-table-border-color: rgba(109, 139, 177, 0.18); +} + +.el-table th.el-table__cell { color: #a5f3fc !important; background: rgba(34, 211, 238, 0.08) !important; border-bottom-color: rgba(34, 211, 238, 0.24) !important; font-family: "JetBrains Mono", Consolas, monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } +.el-table td.el-table__cell { border-bottom-color: rgba(109, 139, 177, 0.14) !important; } +.el-table__body tr:hover > td.el-table__cell { background: rgba(34, 211, 238, 0.08) !important; } + +.el-tag { border-radius: 3px !important; font-family: "JetBrains Mono", Consolas, monospace; font-size: 11px; } +.el-tabs__item { color: var(--el-text-color-secondary); } +.el-tabs__item.is-active, +.el-tabs__item:hover { color: var(--el-color-primary-light-3); } +.el-tabs__active-bar { background: linear-gradient(90deg, #22d3ee, #f472b6) !important; box-shadow: 0 0 10px rgba(34, 211, 238, 0.5); } + +.el-pagination { --el-pagination-bg-color: transparent; --el-pagination-text-color: var(--el-text-color-secondary); --el-pagination-button-bg-color: rgba(16, 26, 44, 0.8); --el-pagination-hover-color: #67e8f9; } +.el-pagination button, +.el-pagination .el-pager li { border: 1px solid rgba(109, 139, 177, 0.2); border-radius: 3px; } +.el-pagination .el-pager li.is-active { color: #06131a; background: #22d3ee; border-color: #67e8f9; box-shadow: 0 0 12px rgba(34, 211, 238, 0.4); } + +.el-form-item__label { color: var(--el-text-color-secondary) !important; } +.el-checkbox__label, +.el-radio__label { color: var(--el-text-color-regular) !important; } +.el-switch.is-checked .el-switch__core { background: #22d3ee !important; border-color: #67e8f9 !important; box-shadow: 0 0 12px rgba(34, 211, 238, 0.45); } + +.el-breadcrumb__inner, +.el-breadcrumb__separator { color: var(--el-text-color-secondary) !important; } +.el-breadcrumb__inner.is-link:hover { color: var(--el-color-primary-light-3) !important; } + +.navbar { + border-bottom: 1px solid rgba(34, 211, 238, 0.22) !important; + background: rgba(7, 11, 20, 0.78) !important; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24), 0 1px 18px rgba(34, 211, 238, 0.08) !important; +} + +.sidebar-container { + border-right: 1px solid rgba(34, 211, 238, 0.22) !important; + background: rgba(7, 11, 20, 0.94) !important; + box-shadow: 10px 0 40px rgba(0, 0, 0, 0.32), 1px 0 18px rgba(34, 211, 238, 0.08) !important; +} + +.sidebar-container .el-menu-item, +.sidebar-container .el-sub-menu__title { + min-height: 46px !important; + margin: 4px 10px !important; + border: 1px solid transparent; + border-radius: 4px !important; + color: var(--sidebar-text) !important; + font-family: "JetBrains Mono", Consolas, monospace; + font-size: 12px; + letter-spacing: 0.02em; + transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; +} + +.sidebar-container .el-menu-item:hover, +.sidebar-container .el-sub-menu__title:hover { + color: #a5f3fc !important; + background: rgba(34, 211, 238, 0.08) !important; + border-color: rgba(34, 211, 238, 0.22) !important; +} + +.sidebar-container .el-menu-item.is-active { + color: #06131a !important; + background: linear-gradient(100deg, #22d3ee, #a78bfa) !important; + border-color: rgba(103, 232, 249, 0.8) !important; + box-shadow: 0 0 18px rgba(34, 211, 238, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.28); +} + +.sidebar-container .el-menu-item.is-active .svg-icon, +.sidebar-container .el-menu-item.is-active .menu-title { color: #06131a !important; } + +.sidebar-logo-container { + height: 78px !important; + line-height: 78px !important; + text-align: left !important; + padding: 0 18px; + border-bottom: 1px solid rgba(34, 211, 238, 0.2) !important; + background: linear-gradient(140deg, rgba(34, 211, 238, 0.08), transparent 72%) !important; +} + +.sidebar-container.has-logo .el-scrollbar { height: calc(100% - 78px) !important; } + +.sidebar-logo-container .sidebar-logo-link { display: flex !important; align-items: center; } +.sidebar-logo-container .sidebar-logo { width: 36px !important; height: 36px !important; margin-right: 12px !important; filter: drop-shadow(0 0 9px rgba(34, 211, 238, 0.6)); } +.sidebar-logo-container .sidebar-title { color: var(--el-text-color-primary) !important; font-family: "JetBrains Mono", Consolas, monospace !important; font-size: 13px !important; letter-spacing: 0.08em; } +.hideSidebar .sidebar-logo-container { padding: 0 !important; } +.hideSidebar .sidebar-logo-container .sidebar-logo-link { justify-content: center; } +.hideSidebar .sidebar-logo-container .sidebar-logo { margin-right: 0 !important; } + +.tags-view-container { + height: 42px !important; + background: rgba(7, 11, 20, 0.72) !important; + border-bottom-color: rgba(34, 211, 238, 0.17) !important; +} + +.tags-view-container .tags-view-item { height: 28px !important; line-height: 26px !important; color: var(--el-text-color-secondary) !important; background: rgba(16, 26, 44, 0.82) !important; border-color: rgba(109, 139, 177, 0.22) !important; border-radius: 3px !important; } +.tags-view-container .tags-view-item.active { color: #06131a !important; background: linear-gradient(100deg, #22d3ee, #a78bfa) !important; border-color: #67e8f9 !important; box-shadow: 0 0 14px rgba(34, 211, 238, 0.28); } + +.home-dashboard .hero-panel { + border: 1px solid rgba(34, 211, 238, 0.42); + border-radius: 8px; + box-shadow: 0 24px 58px rgba(0, 0, 0, 0.38), 0 0 30px rgba(34, 211, 238, 0.12); +} + +.home-dashboard .hero-panel::after { + position: absolute; + right: 22px; + bottom: 18px; + width: 180px; + height: 42px; + content: "01 // READY 02 // SYNC 03 // DEPLOY"; + color: rgba(165, 243, 252, 0.5); + font-family: "JetBrains Mono", Consolas, monospace; + font-size: 9px; + letter-spacing: 0.08em; + line-height: 1.5; + text-align: right; +} + +.home-dashboard .hero-content h1 { text-shadow: 0 0 22px rgba(34, 211, 238, 0.22); } +.home-dashboard .section-kicker { font-family: "JetBrains Mono", Consolas, monospace; letter-spacing: 0.14em; text-shadow: 0 0 12px rgba(34, 211, 238, 0.44); } +.home-dashboard .metric-card, +.home-dashboard .dashboard-panel { border-color: rgba(34, 211, 238, 0.22) !important; background: linear-gradient(145deg, rgba(20, 31, 52, 0.94), rgba(13, 22, 38, 0.9)) !important; } +.home-dashboard .metric-card:hover, +.home-dashboard .dashboard-panel:hover { border-color: rgba(103, 232, 249, 0.58) !important; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3), 0 0 22px rgba(34, 211, 238, 0.12) !important; } +.home-dashboard .metric-icon { border: 1px solid rgba(34, 211, 238, 0.24); box-shadow: inset 0 0 18px rgba(34, 211, 238, 0.08); } +.home-dashboard .task-list { padding: 0 !important; background: transparent !important; border: 0 !important; } + +.contextmenu { color: var(--el-text-color-regular) !important; background: #111b2e !important; border-color: rgba(34, 211, 238, 0.3) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4) !important; } +.contextmenu li:hover { color: #67e8f9; background: rgba(34, 211, 238, 0.1) !important; } + +.login, +.register { + position: relative; + isolation: isolate; + background-color: #070b14 !important; + background-image: linear-gradient(105deg, rgba(5, 10, 20, 0.88), rgba(7, 11, 20, 0.72) 50%, rgba(37, 16, 63, 0.72)), repeating-linear-gradient(180deg, rgba(103, 232, 249, 0.02) 0, rgba(103, 232, 249, 0.02) 1px, transparent 1px, transparent 5px), url("../images/login-background.jpg") !important; + background-size: cover, auto, cover; + justify-content: flex-end !important; + padding: 42px clamp(42px, 9vw, 150px) 42px 48px; +} + +.login::before, +.register::before { display: none !important; } + +.login::after, +.register::after { + position: absolute; + inset: 24px; + z-index: -1; + pointer-events: none; + content: "SYSTEM ACCESS // AUTHORIZATION REQUIRED"; + color: rgba(103, 232, 249, 0.3); + font-family: "JetBrains Mono", Consolas, monospace; + font-size: 10px; + letter-spacing: 0.16em; +} + +.login .login-form, +.register .register-form { + width: min(410px, calc(100% - 32px)) !important; + padding: 34px 34px 18px !important; + background: linear-gradient(145deg, rgba(34, 211, 238, 0.08), rgba(167, 139, 250, 0.06)), rgba(10, 17, 30, 0.9) !important; + border: 1px solid rgba(34, 211, 238, 0.42) !important; + border-radius: 7px !important; + box-shadow: 0 28px 90px rgba(0, 0, 0, 0.6), 0 0 34px rgba(34, 211, 238, 0.14) !important; +} + +.access-brand { + position: absolute; + top: 50%; + left: clamp(48px, 8vw, 136px); + width: min(560px, 44vw); + transform: translateY(-50%); + color: var(--el-text-color-primary); +} + +.access-state, +.access-code, +.access-metrics, +.form-kicker { + font-family: "JetBrains Mono", Consolas, monospace; + letter-spacing: 0.1em; +} + +.access-state { + display: inline-flex; + align-items: center; + gap: 9px; + margin-bottom: 32px; + color: #34d399; + font-size: 10px; +} + +.access-state span { + width: 7px; + height: 7px; + border-radius: 50%; + background: #34d399; + box-shadow: 0 0 14px rgba(52, 211, 153, 0.8); + animation: cyber-pulse 2.4s ease-in-out infinite; +} + +.access-code { margin: 0 0 12px; color: #67e8f9; font-size: 11px; } +.access-brand h1 { margin: 0; color: rgba(241, 248, 255, 0.96); font-size: clamp(48px, 6.2vw, 88px); font-weight: 300; line-height: 0.9; text-shadow: 0 0 30px rgba(34, 211, 238, 0.16); } +.access-brand h1 strong { color: transparent; font-weight: 800; -webkit-text-stroke: 1px rgba(165, 243, 252, 0.9); text-shadow: 0 0 24px rgba(34, 211, 238, 0.18); } +.access-description { max-width: 520px; margin: 28px 0; color: rgba(211, 225, 242, 0.64); font-size: 14px; line-height: 1.8; } +.access-metrics { display: flex; gap: 22px; color: rgba(165, 243, 252, 0.42); font-size: 9px; } +.form-kicker { margin-bottom: 12px; color: rgba(103, 232, 249, 0.62); font-size: 9px; } + +.login .title, +.register .title { color: var(--el-text-color-primary) !important; font-family: "JetBrains Mono", Consolas, monospace; letter-spacing: 0.05em; text-shadow: 0 0 18px rgba(34, 211, 238, 0.38); } +.login .el-login-footer, +.register .el-register-footer { color: rgba(170, 192, 219, 0.56) !important; font-family: "JetBrains Mono", Consolas, monospace; letter-spacing: 0.08em !important; } + +@keyframes cyber-scanline { + 0% { transform: translateY(0); opacity: 0; } + 10% { opacity: 0.72; } + 90% { opacity: 0.2; } + 100% { transform: translateY(100vh); opacity: 0; } +} + +@media (max-width: 1100px) { + .login, + .register { justify-content: center !important; padding: 28px; } + .access-brand { display: none; } +} + +@media (max-width: 768px) { + .app-main { padding: 18px !important; } + .fixed-header + .app-main, + .hasTagsView .fixed-header + .app-main { padding-top: 72px !important; } + .cyber-corner { display: none; } + .login, + .register { justify-content: center !important; padding: 20px; } + .access-brand { display: none; } +} + +@media (prefers-reduced-motion: reduce) { + .cyber-scanline, + .access-state span { animation: none; } +} + +/* Legacy business surfaces that still carry light-mode literals in their + * scoped component styles. Keep their data and interaction untouched while + * bringing the rendered surfaces into the NEXUS shell. */ +.tree-sidebar, +.tree-panel, +.tree-container, +.category-tree, +.corpus-list, +.task-list, +.right-panel, +.left-panel, +.status-strip, +.robot-container, +.head-control, +.microphone-container, +.audio-player, +.page-container > .left, +.page-container > .right, +.evaluation-metrics > .left, +.evaluation-metrics > .right, +.schemaList, +.info, +.btn-container { + color: var(--el-text-color-regular) !important; + background: linear-gradient(145deg, rgba(19, 29, 48, 0.94), rgba(12, 20, 35, 0.9)) !important; + border-color: rgba(34, 211, 238, 0.2) !important; +} + +.tree-header, +.collapse-button-container, +.task-item, +.task, +.schema, +.preset-panel, +.current-display, +.speaker-container, +.audioItem, +.audio-item, +.voice-btn, +.output-row, +.queue-step, +.input__container, +.condition-summary, +.condition-summary__item { + color: var(--el-text-color-regular) !important; + background: rgba(21, 31, 52, 0.92) !important; + border-color: rgba(109, 139, 177, 0.22) !important; +} + +.tree-node, +.node-label, +.task-title, +.notice-title, +.notice-item-title, +.flow-heading__name, +.node-name, +.title_container, +.subTitle { color: var(--el-text-color-primary) !important; } + +.tree-wrap .el-tree-node__content:hover, +.task-item:hover, +.task:hover, +.schema:hover, +.audio-item:hover, +.notice-item:hover { background: rgba(34, 211, 238, 0.1) !important; } + +.flow-node-card, +.node__container, +.node__box, +.group__container, +.outer-node, +.component-library, +.library-header, +.single-node-station-tools, +.custom-table, +.popup-main, +.popup-result { + color: var(--el-text-color-regular) !important; + background: rgba(16, 25, 43, 0.94) !important; + border-color: rgba(34, 211, 238, 0.2) !important; +} + +.flow-node-card input, +.flow-node-card textarea, +.node__box input, +.node__box textarea, +.custom-table input, +.custom-table textarea { color: var(--el-text-color-primary) !important; background: rgba(7, 14, 26, 0.72) !important; border-color: rgba(109, 139, 177, 0.28) !important; } + +.notice-popover .notice-header, +.notice-popover .notice-item { background: rgba(16, 25, 43, 0.96) !important; border-color: rgba(34, 211, 238, 0.16) !important; color: var(--el-text-color-primary) !important; } +.notice-popover .notice-item-title { color: var(--el-text-color-primary) !important; } +.notice-popover .notice-item-date, +.notice-popover .notice-loading, +.notice-popover .notice-empty { color: var(--el-text-color-secondary) !important; } + +/* Flow designer chrome uses a self-contained Element layout and therefore + * needs an explicit shell treatment in addition to the generic card rules. */ +.page .page__container, +.page .page__container .container, +.page .page__container .el-main { background: #080f1d !important; } +.page .page__container .el-header { + color: var(--el-text-color-primary) !important; + background: linear-gradient(100deg, rgba(16, 28, 48, 0.98), rgba(10, 18, 33, 0.96)) !important; + border-bottom-color: rgba(34, 211, 238, 0.28) !important; +} +.page .page__container .el-aside { + color: var(--el-text-color-regular) !important; + background: rgba(12, 21, 37, 0.98) !important; + border-right-color: rgba(34, 211, 238, 0.2) !important; +} +.page .page__container .canvas-toolbar, +.page .page__container .vue-flow__controls { + color: var(--el-text-color-regular) !important; + background: rgba(13, 23, 40, 0.94) !important; + border-color: rgba(34, 211, 238, 0.32) !important; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38), 0 0 18px rgba(34, 211, 238, 0.1) !important; +} +.page .page__container .canvas-toolbar .el-button { color: var(--el-text-color-regular) !important; } +.page .page__container .canvas-toolbar .el-button:hover { color: #67e8f9 !important; background: rgba(34, 211, 238, 0.12) !important; } +.page .page__container .flow__container .vue-flow__background { background: #080f1d !important; } +.page .page__container .flow__container .vue-flow__edge-path, +.page .page__container .flow__container .vue-flow__connection-path { stroke: #22d3ee !important; filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.58)); } + +::-webkit-scrollbar { width: 7px; height: 7px; } +::-webkit-scrollbar-track { background: rgba(7, 11, 20, 0.72); } +::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(34, 211, 238, 0.72), rgba(167, 139, 250, 0.72)); border: 2px solid rgba(7, 11, 20, 0.82); border-radius: 4px; } + +.el-loading-mask { background: rgba(7, 11, 20, 0.78) !important; } +.el-loading-spinner .path { stroke: #22d3ee !important; } +.el-message-box { background: #111b2e !important; border-color: rgba(34, 211, 238, 0.34) !important; } +.el-message-box__title, +.el-message-box__message { color: var(--el-text-color-primary) !important; } + +@media (max-width: 560px) { + .sidebar-logo-container { padding: 0 14px; } + .sidebar-logo-container .sidebar-copy small { display: none; } +} diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index e806774..2aedd79 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -1,6 +1,12 @@