/** * 黑湖科技网站主题配置 * * 使用方法： * 1. 在每个页面的 中引入此文件 * 2. 所有主题色通过 CSS 变量统一管理 * 3. 修改主题只需更改此文件中的变量值 * * 当前主题：淡蓝色 */ :root { /* ==================== 主色调 ==================== */ /* 主色 - 用于按钮、强调文字、图标等 */ --theme-primary: #127EF4; /* 主色悬停态 */ --theme-primary-hover: #0D6FD6; /* 主色容器/浅色背景 */ --theme-primary-light: #D9EDFF; /* 主色深色 */ --theme-primary-dark: #0A5CB8; /* ==================== 次要色调 ==================== */ --theme-secondary: #5CA8F7; --theme-secondary-light: #D9EDFF; --theme-secondary-dark: #127EF4; /* ==================== 功能色 ==================== */ /* 成功色 */ --theme-success: #22c55e; /* 警告色 */ --theme-warning: #f59e0b; /* 错误色 */ --theme-error: #ef4444; /* ==================== 文字色 ==================== */ --theme-text-primary: #1e293b; --theme-text-secondary: #475569; --theme-text-muted: #94a3b8; --theme-text-light: #cbd5e1; --theme-text-on-primary: #ffffff; /* ==================== 背景色 ==================== */ --theme-bg-primary: #ffffff; --theme-bg-secondary: #f8fafc; --theme-bg-tertiary: #f1f5f9; /* ==================== 边框色 ==================== */ --theme-border-light: #e2e8f0; --theme-border-default: #cbd5e1; /* ==================== 阴影 ==================== */ --theme-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); --theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); } /* ==================== 主题工具类 ==================== */ /* 背景色 */ .bg-theme-primary { background-color: var(--theme-primary); } .bg-theme-primary-light { background-color: var(--theme-primary-light); } .bg-theme-primary-hover:hover { background-color: var(--theme-primary-hover); } .bg-theme-secondary { background-color: var(--theme-secondary); } .bg-theme-secondary-light { background-color: var(--theme-secondary-light); } /* 文字色 */ .text-theme-primary { color: var(--theme-primary); } .text-theme-primary-dark { color: var(--theme-primary-dark); } .text-theme-secondary { color: var(--theme-secondary); } .text-theme-on-primary { color: var(--theme-text-on-primary); } .text-theme-text-primary { color: var(--theme-text-primary); } .text-theme-text-secondary { color: var(--theme-text-secondary); } .text-theme-text-muted { color: var(--theme-text-muted); } /* 边框色 */ .border-theme-primary { border-color: var(--theme-primary); } .border-theme-primary-light { border-color: var(--theme-primary-light); } /* 悬停效果 */ .hover\:text-theme-primary:hover { color: var(--theme-primary); } .hover\:bg-theme-primary-light:hover { background-color: var(--theme-primary-light); } .hover\:bg-theme-primary:hover { background-color: var(--theme-primary); } .hover\:border-theme-primary:hover { border-color: var(--theme-primary); } /* ==================== 兼容旧代码的别名 ==================== */ /* 这些类名保持与原有 emerald 类相同的语义，方便迁移 */ .text-emerald-600, .text-emerald-700, .text-emerald-800 { color: var(--theme-primary); } .text-emerald-400 { color: var(--theme-secondary); } .text-emerald-500 { color: var(--theme-primary); } .hover\:text-emerald-600:hover { color: var(--theme-primary-hover); } .bg-emerald-50 { background-color: var(--theme-primary-light); } .bg-emerald-50\/50 { background-color: rgba(18, 126, 244, 0.5); } .hover\:bg-emerald-50\/50:hover { background-color: rgba(18, 126, 244, 0.5); } .border-emerald-200 { border-color: var(--theme-primary-light); } .bg-emerald-200 { background-color: var(--theme-primary-light); } /* 导航激活状态 */ .nav-link.nav-active { color: var(--theme-primary) !important; font-weight: 600 !important; border-bottom: 2px solid var(--theme-primary); padding-bottom: 4px; } /* 主按钮样式 */ .btn-primary { background-color: var(--theme-primary); color: var(--theme-text-on-primary); transition: all 0.3s ease; } .btn-primary:hover { background-color: var(--theme-primary-hover); } /* 链接悬停效果 */ .link-primary { color: var(--theme-primary); transition: color 0.2s ease; } .link-primary:hover { color: var(--theme-primary-hover); } /* 卡片悬停效果 */ .card-hover { transition: all 0.3s ease; } .card-hover:hover { box-shadow: var(--theme-shadow-lg); transform: translateY(-2px); } /* 图标背景 */ .icon-bg-primary { background-color: var(--theme-primary-light); color: var(--theme-primary); } .icon-bg-primary:hover { background-color: var(--theme-primary); color: var(--theme-text-on-primary); } /* 分隔线 */ .divider-primary { background-color: var(--theme-primary); } /* 步骤圆圈 */ .step-circle { background-color: var(--theme-primary); color: var(--theme-text-on-primary); box-shadow: 0 4px 14px rgba(18, 126, 244, 0.25); } /* 连接线 */ .step-line { background-color: var(--theme-primary-light); } .site-float-actions { position: fixed; top: 76%; right: 8px; transform: translateY(-50%); z-index: 70; display: flex; flex-direction: column; width: 96px; overflow: visible; border: 1px solid rgba(226, 232, 240, 0.95); border-radius: 28px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .site-float-actions__group { position: relative; width: 100%; } .site-float-actions__item { width: 100%; min-height: 102px; padding: 18px 12px; border: 0; border-top: 1px solid rgba(226, 232, 240, 0.9); background: transparent; color: #64748b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.45; text-align: center; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .site-float-actions__item:first-child { border-top: none; border-top-left-radius: 28px; border-top-right-radius: 28px; } .site-float-actions__group .site-float-actions__item { border-radius: 0; } .site-float-actions__group + .site-float-actions__item { border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; } .site-float-actions__item:hover { background: rgba(18, 126, 244, 0.08); color: var(--theme-primary); } .site-float-actions__icon { font-size: 34px; line-height: 1; } .site-float-actions__label { display: inline-block; white-space: nowrap; } .site-float-wechat-card { position: absolute; top: 50%; right: calc(100% + 8px); width: 168px; padding: 14px; border: 1px solid rgba(226, 232, 240, 0.95); border-radius: 24px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16); text-align: center; opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(10px); transition: opacity 0.22s ease, transform 0.22s ease; } .site-float-wechat-card::before { content: ""; position: absolute; top: 0; right: -14px; width: 14px; height: 100%; } .site-float-actions__group:hover .site-float-wechat-card, .site-float-actions__group.is-active .site-float-wechat-card { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); } .site-float-actions__group:hover .site-float-actions__item, .site-float-actions__group.is-active .site-float-actions__item { background: rgba(18, 126, 244, 0.08); color: var(--theme-primary); } .site-float-wechat-card__image { display: block; width: 120px; height: 120px; margin: 0 auto 10px; border-radius: 18px; border: 1px solid rgba(226, 232, 240, 0.95); object-fit: cover; } .site-float-wechat-card__title { font-size: 15px; font-weight: 700; color: #0f172a; } .site-float-wechat-card__meta { margin-top: 4px; font-size: 12px; line-height: 1.5; color: #64748b; } .site-float-wechat-card__value { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--theme-primary); } .site-float-toast { position: fixed; right: 8px; bottom: 24px; z-index: 75; max-width: min(260px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 999px; background: rgba(15, 23, 42, 0.92); color: #fff; font-size: 13px; line-height: 1.4; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; } .site-float-toast.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 767px) { .site-float-actions { top: auto; right: 6px; bottom: 64px; transform: none; width: 76px; border-radius: 22px; } .site-float-actions__item { min-height: 74px; padding: 12px 8px; gap: 8px; font-size: 11px; } .site-float-actions__item:first-child { border-top-left-radius: 22px; border-top-right-radius: 22px; } .site-float-actions__group + .site-float-actions__item { border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; } .site-float-actions__icon { font-size: 24px; } .site-float-wechat-card { right: calc(100% + 6px); width: 148px; padding: 12px; border-radius: 20px; } .site-float-wechat-card__image { width: 104px; height: 104px; border-radius: 16px; } .site-float-toast { right: 6px; bottom: 18px; max-width: calc(100vw - 24px); } }