/* ========== Shared Design Tokens ========== */ :root { /* 基准字号 — rem 换算基准 */ font-size: 16px; /* 字体族 */ --font-family-base: "PingFang SC", "Source Han Sans", "Noto Sans SC", sans-serif; --font-family-display: "OPPOSans", var(--font-family-base); --font-family-din: "D-DIN", "DIN Alternate", "Arial Narrow", sans-serif; /* 通用色彩 */ --bg-page: #050D18; --chart-2: #00FFEE; --icon-white: #FFFFFF; --text-primary: #F3F8FE; --text-primary-alt: #FFFFFF; --text-secondary: #B2BECC; --text-muted: rgba(255, 255, 255, 0.8); --text-placeholder: #A8ABB2; --mask-light: rgba(0, 0, 0, 0.6); --theme-selected: rgba(27, 126, 242, 0.5); --theme-hover: rgba(27, 126, 242, 0.25); --func-error: #FF3838; --fill-base: #FFFFFF; --color-focus-ring: #04DEFF; --accent-cyan: #00F0FF; --accent-blue: #00B0F3; /* 面板 / 标签 / 操作区（主控台） */ --panel-bg: #071927; --panel-header-bg: linear-gradient(270deg, rgba(2, 39, 65, 0) 0%, #135B8D 51%, rgba(2, 39, 65, 0) 100%); --panel-header-border: linear-gradient(270deg, rgba(30, 59, 82, 0) 0%, #008FFF 50%, rgba(30, 59, 82, 0) 100%); --panel-stroke: linear-gradient(180deg, #1E3B52 0%, rgba(30, 59, 82, 0) 100%); --panel-accent: #008FFF; --row-bg: linear-gradient(270deg, rgba(0, 143, 255, 0) 0%, rgba(0, 143, 255, 0.2) 100%); --tag-error-bg: #330B0B; --tag-error-border: #7F1C1C; --tag-working-bg: #062A2A; --tag-working-border: #0A6B6B; --tag-working-text: #00FFEE; --tag-idle-bg: #0B1F33; --tag-idle-border: #1E4A73; --tag-idle-text: #B2BECC; --op-tab-bg: linear-gradient(270deg, rgba(0, 4, 8, 0.6627) -8%, #0073C5 108%); --op-tab-highlight: linear-gradient(180deg, #7DBCFF 0%, rgba(125, 188, 255, 0) 100%); --log-info-bg: linear-gradient(270deg, rgba(27, 126, 242, 0) 0%, rgba(27, 126, 242, 0.3) 100%); --log-danger-bg: linear-gradient(270deg, rgba(242, 27, 27, 0) 0%, rgba(242, 27, 27, 0.3) 100%); --log-success-bg: linear-gradient(270deg, rgba(25, 202, 84, 0) 0%, rgba(25, 202, 84, 0.3) 100%); /* 间距 */ --space-2: 0.125rem; --space-4: 0.25rem; --space-8: 0.5rem; --space-10: 0.625rem; --space-12: 0.75rem; --space-14: 0.875rem; --space-16: 1rem; --space-24: 1.5rem; /* 布局画布（1920×1080 → rem） */ --layout-canvas-width: 120rem; --layout-canvas-min-height: 67.5rem; --layout-sidebar-width: 18.75rem; --layout-panel-width: 18.75rem; /* 字号 */ --font-size-12: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem); --font-size-14: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); --font-size-16: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem); --font-size-18: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --font-size-20: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); --font-size-title: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); --line-height-12: 1.667; --line-height-14: 1.571; --line-height-16: 1.5; --line-height-18: 1.444; --line-height-20: 1.4; --line-height-title: 1.2; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-12: var(--font-weight-regular) var(--font-size-12)/var(--line-height-12) var(--font-family-base); --font-14: var(--font-weight-regular) var(--font-size-14)/var(--line-height-14) var(--font-family-base); --font-14-medium: var(--font-weight-medium) var(--font-size-14)/var(--line-height-14) var(--font-family-base); --font-16: var(--font-weight-regular) var(--font-size-16)/var(--line-height-16) var(--font-family-base); --font-16-medium: var(--font-weight-medium) var(--font-size-16)/var(--line-height-16) var(--font-family-base); --font-18-medium: var(--font-weight-medium) var(--font-size-18)/var(--line-height-18) var(--font-family-base); --font-20: var(--font-weight-regular) var(--font-size-20)/var(--line-height-20) var(--font-family-base); --font-title: var(--font-weight-bold) var(--font-size-title)/var(--line-height-title) var(--font-family-base); --font-12-pf: var(--font-weight-regular) var(--font-size-12)/var(--line-height-12) var(--font-family-base); --font-oppo-16: var(--font-weight-bold) var(--font-size-16)/var(--line-height-16) var(--font-family-display); --font-oppo-14: var(--font-weight-bold) var(--font-size-14)/var(--line-height-14) var(--font-family-display); --font-oppo-16-22: var(--font-weight-bold) var(--font-size-16)/1.375 var(--font-family-display); --font-welcome: 500 1.75rem/2rem var(--font-family-base); --font-clock-time: 700 1.5rem/2.5rem var(--font-family-din); --font-clock-date: 400 0.875rem/2.5rem var(--font-family-din); --blur-bg: blur(0.5rem); /* 下拉 */ --dropdown-bg: linear-gradient(180deg, rgba(5, 25, 48, 0.7) 0%, rgba(1, 6, 12, 0.7) 100%); --dropdown-border: #104C91; --dropdown-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 4px 10px 0 rgba(0, 0, 0, 0.302), 0 8px 10px 1px rgba(0, 0, 0, 0.06); --dropdown-blur: blur(5px); --dropdown-radius: 6px; --dropdown-item-radius: 4px; --dropdown-width: 9.875rem; --dropdown-item-width: 8.375rem; --dropdown-item-height: 2rem; /* 登录页专属（默认值，登录页可覆盖） */ --login-input-bg: #051630; --login-input-border: #0E3877; --login-btn-fill: linear-gradient(180deg, #327EF0 0%, #0E3877 97%); --login-btn-stroke: linear-gradient(180deg, #76A9F5 0%, #0B2D5F 100%); --login-card-bg: linear-gradient(180deg, rgba(7, 5, 6, 0.3) 2%, rgba(27, 112, 238, 0.24) 100%); --login-card-border: linear-gradient(180deg, #76A9F5 0%, rgba(0, 0, 0, 0) 100%); /* 项目页卡片 */ --card-bg: linear-gradient(180deg, #001B2F 0%, #006BB6 100%); --card-stroke: linear-gradient(270deg, rgba(18, 111, 146, 0) 0%, #00E5FF 50%, rgba(18, 111, 146, 0) 100%); --create-card-bg: #082C47; /* 主题切换辅助（深色默认） */ --body-bg: #0a0a0a; --panel-border: transparent; --panel-radius: 0; --btn-action-bg: transparent; --btn-action-radius: 0; --win-controls-fill: rgba(27, 126, 242, 0.25); --surface-text: #FFFFFF; --nav-text: #FFFFFF; --nav-icon: #FFFFFF; --panel-title-shadow: 0 0 0.625rem #001E1C; } /* 浅色主题 — MasterGo「浅色版本」233:04351 https://mastergo.com/prototype/165527077324461?pageId=232:4089&layerId=233:04351 */ html[data-theme="light"] { --bg-page: linear-gradient(165deg, #f7fafd 0%, #eef3f9 52%, #f8fbff 100%); --body-bg: #f3f6fa; --chart-2: #13c2c2; --icon-white: #ffffff; --text-primary: #2c333a; --text-primary-alt: #2c333a; --text-secondary: #8a93a0; --text-muted: #6b7380; --text-placeholder: #a8abb2; --mask-light: rgba(15, 23, 42, 0.45); --theme-selected: rgba(22, 119, 255, 0.16); --theme-hover: rgba(22, 119, 255, 0.08); --func-error: #e85a5a; --fill-base: #ffffff; --color-focus-ring: #1677ff; --accent-cyan: #3db8e8; --accent-blue: #1677ff; --panel-bg: #ffffff; --panel-bg-soft: #f6f8fb; --panel-header-bg: linear-gradient(270deg, #8ec4f8 0%, #2f7efe 100%); --panel-header-shine: linear-gradient(8deg, #88cafe 11%, rgba(136, 202, 254, 0) 33%); --panel-header-border: transparent; --panel-title-shadow: none; --panel-stroke: #e8eef4; --panel-accent: #2f7efe; --panel-border: #e6ecf2; --panel-radius: 10px; --row-bg: #f5f8fc; --tag-error-bg: #fff1f0; --tag-error-border: #ffa39e; --tag-working-bg: #e6fffb; --tag-working-border: #87e8de; --tag-working-text: #13c2c2; --tag-idle-bg: #f4f6f8; --tag-idle-border: #e4e8ee; --tag-idle-text: #5c6570; --op-tab-bg: linear-gradient(180deg, #5b97ef 0%, #1677ff 100%); --op-tab-highlight: linear-gradient(180deg, #9bb5ff 0%, rgba(155, 181, 255, 0) 100%); --log-info-bg: #f3f8ff; --log-danger-bg: #fff5f5; --log-success-bg: #f3fbf6; --dropdown-bg: #ffffff; --dropdown-border: #e6ecf2; --dropdown-shadow: 0 8px 24px rgba(15, 35, 70, 0.08), 0 2px 6px rgba(15, 35, 70, 0.04); --dropdown-blur: blur(0px); --btn-action-bg: linear-gradient(180deg, #5b97ef 0%, #1677ff 100%); --btn-action-radius: 8px; --win-controls-fill: #1677ff; --surface-text: #2c333a; --nav-text: #2c333a; --nav-icon: #ffffff; --login-input-bg: #ffffff; --login-input-border: #d9e2ec; --login-btn-fill: linear-gradient(180deg, #5b97ef 0%, #1677ff 97%); --card-bg: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%); --card-stroke: linear-gradient(270deg, rgba(47, 126, 254, 0) 0%, #7aa8f0 50%, rgba(47, 126, 254, 0) 100%); --create-card-bg: #f5f8fc; }