/* ==================== 主题系统 ==================== */ /* 亮色 / 暗黑 双主题，参考 VS Code 配色体系 */ /* 通过 触发暗黑模式，由 utils/theme.js 控制 */ /* ============ CSS 变量（亮色默认） ============ */ :root { /* 背景层（3 层体系） */ --bg-page: #f5f7fa; /* 页面最底层 */ --bg-card: #ffffff; /* 卡片/面板 */ --bg-elevated: #ffffff; /* 浮层/弹窗/下拉 */ --bg-hover: #f1f5f9; /* 微交互悬停 */ --bg-active: #e2e8f0; /* 选中/激活 */ /* 文字层级 */ --text-primary: #1f2937; /* 主文字 */ --text-secondary: #64748b; /* 次文字 */ --text-tertiary: #94a3b8; /* 弱文字/占位 */ --text-inverse: #ffffff; /* 反色文字 */ /* 边框 */ --border-color: #e2e8f0; /* 实色边框 */ --border-subtle: rgba(15, 23, 42, 0.06); /* 极淡虚边 */ /* 阴影 */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.10); /* 主题色 */ --accent: #1890ff; --accent-hover: #40a9ff; --accent-bg: rgba(24, 144, 255, 0.08); --accent-bg-hover: rgba(24, 144, 255, 0.14); /* 状态色 */ --success: #52c41a; --warning: #faad14; --error: #ff4d4f; /* 过渡 */ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ============ CSS 变量（暗黑模式） ============ */ /* 参考 VS Code Dark+ 配色，非纯黑，暖深灰基调 */ html.dark { /* 背景层 —— 每层差 3-4 级灰度，层次分明 */ --bg-page: #1a1b1d; /* 页面底（VS Code base） */ --bg-card: #222427; /* 卡片/面板 */ --bg-elevated: #2a2d31; /* 浮层/弹窗/下拉 */ --bg-hover: rgba(224, 226, 242, 0.05); /* 微交互悬停 */ --bg-active: rgba(224, 226, 242, 0.10); /* 选中/激活 */ /* 文字层级 —— 与 VS Code 一致 */ --text-primary: #d1d3db; /* 主文字 */ --text-secondary: #9599a6; /* 次文字 */ --text-tertiary: #666b75; /* 弱文字 */ --text-inverse: #0c0c0d; /* 反色文字 */ /* 边框 —— 半透明，比实色更柔和高级 */ --border-color: rgba(224, 226, 242, 0.13); --border-subtle: rgba(224, 226, 242, 0.06); /* 阴影 —— 更深但不浑浊 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55); /* 主题色 —— 稍提亮，暗黑下更醒目 */ --accent: #387bff; --accent-hover: #5a94ff; --accent-bg: rgba(56, 123, 255, 0.15); --accent-bg-hover: rgba(56, 123, 255, 0.25); /* 状态色 —— 暗黑下调饱和 */ --success: #33c192; --warning: #dc8730; --error: #f65a5a; } /* ============ 全局过渡动画 ============ */ /* 仅切换主题时启用过渡，避免普通 hover 等也跟着动画 */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ============ 全局背景与文字 ============ */ html.dark body, html.dark #app { background-color: var(--bg-page); color: var(--text-primary); } /* ============ Ant Design 全局覆盖 ============ */ /* Layout */ html.dark .ant-layout, html.dark .ant-layout-content, html.dark .ant-layout-footer { background-color: var(--bg-page) !important; color: var(--text-primary) !important; } html.dark .ant-layout-header { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-subtle) !important; } html.dark .ant-layout-sider, html.dark .ant-layout-sider-children { background-color: var(--bg-card) !important; /* border-right 只加在 sider 本体，不能同时加给 sider-children， 否则 sider-children 溢出父元素 1px，导致菜单项向右凸出 */ } html.dark .ant-layout-sider { border-right: 1px solid var(--border-subtle) !important; box-sizing: border-box !important; } html.dark .ant-layout-sider-children { box-sizing: border-box !important; overflow: hidden; } /* Menu */ html.dark .ant-menu { background-color: var(--bg-card) !important; color: var(--text-secondary) !important; } html.dark .ant-menu-item, html.dark .ant-menu-submenu-title { color: var(--text-secondary) !important; border-radius: 6px; margin: 2px 8px; } html.dark .ant-menu-item:hover, html.dark .ant-menu-submenu-title:hover { color: var(--text-primary) !important; background-color: var(--bg-hover) !important; } html.dark .ant-menu-item-selected { color: var(--accent) !important; background-color: var(--accent-bg) !important; } html.dark .ant-menu-item-selected .ant-menu-title-content, html.dark .ant-menu-item-selected .ant-menu-title-content a { color: var(--accent) !important; } /* Table */ html.dark .ant-table { background-color: var(--bg-card) !important; color: var(--text-primary) !important; } html.dark .ant-table-thead > tr > th { background-color: var(--bg-elevated) !important; color: var(--text-secondary) !important; border-bottom: 1px solid var(--border-color) !important; font-weight: 600 !important; } html.dark .ant-table-tbody > tr > td { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-subtle) !important; } html.dark .ant-table-tbody > tr:hover > td { background-color: var(--bg-hover) !important; } /* Card */ html.dark .ant-card { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle) !important; border-radius: 8px; } html.dark .ant-card-head { border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; } html.dark .ant-card-head-title { color: var(--text-primary) !important; font-weight: 600 !important; } /* Modal */ html.dark .ant-modal-content { background-color: var(--bg-card) !important; border-radius: 10px; box-shadow: var(--shadow-lg) !important; } html.dark .ant-modal-header { background-color: var(--bg-card) !important; border-bottom: 1px solid var(--border-subtle) !important; border-radius: 10px 10px 0 0 !important; } html.dark .ant-modal-title { color: var(--text-primary) !important; font-weight: 600 !important; } html.dark .ant-modal-close-x { color: var(--text-secondary) !important; } html.dark .ant-modal-close-x:hover { color: var(--text-primary) !important; } html.dark .ant-modal-body { color: var(--text-primary) !important; } html.dark .ant-modal-footer { border-top: 1px solid var(--border-subtle) !important; } /* Input / Select / DatePicker / Textarea */ html.dark .ant-input, html.dark .ant-input-affix-wrapper, html.dark .ant-input-group-addon, html.dark textarea.ant-input { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; border-radius: 6px; } html.dark .ant-input::placeholder, html.dark .ant-input-affix-wrapper input::placeholder { color: var(--text-tertiary) !important; } html.dark .ant-input:focus, html.dark .ant-input-focused, html.dark .ant-input-affix-wrapper-focused { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-bg) !important; } html.dark .ant-select-selector, html.dark .ant-picker, html.dark .ant-radio-button-wrapper { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; border-radius: 6px; } /* Buttons —— 默认按钮（antd 3.x 无 .ant-btn-default 修饰类，用 :not 排除法） */ html.dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger):not(.ant-btn-link):not(.ant-btn-text):not(.ant-btn-dashed):not(.ant-btn-ghost) { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; border-radius: 6px; } html.dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger):not(.ant-btn-link):not(.ant-btn-text):not(.ant-btn-dashed):not(.ant-btn-ghost):hover { color: var(--accent) !important; border-color: var(--accent) !important; background-color: var(--bg-hover) !important; } html.dark .ant-btn-primary { background-color: var(--accent) !important; border-color: var(--accent) !important; border-radius: 6px; } html.dark .ant-btn-primary:hover { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } /* Dropdown / Popover / Tooltip */ html.dark .ant-dropdown-menu, html.dark .ant-dropdown-menu-submenu-title { background-color: var(--bg-elevated) !important; border-radius: 8px !important; box-shadow: var(--shadow-lg) !important; border: 1px solid var(--border-subtle) !important; } html.dark .ant-dropdown-menu-item { color: var(--text-primary) !important; border-radius: 4px; margin: 2px 4px; } html.dark .ant-dropdown-menu-item:hover { background-color: var(--bg-hover) !important; color: var(--accent) !important; } html.dark .ant-popover-inner, html.dark .ant-popover-inner-content { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; border-radius: 8px; box-shadow: var(--shadow-lg) !important; } html.dark .ant-popover-title { border-bottom-color: var(--border-subtle) !important; color: var(--text-primary) !important; } html.dark .ant-tooltip-inner { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle); border-radius: 6px; } /* Tabs */ html.dark .ant-tabs-tab { color: var(--text-secondary) !important; } html.dark .ant-tabs-tab:hover .ant-tabs-tab-btn { color: var(--text-primary) !important; } html.dark .ant-tabs-tab-active .ant-tabs-tab-btn { color: var(--accent) !important; font-weight: 600 !important; } html.dark .ant-tabs-ink-bar { background-color: var(--accent) !important; } html.dark .ant-tabs-content, html.dark .ant-tabs-tabpane { color: var(--text-primary) !important; } /* Tag */ html.dark .ant-tag { background-color: var(--bg-elevated) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; border-radius: 4px; } /* Divider */ html.dark .ant-divider { border-color: var(--border-subtle) !important; } html.dark .ant-divider-inner-text { color: var(--text-tertiary) !important; } /* Pagination */ html.dark .ant-pagination-item, html.dark .ant-pagination-prev .ant-pagination-item-link, html.dark .ant-pagination-next .ant-pagination-item-link { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; border-radius: 6px; } html.dark .ant-pagination-item a { color: var(--text-primary) !important; } html.dark .ant-pagination-item-active { background-color: var(--accent) !important; border-color: var(--accent) !important; } html.dark .ant-pagination-item-active a { color: #fff !important; } /* Form label */ html.dark .ant-form-item-label > label { color: var(--text-primary) !important; } /* Empty */ html.dark .ant-empty-description { color: var(--text-tertiary) !important; } /* ============ 通用文字兜底 ============ */ html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: var(--text-primary) !important; } html.dark p, html.dark li, html.dark label, html.dark th, html.dark td { color: var(--text-primary); } html.dark span, html.dark div, html.dark section, html.dark article, html.dark header, html.dark footer, html.dark nav, html.dark aside { color: inherit; } html.dark a:not(.ant-btn):not(.ant-menu-item):not(.portal-nav a):not(.portal-logo):not(.portal-user-name):not(.admin-go-portal):not(.notice-card):not(.fb-title):not(.notice-title) { color: var(--text-secondary); } html.dark a:not(.ant-btn):not(.ant-menu-item):not(.portal-nav a):not(.portal-logo):not(.portal-user-name):not(.admin-go-portal):not(.notice-card):not(.fb-title):not(.notice-title):hover { color: var(--accent); } html.dark code { background-color: var(--bg-elevated) !important; color: var(--accent) !important; padding: 2px 6px; border-radius: 3px; } /* ============ Portal 布局 ============ */ html.dark .portal-root { background-color: var(--bg-page) !important; color: var(--text-primary) !important; } html.dark .portal-header { background-color: var(--bg-card) !important; box-shadow: var(--shadow-sm) !important; border-bottom: 1px solid var(--border-subtle) !important; } html.dark .portal-header * { color: var(--text-primary); } html.dark .portal-logo { color: var(--text-primary) !important; } html.dark .portal-nav a { color: var(--text-secondary) !important; border-radius: 6px; padding: 6px 14px !important; margin: 0 2px; transition: var(--transition); } html.dark .portal-nav a:hover { color: var(--text-primary) !important; background-color: var(--bg-hover) !important; } html.dark .portal-nav a.active { color: var(--accent) !important; background-color: var(--accent-bg) !important; } html.dark .portal-footer { background-color: var(--bg-card) !important; color: var(--text-tertiary) !important; border-top: 1px solid var(--border-subtle) !important; } /* ============ Admin 布局 ============ */ html.dark .ant-layout-content { background-color: var(--bg-page) !important; } html.dark .ant-layout-footer { background-color: var(--bg-page) !important; color: var(--text-tertiary) !important; border-top: 1px solid var(--border-subtle) !important; } html.dark .admin-logo { color: var(--text-primary) !important; border-bottom-color: var(--border-subtle) !important; font-weight: 600 !important; } html.dark .admin-user-info:hover { background-color: var(--bg-hover) !important; } html.dark .admin-username { color: var(--text-primary) !important; } html.dark .admin-go-portal { color: var(--accent) !important; } html.dark .trigger { color: var(--text-secondary) !important; } html.dark .trigger:hover { color: var(--accent) !important; } /* Admin 顶栏内所有文字亮色兜底 */ html.dark .ant-layout-header, html.dark .ant-layout-header * { color: var(--text-primary); } html.dark .ant-layout-sider, html.dark .ant-layout-sider * { color: var(--text-secondary); } html.dark .ant-layout-sider .admin-logo, html.dark .ant-layout-sider .admin-logo * { color: var(--text-primary) !important; } html.dark .ant-layout-sider .ant-menu-item-selected, html.dark .ant-layout-sider .ant-menu-item-selected * { color: var(--accent) !important; } /* ============ 主题切换按钮（参考 xn--ykq321c.com 风格，无边框） ============ */ .theme-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; width: 32px; height: 32px; border-radius: 50%; border: none; background-color: transparent; padding: 0; margin: 0 6px; line-height: 0; vertical-align: middle; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .theme-btn:hover { background-color: var(--accent-bg); transform: scale(1.12) rotate(15deg); } .theme-btn:active { transform: scale(0.9); } .theme-btn .icon-moon, .theme-btn .icon-sun { display: block; width: 100%; height: 100%; text-align: center; line-height: 32px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* 旧 .theme-toggle-btn 已废弃，保留空壳避免报错 */ .theme-toggle-btn { display: none; } /* ============ 各页面文本/背景适配 ============ */ /* 通用页面标题 */ html.dark .page-title, html.dark .tool-title { color: var(--text-primary) !important; font-weight: 600 !important; } html.dark .page-sub { color: var(--text-secondary) !important; } /* 辅助文字 */ html.dark .tip, html.dark .hint, html.dark .form-hint, html.dark .preview-meta, html.dark .detail-label { color: var(--text-tertiary) !important; } /* 空态 */ html.dark .empty, html.dark .tool-empty, html.dark .home-welcome { color: var(--text-tertiary) !important; } html.dark .home-welcome h1 { color: var(--text-primary) !important; } /* HomeView 轮播 */ html.dark .home-carousel { background-color: var(--bg-card) !important; box-shadow: var(--shadow) !important; border-radius: 10px !important; overflow: hidden; } /* NoticeView */ html.dark .notice-card { background-color: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 10px !important; transition: var(--transition); } html.dark .notice-card:hover { box-shadow: var(--shadow) !important; border-color: var(--border-color) !important; transform: translateY(-1px); } html.dark .notice-card-title { color: var(--text-primary) !important; font-weight: 600 !important; } html.dark .notice-card-time { color: var(--text-tertiary) !important; } html.dark .notice-card-excerpt { color: var(--text-secondary) !important; } html.dark .notice-card-more { color: var(--accent) !important; } html.dark .detail-meta { color: var(--text-tertiary) !important; } html.dark .detail-content { color: var(--text-primary) !important; } /* FeedbackView */ html.dark .feedback-form, html.dark .success-card { background-color: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 10px !important; box-shadow: var(--shadow) !important; } html.dark .success-text { color: var(--text-secondary) !important; } html.dark .success-sub { color: var(--text-tertiary) !important; } html.dark .captcha-img { border-color: var(--border-color) !important; background-color: var(--bg-elevated) !important; border-radius: 6px; } /* tool.vue */ html.dark .tool-cover { background-color: var(--bg-elevated) !important; border-radius: 8px 8px 0 0; } html.dark .tool-cover-placeholder { color: var(--text-tertiary) !important; } /* GlobalNotice 全局公告条 */ html.dark .global-notice { background: linear-gradient(90deg, #3a2c00, #2a1c00) !important; border-bottom-color: #4a3a00 !important; color: #ffd591 !important; } html.dark .notice-icon { color: #ffa940 !important; } html.dark .notice-text strong { color: #fff !important; } html.dark .notice-content { color: #ffd591 !important; opacity: 0.9; } html.dark .dot { background: #4a3a00 !important; } html.dark .dot.active { background: #ffa940 !important; } html.dark .notice-close { color: #ffd591 !important; } /* 拖拽列表（BannerAdmin / ToolAdmin） */ html.dark .drag-item { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; border-radius: 8px !important; transition: var(--transition); } html.dark .drag-item:hover { box-shadow: var(--shadow) !important; border-color: var(--accent) !important; } html.dark .drag-handle { color: var(--text-tertiary) !important; } html.dark .item-thumb { background-color: var(--bg-elevated) !important; border-radius: 6px; } html.dark .item-title { color: var(--text-primary) !important; font-weight: 500; } html.dark .item-url { color: var(--text-tertiary) !important; } html.dark .item-sort { color: var(--text-tertiary) !important; } html.dark .img-preview, html.dark .img-preview-sm { border-color: var(--border-color) !important; border-radius: 6px; } html.dark .img-placeholder, html.dark .img-placeholder-sm { border-color: var(--text-tertiary) !important; color: var(--text-tertiary) !important; } /* ToolAdmin 分类 */ html.dark .category-tags { background-color: var(--bg-elevated) !important; border-radius: 6px; } html.dark .category-tags .label { color: var(--text-tertiary) !important; } html.dark .category-header { border-bottom-color: var(--border-subtle) !important; } html.dark .category-name { color: var(--text-primary) !important; font-weight: 600; } html.dark .category-count { color: var(--text-tertiary) !important; } /* NoticeAdmin */ html.dark .notice-title { color: var(--accent) !important; font-weight: 500; } html.dark .preview-content { color: var(--text-primary) !important; } /* FeedbackAdmin */ html.dark .fb-title { color: var(--accent) !important; font-weight: 500; } html.dark .fb-excerpt { color: var(--text-secondary) !important; } html.dark .detail-content { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; border-radius: 6px; } html.dark .detail-row { color: var(--text-primary) !important; } /* SiteAdmin */ html.dark .logo-row .hint { color: var(--text-tertiary) !important; } /* 个人中心 */ html.dark .centre-wrap, html.dark .countent_main { color: var(--text-primary) !important; } html.dark .countent_main { background-color: var(--bg-card) !important; border-radius: 10px !important; } html.dark .updatePass_title { color: var(--text-primary) !important; } html.dark .centre-wrap h1, html.dark .countent_main h1 { color: var(--text-primary) !important; } /* ============ Ant Design 深层组件兜底 ============ */ html.dark .ant-card-meta-title { color: var(--text-primary) !important; } html.dark .ant-card-meta-description { color: var(--text-secondary) !important; } html.dark .ant-list-item-meta-title, html.dark .ant-list-item-meta-description { color: var(--text-secondary) !important; } html.dark .ant-message-notice-content, html.dark .ant-notification-notice-message { color: var(--text-primary) !important; } html.dark .ant-breadcrumb-link, html.dark .ant-breadcrumb-separator { color: var(--text-secondary) !important; } html.dark .ant-steps-item-title, html.dark .ant-steps-item-description { color: var(--text-secondary) !important; } html.dark .ant-collapse { background-color: var(--bg-card) !important; border-color: var(--border-subtle) !important; } html.dark .ant-collapse-header { color: var(--text-primary) !important; } html.dark .ant-collapse-content { background-color: var(--bg-card) !important; color: var(--text-primary) !important; } html.dark .ant-drawer-content { background-color: var(--bg-card) !important; } html.dark .ant-drawer-header { background-color: var(--bg-card) !important; border-bottom-color: var(--border-subtle) !important; } html.dark .ant-drawer-title, html.dark .ant-drawer-close { color: var(--text-primary) !important; } html.dark .ant-tree { background-color: transparent !important; color: var(--text-primary) !important; } html.dark .ant-tree-node-content-wrapper { color: var(--text-primary) !important; } html.dark .ant-comment-content-author-name, html.dark .ant-comment-content-detail { color: var(--text-primary) !important; } html.dark .ant-switch-inner-text, html.dark .ant-radio-wrapper, html.dark .ant-checkbox-wrapper { color: var(--text-primary) !important; } html.dark .ant-alert { border-color: var(--border-subtle) !important; } html.dark .ant-alert-info { background-color: rgba(56, 123, 255, 0.12) !important; } html.dark .ant-alert-warning { background-color: rgba(220, 135, 48, 0.12) !important; } html.dark .ant-alert-message, html.dark .ant-alert-description { color: var(--text-primary) !important; } html.dark .ant-spin-text { color: var(--text-secondary) !important; } html.dark .ant-input-password-icon, html.dark .ant-input-clear-icon, html.dark .anticon-close-circle { color: var(--text-tertiary) !important; } html.dark .ant-input-password-icon:hover, html.dark .ant-input-clear-icon:hover { color: var(--text-secondary) !important; } /* ============ AdminLayout inline style 覆盖 ============ */ html.dark .ant-layout-content[style*="background"], html.dark .ant-layout-header[style*="background"] { background-color: var(--bg-card) !important; } html.dark .ant-layout[style*="color"] { color: var(--text-primary) !important; } /* ============ Table 默认行文字 ============ */ html.dark .ant-table-tbody > tr { color: var(--text-primary) !important; } html.dark .ant-table-tbody > tr > td > * { color: var(--text-primary) !important; }