/* 主要样式文件 - 组件和布局样式 */ /* 注意：主题变量已移至 themes.css 文件中 */ /* ==================== SVG 图标系统 ==================== */ /* 使用内联 SVG 数据，零依赖，即时显示 */ /* 图标基础样式 */ .bi::before, [class*=" bi-"]::before, [class^="bi-"]::before { content: "" !important; width: 20px; height: 20px; display: inline-block !important; vertical-align: middle; background-color: transparent !important; background: transparent !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; flex-shrink: 0; opacity: 1 !important; visibility: visible !important; position: relative !important; z-index: 1 !important; } /* 强制显示所有图标 */ i.bi::before, i[class*=" bi-"]::before, i[class^="bi-"]::before { content: "" !important; display: inline-block !important; opacity: 1 !important; visibility: visible !important; } /* 移动端菜单图标 */ .bi-list::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E") !important; } /* 主题切换图标 - 使用filter方式实现颜色控制 */ .bi-sun-fill::before, .bi-sun::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z'/%3E%3C/svg%3E") !important; } .bi-moon-fill::before, .bi-moon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z'/%3E%3C/svg%3E") !important; } /* 语言切换图标 */ .bi-globe::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z'/%3E%3C/svg%3E") !important; } /* 其他常用图标 */ .bi-search::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") !important; } .bi-x-lg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3E%3C/svg%3E") !important; } .bi-chevron-down::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important; } .bi-palette::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM5.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3Cpath d='M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.45 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.776 16 8 16a8 8 0 1 1 8-8zm-8 7a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm-3.5-9.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM8 2a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zm2.5.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0zm.5 2.5a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1z'/%3E%3C/svg%3E") !important; } .bi-house::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793 8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z'/%3E%3C/svg%3E") !important; } .bi-grid::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 10 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3A1.5 1.5 0 0 1 15 10.5v3A1.5 1.5 0 0 1 13.5 15h-3A1.5 1.5 0 0 1 10 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z'/%3E%3C/svg%3E") !important; } .bi-star::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3E%3C/svg%3E") !important; } .bi-check::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important; } .bi-exclamation-triangle::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3E%3C/svg%3E") !important; } /* ==================== 图标主题颜色适配 ==================== */ /* SVG 图标使用 filter 实现颜色变换 */ /* 主题样式文件 - 所有主题变量定义 */ /* 默认主题（深色） */ :root { --primary-bg: #0a0a0a; --secondary-bg: #1a1a1a; --card-bg: #1f1f1f; --header-bg: rgba(15, 15, 15, 0.95); --text-primary: #ffffff; --text-secondary: #a0a0a0; --text-muted: #666666; --accent-orange: #00d4ff; --accent-blue: #3b82f6; --accent-purple: #8b5cf6; --accent-green: #22c55e; --accent-green-hover: #16a34a; --border-color: #4a4a4a; --hover-bg: #2a2a2a; --shadow: 0 4px 20px rgba(0, 0, 0, 0.3); --border-radius: 12px; --accent-gradient: linear-gradient(135deg, #00d4ff, #22d3ee, #10b981); --input-bg: #1a1a1a; --input-border: #4a4a4a; --input-focus: #22c55e; /* 导航菜单状态颜色 */ --nav-text-normal: #a0a0a0; --nav-bg-normal: transparent; --nav-text-hover: #ffffff; --nav-bg-hover: #22c55e; --nav-text-active: #ffffff; --nav-bg-active: #22c55e; /* 侧边栏导航状态颜色 */ --sidebar-text-normal: #ffffff; --sidebar-bg-normal: #1f1f1f; --sidebar-text-hover: #ffffff; --sidebar-bg-hover: #22c55e; --sidebar-text-active: #ffffff; --sidebar-bg-active: #22c55e; /* 筛选区域状态颜色 */ --filter-text-normal: #a0a0a0; --filter-bg-normal: transparent; --filter-text-hover: #ffffff; --filter-bg-hover: #22c55e; --filter-text-active: #ffffff; --filter-bg-active: #22c55e; /* 搜索框状态颜色 */ --search-border: #22c55e; --search-border-focus: #22c55e; --search-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); --search-shadow-focus: 0 0 0 3px rgba(34, 197, 94, 0.1); --search-btn-bg: #22c55e; --search-btn-bg-hover: #16a34a; --search-btn-text: #ffffff; /* 按钮文字颜色 */ --btn-text-primary: #ffffff; --btn-text-hover: #ffffff; --search-input-caret: #22c55e; --search-input-selection: rgba(34, 197, 94, 0.2); --search-label-bg: #374151; --search-label-color: #f3f4f6; } /* 浅色主题 */ html[data-theme="light"] { --primary-bg: #f7f8fa; --secondary-bg: #f1f3f4; --card-bg: #ffffff; --header-bg: rgba(247, 248, 250, 0.95); --text-primary: #1a1a1a; --text-secondary: #2c3e50; --text-muted: #5a6c7d; --accent-orange: #10b981; --accent-blue: #3b82f6; --accent-purple: #8b5cf6; --accent-green: #10b981; --accent-green-hover: #059669; --border-color: #d1d9e0; --hover-bg: #f1f5f9; --shadow: 0 2px 12px rgba(0, 0, 0, 0.06); --accent-gradient: linear-gradient(135deg, #00d4ff, #22d3ee, #10b981); --input-bg: #ffffff; --input-border: #d1d9e0; --input-focus: #10b981; /* 导航菜单状态颜色 */ --nav-text-normal: #5a6c7d; --nav-bg-normal: transparent; --nav-text-hover: #ffffff; --nav-bg-hover: #10b981; --nav-text-active: #ffffff; --nav-bg-active: #10b981; /* 侧边栏导航状态颜色 */ --sidebar-text-normal: #2c3e50; --sidebar-bg-normal: #ffffff; --sidebar-text-hover: #ffffff; --sidebar-bg-hover: #10b981; --sidebar-text-active: #ffffff; --sidebar-bg-active: #10b981; /* 筛选区域状态颜色 - 白色主题特殊处理 */ --filter-text-normal: var(--text-secondary); --filter-bg-normal: transparent; --filter-text-hover: #ffffff; --filter-bg-hover: #10b981; --filter-text-active: #ffffff; --filter-bg-active: #10b981; /* 搜索框状态颜色 */ --search-border: #10b981; --search-border-focus: #10b981; --search-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); --search-shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.1); --search-btn-bg: #10b981; --search-btn-bg-hover: #059669; --search-btn-text: #ffffff; /* 按钮文字颜色 */ --btn-text-primary: #ffffff; --btn-text-hover: #ffffff; --search-input-caret: #10b981; --search-input-selection: rgba(16, 185, 129, 0.2); --search-label-bg: #f8fafc; --search-label-color: #10b981; } /* 深色主题 */ html[data-theme="dark"] { --primary-bg: #000008; --secondary-bg: #050510; --card-bg: #151520; --header-bg: rgba(0, 0, 8, 0.95); --text-primary: #ffffff; --text-secondary: #a0a0a0; --text-muted: #666666; --accent-orange: #00d4ff; --accent-blue: #3b82f6; --accent-purple: #8b5cf6; --accent-green: #60a5fa; --accent-green-hover: #3b82f6; --border-color: #2a2a3a; --hover-bg: #0f0f1a; --shadow: 0 8px 32px rgba(0, 0, 0, 0.7); --accent-gradient: linear-gradient(135deg, #00d4ff, #22d3ee, #10b981); --input-bg: #050510; --input-border: #2a2a3a; --input-focus: #60a5fa; /* 导航菜单状态颜色 */ --nav-text-normal: #a0a0a0; --nav-bg-normal: transparent; --nav-text-hover: #ffffff; --nav-bg-hover: #60a5fa; --nav-text-active: #ffffff; --nav-bg-active: #60a5fa; /* 侧边栏导航状态颜色 */ --sidebar-text-normal: #ffffff; --sidebar-bg-normal: #151520; --sidebar-text-hover: #ffffff; --sidebar-bg-hover: #3b82f6; --sidebar-text-active: #ffffff; --sidebar-bg-active: #3b82f6; /* 筛选区域状态颜色 */ --filter-text-normal: #a0a0a0; --filter-bg-normal: transparent; --filter-text-hover: #ffffff; --filter-bg-hover: #60a5fa; --filter-text-active: #ffffff; --filter-bg-active: #60a5fa; /* 搜索框状态颜色 */ --search-border: #60a5fa; --search-border-focus: #60a5fa; --search-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); --search-shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.1); --search-btn-bg: #60a5fa; --search-btn-bg-hover: #3b82f6; --search-btn-text: #ffffff; /* 按钮文字颜色 */ --btn-text-primary: #ffffff; --btn-text-hover: #ffffff; --search-input-caret: #60a5fa; --search-input-selection: rgba(96, 165, 250, 0.2); --search-label-bg: #374151; --search-label-color: #f3f4f6; } /* 深蓝色主题 */ html[data-theme="dark-blue"] { --primary-bg: #0f172a; --secondary-bg: #1e293b; --card-bg: #1e293b; --header-bg: rgba(15, 23, 42, 0.95); --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --accent-orange: #00d4ff; --accent-blue: #3b82f6; --accent-purple: #8b5cf6; --accent-green: #60a5fa; --accent-green-hover: #3b82f6; --border-color: #334155; --hover-bg: #1e293b; --shadow: 0 4px 20px rgba(0, 0, 0, 0.4); --accent-gradient: linear-gradient(135deg, #00d4ff, #22d3ee, #10b981); --input-bg: #1e293b; --input-border: #475569; --input-focus: #60a5fa; /* 导航菜单状态颜色 */ --nav-text-normal: #cbd5e1; --nav-bg-normal: transparent; --nav-text-hover: #ffffff; --nav-bg-hover: #60a5fa; --nav-text-active: #ffffff; --nav-bg-active: #60a5fa; /* 侧边栏导航状态颜色 */ --sidebar-text-normal: #f8fafc; --sidebar-bg-normal: #1e293b; --sidebar-text-hover: #ffffff; --sidebar-bg-hover: #60a5fa; --sidebar-text-active: #ffffff; --sidebar-bg-active: #60a5fa; /* 筛选区域状态颜色 */ --filter-text-normal: #cbd5e1; --filter-bg-normal: transparent; --filter-text-hover: #ffffff; --filter-bg-hover: #60a5fa; --filter-text-active: #ffffff; --filter-bg-active: #60a5fa; /* 搜索框状态颜色 */ --search-border: #60a5fa; --search-border-focus: #60a5fa; --search-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); --search-shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.1); --search-btn-bg: #60a5fa; --search-btn-bg-hover: #3b82f6; --search-btn-text: #ffffff; /* 按钮文字颜色 */ --btn-text-primary: #ffffff; --btn-text-hover: #ffffff; --search-input-caret: #60a5fa; --search-input-selection: rgba(96, 165, 250, 0.2); --search-label-bg: #374151; --search-label-color: #f3f4f6; } /* 深绿色主题 */ html[data-theme="dark-green"] { --primary-bg: #0f2027; --secondary-bg: #203a43; --card-bg: #1e3238; --header-bg: rgba(15, 32, 39, 0.95); --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --accent-orange: #00d4ff; --accent-blue: #3b82f6; --accent-purple: #8b82f6; --accent-green: #60a5fa; --accent-green-hover: #3b82f6; --border-color: #2a2a3a; --hover-bg: #151520; --shadow: 0 8px 32px rgba(0, 0, 0, 0.7); --accent-gradient: linear-gradient(135deg, #00d4ff, #22d3ee, #10b981); --input-bg: #203a43; --input-border: #2a2a3a; --input-focus: #60a5fa; /* 导航菜单状态颜色 */ --nav-text-normal: #cbd5e1; --nav-bg-normal: transparent; --nav-text-hover: #ffffff; --nav-bg-hover: #60a5fa; --nav-text-active: #ffffff; --nav-bg-active: #60a5fa; /* 侧边栏导航状态颜色 */ --sidebar-text-normal: #f8fafc; --sidebar-bg-normal: #1e3238; --sidebar-text-hover: #ffffff; --sidebar-bg-hover: #60a5fa; --sidebar-text-active: #ffffff; --sidebar-bg-active: #60a5fa; /* 筛选区域状态颜色 */ --filter-text-normal: #cbd5e1; --filter-bg-normal: transparent; --filter-text-hover: #ffffff; --filter-bg-hover: #60a5fa; --filter-text-active: #ffffff; --filter-bg-active: #60a5fa; /* 搜索框状态颜色 */ --search-border: #60a5fa; --search-border-focus: #60a5fa; --search-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); --search-shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.1); --search-btn-bg: #60a5fa; --search-btn-bg-hover: #3b82f6; --search-btn-text: #ffffff; /* 按钮文字颜色 */ --btn-text-primary: #ffffff; --btn-text-hover: #ffffff; --search-input-caret: #60a5fa; --search-input-selection: rgba(96, 165, 250, 0.2); --search-label-bg: #374151; --search-label-color: #f3f4f6; } /* 科技风格主题 */ html[data-theme="tech-dark"] { --primary-bg: #1A2B42; --secondary-bg: #2A3B52; --card-bg: #3A4B5E; --header-bg: rgba(26, 43, 66, 0.95); --text-primary: #ffffff; --text-secondary: #B8C5D1; --text-muted: #6A7C8E; --accent-orange: #00d4ff; --accent-blue: #00C6FF; --accent-purple: #6EEB83; --accent-green: #00C6FF; --accent-green-hover: #0099CC; --border-color: #4A5B6E; --hover-bg: #2A3B52; --shadow: 0 8px 32px rgba(0, 0, 0, 0.4); --accent-gradient: linear-gradient(135deg, #00C6FF, #6EEB83); --input-bg: #2A3B52; --input-border: #4A5B6E; --input-focus: #00C6FF; /* 导航菜单状态颜色 */ --nav-text-normal: #B8C5D1; --nav-bg-normal: transparent; --nav-text-hover: #ffffff; --nav-bg-hover: #00C6FF; --nav-text-active: #ffffff; --nav-bg-active: #00C6FF; /* 侧边栏导航状态颜色 */ --sidebar-text-normal: #ffffff; --sidebar-bg-normal: #3A4B5E; --sidebar-text-hover: #ffffff; --sidebar-bg-hover: #00C6FF; --sidebar-text-active: #ffffff; --sidebar-bg-active: #00C6FF; /* 筛选区域状态颜色 */ --filter-text-normal: #B8C5D1; --filter-bg-normal: transparent; --filter-text-hover: #ffffff; --filter-bg-hover: #00C6FF; --filter-text-active: #ffffff; --filter-bg-active: #00C6FF; /* 搜索框状态颜色 */ --search-border: #00C6FF; --search-border-focus: #00C6FF; --search-shadow: 0 4px 16px rgba(0, 198, 255, 0.1); --search-shadow-focus: 0 0 0 3px rgba(0, 198, 255, 0.2); --search-btn-bg: #00C6FF; --search-btn-bg-hover: #0099CC; --search-btn-text: #ffffff; --search-input-caret: #00C6FF; --search-input-selection: rgba(0, 198, 255, 0.2); --search-label-bg: #374151; --search-label-color: #f3f4f6; } /* ==================== 搜索框通用样式（使用CSS变量） ==================== */ /* .search-box 通用样式 */ .search-box { border: 2px solid var(--search-border); box-shadow: var(--search-shadow); background: var(--card-bg); } .search-box:focus-within { border: 2px solid var(--search-border-focus); box-shadow: var(--search-shadow-focus); } /* .search-btn 通用样式 */ .search-btn { background: var(--search-btn-bg); color: var(--search-btn-text); } .search-btn:hover { background: var(--search-btn-bg-hover); } .search-btn i { color: var(--search-btn-text); } /* .search-input 通用样式 */ .search-input { caret-color: var(--search-input-caret); } .search-input::selection { background: var(--search-input-selection); color: var(--text-primary); } .search-input::-moz-selection { background: var(--search-input-selection); color: var(--text-primary); } /* ==================== 移动端顶部导航菜单主题样式 ==================== */ /* * 默认样式： * - 默认状态：color: var(--text-secondary)，background: transparent * - 悬停/选中：background: var(--accent-green)，color: white * * 各主题的配色方案： * ┌────────────┬───────────────┬──────────────┬────────────────┐ * │ 主题 │ 默认文字 │ 悬停背景 │ 悬停文字 │ * ├────────────┼───────────────┼──────────────┼────────────────┤ * │ Light │ #5a6c7d (灰) │ #10b981 (绿) │ white │ * │ Dark │ #a0a0a0 (灰) │ #60a5fa (蓝) │ white │ * │ Dark-Blue │ #a0a0a0 (灰) │ #60a5fa (蓝) │ white │ * │ Dark-Green │ #a0a0a0 (灰) │ #60a5fa (蓝) │ white │ * │ Tech-Dark │ #a0a0a0 (灰) │ #00C6FF (蓝) │ white │ * └────────────┴───────────────┴──────────────┴────────────────┘ * * 悬停/选中时的白色文字是硬编码的，所有主题统一使用白色 * 如需修改特定主题的悬停文字颜色，可在下方添加主题特定样式覆盖 */ /* 白色主题的移动端导航菜单项样式（如有需要可在此添加特殊覆盖） */ /* 示例：如果要改变白色主题的悬停文字颜色 html[data-theme="light"] .mobile-nav-item:hover, html[data-theme="light"] .mobile-nav-item.active { color: #ffffff !important; } */ /* ==================== 侧边栏二级菜单相关主题样式 ==================== */ /* .subcategory-item 主题样式已通过 CSS 变量统一定义在 css.css 中 */ /* .subcategory-item.active 主题样式 */ html[data-theme="light"] .subcategory-item.active { background: var(--accent-green) !important; color: white !important; } html[data-theme="light"] .subcategory-item.active * { color: white !important; } html[data-theme="dark"] .subcategory-item.active { background: var(--accent-green) !important; color: white !important; } html[data-theme="dark"] .subcategory-item.active * { color: white !important; } html[data-theme="dark"] .subcategory-item.active .subcategory-icon { color: white !important; } html[data-theme="dark-blue"] .subcategory-item.active { background: var(--accent-green) !important; color: white !important; } html[data-theme="dark-blue"] .subcategory-item.active * { color: white !important; } html[data-theme="dark-blue"] .subcategory-item.active .subcategory-icon { color: white !important; } html[data-theme="dark-green"] .subcategory-item.active { background: var(--accent-green) !important; color: white !important; } html[data-theme="dark-green"] .subcategory-item.active * { color: white !important; } html[data-theme="dark-green"] .subcategory-item.active .subcategory-icon { color: white !important; } html[data-theme="tech-dark"] .subcategory-item.active { background: var(--accent-green) !important; color: white !important; } html[data-theme="tech-dark"] .subcategory-item.active * { color: white !important; } html[data-theme="tech-dark"] .subcategory-item.active .subcategory-icon { color: white !important; } /* 主题切换动画 */ html { transition: all 0.3s ease; } /* 深色主题背景设置 */ html[data-theme="dark"], html[data-theme="dark-blue"], html[data-theme="dark-green"], html[data-theme="tech-dark"] { background: var(--primary-bg) !important; } html[data-theme="dark"] body, html[data-theme="dark-blue"] body, html[data-theme="dark-green"] body, html[data-theme="tech-dark"] body { background: transparent !important; } html[data-theme="dark"] .main-content, html[data-theme="dark-blue"] .main-content, html[data-theme="dark-green"] .main-content, html[data-theme="tech-dark"] .main-content { background: transparent !important; } html[data-theme="dark"] .container, html[data-theme="dark-blue"] .container, html[data-theme="dark-green"] .container, html[data-theme="tech-dark"] .container { background: transparent !important; } /* 浅色主题Banner区域背景 */ html[data-theme="light"] .hero-section { background: transparent; } /* 所有深色主题Banner区域透明背景，显示星空 */ html[data-theme="dark"] .hero-section, html[data-theme="dark-blue"] .hero-section, html[data-theme="dark-green"] .hero-section, html[data-theme="tech-dark"] .hero-section { background: transparent; } /* 主题特定的搜索框样式 */ html[data-theme="light"] .search-box { border: 2px solid var(--accent-green); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } html[data-theme="dark"] .search-box, html[data-theme="dark-blue"] .search-box, html[data-theme="dark-green"] .search-box { border: 2px solid #60a5fa; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } html[data-theme="tech-dark"] .search-box { border: 2px solid var(--accent-blue) !important; background: var(--card-bg) !important; box-shadow: 0 4px 16px rgba(0, 198, 255, 0.1) !important; } /* 主题特定的搜索按钮样式 */ html[data-theme="dark"] .search-btn, html[data-theme="dark-blue"] .search-btn, html[data-theme="dark-green"] .search-btn { background: #60a5fa !important; color: white !important; } html[data-theme="tech-dark"] .search-btn { background: var(--accent-blue) !important; color: white !important; } /* 主题特定的输入框样式 */ html[data-theme="dark"] input, html[data-theme="dark-blue"] input, html[data-theme="dark-green"] input, html[data-theme="tech-dark"] input { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); } html[data-theme="dark"] input::placeholder, html[data-theme="dark-blue"] input::placeholder, html[data-theme="dark-green"] input::placeholder, html[data-theme="tech-dark"] input::placeholder { color: var(--text-secondary); } /* 主题特定的工具卡片样式 */ html[data-theme="light"] .tool-card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } html[data-theme="light"] .tool-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } html[data-theme="dark"] .tool-card, html[data-theme="dark-blue"] .tool-card, html[data-theme="dark-green"] .tool-card, html[data-theme="tech-dark"] .tool-card { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .tool-card:hover, html[data-theme="dark-blue"] .tool-card:hover, html[data-theme="dark-green"] .tool-card:hover, html[data-theme="tech-dark"] .tool-card:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); } /* 图标滤镜变量定义 */ :root { --icon-filter-light: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(100%); --icon-filter-dark: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); --sun-filter: brightness(0) saturate(100%) invert(61%) sepia(95%) saturate(1694%) hue-rotate(12deg) brightness(101%) contrast(101%); --moon-filter: brightness(0) saturate(100%) invert(51%) sepia(98%) saturate(3566%) hue-rotate(246deg) brightness(101%) contrast(101%); } /* 默认深色主题样式 - 防止闪烁 */ /* 移除html上的滤镜，只对图标应用滤镜 */ /* 默认显示月亮图标 - 使用与语言图标一致的颜色 */ html .theme-toggle i::before { filter: var(--icon-filter-dark) !important; } /* 浅色主题 - 深灰色图标 */ html[data-theme="light"] .bi::before, html[data-theme="light"] [class*=" bi-"]::before, html[data-theme="light"] [class^="bi-"]::before { filter: var(--icon-filter-light); } /* 深色主题 - 白色图标 */ html[data-theme="dark"] .bi::before, html[data-theme="dark"] [class*=" bi-"]::before, html[data-theme="dark"] [class^="bi-"]::before, html[data-theme="dark-blue"] .bi::before, html[data-theme="dark-blue"] [class*=" bi-"]::before, html[data-theme="dark-blue"] [class^="bi-"]::before, html[data-theme="dark-green"] .bi::before, html[data-theme="dark-green"] [class*=" bi-"]::before, html[data-theme="dark-green"] [class^="bi-"]::before, html[data-theme="tech-dark"] .bi::before, html[data-theme="tech-dark"] [class*=" bi-"]::before, html[data-theme="tech-dark"] [class^="bi-"]::before { filter: var(--icon-filter-dark); } /* 主题切换图标 - 与语言图标颜色一致 */ html[data-theme="light"] .theme-toggle .bi-sun-fill::before, html[data-theme="light"] .theme-toggle .bi-sun::before { filter: var(--icon-filter-light) !important; } html[data-theme="dark"] .theme-toggle .bi-moon-fill::before, html[data-theme="dark"] .theme-toggle .bi-moon::before, html[data-theme="dark-blue"] .theme-toggle .bi-moon-fill::before, html[data-theme="dark-blue"] .theme-toggle .bi-moon::before, html[data-theme="dark-green"] .theme-toggle .bi-moon-fill::before, html[data-theme="dark-green"] .theme-toggle .bi-moon::before, html[data-theme="tech-dark"] .theme-toggle .bi-moon-fill::before, html[data-theme="tech-dark"] .theme-toggle .bi-moon::before { filter: var(--icon-filter-dark) !important; } /* 底部导航按钮激活和悬停状态 - 白色图标 */ .mobile-bottom-nav .nav-item.active .bi::before, .mobile-bottom-nav .nav-item:hover .bi::before { filter: var(--icon-filter-dark) !important; } /* 搜索按钮图标 - 白色 */ .search-btn .bi::before { filter: var(--icon-filter-dark) !important; } /* 确保搜索按钮在所有主题下都有绿色背景 */ .search-btn, .search-btn:hover, .search-btn:focus, .search-btn:active { background: var(--accent-green) !important; background-color: var(--accent-green) !important; } /* 返回顶部按钮图标 - 白色 */ .back-to-top .bi::before { filter: var(--icon-filter-dark) !important; } /* ==================== 其他常用图标 (使用内联 SVG) ==================== */ .bi-chevron-up::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E") !important; } .bi-chevron-left::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important; } .bi-chevron-right::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important; } .bi-arrow-left::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'/%3E%3C/svg%3E") !important; } .bi-inbox::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4H4.98zm9.954 5H10.45a2.5 2.5 0 0 1-4.9 0H1.066l.32 2.562a.5.5 0 0 0 .497.438h12.234a.5.5 0 0 0 .496-.438L14.933 9zM3.809 3.563A1.5 1.5 0 0 1 4.981 3h6.038a1.5 1.5 0 0 1 1.172.563l3.7 4.625a.5.5 0 0 1 .105.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374l3.7-4.625z'/%3E%3C/svg%3E") !important; } .bi-app::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M11 2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h6zM5 1a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4H5z'/%3E%3C/svg%3E") !important; } /* 底部导航栏图标特殊处理 */ .mobile-bottom-nav .bi::before { width: 16px !important; height: 16px !important; margin: 0 !important; opacity: 1 !important; visibility: visible !important; } /* 博客和内容相关图标 */ .bi-calendar::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h6V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E") !important; } .bi-eye::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E") !important; } .bi-heart::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z'/%3E%3C/svg%3E") !important; } .bi-folder::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M.5 3l.04.87a1.99 1.99 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14H9.81a2 2 0 0 0 1.99-1.819l.637-7a1.99 1.99 0 0 0-.342-1.311L12.5 3H.5zm.217 1h11.566l-.313 3.426a.5.5 0 0 1-.49.574H1.49a.5.5 0 0 1-.49-.574L.717 4z'/%3E%3C/svg%3E") !important; } .bi-tag::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-1 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0z'/%3E%3Cpath d='M2 2h2.586a1 1 0 0 1 .707.293l7.414 7.414a1 1 0 0 1 0 1.414l-2.586 2.586a1 1 0 0 1-1.414 0L2.293 5.293A1 1 0 0 1 2 4.586V2zm0 2.414L8.414 10 7 11.414 2.586 7 2 6.414z'/%3E%3C/svg%3E") !important; } .bi-link-45deg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z'/%3E%3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z'/%3E%3C/svg%3E") !important; } .bi-journal-text::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z'/%3E%3Cpath d='M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-12a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3z'/%3E%3C/svg%3E") !important; } /* ==================== 社交媒体图标 ==================== */ /* 国际主流社交媒体 */ /* Facebook */ .bi-facebook::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z'/%3E%3C/svg%3E") !important; } /* Twitter / X */ .bi-twitter::before, .bi-twitter-x::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z'/%3E%3C/svg%3E") !important; } /* Instagram */ .bi-instagram::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z'/%3E%3C/svg%3E") !important; } /* LinkedIn */ .bi-linkedin::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z'/%3E%3C/svg%3E") !important; } /* YouTube */ .bi-youtube::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z'/%3E%3C/svg%3E") !important; } /* TikTok */ .bi-tiktok::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z'/%3E%3C/svg%3E") !important; } /* WhatsApp */ .bi-whatsapp::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z'/%3E%3C/svg%3E") !important; } /* Telegram */ .bi-telegram::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z'/%3E%3C/svg%3E") !important; } /* Reddit */ .bi-reddit::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6.167 8a.831.831 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661zm1.843 3.647c.315 0 1.403-.038 1.976-.611a.232.232 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83.458 0 .83-.381.83-.83a.831.831 0 0 0-1.66 0z'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.203.203 0 0 0-.153.028.186.186 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224c-.02.115-.029.23-.029.353 0 1.795 2.091 3.256 4.669 3.256 2.577 0 4.668-1.451 4.668-3.256 0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165z'/%3E%3C/svg%3E") !important; } /* Discord */ .bi-discord::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612z'/%3E%3C/svg%3E") !important; } /* GitHub */ .bi-github::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") !important; } /* Medium */ .bi-medium::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M9.025 8c0 2.485-2.02 4.5-4.513 4.5A4.506 4.506 0 0 1 0 8c0-2.486 2.02-4.5 4.512-4.5A4.506 4.506 0 0 1 9.025 8zm4.95 0c0 2.34-1.01 4.236-2.256 4.236-1.246 0-2.256-1.897-2.256-4.236 0-2.34 1.01-4.236 2.256-4.236 1.246 0 2.256 1.897 2.256 4.236zM16 8c0 2.096-.355 3.795-.794 3.795-.438 0-.793-1.7-.793-3.795 0-2.096.355-3.795.794-3.795.438 0 .793 1.699.793 3.795z'/%3E%3C/svg%3E") !important; } /* Pinterest */ .bi-pinterest::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0z'/%3E%3C/svg%3E") !important; } /* Snapchat */ .bi-snapchat::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M15.98 11.93c-.086-.375-.346-.857-.918-1.028-.344-.103-.698-.19-1.04-.274-.22-.054-.43-.107-.618-.16-.196-.056-.343-.135-.433-.262-.087-.123-.117-.294-.089-.47.08-.497.32-.97.32-1.445 0-.262-.044-.527-.133-.782a2.567 2.567 0 0 0-.353-.602 2.456 2.456 0 0 0-.53-.486c-.206-.15-.426-.27-.655-.36a2.726 2.726 0 0 0-.73-.155 2.782 2.782 0 0 0-.742.002c-.278.04-.547.12-.796.238-.249.118-.476.27-.674.45a2.55 2.55 0 0 0-.496.58c-.13.213-.233.443-.306.686-.073.243-.11.498-.11.753 0 .475.24.948.32 1.445.028.176-.002.347-.089.47-.09.127-.237.206-.433.262-.188.053-.398.106-.618.16-.342.084-.696.171-1.04.274-.572.171-.832.653-.918 1.028-.086.375-.068.767.05 1.096.236.658.715 1.044 1.388 1.12.186.02.372.028.556.028.503 0 .993-.053 1.453-.157.207-.047.407-.106.598-.177.133-.05.26-.105.383-.165.245-.119.476-.257.688-.413.21-.155.395-.334.549-.535.148-.193.27-.408.36-.638.091-.23.148-.477.169-.728.018-.214.017-.43-.004-.644a3.44 3.44 0 0 0-.145-.646c-.069-.183-.162-.355-.276-.512z'/%3E%3C/svg%3E") !important; } /* 中国主流社交媒体 */ /* 微信 WeChat */ .bi-wechat::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M11.176 14.429c-2.665 0-4.826-1.8-4.826-4.018 0-2.22 2.159-4.02 4.824-4.02S16 8.191 16 10.411c0 1.21-.65 2.301-1.666 3.036a.324.324 0 0 0-.12.366l.218.81a.616.616 0 0 1-.062.588.662.662 0 0 1-.537.243.866.866 0 0 1-.268-.045l-.979-.275a.302.302 0 0 0-.285.071c-.579.382-1.316.59-2.125.59zM9.331 12.2a.72.72 0 1 0 0-1.441.72.72 0 0 0 0 1.44zm3.543 0a.72.72 0 1 0 0-1.441.72.72 0 0 0 0 1.44z'/%3E%3Cpath d='M5.26 9.765c.176.046.357.068.54.062a4.65 4.65 0 0 1-.762-1.371C3.629 7.947 3 6.653 3 5.204 3 2.985 5.24 1.186 8 1.186c2.76 0 5 1.8 5 4.018a3.96 3.96 0 0 1-.86 2.461c-.314-.132-.65-.216-1-.254-1.334-.183-2.617-.22-3.78-.22a6.5 6.5 0 0 0-1.958.29c-.294.092-.577.197-.848.314l-.665-.188a.302.302 0 0 0-.285.071c-.579.382-1.316.59-2.125.59zM4.5 5.5a.72.72 0 1 0 0-1.44.72.72 0 0 0 0 1.44zm5 0a.72.72 0 1 0 0-1.44.72.72 0 0 0 0 1.44z'/%3E%3C/svg%3E") !important; } /* QQ */ .bi-qq::before, .bi-tencent-qq::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 12.5c.78 0 1.5.67 1.5 1.5s-.72 1.5-1.5 1.5S1 14.78 1 14s.67-1.5 1.5-1.5zm11 0c.78 0 1.5.67 1.5 1.5s-.72 1.5-1.5 1.5-1.5-.72-1.5-1.5.67-1.5 1.5-1.5zM8 1.5c2.15 0 4 2.18 4 4.5s-1.85 4.5-4 4.5-4-2.18-4-4.5 1.85-4.5 4-4.5zM2.5 8C1.12 8 0 6.88 0 5.5S1.12 3 2.5 3 5 4.12 5 5.5 3.88 8 2.5 8zm11 0C12.12 8 11 6.88 11 5.5S12.12 3 13.5 3 16 4.12 16 5.5 14.88 8 13.5 8z'/%3E%3C/svg%3E") !important; } /* 微博 Weibo */ .bi-weibo::before, .bi-sina-weibo::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6.714 11.09c-1.13.176-2.106-.2-2.179-0.84-.073-.64.79-1.305 1.92-1.48 1.13-.176 2.106.2 2.179.84.073.64-.79 1.305-1.92 1.48zm2.428-2.24c-.194-.046-.326-.096-.226-.35.217-.55.243-1.025.007-1.365-.444-.64-1.66-.606-3.05-.017 0 0-.437.19-.325-.154.213-.68.181-1.247-.135-1.577-.714-.744-2.608.028-4.23 1.725C.036 8.603-.25 10.14.17 11.358c.756 2.204 3.044 3.544 6.02 3.544 3.906 0 6.505-2.267 6.505-4.067 0-1.09-.898-1.708-1.553-1.985zM10.714 5.5c-.134 0-.268.01-.4.031a.498.498 0 1 0 .147.986c.097-.015.196-.023.296-.023 1.226 0 2.224.998 2.224 2.224a.5.5 0 1 0 1 0c0-1.778-1.446-3.218-3.267-3.218zm0-2c-.134 0-.268.006-.4.018a.5.5 0 1 0 .092.996c.103-.01.207-.014.308-.014 2.329 0 4.224 1.895 4.224 4.224a.5.5 0 1 0 1 0c0-2.881-2.343-5.224-5.224-5.224z'/%3E%3C/svg%3E") !important; } /* 知乎 Zhihu */ .bi-zhihu::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h8v11H9.5l-1.5 2-1.5-2H4V2zm1 1v9h1.5l1 1.333L8.5 12H11V3H5zm6.5 0h2v9h-2V3zM1 3h2v9H1V3zm12 0h2v9h-2V3z'/%3E%3C/svg%3E") !important; } /* 小红书 RedBook / Xiaohongshu */ .bi-xiaohongshu::before, .bi-redbook::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M2 1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm2 3v8h2V7h1.5v5h2V7h1.5v5h2V4h-2v2H8V4H6v2H4.5V4H4z'/%3E%3C/svg%3E") !important; } /* 抖音 Douyin */ .bi-douyin::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z'/%3E%3C/svg%3E") !important; } /* Slack */ .bi-slack::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z'/%3E%3C/svg%3E") !important; } /* Messenger */ .bi-messenger::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M0 7.76C0 3.301 3.493 0 8 0s8 3.301 8 7.76-3.493 7.76-8 7.76c-.81 0-1.586-.107-2.316-.307a.639.639 0 0 0-.427.03l-1.588.702a.64.64 0 0 1-.898-.566l-.044-1.423a.639.639 0 0 0-.215-.456C.956 12.108 0 10.092 0 7.76zm5.546-1.459-2.35 3.728c-.225.358.214.761.551.506l2.525-1.916a.48.48 0 0 1 .578-.002l1.869 1.402a1.2 1.2 0 0 0 1.735-.32l2.35-3.728c.226-.358-.214-.761-.551-.506L8.515 7.347a.48.48 0 0 1-.578.002L6.068 5.947a1.2 1.2 0 0 0-1.735.32z'/%3E%3C/svg%3E") !important; } /* Skype */ .bi-skype::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.671 0c.88 0 1.733.247 2.468.702a7.423 7.423 0 0 1 6.02 2.118 7.372 7.372 0 0 1 2.167 5.215c0 .344-.024.687-.072 1.026a4.662 4.662 0 0 1 .6 2.281 4.645 4.645 0 0 1-1.37 3.294A4.673 4.673 0 0 1 11.18 16c-.84 0-1.658-.226-2.37-.644a7.423 7.423 0 0 1-6.114-2.107A7.374 7.374 0 0 1 .529 8.035c0-.363.026-.724.08-1.081a4.644 4.644 0 0 1 .76-5.59A4.68 4.68 0 0 1 4.67 0zm.447 7.01c.18.309.43.572.729.769a7.07 7.07 0 0 0 1.257.653c.492.205.873.38 1.145.523.229.112.437.264.615.448.135.142.21.331.21.528a.872.872 0 0 1-.335.723c-.291.196-.64.289-.99.264a2.618 2.618 0 0 1-1.048-.206 11.44 11.44 0 0 1-.532-.253 1.284 1.284 0 0 0-.587-.15.717.717 0 0 0-.501.176.63.63 0 0 0-.195.491.796.796 0 0 0 .148.482 1.2 1.2 0 0 0 .456.354 5.113 5.113 0 0 0 2.212.419 4.554 4.554 0 0 0 1.624-.265 2.296 2.296 0 0 0 1.08-.801c.267-.39.402-.855.386-1.327a2.09 2.09 0 0 0-.279-1.101 2.53 2.53 0 0 0-.772-.792A7.198 7.198 0 0 0 8.486 7.3a1.05 1.05 0 0 0-.145-.058 18.182 18.182 0 0 1-1.013-.447 1.827 1.827 0 0 1-.54-.387.727.727 0 0 1-.2-.508.805.805 0 0 1 .385-.723 1.76 1.76 0 0 1 .968-.247c.26-.003.52.03.772.096.274.079.542.177.802.293.105.049.22.075.336.076a.6.6 0 0 0 .453-.19.69.69 0 0 0 .18-.496.717.717 0 0 0-.17-.476 1.374 1.374 0 0 0-.556-.354 3.69 3.69 0 0 0-.708-.183 5.963 5.963 0 0 0-1.022-.078 4.53 4.53 0 0 0-1.536.258 2.71 2.71 0 0 0-1.174.784 1.91 1.91 0 0 0-.45 1.287c-.01.37.076.736.25 1.063z'/%3E%3C/svg%3E") !important; } /* 通用邮件图标 */ .bi-envelope::before, .bi-email::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z'/%3E%3C/svg%3E") !important; } /* Mastodon */ .bi-mastodon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z'/%3E%3C/svg%3E") !important; } /* Twitch */ .bi-twitch::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M3.857 0 1 2.857v10.286h3.429V16l2.857-2.857H9.57L14.714 8V0H3.857zm9.714 7.429-2.285 2.285H9l-2 2v-2H4.429V1.143h9.142v6.286z'/%3E%3Cpath d='M11.857 3.143h-1.143V6.57h1.143V3.143zm-3.143 0H7.571V6.57h1.143V3.143z'/%3E%3C/svg%3E") !important; } /* Stack Overflow */ .bi-stack-overflow::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12.412 14.572V10.29h1.428V16H1v-5.71h1.428v4.282h9.984z'/%3E%3Cpath d='M3.857 13.145h7.137v-1.428H3.857v1.428zM10.254 0 9.108.852l4.26 5.727 1.146-.852L10.254 0zm-3.54 3.377 5.484 4.567.913-1.097L7.627 2.28l-.914 1.097zM4.922 6.55l6.47 3.013.603-1.294-6.47-3.013-.603 1.294zm-.925 3.344 6.985 1.469.294-1.398-6.985-1.468-.294 1.397z'/%3E%3C/svg%3E") !important; } /* Tumblr */ .bi-tumblr::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M10.04 10.323c-.096.367-.354.62-.76.76-.406.14-.917.179-1.534.116a4.78 4.78 0 0 1-1.663-.476 5.206 5.206 0 0 1-1.337-.99V13.4c.456.34.988.602 1.593.786.605.184 1.25.276 1.934.276.684 0 1.316-.096 1.897-.287.581-.191 1.086-.463 1.515-.816.429-.353.764-.784 1.006-1.293.242-.509.363-1.084.363-1.725V3.816h-2.38v.832c-.683-.394-1.474-.591-2.374-.591-.9 0-1.734.2-2.502.6-.768.4-1.377.96-1.826 1.68-.45.72-.675 1.539-.675 2.457 0 .92.225 1.74.675 2.458.45.717 1.058 1.279 1.826 1.68.768.4 1.602.6 2.502.6.683 0 1.33-.133 1.941-.4V13.4c-.456.34-.988.602-1.593.786a6.388 6.388 0 0 1-1.934.276c-.684 0-1.316-.096-1.897-.287-.581-.191-1.086-.463-1.515-.816-.429-.353-.764-.784-1.006-1.293C4.225 11.557 4.104 10.982 4.104 10.341V.816h2.38v4.584c.683-.394 1.474-.591 2.374-.591.9 0 1.734.2 2.502.6.768.4 1.377.96 1.826 1.68.45.72.675 1.539.675 2.457 0 .92-.225 1.74-.675 2.458-.45.717-1.058 1.279-1.826 1.68-.768.4-1.602.6-2.502.6z'/%3E%3C/svg%3E") !important; } /* Viber */ .bi-viber::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.03 0 6.76c0 1.694.658 3.245 1.739 4.419.185.2.326.42.416.664.09.244.129.502.113.763l-.137 1.382a.5.5 0 0 0 .696.555l1.524-.504c.247-.082.506-.116.765-.1 1.193.075 2.405.075 3.598 0 4.42-.326 7.42-3.76 7.42-7.204C16 3.03 12.42 0 8 0zm-.5 2.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 0 1H8v.5a.5.5 0 0 1-1 0V4.5h-.5a.5.5 0 0 1 0-1h.5V3a.5.5 0 0 1 .5-.5zM5 6h6a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm0 1v3h6V7H5z'/%3E%3C/svg%3E") !important; } /* Line */ .bi-line::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c4.411 0 8 2.912 8 6.492 0 1.433-.555 2.723-1.715 3.994-1.678 1.932-5.431 4.285-6.285 4.645-.83.35-.734-.197-.696-.413l.003-.018.114-.685c.027-.204.055-.521-.026-.723-.09-.223-.444-.339-.704-.395C2.846 12.39 0 9.701 0 6.492 0 2.912 3.59 0 8 0ZM5.022 7.686H3.497V4.918a.156.156 0 0 0-.155-.156H2.78a.156.156 0 0 0-.156.156v3.486c0 .041.017.080.044.107a.155.155 0 0 0 .112.047h2.242c.086 0 .155-.07.155-.156v-.56a.156.156 0 0 0-.155-.156Zm.791-2.924a.156.156 0 0 0-.156.156v3.486c0 .086.07.155.156.155h.562c.086 0 .155-.07.155-.155V4.918a.156.156 0 0 0-.155-.156h-.562Zm3.863 0a.156.156 0 0 0-.156.156v2.07L7.923 4.832a.17.17 0 0 0-.013-.015v-.004a.149.149 0 0 0-.046-.03.15.15 0 0 0-.052-.014.155.155 0 0 0-.055-.001H7.3a.156.156 0 0 0-.156.156v3.486c0 .086.07.155.156.155h.56c.087 0 .157-.07.157-.155v-2.07l1.6 2.16a.154.154 0 0 0 .039.038.155.155 0 0 0 .112.017.156.156 0 0 0 .13-.155V4.918a.156.156 0 0 0-.155-.156h-.561Zm3.815.717v-.56a.156.156 0 0 0-.155-.157h-2.242a.155.155 0 0 0-.112.05.155.155 0 0 0-.043.107v3.486c0 .041.017.08.044.107a.154.154 0 0 0 .112.047h2.242c.086 0 .155-.07.155-.156v-.56a.156.156 0 0 0-.155-.157H11.81v-.589h1.525c.086 0 .155-.07.155-.156v-.56a.156.156 0 0 0-.155-.157H11.81v-.589h1.525c.086 0 .155-.07.155-.156Z'/%3E%3C/svg%3E") !important; } /* 面包屑导航样式 */ .breadcrumb-nav { background: transparent !important; border: none !important; padding: 0 0 0 10px; margin-bottom: 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 10 !important; line-height: 1.4 !important; } .breadcrumb { display: flex; align-items: center; list-style: none; margin: 0; padding: 0 0 0 10px; font-size: 0.9rem; color: var(--text-secondary); justify-content: flex-start; text-align: left; max-width: 1440px; margin: 0 auto; line-height: 1.4; } .breadcrumb-item { display: flex; align-items: center; } .breadcrumb-item:not(:last-child)::after { content: ">"; margin: 0 0.5rem; color: var(--text-secondary); opacity: 0.6; } .breadcrumb-item a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s ease; } .breadcrumb-item a:hover { color: var(--accent-green); } .breadcrumb-item.active { color: var(--text-primary); font-weight: 500; } .breadcrumb-item.active span { color: inherit; } /* 移动端面包屑样式 */ @media (max-width: 768px) { .breadcrumb-nav { padding: 0; margin-bottom: 0; } .breadcrumb { font-size: 0.85rem; flex-wrap: wrap; padding: 0 20px 0 36px; } .breadcrumb-item:not(:last-child)::after { margin: 0 0.3rem; content: ">"; } } @media (max-width: 480px) { .breadcrumb { padding: 0 15px; } } /* 工具卡片分类标签样式 */ .tool-categories { margin-top: 0.5rem; display: flex; flex-wrap: nowrap; /* 不换行 */ gap: 0.3rem; align-items: center; overflow: hidden; /* 隐藏溢出内容 */ } .tool-category-tag { display: inline-block; padding: 0.1rem 0.2rem; color: var(--text-secondary); font-size: 0.75rem; font-weight: 400; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; flex-shrink: 0; /* 不收缩 */ border-radius: 4px; transition: all 0.2s ease; opacity: 0.8; } .tool-category-tag:hover { color: var(--text-primary); background: var(--hover-bg); text-decoration: none; transform: translateY(-1px); opacity: 1; } /* 移动端分类标签样式 */ @media (max-width: 768px) { .tool-categories { margin-top: 0.4rem; gap: 0.25rem; } .tool-category-tag { font-size: 0.75rem; padding: 0.08rem 0.15rem; border-radius: 3px; } } @media (max-width: 480px) { .tool-categories { margin-top: 0.3rem; gap: 0.2rem; } .tool-category-tag { font-size: 0.75rem; padding: 0.06rem 0.12rem; border-radius: 3px; } } html { transition: all 0.3s ease; } .site-header, .top-banner, .main-content, .sidebar, .tool-card, .search-box, .mobile-filter-dropdown, .category-header { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } a:hover, a:focus, a:active { color: var(--text-primary); } button:not(.summary-toggle-btn):not(.back-to-top):not(.search-btn):not(.cookie-consent-btn):not(.cookie-consent-btn-primary):not(.cookie-consent-btn-secondary):not(.language-suggestion-btn):not(.language-suggestion-btn-primary):not(.language-suggestion-btn-secondary):not(.language-suggestion-close):not(.theme-toggle):not(.language-toggle) { color: var(--text-primary) !important; background: transparent !important; background-color: transparent !important; border: none !important; outline: none !important; } a { color: var(--text-primary); } .item-category:hover, .search-btn, .search-btn:hover, .tag-card:hover { color: var(--text-secondary); } /* 分类标签悬停效果 */ .item-category:hover { color: var(--btn-text-primary) !important; } .tool-card { box-shadow: var(--shadow); } .tool-card:hover { box-shadow: var(--shadow); } input { color: var(--text-primary) !important; background-color: var(--input-bg) !important; border-color: var(--input-border) !important; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--primary-bg); color: var(--text-primary); /* 防止字体加载时的布局偏移 */ font-display: swap; /* 确保字体回退匹配 */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; } .container { max-width: 1440px; margin: 0 auto; padding: 0 20px; position: relative; } @media (max-width: 480px) { .container { padding: 0 15px; } } .item-top-section { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; align-items: start; } .item-basic-info { display: flex; flex-direction: column; gap: 1rem; } .item-screenshot-main { width: 100%; height: 300px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); margin: 0; padding: 0; } .item-screenshot-main a { display: block; width: 100%; height: 100%; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .item-screenshot-main a:hover { transform: scale(1.02); box-shadow: var(--shadow); } .item-screenshot-main img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; background: var(--primary-bg); } /* 底部内容区域 */ .item-bottom-section { display: grid; grid-template-columns: 1fr 350px; gap: 2rem; } .item-details { display: flex; flex-direction: column; background: var(--primary-bg); border-radius: 12px; padding: 1rem; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .item-details h2.section-title { margin-top: 0; padding-top: 0; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); font-size: 1.25rem; font-weight: 600; color: var(--text-primary); } /* 详情页侧边栏样式 */ .item-sidebar .sidebar-section h3 { margin-top: 0; padding-top: 0; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); font-size: 1.25rem; font-weight: 600; color: var(--text-primary); } .alternatives-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .alternative-card { background: var(--primary-bg); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .alternative-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .alternative-link { display: flex; flex-direction: column; padding: 1rem; text-decoration: none; color: inherit; height: 100%; } .alternative-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .alternative-image { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--hover-bg); border: 1px solid var(--border-color); } .alternative-image img { width: 100%; height: 100%; object-fit: cover; background: var(--primary-bg); } .alternative-image i { font-size: 1.5rem; color: var(--text-muted); } .alternative-title { flex: 1; min-width: 0; } .alternative-title h4 { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .alternative-description { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .no-alternatives { text-align: center; padding: 2rem; color: var(--text-muted); } @media (max-width: 1024px) { .item-top-section { grid-template-columns: 1fr; gap: 1.5rem; } .item-bottom-section { grid-template-columns: 1fr; gap: 1.5rem; } .item-screenshot-main { height: 200px; } } @media (max-width: 768px) { .item-top-section { gap: 1rem; } .item-bottom-section { gap: 1rem; } .item-screenshot-main { height: 200px; min-height: 150px; max-height: 300px; } } @media (max-width: 1000px) { .item-screenshot-main { height: 250px; aspect-ratio: 16/9; } } @media (max-width: 460px) { .item-screenshot-main { height: 180px; aspect-ratio: 16/9; } .item-top-section { grid-template-columns: 1fr; gap: 1rem; } .item-basic-info { order: 1; } .item-screenshot-main { order: 2; } .item-bottom-section h2.section-title { width: 100%; margin-left: 0; margin-right: 0; } .alternative-link { padding: 0.75rem; gap: 0.75rem; } .alternative-image { width: 40px; height: 40px; } } .item-title-section { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .item-logo { width: 60px; height: 60px; border-radius: 12px; background: var(--primary-bg); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--accent-orange); flex-shrink: 0; } .item-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; background: var(--primary-bg); } .item-description { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.125rem !important; } .item-update-time{ font-size: 1.0rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.125rem !important; } .item-visit-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--accent-green); color: var(--btn-text-primary) !important; padding: 0.5rem 1rem; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; width: fit-content; white-space: nowrap; } .item-visit-btn:hover { background: var(--accent-green-hover); transform: translateY(-2px); color: var(--btn-text-primary) !important; } /* 访问官网按钮图标 - 白色 */ .item-visit-btn .bi::before { filter: var(--icon-filter-dark) !important; } /* 所有绿色按钮的图标都应该是白色 */ .item-category:hover .bi::before, .pagination-link.current .bi::before, .blog-article-tag:hover .bi::before, .category-list-page .subcategory-item:hover .bi::before, .tag-card:hover .bi::before, .mobile-bottom-nav .nav-item:hover .bi::before, .mobile-bottom-nav .nav-item.active .bi::before, .category-label:hover .bi::before, .category-tag:hover .bi::before, .tag-item:hover .bi::before, .category-tag.active .bi::before, .tag-item.active .bi::before { filter: var(--icon-filter-dark) !important; } .item-content-sections { display: flex; flex-direction: column; gap: 0; } .item-section { padding: 1.5rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 2rem; } .item-section:last-child { border-bottom: none; margin-bottom: 0; } .item-section h2 { font-size: 1.3rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1rem; } .item-section h2.special-section { color: var(--text-primary); padding: 0; margin: 1.5rem 0 1rem 0; font-size: 1.1rem; font-weight: 700; text-align: left; } .item-section p { color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem; } .item-sidebar { display: flex; flex-direction: column; gap: 2rem; } /* 侧边栏区块样式 */ .sidebar-section { padding: 1.5rem 0; border-bottom: 1px solid var(--border-color); } .sidebar-section:last-child { border-bottom: none; } .sidebar-section h3 { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1rem; } .item-categories-main { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; } .item-category { display: inline-block; padding: 0.4rem 0.8rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; color: var(--text-primary); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; white-space: nowrap; cursor: pointer; } .item-category:hover { background: var(--accent-green); color: var(--btn-text-primary) !important; border-color: var(--accent-green); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3); } .item-visit-btn:hover { background: var(--accent-green-hover); color: var(--btn-text-primary) !important; box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4); } .breadcrumb { margin-bottom: 0.5rem !important; padding: 0.125rem 0 !important; } /* 新的详情页布局样式 */ .detail-page-navbar { padding: 0.375rem 0 !important; } .detail-page-breadcrumb { margin-top: 1rem !important; margin-bottom: 0.75rem !important; padding: 0.125rem 0 !important; } .detail-page-description { margin-bottom: 0.125rem !important; } .detail-page-tag { padding: 0.125rem 0.375rem !important; font-size: 0.7rem !important; border-radius: 4px !important; margin: 0.0625rem !important; display: inline-block !important; line-height: 1.3 !important; } .detail-page-tags { gap: 0.0625rem !important; margin: 0.125rem 0 !important; padding: 0 !important; } /* 减少整个页面的顶部间距 */ .detail-page .page-content { padding: 0.125rem 0 !important; } .detail-page .main-content { padding-top: 0.125rem !important; } .breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s ease; } .breadcrumb a:hover { color: var(--accent-green); } .breadcrumb .separator { margin: 0 0.5rem; color: var(--text-muted); } .back-button { position: fixed; top: 50%; left: 20px; transform: translateY(-50%); z-index: 1000; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0.75rem; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; color: var(--text-primary); text-decoration: none; font-size: 0.8rem; font-weight: 500; transition: all 0.3s ease; cursor: pointer; user-select: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .back-button:hover { background: rgba(16, 185, 129, 0.9); border-color: rgba(16, 185, 129, 0.3); color: var(--btn-text-primary) !important; transform: scale(1.05); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } .back-button:active { transform: scale(0.95); } .back-button i { font-size: 1rem; } .back-button { background: rgba(31, 31, 31, 0.6); border-color: rgba(255, 255, 255, 0.08); color: var(--text-secondary); } @media (max-width: 768px) { .back-button { top: 50%; left: 15px; transform: translateY(-50%); padding: 0.6rem 0.9rem; font-size: 0.85rem; border-radius: 8px; min-width: 44px; min-height: 44px; } .back-button:hover { transform: translateY(-50%) scale(1.1); } } @media (min-width: 769px) { .back-button { display: none !important; } } .page-content { max-width: 1440px; margin: 0 auto; padding: 0.5rem 0; } /* 桌面版布局优化 */ @media (min-width: 769px) { .page-content { max-width: 1200px; padding: 1rem 2rem; } .main-content { width: 100%; max-width: none; } .main-area { width: 100%; max-width: none; } } .page-featured-image { margin-bottom: 2rem; text-align: center; } .page-featured-image .featured-image { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .page-body { margin-bottom: 3rem; } .page-content-text { font-size: 1.1rem; line-height: 1.8; color: var(--text-primary); } .no-results { text-align: center; padding: 4rem 2rem; color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; width: 100%; } .no-results i { font-size: 4rem; margin-bottom: 1rem; opacity: 0.5; display: block; } .no-results h3 { margin-bottom: 0.5rem; color: var(--text-primary); font-size: 1.5rem; } @media (max-width: 768px) { .page-content { padding: 1rem 0; } .page-content-text { font-size: 1rem; } } @media (max-width: 480px) { .page-content-text { font-size: 0.95rem; } } @media (max-width: 768px) { .breadcrumb { margin-bottom: 0.25rem; padding: 0.125rem 0; } .item-title-section { flex-direction: row; text-align: left; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .item-logo { width: 48px; height: 48px; font-size: 1.5rem; flex-shrink: 0; } .item-description { font-size: 1rem; margin-bottom: 0.5rem; } .item-details { padding: 0.75rem; } .item-details h2.section-title { margin-bottom: 0.25rem; padding-bottom: 0.25rem; } .sidebar-section { padding: 1rem 0; } .item-section { padding: 1rem 0; } } @media (max-width: 480px) { .breadcrumb { margin-bottom: 0.125rem; padding: 0.0625rem 0; } .item-title-section { gap: 0.375rem; margin-bottom: 0.125rem; } .item-description { font-size: 0.95rem; margin-bottom: 0.25rem; } .item-details { padding: 0.5rem; } .item-details h2.section-title { margin-bottom: 0.125rem; padding-bottom: 0.125rem; } .item-section { padding: 0.75rem 0; } .sidebar-section { padding: 0.75rem 0; } } .site-header { background: var(--header-bg); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(20px); } .navbar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0 !important; position: relative; width: 100%; } /* 移动端导航栏布局 */ @media (max-width: 768px) { .navbar { padding-left: 50px !important; padding-right: 0 !important; } } .navbar-brand .logo-link { text-decoration: none; color: inherit; display: block; } .navbar-brand .logo { font-size: 1.8rem; font-weight: 800; flex-shrink: 0; margin-right: 2rem; } .navbar-brand .logo .best { background: linear-gradient(135deg, #667eea, #764ba2, #f093fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .navbar-brand .logo .space { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 900; } .navbar-nav { display: flex; list-style: none; gap: 2rem; flex: 1; justify-content: center; margin: 0 auto; } .nav-link { color: var(--nav-text-normal) !important; text-decoration: none; font-weight: 500; padding: 0.5rem 1rem; border-radius: 6px; transition: all 0.3s ease; position: relative; } .nav-link:hover { background: transparent !important; color: var(--text-primary) !important; transform: translateY(-1px); } .nav-link.active { background: transparent !important; color: var(--text-primary) !important; font-weight: 600; } .nav-link.active:hover { background: transparent !important; color: var(--text-primary) !important; } .nav-link.active::after { width: 80%; background: var(--accent-green); } /* 头部菜单下划线指示器 */ .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--accent-green); transition: all 0.3s ease; transform: translateX(-50%); } .nav-link:hover::after { width: 80%; } .navbar-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; margin-left: auto; } /* ==================== 语言切换按钮 ==================== */ .language-dropdown { position: relative; display: inline-flex; z-index: 2147483647 !important; border: none !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; } .language-toggle { display: flex !important; align-items: center; justify-content: center; gap: 0.5rem; background: transparent !important; border: none !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; color: var(--text-secondary); padding: 0.5rem; border-radius: var(--border-radius); cursor: pointer; transition: all 0.3s ease; font-size: 0.875rem; outline: none !important; box-shadow: none !important; background-color: transparent !important; min-width: fit-content; height: 40px; } /* 语言切换图标样式 */ .language-toggle i.bi-globe::before { width: 16px !important; height: 16px !important; margin: 0 !important; } /* 语言文本标签 */ .language-toggle .current-lang { font-size: 0.875rem; white-space: nowrap; } /* 下拉箭头 */ .language-toggle i.bi-chevron-down::before { width: 14px !important; height: 14px !important; margin: 0 !important; } /* 深色主题下语言选择器文字颜色 */ html[data-theme="dark"] .language-toggle, html[data-theme="dark-blue"] .language-toggle, html[data-theme="dark-green"] .language-toggle, html[data-theme="tech-dark"] .language-toggle { color: var(--text-primary) !important; } .language-toggle:hover { background: var(--hover-bg) !important; color: var(--text-primary); border: none !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; outline: none !important; box-shadow: none !important; } .language-menu { position: absolute; top: 100%; right: 0; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--shadow); min-width: 120px; z-index: 2147483647 !important; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; margin-top: 0.5rem; } .language-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } .language-item { padding: 0.75rem 1rem; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); } .language-item:last-child { border-bottom: none; } .language-item:hover { background: var(--hover-bg); } /* ==================== 移动端菜单按钮 ==================== */ .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; background: transparent !important; border: none !important; color: var(--text-secondary); padding: 0.5rem; border-radius: var(--border-radius); cursor: pointer; transition: all 0.3s ease; font-size: 1.2rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 11; width: 40px; height: 40px; min-width: 40px; min-height: 40px; } .mobile-menu-toggle:hover { background: var(--hover-bg) !important; color: var(--text-primary); } .mobile-menu-toggle i::before { width: 24px !important; height: 24px !important; } /* 桌面端隐藏移动端菜单按钮 */ @media (min-width: 769px) { .mobile-menu-toggle { display: none !important; } } /* ==================== 移动端顶部导航容器 ==================== */ /* * 侧边栏式导航菜单，默认隐藏在左侧 * 通过 toggleMobileTopNav() 切换显示/隐藏 */ .mobile-top-nav { position: fixed; top: 0; left: -300px; /* 默认隐藏在屏幕左侧 */ width: 300px; height: 100vh; background: var(--card-bg); border-right: 1px solid var(--border-color); z-index: 1002; transition: left 0.3s ease; /* 滑动动画 */ overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; } /* 显示状态 - 滑入屏幕 */ .mobile-top-nav.show { left: 0; } /* 导航头部区域 */ .mobile-top-nav-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; } /* Logo样式 - 渐变色文字效果 */ .mobile-top-logo { font-size: 1.5rem; font-weight: 800; } .mobile-top-logo .best { background: linear-gradient(135deg, #667eea, #764ba2, #f093fb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mobile-top-logo .space { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 900; } /* 关闭按钮样式 */ .mobile-top-nav-close { background: transparent; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; padding: 0.5rem; border-radius: var(--border-radius); transition: all 0.3s ease; } /* 关闭按钮悬停状态 */ .mobile-top-nav-close:hover { color: var(--text-primary); background: var(--hover-bg); } /* 导航菜单内容区域 */ .mobile-top-nav-content { display: flex; flex-direction: column; gap: 0.5rem; } /* ==================== 移动端顶部导航菜单项样式 ==================== */ /* * 样式说明： * * 1. 默认状态：次要文字颜色 + 透明背景 * 2. 悬停状态：主题强调色背景 + 白色文字 * 3. 选中状态：主题强调色背景 + 白色文字（与悬停一致） * * 主题适配： * - 通过 var(--accent-green) 自动适配不同主题的强调色 * - 白色主题：绿色 (#10b981) * - 深色主题：蓝色 (#60a5fa) * - 科技主题：科技蓝 (#00C6FF) * * 选中逻辑： * - PHP服务端判断：比较 $_SERVER['REQUEST_URI'] 和菜单URL * - 完全匹配时添加 .active 类 * * 交互控制： * - 显示/隐藏：toggleMobileTopNav() 切换 .show 类 * - 悬停效果：纯CSS实现，无需JavaScript */ /* 默认状态 */ .mobile-nav-item { display: block; padding: 1rem; color: var(--sidebar-text-normal) !important; background: var(--sidebar-bg-normal) !important; text-decoration: none; border-radius: var(--border-radius); transition: all 0.3s ease; text-align: center; } /* 悬停状态 */ .mobile-nav-item:hover { background: var(--sidebar-bg-hover) !important; color: var(--sidebar-text-hover) !important; } /* 选中/激活状态 */ .mobile-nav-item.active { background: var(--sidebar-bg-active) !important; color: var(--sidebar-text-active) !important; } .mobile-filters-section { background: none; border-radius: 0; padding: 0.25rem; margin-bottom: 0.5rem; box-shadow: none; position: relative; overflow: visible; z-index: 10; display: block; /* 默认显示，包括桌面端 */ } @media (max-width: 768px) { .mobile-filters-section { display: block !important; } } .main-area .mobile-filters-section { margin-bottom: 0.5rem; margin-top: 0; padding-top: 0; background: none; border: none; border-radius: 0; box-shadow: none; overflow: visible; } .main-area .mobile-filters-container { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .main-area .mobile-filters-container::-webkit-scrollbar { display: none; } .mobile-filters-container { display: flex; gap: 1rem; align-items: center; } @media (min-width: 769px) { .mobile-filters-container { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .main-area .mobile-filters-container { flex-direction: row !important; flex-wrap: wrap !important; gap: 1rem; justify-content: flex-start; align-items: center; padding: 0; margin-bottom: 0.5rem; width: 100%; } .main-area .mobile-filters-section { padding: 0.25rem 0; margin: 0; } .main-area .category-filter { display: none !important; } } .mobile-filter-dropdown { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.8rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: all 0.3s ease; margin: 0.1rem 0; box-shadow: none; min-width: 120px; flex: 0 0 auto; white-space: nowrap; color: var(--text-primary) !important; box-sizing: border-box; position: relative; height: 44px; } .mobile-filter-dropdown:hover { transform: translateY(-1px); } .mobile-filter-label { font-size: 0.9rem; font-weight: 500; color: var(--filter-text-normal) !important; } .mobile-filter-dropdown i { color: var(--filter-text-normal) !important; font-size: 0.8rem; transition: transform 0.3s ease; margin-left: 0.5rem; } .mobile-filter-dropdown:hover i { transform: rotate(180deg); } @media (max-width: 768px) { .top-banner { padding: 0.5rem 0 !important; } .search-banner-text { padding: 0 15px; } .search-banner-title { font-size: 1.4rem; margin-bottom: 0.25rem; } .search-banner-subtitle { font-size: 0.8rem; margin-bottom: 0.75rem; } .search-container { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .search-box { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; flex-wrap: nowrap !important; overflow: hidden !important; height: 56px !important; gap: 0 !important; flex-direction: row !important; justify-content: space-between !important; background: var(--card-bg) !important; border: 2px solid var(--accent-green) !important; border-radius: 12px !important; box-shadow: none !important; transition: all 0.3s ease !important; } .search-box:focus-within { border: 2px solid var(--accent-green) !important; box-shadow: none !important; transform: none !important; } .search-label { min-width: 70px !important; padding: 1rem 1.2rem !important; font-size: 0.9rem !important; border-radius: 10px 0 0 10px !important; flex-shrink: 0 !important; text-align: center !important; order: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .search-input { font-size: 1rem !important; padding: 1rem 1.5rem !important; height: 100% !important; flex: 1 !important; min-width: 0 !important; order: 1 !important; margin-right: 0 !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; color: var(--text-color) !important; caret-color: var(--primary-color) !important; -webkit-text-fill-color: var(--text-color) !important; } .search-btn { min-width: 44px !important; height: 100% !important; width: 44px !important; padding: 0.6rem !important; display: flex !important; visibility: visible !important; opacity: 1 !important; flex-shrink: 0 !important; flex-basis: 44px !important; z-index: 10 !important; order: 2 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; background: var(--accent-green) !important; border: none !important; /* 确保按钮与搜索框边框视觉上连接 */ margin-left: -2px !important; border-left: 2px solid var(--accent-green) !important; } .mobile-filters-section { padding: 0; margin: 0 0 0.5rem 0; } .mobile-filters-container { flex-direction: column !important; flex-wrap: nowrap !important; gap: 0.75rem !important; align-items: stretch !important; justify-content: flex-start !important; padding: 0; } .mobile-filter-dropdown { width: 100% !important; min-width: auto !important; flex-shrink: 1 !important; margin: 0.25rem 0 !important; } .category-filter { display: block !important; } .mobile-filter-overlay-content { width: 100%; max-width: none; margin-top: 0; max-height: 70vh; } } .mobile-filter-overlay { position: absolute; top: 100%; left: 0; right: 0; width: 100%; background: none; z-index: 10; display: none; margin-top: 0; } @media (max-width: 768px) { .mobile-filter-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100vh !important; z-index: 9999999 !important; /* 突破层叠上下文限制 */ transform: translateZ(0); /* 确保在最高层级 */ isolation: isolate; } } @media (min-width: 769px) { .mobile-filter-overlay { position: absolute; top: 100%; left: 0; width: 100%; background: none; z-index: 10; display: none; margin-top: 0.1rem; } .mobile-filter-overlay-content { width: 400px; max-width: 400px; height: auto; max-height: 60vh; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); margin: 0; border: 1px solid var(--border-color); animation: slideDownFromTop 0.3s ease-out; z-index: 11; } .mobile-filter-overlay-content[data-filter-type="sort"] { width: 200px; max-width: 200px; } .mobile-filter-overlay-body { flex: 1; overflow-y: auto; min-height: 0; max-height: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .mobile-filter-dropdown { position: relative; } } .mobile-filter-overlay-content { background: var(--card-bg); width: 100%; height: auto; max-height: 60vh; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); margin: 0; display: flex; flex-direction: column; position: relative; animation: slideDownFromTop 0.3s ease-out; background-clip: border-box; border: 1px solid var(--border-color); background-color: var(--card-bg) !important; position: relative; z-index: 11; } @media (max-width: 768px) { .mobile-filter-overlay-content { width: 100% !important; max-width: 100% !important; max-height: 80vh; border-radius: 8px 8px 0 0; position: fixed; bottom: 54px; left: 0; right: 0; animation: slideUpFromBottom 0.3s ease-out; border-bottom: none; margin-bottom: 0; padding-bottom: 0; box-sizing: border-box; top: auto; } } .mobile-filter-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); background: var(--card-bg); flex-shrink: 0; } .mobile-filter-title { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0; } .mobile-filter-close { background: transparent; border: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; padding: 0.25rem; border-radius: 4px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .mobile-filter-close:hover { background: var(--hover-bg); color: var(--text-primary); } .mobile-filter-overlay-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--card-bg); border-radius: 8px; z-index: -1; } @keyframes slideDownFromTop { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideUpFromBottom { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .mobile-filter-overlay-body { flex: 1; overflow-y: auto; padding: 0; min-height: 0; max-height: none; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .mobile-filter-overlay-body::-webkit-scrollbar { width: 6px; } .mobile-filter-overlay-body::-webkit-scrollbar-track { background: transparent; } .mobile-filter-overlay-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } .mobile-filter-overlay-body::-webkit-scrollbar-thumb:hover { background: var(--accent-orange); } .mobile-filter-overlay-body { scroll-behavior: smooth; height: auto; touch-action: pan-y; } @media (max-width: 768px) { .mobile-filter-overlay-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 200px; } } .mobile-filter-option { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.75rem; cursor: pointer; transition: all 0.3s ease; border-bottom: none; text-decoration: none; color: var(--filter-text-normal) !important; background: var(--filter-bg-normal) !important; min-height: 32px; } .mobile-filter-option:hover { background: var(--filter-bg-hover) !important; color: var(--filter-text-hover) !important; } .mobile-filter-option.active { background: var(--filter-bg-active) !important; color: var(--filter-text-active) !important; } .mobile-filter-option span { font-size: 0.9rem; font-weight: 500; color: inherit !important; } .mobile-filter-option { pointer-events: auto; } /* ==================== 分类标签激活状态样式 ==================== */ /* 一级分类激活状态 */ /* 二级分类激活状态 */ .mobile-filter-option[href] { text-decoration: none; color: inherit; display: flex; } .mobile-filter-option[href]:hover { text-decoration: none; color: inherit; } .top-banner { position: relative; background: var(--primary-bg); padding: 1rem 0; text-align: center; overflow: hidden; } .top-banner .container { position: relative; z-index: 1; } .search-container { max-width: 60%; margin: 0 auto; padding: 0; width: 60%; } .search-banner-text { margin-bottom: 1.5rem; text-align: center; } /* 当标题和副标题为空时，搜索框容器应该占据更多空间 */ .search-banner-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--text-primary); line-height: 1.3; } .search-banner-subtitle { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.4; margin: 0; max-width: 1000px; margin-left: auto; margin-right: auto; } .search-box { display: flex; align-items: center; background: var(--card-bg); border: 2px solid var(--accent-green); border-radius: 12px; padding: 0; transition: all 0.3s ease; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); gap: 0; max-width: 100%; margin: 0 auto; flex-wrap: nowrap !important; overflow: hidden; height: 56px; position: relative; flex-direction: row !important; justify-content: flex-start; } .search-box:focus-within { border: 2px solid var(--accent-green); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2), 0 2px 12px rgba(0, 0, 0, 0.4); transform: none; } .search-form { width: 100%; } .search-label { background: var(--search-label-bg); color: var(--search-label-color); padding: 1rem 1.2rem; font-size: 1rem; font-weight: 500; border-right: 1px solid var(--border-color); flex-shrink: 0; min-width: 80px; text-align: center; border-radius: 10px 0 0 10px; transition: all 0.3s ease; } .search-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 1.1rem; padding: 1rem 1.5rem; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 100%; box-sizing: border-box; order: 1; caret-color: var(--accent-green); margin-right: 0; text-align: center; } .search-input:focus { caret-color: var(--accent-green) !important; -webkit-text-fill-color: var(--text-primary); outline: none; } .search-input::selection { background: rgba(34, 197, 94, 0.2) !important; color: var(--text-primary) !important; } .search-input::-moz-selection { background: rgba(34, 197, 94, 0.2) !important; color: var(--text-primary) !important; } .search-box * { caret-color: auto !important; } .search-box input { caret-color: var(--accent-green) !important; -webkit-text-fill-color: var(--text-primary) !important; } .search-btn { background: var(--accent-green) !important; background-color: var(--accent-green) !important; color: var(--btn-text-primary) !important; border: none; padding: 1rem; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; flex-shrink: 0; display: flex; align-items: center; justify-content: center; min-width: 56px; height: 100%; width: 56px; flex-basis: 56px; position: relative; box-sizing: border-box; margin-right: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px; order: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .search-btn::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--accent-green); } .search-btn:hover { background: var(--accent-green) !important; background-color: var(--accent-green) !important; transform: none !important; box-shadow: none !important; } .search-box .search-btn { display: flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 10 !important; } .main-content { padding: 2rem 0; background: var(--primary-bg); /* 防止布局偏移 - 预设最小高度和稳定布局 */ min-height: 800px; /* 确保容器稳定性 */ position: relative; } /* 为移动端筛选菜单创建独立的定位上下文 */ .top-page { display: flex; gap: 2rem; max-width: 100%; margin: 0; padding: 0 1rem; } /* 分类页面侧边栏 */ .collection-sidebar { width: 180px; flex-shrink: 0; position: sticky; top: 6rem; height: fit-content; } .collection-category-menu { background: transparent; border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; box-shadow: none; } .menu-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text-primary); padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .category-menu-list { list-style: none; padding: 0; margin: 0; } .category-menu-item { margin-bottom: 0.25rem; } /* 分类菜单链接 */ .category-menu-link { display: block; padding: 0.5rem 0.75rem; color: var(--sidebar-text-normal) !important; text-decoration: none; border-radius: 4px; transition: all 0.3s ease; font-size: 0.9rem; position: relative; margin: 0.1rem 0; background: var(--sidebar-bg-normal) !important; border: none; text-align: left; } .category-menu-link:hover { background: var(--sidebar-bg-hover) !important; color: var(--sidebar-text-hover) !important; } .category-menu-link.active { background: var(--sidebar-bg-active) !important; color: var(--sidebar-text-active) !important; border-radius: 4px; } @media (max-width: 768px) { .top-page { flex-direction: column; gap: 1rem; padding: 0 0.5rem; } .collection-sidebar { width: 100%; position: static; margin-top: 1rem; order: 1; } .collection-category-menu { padding: 1rem; } .category-menu-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .category-menu-item { margin-bottom: 0; } .category-menu-link { padding: 0.4rem 0.8rem; font-size: 0.8rem; white-space: nowrap; } .top-categories-grid { order: 2; } } .content-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start; } /* ==================== 侧边栏样式 ==================== */ .sidebar { background: var(--primary-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 1rem; position: sticky; top: 100px; height: fit-content; z-index: 9999; } .sidebar-header { margin-bottom: 0.5rem; padding-bottom: 0.25rem; } .sidebar-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; padding-left: 1rem; } /* ======================================== 侧边栏分类菜单样式 ======================================== */ /* 一级分类项目 */ .category-item { margin-bottom: 0.25rem; border: none !important; } /* 一级分类头部 */ .category-header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.75rem; border: 1px solid var(--border-color); transition: all 0.3s ease; cursor: pointer; user-select: none; border-radius: 8px; margin: 0.15rem 0; } .category-header:hover { background: var(--hover-bg); border-color: var(--accent-green); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .category-header:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .category-header:hover .category-name { color: var(--text-primary); } .category-header:hover .category-arrow { color: var(--text-primary); } /* 一级分类链接 */ .category-header-link { text-decoration: none; color: inherit; display: block; } .category-header-link:hover { text-decoration: none; color: inherit; } /* 一级分类信息容器 */ .category-info { display: flex; align-items: center; gap: 0.75rem; height: 100%; } /* 一级分类名称 */ .category-name { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); cursor: pointer; line-height: 1.3; display: flex; align-items: center; text-decoration: none; } .category-name-link { color: inherit; text-decoration: none; transition: color 0.3s ease; } /* 一级分类展开箭头 */ .category-arrow { color: var(--text-secondary); font-size: 0.75rem; transition: transform 0.2s ease; } .category-item.expanded .category-arrow { transform: rotate(180deg); color: var(--text-secondary); } .category-item.expanded .subcategory-list { display: block; margin-top: 0.1rem; } /* 二级分类列表 */ .subcategory-list { display: none; background: transparent; margin: 0.2rem 0 0 0; border-radius: 6px; padding: 0; text-align: left; } /* 二级分类项目 */ .sidebar .subcategory-item { padding: 0.5rem 1rem 0.5rem 1.5rem !important; cursor: pointer; border: none; margin: 0.0625rem 0; border-radius: 4px; transition: all 0.2s ease; position: relative; text-align: left !important; background: transparent !important; color: var(--sidebar-text-normal) !important; border-left: 2px solid transparent; } .sidebar .subcategory-item:hover { background: var(--sidebar-bg-hover) !important; color: var(--sidebar-text-hover) !important; border-left-color: var(--accent-green); } .sidebar .subcategory-item:active { transform: translateX(2px); border-left-color: var(--accent-green); } .subcategory-item.active { background: var(--sidebar-bg-active) !important; color: var(--sidebar-text-active) !important; border-left-color: var(--accent-green); font-weight: 500; } /* 二级分类链接和信息 */ .sidebar .subcategory-link { text-decoration: none; color: inherit; display: block; width: 100%; text-align: left !important; border-radius: 6px; } .sidebar .subcategory-info { display: flex; align-items: center; gap: 0.5rem; text-align: left !important; } .sidebar .subcategory-name { font-size: 0.8rem; font-weight: 400; text-align: left !important; color: inherit; } /* Footer 样式 */ .site-footer { background: var(--card-bg) !important; border-top: 1px solid var(--border-color) !important; margin-top: 4rem; padding: 3rem 0 0 0; } .footer-content { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; margin-bottom: 2rem; background: var(--card-bg) !important; } .footer-content, .footer-section { background: var(--card-bg) !important; border-color: var(--border-color) !important; } .footer-section { min-width: 0; } .footer-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); } .footer-subtitle { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1rem; } .footer-section .footer-subtitle { color: var(--text-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; margin-bottom: 1rem; } .footer-description { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem; } .social-links { display: flex; gap: 0.75rem; justify-content: flex-start; } .social-link { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--hover-bg); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-secondary); text-decoration: none; transition: all 0.3s ease; } .social-link:hover { background: var(--hover-bg); color: var(--text-primary); border-color: var(--text-primary); transform: translateY(-1px); } .social-link i { font-size: 0.9rem; } .footer-links { list-style: none; padding: 0; } .footer-links li { margin-bottom: 0.75rem; } .footer-link { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: all 0.3s ease; } .footer-link:hover { color: var(--text-primary); } .footer-bottom { padding-top: 0; } .footer-bottom-content { display: flex; justify-content: space-between; align-items: center; } .copyright { color: var(--text-muted); font-size: 0.9rem; } .main-area { min-width: 0; /* 防止布局偏移 - 预设最小高度 */ min-height: 600px; } .no-results { text-align: center; padding: 4rem 2rem; color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; width: 100%; } .no-results i { font-size: 4rem; margin-bottom: 1rem; opacity: 0.5; display: block; } .no-results h3 { margin-bottom: 0.5rem; color: var(--text-primary); font-size: 1.5rem; } .tools-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 0.5rem; /* 防止布局偏移 - 预设容器高度和稳定布局 */ min-height: 600px; height: auto; padding: 0; /* 防止内容加载时的布局偏移 */ contain: layout style; /* 确保网格稳定性 */ grid-auto-rows: minmax(180px, auto); /* 防止内容变化导致的布局偏移 */ content-visibility: auto; contain-intrinsic-size: 600px; /* 强制布局稳定性 */ will-change: auto; } @media (max-width: 1024px) { .tools-grid { grid-template-columns: repeat(4, 1fr); } /* 首页分类卡片在1024px下保持居左对齐 */ } @media (max-width: 768px) { .tools-grid { grid-template-columns: repeat(2, 1fr); /* 移动端特定优化 */ min-height: 600px; /* 增加移动端最小高度 */ contain: layout style paint; /* 更强的布局隔离 */ } /* 移动端工具卡片固定高度 */ .tools-grid .tool-card { height: 180px; min-height: 180px; } /* Grid Large Custom 移动端样式覆盖 */ .tools-grid.grid-large-custom .tool-card-large { height: auto !important; min-height: 360px !important; max-height: none !important; } .tools-grid.grid-large-custom .tool-image-area { height: 180px !important; min-height: 180px !important; max-height: 180px !important; } } .back-to-top { position: fixed !important; bottom: 20px !important; right: 20px !important; width: 50px !important; height: 50px !important; background: var(--accent-green) !important; background-color: var(--accent-green) !important; color: var(--btn-text-primary) !important; border: none !important; border-radius: 50% !important; cursor: pointer !important; display: none !important; align-items: center !important; justify-content: center !important; font-size: 1.2rem !important; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important; transition: all 0.3s ease !important; z-index: 9999 !important; padding: 0 !important; margin: 0 !important; } .back-to-top i { display: flex !important; align-items: center; justify-content: center; width: 24px; height: 24px; } .back-to-top i::before { content: "" !important; width: 24px !important; height: 24px !important; margin: 0 !important; display: inline-block !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important; } .back-to-top:hover { background: var(--accent-green) !important; background-color: var(--accent-green) !important; color: var(--btn-text-primary) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4) !important; } .back-to-top.show { display: flex !important; background: var(--accent-green) !important; background-color: var(--accent-green) !important; } @media (max-width: 768px) { .back-to-top { width: 45px !important; height: 45px !important; bottom: 80px !important; right: 15px !important; font-size: 1.1rem !important; background: var(--accent-green) !important; background-color: var(--accent-green) !important; } .back-to-top i::before { width: 22px !important; height: 22px !important; } } @media (max-width: 480px) { .tools-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } } .tools-grid:has(.category-section) { display: flex; flex-direction: column; gap: 0; } .tools-grid:has(.category-section) .category-section { width: 100%; } .pagination-container { margin-top: 3rem !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1.5rem !important; width: 100% !important; text-align: center !important; grid-column: 1 / -1 !important; justify-self: center !important; } .pagination { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; } .pagination-list { display: flex !important; list-style: none !important; gap: 0.5rem !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: center !important; } .pagination-item { margin: 0; } .pagination-link { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0.5rem 0.75rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-secondary); text-decoration: none; font-weight: 500; transition: all 0.3s ease; font-size: 0.875rem; } .pagination-link:hover { background: var(--hover-bg); color: var(--text-primary); transform: translateY(-1px); } .pagination-link.current { background: var(--accent-green); color: var(--btn-text-primary) !important; border-color: var(--accent-green); cursor: default; } .pagination-link.current:hover { transform: none; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0.5rem 0.75rem; color: var(--text-muted); font-size: 0.875rem; } .pagination-info { text-align: center !important; width: 100% !important; } .pagination-text { color: var(--text-secondary); font-size: 0.875rem; } @media (max-width: 768px) { .pagination-list { gap: 0.25rem; } .pagination-link { min-width: 36px; height: 36px; padding: 0.5rem; font-size: 0.8rem; } .pagination-ellipsis { min-width: 36px; height: 36px; padding: 0.5rem; } } .tools-grid .tool-card { background: var(--primary-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 1rem; transition: all 0.3s ease; cursor: pointer; text-decoration: none; color: inherit; display: flex; flex-direction: column; /* 防止布局偏移 - 固定高度和强制布局 */ height: 180px; min-height: 180px; max-height: 180px; /* 强制布局稳定性 */ contain: layout style paint; /* 防止内容变化导致的偏移 */ overflow: hidden; /* 重置 标签默认样式 */ outline: none; border: 1px solid var(--border-color); /* 确保没有下划线 */ text-decoration: none !important; /* 确保颜色继承 */ color: inherit !important; /* 确保访问过的链接颜色不变 */ color: inherit !important; } .tools-grid .tool-card:hover { box-shadow: var(--shadow); } /* Grid Large Custom 样式覆盖 - 确保我们的自定义样式优先级最高 */ .tools-grid.grid-large-custom .tool-card-large { height: auto !important; min-height: 400px !important; max-height: none !important; contain: none !important; } .tools-grid.grid-large-custom .tool-image-area { height: 240px !important; min-height: 240px !important; max-height: 240px !important; } /* 小卡片头部区域 - 图标和标题 */ .tools-grid .tool-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .tools-grid .tool-icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border-radius: 6px; color: var(--text-secondary); font-size: 1.2rem; } .tools-grid .tool-icon img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: var(--primary-bg); } .tools-grid .tool-name { flex: 1; font-size: 1rem; font-weight: 600; margin: 0; color: var(--text-primary); line-height: 1.2; display: flex; align-items: center; overflow: hidden; height: 2.4em !important; /* 强制固定高度：2行 × 1.2行高 = 2.4em */ -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* 小卡片内容区域 */ .tools-grid .tool-content-area { padding: 0; flex: 1; display: flex; flex-direction: column; gap: 0.25rem; /* 防止布局偏移 - 使用最小高度而不是固定高度 */ min-height: 60px; /* 防止内容变化导致的布局偏移 */ contain: layout style; } .tools-grid .tool-subtitle { font-size: 0.875rem; color: var(--text-secondary); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tool-title-link { color: inherit; text-decoration: none; transition: all 0.3s ease; padding: 0.2rem 0.5rem; border-radius: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .featured-badge { position: absolute; top: 0.25rem; right: 0.25rem; background: var(--accent-orange); color: var(--btn-text-primary) !important; padding: 0.2rem 0.4rem; border-radius: 10px; font-size: 0.65rem; font-weight: 500; z-index: 20; min-width: 45px; text-align: center; line-height: 1.1; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); max-width: 55px; overflow: hidden; text-overflow: ellipsis; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 3rem; } .blog-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; transition: all 0.3s ease; cursor: pointer; position: relative; padding-top: 0; } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .blog-image { width: 100%; height: 200px; overflow: hidden; position: relative; } .blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; background: var(--primary-bg); } .blog-card:hover .blog-image img { transform: scale(1.05); } .blog-content { padding: 1.2rem; } .blog-title { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-excerpt { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-featured-badge { position: absolute; top: 0.5rem; right: 0.5rem; background: var(--accent-orange); color: var(--btn-text-primary) !important; padding: 0.2rem 0.6rem; border-radius: 15px; font-size: 0.7rem; font-weight: 500; z-index: 10; max-width: 65px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pagination-wrapper { display: flex; justify-content: center; align-items: center; margin-top: 3rem; gap: 2rem; } .blog-detail-content { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; } .blog-article { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 2rem; margin-bottom: 2rem; } .blog-article-header { margin-bottom: 2rem; text-align: center; } .blog-article-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); line-height: 1.2; } .blog-article-subtitle { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.5; text-align: left !important; } .blog-article-meta { display: flex; align-items: center; justify-content: center; gap: 2rem; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.5rem; } .blog-article-meta span { display: flex; align-items: center; gap: 0.5rem; } .blog-article-meta i { color: var(--accent-orange); } .blog-article-image { width: 100%; max-height: 500px; object-fit: contain; border-radius: var(--border-radius); margin-bottom: 2rem; background-color: var(--bg-secondary); } .blog-article-body { font-size: 1.1rem; line-height: 1.8; color: var(--text-primary); } .blog-article-body::after { content: ""; display: table; clear: both; } .blog-article-body p { margin-bottom: 1.5rem; text-align: justify; hyphens: auto; overflow-wrap: break-word; } .blog-article-body p:has(.url-card-inline) { margin-bottom: 0.5rem; } .blog-article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 2rem 0; padding-top: 1.5rem; border-top: 1px solid var(--border-color); } .blog-article-tag { background: var(--hover-bg); color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; border: 1px solid var(--border-color); transition: all 0.3s ease; text-decoration: none; } .blog-article-tag:hover { background: var(--accent-green) !important; color: var(--btn-text-primary) !important; border-color: var(--accent-green) !important; transform: translateY(-2px); } .blog-article-tags .blog-article-tag:hover, .blog-article-tags a.blog-article-tag:hover { background: var(--accent-green) !important; color: var(--btn-text-primary) !important; border-color: var(--accent-green) !important; } .blog-related-urls { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 1.5rem; margin-bottom: 2rem; } .blog-related-urls h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; } .blog-url-list { display: grid; gap: 1rem; } .blog-url-item { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; background: var(--hover-bg); border-radius: var(--border-radius); transition: all 0.3s ease; text-decoration: none; color: inherit; } .blog-url-header { display: flex; align-items: center; gap: 0.75rem; } .blog-url-item:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .blog-url-favicon { width: 32px; height: 32px; border-radius: 4px; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; color: var(--btn-text-primary) !important; font-size: 1rem; flex-shrink: 0; } .blog-url-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; flex: 1; } .blog-url-description { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; margin: 0; } .blog-url-favicon img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } .blog-url-title { font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; line-height: 1.3; } .blog-url-description { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.4; } .blog-related-posts { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 1.5rem; } .blog-related-posts h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; } .blog-related-post-list { display: grid; gap: 1rem; } .blog-related-post-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--hover-bg); border-radius: var(--border-radius); transition: all 0.3s ease; text-decoration: none; color: inherit; } .blog-related-post-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .blog-related-post-image { width: 60px; height: 60px; border-radius: var(--border-radius); background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; color: var(--btn-text-primary) !important; font-size: 1.5rem; flex-shrink: 0; overflow: hidden; } .blog-related-post-image img { width: 100%; height: 100%; object-fit: cover; } .blog-related-post-info { flex: 1; min-width: 0; } .blog-related-post-title { font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; line-height: 1.3; font-size: 0.95rem; } .blog-related-post-meta { font-size: 0.8rem; color: var(--text-muted); } /* 博客侧边栏 */ .blog-sidebar { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 1.5rem; position: sticky; top: 100px; height: fit-content; } .blog-sidebar-section { margin-bottom: 2rem; } .blog-sidebar-section:last-child { margin-bottom: 0; } .blog-sidebar-title { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; } .blog-sidebar-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); transition: all 0.3s ease; } .blog-sidebar-item:last-child { border-bottom: none; } .blog-sidebar-item:hover { background: var(--hover-bg); padding-left: 0.5rem; padding-right: 0.5rem; border-radius: 6px; } .blog-sidebar-item-icon { width: 20px; height: 20px; color: var(--accent-orange); flex-shrink: 0; } .blog-sidebar-item-text { flex: 1; font-size: 0.9rem; color: var(--text-primary); } .blog-sidebar-item-count { font-size: 0.8rem; color: var(--text-muted); background: var(--hover-bg); padding: 0.25rem 0.5rem; border-radius: 12px; } /* 响应式设计 */ @media (max-width: 1400px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1024px) { .content-layout { grid-template-columns: 240px 1fr; gap: 1rem; } .sidebar { position: sticky; top: 100px; order: 1; } .main-area { order: 2; } .tools-grid { grid-template-columns: repeat(2, 1fr); } .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .blog-detail-content { grid-template-columns: 1fr; gap: 1rem; } .blog-sidebar { position: static; order: 2; } } /* ==================== 移动端响应式布局 (768px以下) ==================== */ @media (max-width: 768px) { .content-layout { grid-template-columns: 1fr; gap: 1rem; } .sidebar { position: static; order: 2; display: none; } .main-area { order: 1; } .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } /* 移动端工具卡片固定高度 */ .tools-grid .tool-card { height: 180px; min-height: 180px; } .blog-grid { grid-template-columns: 1fr; gap: 1.5rem; } .blog-detail-content { grid-template-columns: 1fr; gap: 1rem; } .blog-sidebar { position: static; order: 2; } .blog-article { padding: 1.5rem; } .blog-article-title { font-size: 2rem; } .blog-article-meta { flex-direction: column; gap: 1rem; } .blog-url-item, .blog-related-post-item { flex-direction: column; text-align: center; } .blog-url-favicon, .blog-related-post-image { align-self: center; } .pagination-wrapper { flex-direction: column; gap: 1rem; } /* 移动端导航栏 */ .navbar-nav { display: none !important; } .navbar-brand { display: none !important; } /* 移动端菜单按钮 - 强制显示 */ .mobile-menu-toggle { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* 移动端显示所有按钮 */ .navbar-actions { display: flex !important; gap: 0.5rem; margin-left: auto; visibility: visible !important; opacity: 1 !important; } /* 主题和语言切换按钮 - 强制显示 */ .theme-dropdown, .language-dropdown { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } .theme-toggle, .language-toggle { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* 确保图标可见 */ .mobile-menu-toggle i, .theme-toggle i, .language-toggle i { display: inline-block !important; visibility: visible !important; opacity: 1 !important; } /* 移动端按钮尺寸优化 */ .mobile-menu-toggle { min-width: 44px !important; min-height: 44px !important; width: 44px; height: 44px; } .theme-toggle { min-width: 40px !important; min-height: 40px !important; } .language-toggle { padding: 0.5rem 0.6rem !important; min-height: 40px !important; min-width: 80px !important; width: auto !important; } /* 移动端语言文本可能需要隐藏以节省空间 */ .language-toggle .current-lang { display: inline !important; max-width: 60px; overflow: hidden; text-overflow: ellipsis; } .container { padding: 0 0 0 60px; } .main-content .container { padding: 0 20px; } .top-banner .container { padding: 0 20px; } .sidebar { padding: 1rem; } .top-banner { padding: 1.5rem 0; } .main-content { padding: 2rem 0; } .search-container { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .search-box { flex-direction: row; border-radius: 20px; padding: 0; gap: 0; flex-wrap: nowrap; } .no-results { min-height: 200px; padding: 2rem 1rem; } .no-results i { font-size: 3rem; } .no-results h3 { font-size: 1.25rem; } .search-input { flex: 1; min-width: 0; text-align: center; } .search-btn { flex-shrink: 0; border-radius: 15px; white-space: nowrap; padding: 1rem; min-width: 56px; height: 100%; } .tool-card { min-height: 120px; height: auto; } .tools-grid .tool-card { min-height: 140px; } } @media (max-width: 600px) { .top-banner .container { padding: 0 20px; } .search-container { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .search-box { width: 100% !important; max-width: 100% !important; flex-direction: row; flex-wrap: nowrap; padding: 0; gap: 0; } .search-input { flex: 1; min-width: 0; text-align: center; } .search-btn { flex-shrink: 0; white-space: nowrap; padding: 1rem; min-width: 56px; height: 100%; } } @media (max-width: 480px) { .main-content .container { padding: 0 20px; } .top-banner .container { padding: 0 20px; } .search-box { border-radius: 20px; } .search-input { font-size: 1rem; } .search-btn { border-radius: 15px; font-size: 0.9rem; } /* 极小屏幕下的按钮优化 */ .navbar-actions { gap: 0.25rem !important; } .theme-toggle { padding: 0.4rem !important; min-width: 36px !important; min-height: 36px !important; width: 36px; height: 36px; } .language-toggle { padding: 0.4rem 0.6rem !important; min-width: 70px !important; min-height: 36px !important; width: auto !important; height: 36px; } /* 移动版显示语言文本 - 使用更高优先级 */ .navbar-actions .language-dropdown .language-toggle .current-lang { display: inline !important; font-size: 0.75rem !important; max-width: 50px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; visibility: visible !important; opacity: 1 !important; } .language-toggle i.bi-chevron-down { display: none !important; } .language-toggle i.bi-globe::before { margin: 0 !important; } } @media (max-width: 1200px) { .footer-content { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } } @media (max-width: 1024px) { .footer-content { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } } @media (max-width: 768px) { .footer-content { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .footer-bottom-content { flex-direction: column; gap: 1rem; text-align: center; } } @media (max-width: 748px) { .site-footer { margin: 0 !important; padding: 0 !important; width: 100% !important; } .site-footer .container { margin: 0 auto !important; padding: 0 1rem !important; width: 100% !important; max-width: none !important; } .site-footer .footer-content { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 1rem; margin: 0 !important; padding: 0 !important; width: 100% !important; grid-template-columns: none !important; grid-template-rows: none !important; grid-auto-flow: unset !important; grid-gap: unset !important; } .site-footer .footer-content .footer-section:first-child { width: 100% !important; text-align: left !important; margin-top: 1rem !important; margin-bottom: 2rem; flex: 0 0 100% !important; margin-left: 0 !important; margin-right: 0 !important; grid-column: unset !important; grid-row: unset !important; } .site-footer .social-links { justify-content: flex-start; flex-wrap: wrap; gap: 1rem; } .site-footer .social-link { width: 32px; height: 32px; } .site-footer .footer-content .footer-section:not(:first-child) { flex: 0 0 calc(50% - 0.5rem) !important; min-width: 150px !important; max-width: 200px !important; text-align: left; border: none; padding: 0; margin-right: 0.5rem; margin-bottom: 1rem; margin-left: 0 !important; grid-column: unset !important; grid-row: unset !important; } .site-footer .footer-content .footer-section:not(:first-child) .footer-subtitle { border-bottom: 1px solid var(--border-color) !important; padding-bottom: 0.5rem !important; margin-bottom: 1rem !important; } .site-footer .footer-links { display: block; text-align: left; } .site-footer .footer-links li { margin-bottom: 0.75rem; } } @media (max-width: 480px) { .site-footer { margin: 0 !important; padding: 0 !important; width: 100% !important; } .site-footer .container { margin: 0 auto !important; padding: 0 1rem !important; width: 100% !important; max-width: none !important; } .footer-content { display: block !important; gap: 1.5rem; margin: 0 !important; padding: 0 !important; width: 100% !important; grid-template-columns: none !important; grid-template-rows: none !important; grid-auto-flow: unset !important; grid-gap: unset !important; } .footer-section:first-child { width: 100% !important; text-align: left; margin-bottom: 1.5rem; margin-left: 0 !important; margin-right: 0 !important; grid-column: unset !important; grid-row: unset !important; } .footer-section:not(:first-child) { display: block !important; width: 100% !important; min-width: auto !important; max-width: none !important; text-align: left; padding-top: 1rem; padding-left: 0.5rem; padding-right: 0.5rem; margin-right: 0 !important; margin-bottom: 1rem; margin-left: 0 !important; grid-column: unset !important; grid-row: unset !important; border: none !important; } .footer-title { font-size: 1.25rem; } .footer-subtitle { font-size: 1rem; } .social-links { justify-content: flex-start; gap: 0.75rem; } .social-link { width: 32px; height: 32px; } .footer-links { display: block; text-align: left; } .footer-links li { margin-bottom: 0.5rem; } .footer-bottom-content { flex-direction: column; gap: 0.75rem; text-align: center; } } .category-list-page { padding: 2rem 0; } .top-page { padding: 2rem 0; } .top-categories-grid { display: flex; flex-direction: column; gap: 1rem; } .top-categories-grid.with-sidebar { flex: 1; } .top-category-section { margin-bottom: 2rem; } .top-category-header { display: block; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); } .top-category-title { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin: 0; } .category-list-page .categories-grid { display: flex; flex-direction: column; gap: 2rem; } .category-list-page .category-card { background: transparent; border: none; border-radius: 0; padding: 0; margin-bottom: 1.5rem; transition: all 0.3s ease; } .category-list-page .category-card:hover { transform: none; box-shadow: none; } .category-list-page .category-header { margin-bottom: 0.2rem; padding: 0; border: none; background: transparent; } .category-list-page .category-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.25rem 0; padding: 0; background: transparent; border: none; text-align: left; } .category-list-page .category-header-link:hover .category-title { color: var(--text-primary); } .category-list-page .subcategories-grid { display: flex; flex-wrap: wrap; gap: 0.25rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; margin-top: 0.1rem; max-width: 100%; overflow: hidden; } .category-list-page .subcategory-item { display: inline-flex; justify-content: flex-start; align-items: center; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.3rem 0.6rem; text-decoration: none; color: var(--text-primary); transition: all 0.3s ease; text-align: left; cursor: pointer; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); min-height: 28px; height: auto; font-size: 0.75rem; line-height: 1.2; width: auto; max-width: 100%; } .category-list-page .subcategory-item:hover { background: var(--accent-green); color: var(--btn-text-primary) !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3); border-color: var(--accent-green); } .category-list-page .subcategory-name { font-weight: 500; text-align: left; font-size: 0.75rem; } @media (max-width: 768px) { .category-list-page .subcategories-grid { padding: 1rem; gap: 0.5rem; } .category-list-page .subcategory-item { font-size: 0.7rem; padding: 0.4rem 0.5rem; min-height: 32px; } } @media (min-width: 769px) { /* 确保 collection 页面使用网格视图的小图标 */ .tools-grid .category-websites-grid .tool-card .tool-icon { width: 32px !important; height: 32px !important; flex-shrink: 0 !important; border-radius: 6px !important; overflow: hidden !important; } } .tag-list-page { padding: 2rem 0; } .tags-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tag-card { display: flex; justify-content: center; align-items: center; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.3rem 0.6rem; text-decoration: none; color: var(--text-primary); transition: all 0.3s ease; text-align: center; flex: 0 0 auto; min-width: 70px; height: 28px; margin: 0.15rem 0.15rem 0.15rem 0; font-size: 0.75rem; } .tag-card:hover { background: var(--accent-green) !important; color: var(--btn-text-primary) !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); } .tag-name { font-weight: 500; font-size: 0.75rem; } .search-btn, .tag-card:hover { color: var(--btn-text-primary) !important; } /* ==================== 主题切换按钮 ==================== */ .theme-dropdown { position: relative; display: inline-flex; z-index: 2147483647 !important; } .theme-toggle { display: flex !important; align-items: center; justify-content: center; gap: 0; background: transparent !important; background-color: transparent !important; border: none !important; color: var(--text-secondary); padding: 0.5rem; border-radius: var(--border-radius); cursor: pointer; transition: all 0.3s ease; font-size: 1rem; outline: none !important; box-shadow: none !important; width: 40px; height: 40px; min-width: 40px; min-height: 40px; } .theme-toggle:hover { background: var(--hover-bg) !important; color: var(--text-primary); } .theme-toggle i::before { width: 16px !important; height: 16px !important; margin: 0 !important; } .theme-menu { position: absolute; top: 100%; right: 0; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--shadow); min-width: 120px; z-index: 2147483647 !important; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; margin-top: 0.5rem; } .theme-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } .theme-item { padding: 0.75rem 1rem; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); } .theme-item:last-child { border-bottom: none; } .theme-item:hover { background: var(--hover-bg); } .theme-item[data-theme="light"] .bi-check { color: var(--accent-orange); } .theme-preview { width: 16px; height: 16px; border-radius: 3px; margin-right: 0.75rem; border: 1px solid var(--border-color); } .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--card-bg); border-top: 1px solid var(--border-color); display: flex; justify-content: space-around; align-items: center; padding: 0.15rem 0; z-index: 1000; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); } .mobile-bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--text-secondary); transition: all 0.3s ease; padding: 0.15rem; border-radius: 6px; min-width: 50px; cursor: pointer; user-select: none; } .mobile-bottom-nav .nav-item i { font-size: 1rem; margin-bottom: 0.1rem; } .mobile-bottom-nav .nav-item span { font-size: 0.65rem; font-weight: 500; } .mobile-bottom-nav .nav-item:hover { color: var(--btn-text-primary) !important; background: var(--accent-green) !important; } .mobile-bottom-nav .nav-item:hover i, .mobile-bottom-nav .nav-item:hover span { color: var(--btn-text-primary) !important; } .mobile-bottom-nav .nav-item.active { background: var(--accent-green) !important; color: var(--btn-text-primary) !important; } .mobile-bottom-nav .nav-item.active i, .mobile-bottom-nav .nav-item.active span { color: var(--btn-text-primary) !important; } @media (min-width: 769px) { .mobile-bottom-nav { display: none; } } @media (max-width: 768px) { body { padding-bottom: 60px; } .mobile-filter-overlay { padding-top: 20px; padding-bottom: 80px; } } @media (max-width: 748px) and (min-width: 401px) { .site-footer { margin: 0 !important; padding: 0 !important; width: 100% !important; } .site-footer .container { margin: 0 auto !important; padding: 0 1rem !important; width: 100% !important; max-width: none !important; } .site-footer .footer-content { display: flex !important; flex-direction: column !important; gap: 1rem; margin: 0 !important; padding: 0 !important; width: 100% !important; grid-template-columns: none !important; background: transparent !important; } .site-footer .footer-content .footer-section:first-child { width: 100% !important; text-align: left !important; margin-top: 1rem !important; margin-bottom: 2rem; background: transparent !important; } .site-footer .footer-content .footer-section:first-child h3, .site-footer .footer-content .footer-section:first-child p { text-align: left !important; white-space: normal !important; word-wrap: normal !important; } .footer-title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; font-size: 1.1rem !important; } .footer-description { font-size: 0.9rem !important; margin-top: 0.25rem !important; } .site-footer .footer-content { flex-direction: row !important; } .site-footer .footer-content .footer-section:not(:first-child) { flex: 0 0 calc(50% - 0.5rem) !important; min-width: 150px !important; max-width: 250px !important; margin-right: 0.5rem; background: transparent !important; } .site-footer .footer-content .footer-section:not(:first-child) .footer-subtitle { border-bottom: 1px solid var(--border-color) !important; padding-bottom: 0.5rem !important; margin-bottom: 1rem !important; } .site-footer .footer-bottom { margin: 0 !important; padding: 0 !important; } .site-footer .footer-bottom-content { margin: 0 !important; padding: 0.5rem 0 !important; justify-content: flex-start !important; } .site-footer .footer-bottom .copyright { text-align: left !important; } } html body .language-dropdown .language-menu .language-item, html body .language-dropdown .language-menu .language-item:hover, html body .language-dropdown .language-menu .language-item:focus, html body .language-dropdown .language-menu .language-item:active, html body .language-dropdown .language-menu .language-item:visited, html body .language-dropdown .language-menu .language-item:link { border: none !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; text-decoration: none !important; background-color: transparent !important; background: transparent !important; } html body .language-dropdown .language-toggle, html body .language-dropdown .language-toggle:focus, html body .language-dropdown .language-toggle:active { border: none !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; } html body .language-dropdown .language-toggle:hover { background: var(--hover-bg) !important; color: var(--text-secondary) !important; border: none !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; } /* 分类简介区域样式 */ .category-summary-section { margin: 0 0 20px 0; padding: 0; } .category-summary-content { background: transparent; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 16px 20px; box-shadow: none; } .category-summary-title { color: var(--text-primary) !important; font-size: 1.4rem; font-weight: 600; margin: 0 0 4px 0; padding-bottom: 4px; } .category-summary-text { color: var(--text-secondary) !important; font-size: 0.95rem; line-height: 1.5; margin: 0; } /* 主题页面分类描述样式 - 显示在分类名称下方 */ .category-description-section { margin: 12px 0 0 0; padding: 0; } .category-description-content { background: transparent; border: none; border-radius: 0; padding: 0; margin: 0; box-shadow: none; } .category-description-text { color: var(--text-secondary) !important; font-size: 0.95rem; line-height: 1.6; margin: 0; } /* 分类简介展开/收起功能样式 */ .summary-preview { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; max-height: 4.5em; /* 3行 × 1.5行高 = 4.5em */ color: var(--text-secondary); cursor: pointer; } .summary-full { line-height: 1.5; color: var(--text-primary); cursor: pointer; } .summary-toggle-container { text-align: center; margin-top: 4px; height: 16px; line-height: 16px; } /* 使用class容器控制显示/隐藏 */ .summary-preview.hide, .summary-full.hide, .summary-toggle-container.hide { display: none !important; } .summary-preview.show, .summary-full.show, .summary-toggle-container.show { display: block !important; } .summary-toggle-btn { background: none; border: none; color: var(--accent-orange); font-size: 0.9rem; font-weight: 500; cursor: pointer; padding: 0; margin: 0; display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s ease; text-decoration: none; vertical-align: baseline; } .summary-toggle-btn:hover { color: var(--accent-orange); opacity: 0.8; } .summary-toggle-btn .toggle-text { font-weight: 500; font-size: 0.8rem; } .toggle-icon { font-size: 0.7rem; transition: transform 0.2s ease; margin-left: 3px; } /* 移动端适配 */ @media (max-width: 768px) { .category-summary-section { margin: 15px 0; } .category-summary-content { padding: 20px; } .category-summary-title { font-size: 1.25rem; margin-bottom: 6px; } .category-summary-text { font-size: 0.9rem; } .summary-toggle-container { margin-top: 6px; height: 18px; line-height: 18px; } .summary-toggle-btn { font-size: 0.85rem; color: var(--accent-blue); } .summary-toggle-btn:hover { color: var(--accent-green); opacity: 0.8; } /* 移动端主题特定样式 - 使用统一的accent-orange变量 */ .summary-toggle-btn { color: var(--accent-orange) !important; } .summary-toggle-btn:hover { color: var(--accent-orange) !important; opacity: 0.9 !important; } .summary-toggle-btn .toggle-text { font-weight: 600; font-size: 0.85rem; } .toggle-icon { font-size: 0.75rem; } .summary-preview { color: var(--text-secondary); cursor: pointer; } .summary-full { color: var(--text-primary); cursor: pointer; } /* 移动端筛选区域恢复原样式 */ .category-summary-section { margin: 15px 0 20px 0; } } /* 桌面版筛选区域样式 */ @media (min-width: 769px) { .mobile-filters-container { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 0.5rem !important; justify-content: flex-start !important; align-items: center !important; padding: 0.15rem !important; background: transparent !important; border: none !important; border-radius: 0 !important; } .mobile-filter-dropdown { display: flex !important; align-items: center !important; justify-content: space-between !important; background: var(--bg-color) !important; border: 1px solid var(--border-color) !important; border-radius: 6px !important; padding: 3px 6px !important; min-width: 150px !important; cursor: pointer !important; transition: all 0.2s ease !important; height: auto !important; min-height: unset !important; } .mobile-filter-dropdown:hover { background: var(--hover-bg); border-color: var(--accent-blue); color: var(--text-primary) !important; } .mobile-filter-dropdown:hover .mobile-filter-label { color: var(--text-primary) !important; } .mobile-filter-dropdown:hover i { color: var(--text-primary) !important; } .mobile-filter-label { font-size: 0.9rem; color: var(--text-color); } } /* 最高优先级 - 强制显示所有深色主题的星空背景 */ /* Cookie Consent Banner Styles */ .cookie-consent-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--card-bg); border-top: 1px solid var(--border-color); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); z-index: 10000; transform: translateY(100%); transition: transform 0.3s ease-in-out; backdrop-filter: blur(10px); } .cookie-consent-banner.cookie-consent-show { transform: translateY(0); } .cookie-consent-content { max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .cookie-consent-text { flex: 1; max-width: 600px; } .cookie-consent-description { font-size: 0.9rem; color: var(--text-secondary); margin: 0; line-height: 1.4; } .cookie-consent-actions { display: flex; gap: 0.75rem; flex-shrink: 0; } .cookie-consent-btn { padding: 0.5rem 1rem !important; border: 1px solid var(--border-color) !important; border-radius: 6px !important; font-size: 0.9rem !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s ease !important; min-width: 80px !important; } .cookie-consent-btn-secondary { background: #6c757d !important; background-color: #6c757d !important; color: #ffffff !important; border-color: #6c757d !important; } .cookie-consent-btn-secondary:hover { background: #5a6268 !important; background-color: #5a6268 !important; color: #ffffff !important; border-color: #5a6268 !important; } .cookie-consent-btn-primary { background: var(--accent-orange) !important; background-color: var(--accent-orange) !important; color: var(--btn-text-primary) !important; border-color: var(--accent-orange) !important; } .cookie-consent-btn-primary:hover { background: var(--accent-orange) !important; background-color: var(--accent-orange) !important; border-color: var(--accent-orange) !important; } /* 移动端样式 */ @media (max-width: 768px) { .cookie-consent-content { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1rem; } .cookie-consent-text { max-width: none; text-align: center; } .cookie-consent-actions { justify-content: center; flex-wrap: wrap; } .cookie-consent-btn { flex: 1; min-width: 100px; } } @media (max-width: 480px) { .cookie-consent-content { padding: 0.75rem; } .cookie-consent-description { font-size: 0.85rem; } .cookie-consent-btn { padding: 0.6rem 0.8rem; font-size: 0.85rem; } } /* ==================== 筛选菜单搜索相关样式 ==================== */ .mobile-filter-search { padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--border-color); background: var(--primary-bg); flex-shrink: 0; min-height: 35px; } .search-input-container { display: flex; align-items: center; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.5rem 0.75rem; gap: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .search-input-container:focus-within { border-color: var(--accent-green); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1); } .search-icon { color: var(--text-secondary); font-size: 0.9rem; } .filter-search-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 1rem; } .filter-search-input::placeholder { color: var(--text-secondary); } /* ==================== 分类标签相关样式 ==================== */ .category-group { margin-bottom: 1rem; padding: 0.75rem; background: var(--card-bg); border-radius: 6px; border: 1px solid var(--border-color); } /* 公共标签样式 */ .category-label, .category-tag, .tag-item { display: inline-block; padding: 0.3rem 0.6rem; border: 1px solid var(--border-color); color: var(--text-primary); text-decoration: none; font-size: 0.75rem; transition: all 0.3s ease; white-space: nowrap; cursor: pointer; margin: 0.15rem 0.15rem 0.15rem 0; height: 28px; line-height: 1.2; } /* 标签样式差异 */ .category-label { background: var(--border-color); border-radius: 6px; font-weight: 600; } .category-tag, .tag-item { background: var(--card-bg); border-radius: 6px; font-weight: 500; } .tag-item { border-radius: 16px; } /* 公共hover样式 */ .category-label:hover, .category-tag:hover, .tag-item:hover { background: var(--accent-green); color: var(--btn-text-primary) !important; border-color: var(--accent-green); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3); } /* 公共激活状态 */ .category-label.active, .category-label.active:hover, .category-tag.active, .category-tag.active:hover, .tag-item.active { background: var(--accent-green) !important; color: var(--btn-text-primary) !important; border-color: var(--accent-green) !important; } .category-label.active *, .category-tag.active * { color: var(--btn-text-primary) !important; } /* ==================== 标签容器相关样式 ==================== */ .tags-container { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.75rem; max-height: 250px; overflow-y: auto; } .main-area.full-width { grid-column: 1 / -1; } /* 系统默认字体 - 无需下载任何字体文件 */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; line-height: 1.6; } /* 不同字重的样式 */ .font-weight-normal { font-weight: 400; } .font-weight-medium { font-weight: 500; } .font-weight-semibold { font-weight: 600; } .font-weight-bold { font-weight: 700; } .font-weight-extrabold { font-weight: 800; } /* 标题样式 */ h1, h2, h3, h4, h5, h6 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; line-height: 1.2; } /* ======================================== Grid Icon View Styles (超精简图标样式) ======================================== */ /* Grid icon layout - 超紧凑布局，只显示图标和标题 */ .tools-grid.grid-icon { display: grid !important; grid-template-columns: repeat(8, 1fr) !important; /* 默认8列 */ row-gap: 0.375rem !important; /* 减小行间距 */ column-gap: 0.5rem !important; /* 保持列间距 */ align-items: start !important; justify-items: center !important; /* 覆盖通用样式 */ min-height: auto !important; height: auto !important; contain: none !important; content-visibility: visible !important; contain-intrinsic-size: none !important; grid-auto-rows: auto !important; will-change: auto !important; margin-top: 0.5rem !important; } /* Grid icon - Tool card - 使用更强的选择器覆盖通用规则 */ .tools-grid.grid-icon .tool-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; /* 改为 center 让整体居中 */ background: var(--primary-bg) !important; border-radius: 8px !important; padding: 0.5rem 0.375rem !important; /* 减小内边距 */ transition: all 0.2s ease !important; cursor: pointer !important; width: 100% !important; min-height: 75px !important; /* 减小高度 */ max-height: 75px !important; height: 75px !important; overflow: hidden !important; margin: 0 !important; box-sizing: border-box !important; /* 覆盖通用样式 */ contain: none !important; border: 1px solid var(--border-color) !important; text-decoration: none !important; color: inherit !important; outline: none !important; /* 强制居中容器 */ position: relative !important; text-align: center !important; } .tools-grid.grid-icon .tool-card:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; background: var(--primary-bg) !important; } /* Grid icon - 图标容器 - 使用更强的选择器 */ .tools-grid.grid-icon .tool-icon { width: 32px !important; height: 32px !important; margin: 0 auto 0.25rem auto !important; /* 强制水平居中，底部边距分隔图标和文字 */ flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border-radius: 6px !important; color: var(--text-secondary) !important; font-size: 1rem !important; /* 简化居中方法 - 只使用 margin auto */ position: static !important; left: auto !important; transform: none !important; float: none !important; text-align: center !important; } .tools-grid.grid-icon .tool-icon img { width: 32px !important; height: 32px !important; max-width: 32px !important; max-height: 32px !important; min-width: 32px !important; min-height: 32px !important; border-radius: 6px !important; object-fit: contain !important; display: block !important; background: var(--primary-bg) !important; /* 强制覆盖 HTML 属性 */ box-sizing: border-box !important; margin: 0 auto !important; /* 简化居中方法 */ position: static !important; left: auto !important; transform: none !important; float: none !important; text-align: center !important; } .tools-grid.grid-icon .tool-icon-fallback { width: 32px !important; height: 32px !important; max-width: 32px !important; max-height: 32px !important; min-width: 32px !important; min-height: 32px !important; border-radius: 6px !important; background: var(--accent-green) !important; color: white !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1rem !important; font-weight: 600 !important; /* 强制居中 */ box-sizing: border-box !important; margin: 0 auto !important; /* 简化居中方法 */ position: static !important; left: auto !important; transform: none !important; float: none !important; text-align: center !important; } /* Grid icon - 标题 - 使用更强的选择器 */ .tools-grid.grid-icon .tool-name { font-size: 0.7rem !important; /* 稍微减小字体 */ font-weight: 500 !important; text-align: center !important; line-height: 1.2 !important; color: var(--text-primary) !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-top: 0.25rem !important; /* 添加顶部边距与图标分隔 */ padding: 0 !important; word-break: break-word !important; hyphens: auto !important; flex-shrink: 0 !important; /* 覆盖通用样式 */ flex: none !important; } .tools-grid.grid-icon .tool-name a { color: inherit !important; text-decoration: none !important; } .tools-grid.grid-icon .tool-name a:hover { color: var(--primary-color) !important; } /* 隐藏其他元素 */ .tools-grid.grid-icon .tool-subtitle, .tools-grid.grid-icon .tool-categories, .tools-grid.grid-icon .tool-content-area, .tools-grid.grid-icon .tool-image-new, .tools-grid.grid-icon .tool-content-new, .tools-grid.grid-icon .tool-header { display: none !important; } /* 响应式调整 */ @media (max-width: 1400px) { .tools-grid.grid-icon { grid-template-columns: repeat(7, 1fr) !important; row-gap: 0.375rem !important; column-gap: 0.5rem !important; } } @media (max-width: 1200px) { .tools-grid.grid-icon { grid-template-columns: repeat(6, 1fr) !important; row-gap: 0.375rem !important; column-gap: 0.5rem !important; } } @media (max-width: 900px) { .tools-grid.grid-icon { grid-template-columns: repeat(5, 1fr) !important; row-gap: 0.375rem !important; column-gap: 0.5rem !important; } } @media (max-width: 768px) { .tools-grid.grid-icon { grid-template-columns: repeat(4, 1fr) !important; row-gap: 0.375rem !important; /* 移动端行间距 */ column-gap: 0.375rem !important; /* 移动端列间距 */ /* 覆盖通用移动端样式 */ min-height: auto !important; contain: none !important; } .tools-grid.grid-icon .tool-card { min-height: 70px !important; /* 移动端高度 */ max-height: 70px !important; height: 70px !important; padding: 0.5rem 0.375rem !important; /* 移动端内边距 */ } } @media (max-width: 480px) { .tools-grid.grid-icon { grid-template-columns: repeat(3, 1fr) !important; row-gap: 0.375rem !important; /* 手机端行间距 */ column-gap: 0.375rem !important; /* 手机端列间距 */ } }