/* * 7IF · _responsive.css * 全站响应式基座 · Phase 0 * 断点：980px (nav折叠) | 768px (Pad布局) | 480px (手机布局) * 使用方式：每个页面 末尾引入 */ /* ───────────────────────────────────────── 断点 CSS 变量（供 JS 读取用） ───────────────────────────────────────── */ :root { --bp-nav: 980px; /* nav 折叠为汉堡菜单 */ --bp-pad: 768px; /* Pad 布局切换 */ --bp-mob: 480px; /* 手机布局切换 */ } /* ───────────────────────────────────────── 汉堡菜单按钮 (显示于 ≤980px) ───────────────────────────────────────── */ .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); cursor: pointer; backdrop-filter: blur(14px); flex-shrink: 0; transition: .2s; padding: 0; margin-left: 8px; } .hamburger:hover { border-color: rgba(139,92,246,.5); background: rgba(139,92,246,.12); } .hamburger .bar { width: 18px; height: 2px; border-radius: 2px; background: var(--txt, #eef0ff); transition: .25s; transform-origin: center; } .hamburger.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ───────────────────────────────────────── 移动端导航抽屉 ───────────────────────────────────────── */ .mobile-nav-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(7,7,15,.7); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; } .mobile-nav-overlay.open { opacity: 1; } .mobile-nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 201; width: min(320px, 85vw); background: rgba(13,13,26,.96); border-left: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(24px); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; padding: 0; overflow-y: auto; } .mobile-nav-drawer.open { transform: translateX(0); } .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid rgba(255,255,255,.08); } .mobile-nav-close { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--txt, #eef0ff); font-size: 18px; cursor: pointer; display: grid; place-items: center; transition: .2s; } .mobile-nav-close:hover { background: rgba(255,255,255,.1); } .mobile-nav-links { display: flex; flex-direction: column; padding: 12px 0; flex: 1; } .mobile-nav-links a { display: flex; align-items: center; gap: 12px; padding: 14px 22px; font-size: 15px; font-weight: 500; color: var(--muted, #9aa0c0); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.05); transition: .15s; } .mobile-nav-links a:last-child { border-bottom: none; } .mobile-nav-links a:hover, .mobile-nav-links a.active { color: var(--txt, #eef0ff); background: rgba(139,92,246,.1); } .mobile-nav-links a .nav-icon { font-size: 18px; } .mobile-nav-footer { padding: 20px 22px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 10px; } .mobile-nav-footer a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; transition: .2s; } .mobile-nav-footer .m-login { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--txt, #eef0ff); } .mobile-nav-footer .m-submit { background: linear-gradient(120deg,rgba(139,92,246,.7),rgba(34,211,238,.6)); border: 1px solid rgba(255,255,255,.2); color: #fff; } /* ───────────────────────────────────────── 底部 Tab Bar（仅手机 ≤480px） ───────────────────────────────────────── */ .tab-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; height: 60px; background: rgba(7,7,15,.92); border-top: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(20px); align-items: stretch; } .tab-bar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; color: var(--faint, #6a6f92); text-decoration: none; transition: .15s; padding: 6px 0; min-height: 44px; /* touch target */ } .tab-bar a .tab-icon { font-size: 20px; line-height: 1; } .tab-bar a:hover, .tab-bar a.active { color: var(--neon, #8b5cf6); } .tab-bar a.active .tab-icon { filter: drop-shadow(0 0 6px rgba(139,92,246,.8)); } /* ───────────────────────────────────────── 响应式 Grid 工具类 ───────────────────────────────────────── */ /* 两列 → 单列 */ .r-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* 三列 → 两列 → 单列 */ .r-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* 四列 → 两列 → 单列 */ .r-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* 主内容 + 侧边栏 */ .r-layout-side { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; } .r-layout-side-sm { display: grid; grid-template-columns: 1fr 260px; gap: 22px; align-items: start; } /* ───────────────────────────────────────── touch 优化：按钮最小触控区域 ───────────────────────────────────────── */ @media (pointer: coarse) { .btn, button, [role="button"] { min-height: 44px; } .tab-bar a { min-height: 48px; } } /* ───────────────────────────────────────── ≤ 980px：隐藏桌面 nav，显示汉堡 ───────────────────────────────────────── */ @media (max-width: 980px) { .nav nav { display: none !important; } .hamburger { display: flex; } /* 页脚 grid 折叠 */ .fgrid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; } } /* ───────────────────────────────────────── ≤ 768px：Pad 布局 ───────────────────────────────────────── */ @media (max-width: 768px) { /* wrap 内边距收紧 */ .wrap { padding: 0 18px !important; } /* 双栏侧边栏 → 堆叠 */ .r-layout-side, .r-layout-side-sm, .uc-layout, .game-layout, .artwork-layout, .article-layout, .submit-layout { grid-template-columns: 1fr !important; } /* 侧边栏取消 sticky */ .r-layout-side > *:last-child, .r-layout-side-sm > *:last-child, .game-side, .artwork-side, .article-side, .submit-side, .uc-sidebar { position: static !important; } /* 三列 → 两列 */ .r-grid-3 { grid-template-columns: 1fr 1fr !important; } /* 四列 → 两列 */ .r-grid-4 { grid-template-columns: 1fr 1fr !important; } /* 页脚完全堆叠 */ .fgrid { grid-template-columns: 1fr !important; } /* 定价卡片堆叠 */ .plans-grid { grid-template-columns: 1fr !important; } /* 标题字体缩小 */ h1 { font-size: clamp(22px, 5vw, 36px) !important; } h2 { font-size: clamp(18px, 4vw, 28px) !important; } /* section padding 收紧 */ .sec { padding-top: 40px !important; padding-bottom: 40px !important; } } /* ───────────────────────────────────────── ≤ 480px：手机布局 ───────────────────────────────────────── */ @media (max-width: 480px) { /* 显示底部 Tab Bar */ .tab-bar { display: flex !important; } /* 页面底部留出 Tab Bar 高度 */ body { padding-bottom: 60px; } /* wrap 再收紧 */ .wrap { padding: 0 14px !important; } /* 单列 */ .r-grid-2, .r-grid-3, .r-grid-4 { grid-template-columns: 1fr !important; } /* nav right 按钮组简化（只保留主题切换） */ .nav .right .btn.line { display: none !important; } /* 卡片内边距 */ .section-card, .g-card, .a-card, .s-card { padding: 16px !important; } /* hero 内边距 */ .game-hero .info, .artwork-hero .info { padding: 20px 18px !important; } /* 标题再缩 */ h1 { font-size: clamp(20px, 6vw, 28px) !important; } /* auth 卡片填满 */ .auth-card { padding: 28px 20px !important; } /* 用户中心侧边 profile 简化 */ .uc-profile-card { padding: 16px !important; } /* 表格横向滚动 */ .score-table, .history-table, .compare-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* 积分 earn grid 两列 */ .earn-grid { grid-template-columns: 1fr 1fr !important; } /* 面包屑字体 */ .breadcrumb { font-size: 11.5px !important; } /* 搜索框全宽 */ .searchbox { flex-direction: column !important; border-radius: 12px !important; } .searchbox input { border-radius: 10px 10px 0 0 !important; } .searchbox .btn { border-radius: 0 0 10px 10px !important; width: 100% !important; justify-content: center; } } /* ───────────────────────────────────────── 非手机端：隐藏 Tab Bar ───────────────────────────────────────── */ @media (min-width: 481px) { .tab-bar { display: none !important; } } /* ───────────────────────────────────────── 亮色主题适配（覆盖抽屉背景） ───────────────────────────────────────── */ html[data-theme="light"] .mobile-nav-drawer { background: rgba(238,241,248,.97); border-left-color: rgba(20,24,60,.1); } html[data-theme="light"] .mobile-nav-overlay { background: rgba(20,24,60,.4); } html[data-theme="light"] .tab-bar { background: rgba(238,241,248,.95); border-top-color: rgba(20,24,60,.1); } html[data-theme="light"] .mobile-nav-links a:hover, html[data-theme="light"] .mobile-nav-links a.active { background: rgba(139,92,246,.08); } /* ───────────────────────────────────────── Phase 2-5 · 全局通用移动端补漏 ───────────────────────────────────────── */ /* footer 多列 → 折叠 */ @media (max-width: 768px) { .fgrid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 480px) { .fgrid { grid-template-columns: 1fr !important; } footer { padding: 36px 0 24px !important; } .fbot { font-size: 12px !important; } } /* 表格溢出滚动 */ @media (max-width: 768px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* 代码块溢出 */ @media (max-width: 480px) { pre, code { font-size: 12px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; } } /* 表单元素全宽 */ @media (max-width: 480px) { input[type="text"], input[type="email"], input[type="password"], input[type="url"], textarea, select { width: 100%; box-sizing: border-box; font-size: 16px !important; /* 防 iOS 自动缩放 */ } } /* 按钮触控最小高度（coarse pointer = 触摸屏）*/ @media (pointer: coarse) { .btn, button, [role="button"], .filterbar a, .pagination a, .filter-pills a { min-height: 44px; } } /* 通用容器左右内边距手机收窄 */ @media (max-width: 480px) { .wrap { padding-left: 16px !important; padding-right: 16px !important; } } /* stat-strip（统计条）手机 2列 */ @media (max-width: 480px) { .stat-strip { grid-template-columns: 1fr 1fr !important; } } /* 亮色主题补漏 */ html[data-theme="light"] .filter-sheet { background: rgba(238,241,248,.98); border-top-color: rgba(20,24,60,.12); } html[data-theme="light"] .mob-filter-btn { background: rgba(255,255,255,.8); border-color: rgba(20,24,60,.15); color: #14183c; } /* ───────────────────────────────────────── 全站工具访问性徽章（国内直达 / 需科学上网） ───────────────────────────────────────── */ .badge-access { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; position: absolute; top: 12px; right: 12px; letter-spacing: .2px; pointer-events: none; } .badge-access.cn { background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.35); color: #34d399; } .badge-access.vpn { background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); color: #fbbf24; } .badge-access.intl { background: rgba(148,163,184,.1); border: 1px solid rgba(148,163,184,.25); color: #94a3b8; } /* 工具卡需 position:relative 才能定位徽章 */ .tool { position: relative; } /* 亮色主题访问性徽章 */ html[data-theme="light"] .badge-access.cn { background: rgba(5,150,105,.1); border-color: rgba(5,150,105,.3); color: #059669; } html[data-theme="light"] .badge-access.vpn { background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.25); color: #d97706; } /* ───────────────────────────────────────── 国产工具分区标题（分类页置顶区域） ───────────────────────────────────────── */ .domestic-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #34d399; margin-bottom: 12px; letter-spacing: .3px; } .domestic-label::before { content: ''; display: block; width: 3px; height: 14px; border-radius: 2px; background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.6); }