/* ============================================ style.css - 设计师导航 · 全局样式 ============================================ 布局结构：顶部固定导航栏 (Navbar) 左侧固定分类导航 (Sidebar) + 右侧内容区 (Content) 底部页脚 (Footer) 功能特性：深浅双主题 (通过 CSS 变量 + data-theme 切换) 搜索功能响应式设计 (桌面 / 平板 / 手机) 热门推荐 / 最近收录 / 关于 / 提交网站 / 免责声明网站状态标记（VPN、英文、付费等） ============================================ */ /* ===== 全局参数（非配色变量，不随主题变化） ===== */ :root { --radius: 8px; /* 通用圆角 */ --sidebar-w: 240px; /* 侧边栏宽度 */ --navbar-h: 56px; /* 导航栏高度 */ --font: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; /* 全局字体 */ } /* * 配色变量由 app.js 从 CONFIG.themes 动态注入到 style 上， * 不再在此文件中硬编码。每套配色方案包含 light / dark 两组变量。 * 切换主题（深色/浅色）和配色方案（默认/深海蓝/森林绿等）均通过 JS 控制。 */ /* ===== 全局重置与基础样式 ===== */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--font); background: var(--bg-body); color: var(--text-primary); line-height: 1.6; min-height: 100vh; transition: background 0.3s, color 0.3s; /* 主题切换过渡 */ } a { text-decoration: none; color: inherit; } ::selection { background: rgba(14,165,233,0.15); } /* ===== 顶部导航栏 (Navbar) ===== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--navbar-h); background: var(--bg-navbar); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-navbar); transition: background 0.3s, border-color 0.3s; } .navbar-inner { max-width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } .logo-link { display: flex; align-items: center; gap: 10px; color: var(--text-primary); flex-shrink: 0; } .logo-icon { color: var(--text-accent); } .logo-text { font-size: 17px; font-weight: 720; letter-spacing: -0.03em; } .logo-divider { width: 1px; height: 14px; background: var(--border); } .logo-sub { font-size: 13px; font-weight: 500; color: var(--text-secondary); } .navbar-right { display: flex; align-items: center; gap: 10px; } /* --- 搜索框 --- */ .search-bar { position: relative; display: flex; align-items: center; } .search-icon { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; } .search-input { width: 260px; height: 34px; padding: 0 12px 0 32px; font-size: 13px; font-family: var(--font); color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; outline: none; transition: all 0.25s; } .search-input::placeholder { color: var(--text-muted); } .search-input:focus { width: 320px; background: var(--bg-input-focus); border-color: var(--text-accent); box-shadow: 0 0 0 2px rgba(14,165,233,0.15); } /* --- 主题切换按钮 --- */ .theme-toggle { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all 0.2s; position: relative; flex-shrink: 0; } .theme-toggle:hover { background: var(--bg-input-focus); border-color: var(--text-accent); } /* 月亮/太阳图标切换动画 */ .theme-toggle .icon-moon, .theme-toggle .icon-sun { position: absolute; transition: all 0.3s; } .theme-toggle .icon-moon { opacity:1; transform: rotate(0) scale(1); } .theme-toggle .icon-sun { opacity:0; transform: rotate(-90deg) scale(0.5); } [data-theme="light"] .theme-toggle .icon-moon { opacity:0; transform: rotate(90deg) scale(0.5); } [data-theme="light"] .theme-toggle .icon-sun { opacity:1; transform: rotate(0) scale(1); } /* --- 移动端菜单按钮 --- */ .menu-toggle { display: none; /* 默认隐藏，移动端显示 */ width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); cursor: pointer; align-items: center; justify-content: center; color: var(--text-secondary); } /* ===== 主布局 ===== */ .layout { display: flex; margin-top: var(--navbar-h); min-height: calc(100vh - var(--navbar-h) - 80px); } /* ===== 左侧侧边栏 (Sidebar) ===== */ .sidebar { position: fixed; top: var(--navbar-h); left: 0; bottom: 0; width: var(--sidebar-w); background: var(--bg-sidebar); border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; z-index: 50; transition: background 0.3s, border-color 0.3s; } .sidebar-inner { padding: 16px 0; } /* --- 侧边栏统计信息 --- */ .sidebar-stats { padding: 12px 20px 16px; text-align: center; } .stat-number { font-size: 32px; font-weight: 700; color: var(--text-accent); line-height: 1.1; } .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* 分隔线 */ .sidebar-divider { height: 1px; background: var(--border-light); margin: 8px 16px; } /* --- 分类导航项 --- */ .cat-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; cursor: pointer; transition: all 0.15s; border-left: 3px solid transparent; /* 左侧高亮指示条 */ user-select: none; } .cat-item:hover { background: var(--bg-hover); } .cat-item.active { background: var(--bg-hover); border-left-color: var(--cat-color, var(--text-accent)); /* 使用分类主题色或默认强调色 */ } .cat-name { font-size: 13px; font-weight: 500; color: var(--text-primary); flex: 1; } .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cat-count { font-size: 11px; color: var(--text-muted); min-width: 16px; text-align: right; } /* --- 侧边栏底部链接（关于、提交网站等） --- */ .sidebar-links { padding: 4px 0; } .sidebar-link { display: block; padding: 8px 20px; font-size: 12px; color: var(--text-muted); transition: all 0.15s; } .sidebar-link:hover { color: var(--text-accent); background: var(--bg-hover); } .sidebar-link.active { color: var(--text-accent); font-weight: 500; } /* ===== 右侧内容区 ===== */ .content { flex: 1; margin-left: var(--sidebar-w); padding: 24px 28px 48px; min-width: 0; } /* --- 内容区块 --- */ .content-section { margin-bottom: 36px; scroll-margin-top: calc(var(--navbar-h) + 20px); /* 滚动定位时留出导航栏空间 */ } .section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border-light); } .section-title { font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; } .title-icon { width: 16px; height: 16px; color: var(--text-accent); flex-shrink: 0; } .section-count { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 2px; } /* --- 网站卡片网格 --- */ .site-grid { display: grid; grid-template-columns: repeat(6, 1fr); /* 桌面端每行 6 个 */ gap: 12px; } /* ===== 网站卡片 ===== */ .site-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); cursor: pointer; transition: all 0.2s; color: inherit; min-height: 88px; overflow: hidden; /* 防止长文本溢出卡片 */ min-width: 0; /* 允许 grid 子项收缩到比内容更窄 */ } .site-card:hover { background: var(--bg-card-hover); border-color: var(--border); box-shadow: var(--shadow-card-hover); transform: translateY(-1px); /* 悬停微上移 */ } .site-card:active { transform: translateY(0); } /* 已失效网站卡片样式（变灰 + 禁止点击） */ .site-card.is-dead { opacity: 0.5; pointer-events: none; } /* --- 搜索高亮 --- */ mark.hl { background: rgba(14,165,233,0.18); color: var(--text-primary); padding: 0 1px; border-radius: 2px; font-weight: 600; } [data-theme="dark"] mark.hl { background: rgba(34,211,238,0.22); } /* --- 卡片顶部：图标 + 名称 --- */ .card-top { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; } /* --- Favicon 图标容器 --- * 圆形容器 + overflow hidden + object-fit cover * 参考 hao.uisdc.com 图标逻辑 */ .card-favicon { width: 32px; height: 32px; border-radius: 50%; /* 圆形容器 */ background: var(--bg-input); /* fallback 背景色（图标加载前显示） */ flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; /* 裁切图片为圆形 */ } .card-favicon img { width: 100%; height: 100%; /* 铺满整个圆形容器 */ object-fit: cover; /* 等比裁切铺满 */ } /* --- 卡片信息区 --- */ .card-info { flex: 1; min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 2px; } .card-name { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; } .card-desc { font-size: 11px; color: var(--text-muted); line-height: 1.35; height: 15px; /* 固定高度，保证有无描述的卡片高度一致 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 单行截断 */ } .card-meta { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; } .card-date { font-size: 10px; color: var(--text-muted); } /* 热门推荐卡片左边框高亮 */ .site-card.featured { border-left: 2px solid var(--text-accent); } /* ===== 状态标签 (Badges) ===== */ .badge { display: inline-flex; align-items: center; padding: 1px 6px; font-size: 10px; font-weight: 500; border-radius: 3px; white-space: nowrap; line-height: 1.4; } .badge-en { background: rgba(99,102,241,0.12); color: #6366f1; } /* 英文站 */ .badge-needVPN { background: rgba(251,146,60,0.12); color: #ea580c; } /* 特殊网络 */ .badge-pay { background: rgba(251,191,36,0.12); color: #d97706; } /* 付费 */ .badge-free { background: rgba(34,211,238,0.12); color: #0891b2; } /* 免费 */ .badge-dead { background: rgba(248,113,113,0.15); color: #dc2626; font-weight: 600; } /* 已失效 */ /* 深色模式下标签颜色微调，提高可读性 */ [data-theme="dark"] .badge-en { color: #818cf8; background: rgba(129,140,248,0.15); } [data-theme="dark"] .badge-needVPN { color: #fb923c; background: rgba(251,146,60,0.15); } [data-theme="dark"] .badge-pay { color: #fbbf24; background: rgba(251,191,36,0.15); } [data-theme="dark"] .badge-free { color: #22d3ee; background: rgba(34,211,238,0.15); } [data-theme="dark"] .badge-dead { color: #f87171; background: rgba(248,113,113,0.15); } /* ===== 搜索结果统计 ===== */ .search-stats { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); } .clear-btn { color: var(--text-accent); cursor: pointer; background: none; border: none; font-size: 13px; font-family: var(--font); padding: 4px 10px; border-radius: 4px; transition: background 0.2s; } .clear-btn:hover { background: var(--bg-hover); } /* ===== 空状态 ===== */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-icon { font-size: 36px; margin-bottom: 10px; opacity: 0.3; } .empty-text { font-size: 14px; color: var(--text-secondary); } .empty-hint { font-size: 12px; margin-top: 4px; } /* ===== 回到顶部按钮 ===== */ .back-top { position: fixed; bottom: 28px; right: 28px; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-card); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); opacity: 0; transform: translateY(10px); transition: all 0.3s; pointer-events: none; /* 默认不可点击 */ z-index: 40; } .back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-top:hover { color: var(--text-primary); box-shadow: var(--shadow-card-hover); } /* ===== 页脚 ===== */ .footer { margin-left: var(--sidebar-w); padding: 14px 28px 18px; text-align: center; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border-light); transition: margin 0.3s; } .footer p { margin-bottom: 4px; } .footer-links { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; } .footer-links a { color: var(--text-muted); transition: color 0.2s; } .footer-links a:hover { color: var(--text-accent); } .footer-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); opacity: 0.5; } .footer-icp { margin-top: 2px; font-size: 11px; color: var(--text-muted); } /* ===== 自定义滚动条（侧边栏） ===== */ .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } /* ===== 页面内容区（关于 / 提交网站 / 免责声明） ===== */ .page-content { max-width: 680px; } .page-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; line-height: 1.3; } .page-intro { font-size: 14px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 24px; } .page-block { margin-bottom: 24px; } .page-block h2 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); } .page-block p { font-size: 13px; color: var(--text-secondary); line-height: 1.8; } /* --- 关于页面 - 收录标准列表 --- */ .about-standards { list-style: none; padding: 0; } .about-standard-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .about-standard-item svg { width: 16px; height: 16px; color: var(--text-accent); flex-shrink: 0; margin-top: 2px; } /* --- 关于页面 - 联系方式 --- */ .about-contacts { display: flex; flex-direction: column; gap: 8px; } .about-contact-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); } .about-contact-item svg { width: 16px; height: 16px; color: var(--text-muted); } .about-contact-item a { color: var(--text-accent); } .about-contact-item a:hover { text-decoration: underline; } /* --- 关于页面 - 特色功能网格 --- */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .feature-card { padding: 16px; background: var(--bg-input); border: 1px solid var(--border-light); border-radius: var(--radius); transition: all 0.2s; } .feature-card:hover { border-color: var(--border); box-shadow: var(--shadow-card-hover); transform: translateY(-1px); } .feature-icon { width: 28px; height: 28px; color: var(--text-accent); margin-bottom: 8px; } .feature-icon svg { width: 100%; height: 100%; } .feature-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .feature-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; } /* --- 关于页面 - 作者信息 --- */ .about-author { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--bg-input); border: 1px solid var(--border-light); border-radius: var(--radius); } .author-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-input); flex-shrink: 0; overflow: hidden; border: 2px solid var(--border); } .author-avatar img { width: 100%; height: 100%; object-fit: cover; } .author-info { flex: 1; } .author-name { font-size: 15px; font-weight: 600; color: var(--text-primary); } .author-link { font-size: 12px; color: var(--text-accent); } .author-link:hover { text-decoration: underline; } /* --- 提交网站页面 --- */ .submit-actions { margin-bottom: 28px; } .submit-action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--text-accent); color: #fff; font-size: 13px; font-weight: 600; border-radius: 6px; transition: all 0.2s; } .submit-action-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14,165,233,0.3); } .submit-action-btn svg { width: 16px; height: 16px; } .submit-hint { font-size: 13px; color: var(--text-muted); padding: 10px 14px; background: var(--bg-input); border-radius: var(--radius); } /* ===== 响应式设计 ===== */ /* --- 大屏 (<=1400px)：每行 4 个卡片 --- */ @media (max-width: 1400px) { .site-grid { grid-template-columns: repeat(4, 1fr); } } /* --- 平板端 (<=1100px)：每行 3 个卡片 --- */ @media (max-width: 1100px) { .site-grid { grid-template-columns: repeat(3, 1fr); } } /* --- 移动端分类横向标签栏（仅手机端显示） --- */ .mobile-tabs { display: none; /* 桌面端隐藏 */ } /* --- 手机端 (<=768px) --- */ @media (max-width: 768px) { .mobile-tabs { display: flex; overflow-x: auto; gap: 6px; padding: 8px 0 12px; margin-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mobile-tabs::-webkit-scrollbar { display: none; } .mobile-tab { flex-shrink: 0; padding: 5px 12px; font-size: 12px; font-family: var(--font); font-weight: 500; color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .mobile-tab:hover { color: var(--text-accent); border-color: var(--text-accent); } .mobile-tab.active { color: #fff; background: var(--text-accent); border-color: var(--text-accent); } .menu-toggle { display: flex; } /* 显示移动端菜单按钮 */ .sidebar { left: auto; /* 改为右侧 */ right: 0; transform: translateX(100%); /* 默认隐藏（向右滑出） */ transition: transform 0.3s ease, background 0.3s, border-color 0.3s; box-shadow: none; border-right: none; border-left: 1px solid var(--border); /* 右侧边栏用左边框 */ } .sidebar.open { transform: translateX(0); /* 展开侧边栏 */ box-shadow: -4px 0 20px rgba(0,0,0,0.1); /* 阴影改到左边 */ } .content { margin-left: 0; padding: 20px 16px 40px; } .footer { margin-left: 0; padding: 14px 16px 18px; } .search-input { width: 160px; } .search-input:focus { width: 200px; } .logo-sub, .logo-divider { display: none; } /* 隐藏副标题节省空间 */ .page-title { font-size: 18px; } .navbar-inner { padding: 0 12px; } .footer-links { gap: 8px; } .footer-links a { font-size: 11px; } .footer { font-size: 11px; } .card-desc { white-space: normal; line-height: 1.4; height: 31px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; } .site-grid { grid-template-columns: repeat(2, 1fr); } .site-card { min-height: 80px; padding: 10px 12px; gap: 5px; } .card-favicon { width: 28px; height: 28px; } .card-name { font-size: 12px; } .content-section { margin-bottom: 28px; } .section-header { margin-bottom: 12px; padding-bottom: 8px; } .section-title { font-size: 14px; } .card-meta { gap: 3px; } .badge { font-size: 9px; padding: 0 5px; } .features-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .about-author { padding: 12px; gap: 10px; } .author-avatar { width: 44px; height: 44px; } } /* --- 小屏手机 (<=520px)：每行 2 个卡片，紧凑模式 --- */ @media (max-width: 520px) { .site-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .site-card { padding: 8px 10px; gap: 4px; min-height: 72px; } .card-favicon { width: 24px; height: 24px; } .card-name { font-size: 11px; } .card-desc { font-size: 10px; height: 14px; white-space: nowrap; } .search-input { width: 120px; font-size: 12px; } .search-input:focus { width: 150px; } .features-grid { grid-template-columns: 1fr; } .logo-text { font-size: 15px; } .stat-number { font-size: 28px; } .page-content { padding: 0; } .page-title { font-size: 17px; } .page-intro { font-size: 13px; } .back-top { bottom: 16px; right: 16px; width: 32px; height: 32px; } .empty-state { padding: 40px 16px; } } /* ===== 移动端侧边栏遮罩层 ===== */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 49; } .sidebar-overlay.visible { display: block; }