:root { --bg: #0f0f12; --bg-soft: #17171c; --card: #1c1c22; --text: #f2f2f4; --muted: #a0a0ab; --faint: #6b6b76; --accent: #e6b450; --border: rgba(255, 255, 255, 0.08); --header-bg: rgba(15, 15, 18, 0.82); --radius: 14px; --maxw: 1240px; --transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* 浅色主题：在 时生效 */ [data-theme="light"] { --bg: #f6f6f8; --bg-soft: #ffffff; --card: #ffffff; --text: #1a1a1f; --muted: #5a5a66; --faint: #9b9ba6; --accent: #c8922e; --border: rgba(0, 0, 0, 0.1); --header-bg: rgba(255, 255, 255, 0.82); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'zcoolwenyiti', "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: var(--transition); } a { color: inherit; text-decoration: none; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); transition: var(--transition); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { font-weight: 400; letter-spacing: 1px; font-size: 19px; } .brand span { color: var(--accent); } .brand-wrap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .brand-desc { font-size: 12px; color: var(--muted); letter-spacing: 0.5px; } .nav { display: flex; gap: 22px; font-size: 14px; color: var(--muted); align-items: center; } .nav a:hover { color: var(--text); } /* ---------- 主题切换按钮 ---------- */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s, color 0.2s; margin-left: 4px; } .theme-toggle:hover { border-color: rgba(128, 128, 128, 0.5); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* ---------- 音乐开关按钮（与主题按钮一致） ---------- */ .music-toggle { background: transparent; border: 1px solid var(--border); color: var(--text); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s, color 0.2s; margin-left: 4px; } .music-toggle:hover { border-color: rgba(128, 128, 128, 0.5); } .music-toggle svg { width: 18px; height: 18px; display: block; } .music-toggle.playing { color: var(--accent); border-color: var(--accent); } /* ---------- 开屏（全屏图 + 底部 Enter 提示） ---------- */ .splash { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; color: #fff; background-size: cover; background-position: center; cursor: pointer; transition: opacity 0.5s ease; } .splash.hidden { opacity: 0; pointer-events: none; } /* 底部渐变，保证 Enter 文字可读 */ .splash::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(to top, rgba(0,0,0,0.55), transparent); pointer-events: none; } .splash-enter { position: relative; z-index: 1; margin-bottom: 46px; display: flex; align-items: center; font-size: 15px; /* 缩小到原来的 3/4（20px → 15px） */ font-weight: 400; letter-spacing: 15px; /* 字母间距拉宽至原来 5px 的 3 倍 */ text-transform: uppercase; color: rgba(255, 255, 255, 0.6); /* 调淡 Enter 字色 */ text-shadow: 0 2px 18px rgba(0,0,0,0.5); animation: enterPulse 2.4s ease-in-out infinite; } @keyframes enterPulse { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } } /* ---------- 页签（可扩展） ---------- */ .tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 34px 0 6px; } .tab-btn { position: relative; background: transparent; border: none; color: var(--muted); font-size: 18px; font-weight: 400; letter-spacing: 1em; /* 页签字间距拉宽约一个字符 */ text-indent: 0.5em; /* 补偿尾随字距，使文字视觉居中于下横杠 */ padding: 8px 18px 12px; cursor: pointer; transition: color 0.2s; } .tab-btn::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 4px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.2s ease; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--text); } .tab-btn.active::after { transform: scaleX(1); } /* ---------- Filter（文字 + 下横杠，icon + 英文） ---------- */ .filters { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; padding: 16px 0 28px; } .filter-btn { position: relative; background: transparent; border: none; color: var(--muted); font-size: 16px; font-weight: 400; padding: 8px 16px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: color 0.2s; } .filter-btn .fi { color: var(--text); display: inline-flex; align-items: center; line-height: 1; } .filter-btn .fi svg { width: 16px; height: 16px; display: block; } .filter-btn::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.2s ease; } .filter-btn:hover { color: var(--text); } .filter-btn.active { color: var(--text); } .filter-btn.active::after { transform: scaleX(1); } /* ---------- Gallery ---------- */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding-bottom: 60px; } .card { position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--card); border: 1px solid var(--border); aspect-ratio: 16 / 9; transition: var(--transition); } .card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .card:hover img { transform: scale(1.06); } .card .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 14px; background: linear-gradient(to top, rgba(0,0,0,0.78), transparent); opacity: 0; transform: translateY(8px); transition: all 0.3s ease; } .card:hover .meta { opacity: 1; transform: translateY(0); } .card .meta .t { font-weight: 400; font-size: 16px; color: #fff; letter-spacing: 1px; } .card .meta .c { font-size: 12px; color: var(--accent); letter-spacing: 0.5px; } /* ---------- Lightbox（始终深色遮罩，保证看图清晰） ---------- */ .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(8, 8, 10, 0.94); display: none; align-items: center; justify-content: center; flex-direction: column; padding: 40px; } .lightbox.open { display: flex; } .lightbox img { max-width: 92vw; max-height: 80vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); } .lb-caption { margin-top: 16px; text-align: center; color: #fff; } .lb-caption .t { font-size: 20px; font-weight: 400; color: #fff; letter-spacing: 1px; } .lb-caption .c { font-size: 13px; color: var(--accent); } .lb-count { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 14px; } .lb-btn { position: absolute; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .lb-btn:hover { background: rgba(255,255,255,0.18); } .lb-prev { left: 24px; top: 50%; transform: translateY(-50%); } .lb-next { right: 24px; top: 50%; transform: translateY(-50%); } .lb-close { top: 20px; right: 24px; width: 44px; height: 44px; font-size: 20px; } /* ---------- 关于本站 ---------- */ .about { padding: 26px 0 10px; /* 上间距收窄，下间距仅留 10px，使整块贴近页脚横线 */ text-align: center; } .about h2 { margin: 0 0 10px; font-weight: 400; font-size: 15px; /* 标题字号缩小 */ letter-spacing: 1px; color: var(--muted); /* 比原先的 --text 更浅 */ } .about p { margin: 0 auto; max-width: 800px; /* 约 60 个中文字符/行（按 13px 计） */ font-size: 13px; /* 描述字号缩小 */ line-height: 1.7; color: var(--faint); /* 比 --muted 再浅一档 */ transition: var(--transition); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding: 18px 0; /* 上间距收窄，横线更贴近「关于本站」描述 */ text-align: center; color: var(--muted); font-size: 13px; transition: var(--transition); } @media (max-width: 600px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .lb-prev { left: 8px; } .lb-next { right: 8px; } } /* ========================================================= 以下变量与类供「控制台外观编辑」注入覆盖（gallery.js 写入 #user-style） 默认值与上方 :root 保持一致；新增的可调项集中在此声明。 ========================================================= */ :root { --brand-size: 19px; --brand-spacing: 1px; --brand-color: inherit; --brand-desc-size: 12px; --brand-desc-spacing: 0.5px; --brand-desc-color: var(--muted); --tab-size: 18px; --tab-spacing: 1em; --tab-color: var(--muted); --tab-active: var(--text); --tab-underline: var(--accent); --tab-underline-h: 2px; --filter-size: 16px; --filter-color: var(--muted); --enter-size: 15px; --enter-spacing: 15px; --enter-color: rgba(255,255,255,0.6); --about-title-size: 15px; --about-size: 13px; --about-color: var(--faint); --about-width: 800px; --about-pad-t: 26px; --about-pad-b: 10px; --footer-size: 13px; --footer-color: var(--muted); --footer-pad: 18px; --header-h: 64px; --header-blur: 10px; --tabs-pad-t: 34px; --tabs-pad-b: 6px; --card-aspect: 16 / 9; --hover-scale: 1.06; --card-border: 1px; --card-title-size: 16px; --card-cat-size: 12px; --transition-dur: 0.3s; } .brand { font-size: var(--brand-size); letter-spacing: var(--brand-spacing); color: var(--brand-color); } .brand-desc { font-size: var(--brand-desc-size); letter-spacing: var(--brand-desc-spacing); color: var(--brand-desc-color); } .tab-btn { font-size: var(--tab-size); letter-spacing: var(--tab-spacing); color: var(--tab-color); } .tab-btn::after { background: var(--tab-underline); height: var(--tab-underline-h); } .tab-btn.active { color: var(--tab-active); } .filter-btn { font-size: var(--filter-size); color: var(--filter-color); } .filter-btn .fi { color: var(--filter-color); } .splash-enter { font-size: var(--enter-size); letter-spacing: var(--enter-spacing); color: var(--enter-color); } .about h2 { font-size: var(--about-title-size); } .about p { font-size: var(--about-size); color: var(--about-color); max-width: var(--about-width); } .about { padding: var(--about-pad-t) 0 var(--about-pad-b); } .site-footer { font-size: var(--footer-size); color: var(--footer-color); padding: var(--footer-pad) 0; } .site-header .wrap { height: var(--header-h); } .site-header { backdrop-filter: blur(var(--header-blur)); } .site-header.no-sticky { position: static; } .tabs { padding: var(--tabs-pad-t) 0 var(--tabs-pad-b); } .card { aspect-ratio: var(--card-aspect); border-width: var(--card-border); } .gallery.shadow .card { box-shadow: 0 10px 30px rgba(0,0,0,0.35); } .card:hover img { transform: scale(var(--hover-scale)); } .card .meta .t { font-size: var(--card-title-size); } .card .meta .c { font-size: var(--card-cat-size); } .gallery.no-meta .meta { display: none; } /* 去图标：隐藏分类前的 icon */ .filters.no-icon .filter-btn .fi { display: none; } /* 开屏 Enter 呼吸灯开关 */ .splash-enter.no-anim { animation: none; } /* 背景图钩子：JS 设 background-image 后加 .has-bg 让其铺满 */ .has-bg { background-size: cover; background-position: center; background-repeat: no-repeat; } /* 滚动淡入（revealAnim 开启时由 JS 加 .in） */ .card.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .card.reveal.in { opacity: 1; transform: none; } /* 悬停效果：淡入（图片整体微透明） */ .gallery.fx-fade .card:hover img { opacity: 0.82; } .gallery.fx-fade .card img { transition: transform .5s ease, opacity .5s ease; } /* 悬停效果：无 */ .gallery.fx-none .card:hover img { transform: none; }