/* enhance.css - Luliy Blog v9 Sections: 00 Font imports 01 CSS Variables + Reset 02 Homepage Hero (first-visit full-screen, animation sequence) 03 Background image 04 Typography — fonts / day=black / night=white / sans toggle 05 Navbar — liquid glass + collapsible + homepage button 06 Hero cluster 07 Hero banner 08 Progress bar 09 Cards (home grid + shine hover + year grouping) 10 Date badge (relative time) 11 Pinned section (multi-level) 12 Article reading panels (theme-specific) 13 Code blocks (day + dark + line numbers) 14 Tables (day + dark + sticky header) 15 Article theme CSS variables (6 themes) 16 TOC scroll-spy + active highlight (theme-aware) 17 Floating toolbar + ctrl dropdown panel 18 Prev/next navigation 19 Lightbox 20 Back-to-top 21 Sakura canvas + shooting stars / theme ripple 22 Uptime 23 Timeline / archive 24 Homepage bottom gallery banner (grid + custom) 25 Favorites lock gate 26 Music player 27 Responsive (mobile) */ /* ══════════════════════════════════════════════════════════ 00 Font imports 思源黑体 (Noto Sans SC) for headings 霞鹜文楷 Screen (LXGW WenKai) for body 霞鹜文楷等宽 (LXGW WenKai Mono) for code ══════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap'); @import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.7.0/style.css'); @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap'); /* 专注模式（Focus Mode）编辑部风排版专用字体 —— 仅在 .luliy-focus-mode 下引用， 衬线正文用 Source Serif 4（英文/数字），中文回退到 Noto Serif SC。 */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;600&display=swap'); /* ══════════════════════════════════════════════════════════ 01 CSS Variables + Reset ══════════════════════════════════════════════════════════ */ :root { --card-c1: #8250df; --card-c2: #0969da; --card-c3: #e05c8a; --card-c4: #f0b429; /* Article theme defaults (overridden per theme) */ --th-h1: #1a0a3a; --th-h1-border: 2px solid rgba(130,80,223,0.25); --th-h2: #0f1e4a; --th-h2-bl: 5px solid #8250df; --th-h2-bg: rgba(130,80,223,0.06); --th-h3: #2a1a4a; --th-h4: #3a2a5a; --th-strong: #8250df; /* 合并自原第二个 :root 块（消除重复声明） */ --luliy-pb-extra: 0px; /* ★ 液态玻璃可调参数（设置面板里三个滑块联动这三个变量）： 模糊程度 / 不透明度 / 色调。用于深色模式下的卡片、文章正文面板、 标签云容器——统一替换掉之前写死的 rgba(...) 数值。 默认不透明度刻意调低（0.5 而不是原来的 0.72/0.75）， 避免再叠加出"看起来像纯黑"的效果。 */ --luliy-glass-blur: 22px; --luliy-glass-opacity: 0.5; --luliy-glass-hue: 250; /* ★ 主页卡片宽 / 高，可在设置面板滑块调节 */ --luliy-cat-w: 1700px; /* ★ 默认再横向加宽 */ --luliy-cat-h: 338px; /* ★ 文章正文面板独立不透明度（和卡片/标签云的玻璃透明度分开控制）。 CSS 里只作兜底（白天 0.95）；真实默认由 JS 按颜色模式写入： 夜间 0（完全透明）/ 白天 0.95。 */ --luliy-article-opacity: 0.95; } html { scroll-behavior: smooth; zoom: 1.1; } *, *::before, *::after { box-sizing: border-box; } /* Force page containers transparent so bg shows through */ html, #content, .main, .container, .container-xl, .container-lg, [class*="Layout"], [class*="layout"] { background: transparent !important; background-color: transparent !important; } /* Guard: 100vw elements (hero) must never cause horizontal scroll. IMPORTANT: clip on ONLY — Gmeek's is a centred max-width container; clipping it would crop the full-bleed hero. */ html { overflow-x: clip; } @supports not (overflow-x: clip) { html { overflow-x: hidden; } } /* Reading-panel width control — widens the article container symmetrically (centred), pushing both edges outward by the user-set delta. Article pages only. */ body.luliy-post-page .markdown-body, body.luliy-post-page #postBody { max-width: calc(100% + var(--luliy-pb-extra, 0px) * 2) !important; margin-left: calc(var(--luliy-pb-extra, 0px) * -1) !important; margin-right: calc(var(--luliy-pb-extra, 0px) * -1) !important; } /* ── 旧的重复文章列表样式已删除（duplicateList，见 initTagCloud 改造说明） ── */ .luliy-tag-bubble.is-active { background: var(--tag-c, #8250df) !important; color: #fff !important; transform: scale(1.12); } @media (max-width: 768px) { /* Never overflow on mobile */ body.luliy-post-page .markdown-body, body.luliy-post-page #postBody { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ══════════════════════════════════════════════════════════ 02 Homepage Hero — full-screen, scroll to enter ══════════════════════════════════════════════════════════ */ #luliy-hero { /* Escape any parent padding/margin to be truly full-viewport */ position: relative; animation: luliyHeroBgIn 1.8s ease both; width: 100vw; max-width: none !important; /* defeat any inherited max-width */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); height: 100vh; min-height: 520px; background-size: cover; background-position: center 30%; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; z-index: 1; margin-bottom: 8px; /* ★ 大改后：整张图都可点击进入主页，不再依赖滚动 */ cursor: pointer; transition: opacity 0.55s ease; } /* 点击后的淡出（JS 加 is-leaving，淡出完再从 DOM 移除） */ #luliy-hero.is-leaving { opacity: 0; pointer-events: none; } #luliy-hero-inner { position: relative; z-index: 2; will-change: transform, opacity; padding: 0 24px; } #luliy-hero-title { margin: 0; font-size: clamp(48px, 9vw, 110px); font-weight: 900; letter-spacing: 4px; color: #fff; font-family: 'Noto Sans SC', sans-serif; text-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); animation: luliyHeroTitleIn 1.6s cubic-bezier(.2,.7,.3,1) both; } @keyframes luliyHeroTitleIn { 0% { opacity: 0; transform: translateY(34px); letter-spacing: 18px; filter: blur(6px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: translateY(0); letter-spacing: 4px; } } #luliy-hero-subtitle { margin: 14px 0 0; font-size: clamp(15px, 2.4vw, 22px); letter-spacing: 8px; color: rgba(255,255,255,0.92); font-family: 'LXGW WenKai Screen', serif; text-shadow: 0 2px 18px rgba(0,0,0,0.55); animation: luliyHeroIn 1.3s cubic-bezier(.2,.7,.3,1) 0.25s both; } #luliy-hero-hint { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,0.9); font-size: 14px; letter-spacing: 3px; -webkit-user-select: none; cursor: pointer; user-select: none; padding: 8px 18px; border-radius: 30px; background: rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.25); animation: luliyHeroBounce 2s ease-in-out infinite, luliyHeroIn 1.3s ease 0.6s both; transition: background 0.2s; } #luliy-hero-hint:hover { background: rgba(255,255,255,0.24); } #luliy-hero-hint:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 3px; } @keyframes luliyHeroBgIn { from { opacity: 0; } to { opacity: 1; } } /* Reduce-motion: hero appears instantly, no stagger */ body.luliy-reduce-motion #luliy-hero, body.luliy-reduce-motion #luliy-hero-title, body.luliy-reduce-motion #luliy-hero-subtitle, body.luliy-reduce-motion #luliy-hero-hint { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } #luliy-hero-hint { transform: translateX(-50%); } /* keep centring when reduce overrides transform */ body.luliy-reduce-motion #luliy-hero-hint { transform: translateX(-50%) !important; } @keyframes luliyHeroIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes luliyHeroBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } body.luliy-reduce-motion #luliy-hero-hint { animation: none; } /* On article / single pages there is no hero, so this never applies. */ /* ── Hero corner badge (Rockstar "Pre-order on ..." style tag) ── */ #luliy-hero-badge { position: absolute; top: 28px; left: 28px; z-index: 3; padding: 7px 16px; font-size: 13px; letter-spacing: 1px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.38); border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: 0 1px 6px rgba(0,0,0,0.6); animation: luliyHeroIn 1.2s cubic-bezier(.2,.7,.3,1) 0.15s both; } @media (max-width: 600px) { #luliy-hero-badge { top: 16px; left: 16px; font-size: 12px; padding: 6px 12px; } } body.luliy-reduce-motion #luliy-hero-badge { animation: none !important; opacity: 1 !important; } /* ══════════════════════════════════════════════════════════ 02a Loading splash — "ΔιάΝους" 赛博朋克荧光文字 ══════════════════════════════════════════════════════════ */ #luliy-splash { position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* inset:0 的回退写法（兼容旧 Safari） */ inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: #00020c; overflow: hidden; transition: opacity 0.55s ease, visibility 0.55s ease; } #luliy-splash.is-leaving { opacity: 0; visibility: hidden; } #luliy-splash-text { position: relative; font-family: 'Noto Sans SC', system-ui, sans-serif; font-size: clamp(30px, 7vw, 60px); font-weight: 800; letter-spacing: 3px; padding: 10px 30px; /* 流动渐变文字：青→紫→品红循环流动，制造"荧光缠绕"感 */ background: linear-gradient(90deg, #00e5ff, #7b2fbe, #ff2bd6, #00e5ff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Safari 上让渐变透出文字更可靠 */ color: transparent; animation: luliyNeonFlow 3.2s linear infinite, luliyNeonPulse 1.8s ease-in-out infinite; } /* 文字背后一圈缓慢旋转的光晕环，呼应"循环缠绕" */ #luliy-splash-text::before { content: ''; position: absolute; inset: -50px -70px; z-index: -1; border-radius: 50%; background: conic-gradient( from 0deg, transparent 0%, rgba(0,229,255,0.55) 12%, transparent 25%, rgba(255,43,214,0.55) 45%, transparent 58%, rgba(123,47,190,0.55) 78%, transparent 92% ); filter: blur(28px); animation: luliyNeonSpin 4.5s linear infinite; } @keyframes luliyNeonFlow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } @keyframes luliyNeonPulse { 0%, 100% { filter: drop-shadow(0 0 8px rgba(0,229,255,0.55)) drop-shadow(0 0 22px rgba(123,47,190,0.35)); } 50% { filter: drop-shadow(0 0 16px rgba(0,229,255,0.85)) drop-shadow(0 0 36px rgba(255,43,214,0.55)); } } @keyframes luliyNeonSpin { to { transform: rotate(360deg); } } body.luliy-reduce-motion #luliy-splash-text, body.luliy-reduce-motion #luliy-splash-text::before { animation: none; } /* ── 加载动画第二种：光线扫描 ────────────────────────── 居中文字默认是暗色，一道白光从 Δ 扫向结尾的十字星， 光扫到哪个字母哪个字母才亮，扫过之后变暗； 光到达十字星时更亮地闪一下、停顿，然后循环。 实现思路：用同一个 background-clip:text 渐变技巧， 渐变里大部分是暗色，只在一小段做出"亮带"， 靠 background-position 动画让亮带扫过文字。 */ #luliy-splash-text.is-sweep { font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: 4px; background: linear-gradient( 100deg, rgba(150,120,210,0.32) 0%, rgba(150,120,210,0.32) 38%, #ffffff 47%, #ffffff 53%, rgba(150,120,210,0.32) 62%, rgba(150,120,210,0.32) 100% ); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 0 14px rgba(180,150,255,0.25); animation: luliySweepMove 3.2s cubic-bezier(.45,0,.3,1) infinite; } @keyframes luliySweepMove { 0% { background-position: 0% 50%; } 72% { background-position: 100% 50%; } 86% { background-position: 100% 50%; } /* 到达结尾，停顿一下 */ 100% { background-position: 130% 50%; } /* 移出，准备下一轮循环 */ } /* 结尾十字星：装饰本身（横竖两道光）独立闪烁； 字母本身（ς）依然跟其它字母一样，由外层的扫描渐变统一控制明暗， 不再写死常亮，这样才是"光扫到它才亮"。 */ #luliy-splash-text.is-sweep .flare-anchor { position: relative; display: inline-block; } #luliy-splash-text.is-sweep .flare-anchor::before, #luliy-splash-text.is-sweep .flare-anchor::after { content: ''; position: absolute; top: 50%; left: 100%; pointer-events: none; transform: translate(-50%, -50%) scale(0); opacity: 0; animation: luliySweepFlare 3.2s cubic-bezier(.45,0,.3,1) infinite; } #luliy-splash-text.is-sweep .flare-anchor::before { width: 70px; height: 2px; background: linear-gradient(90deg, transparent, #fff, transparent); } #luliy-splash-text.is-sweep .flare-anchor::after { width: 2px; height: 34px; background: linear-gradient(180deg, transparent, #fff, transparent); } @keyframes luliySweepFlare { 0%, 68% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 74%, 86% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } /* 光到达时闪亮 + 停顿 */ 96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); } } body.luliy-reduce-motion #luliy-splash-text.is-sweep, body.luliy-reduce-motion #luliy-splash-text.is-sweep .flare-anchor::before, body.luliy-reduce-motion #luliy-splash-text.is-sweep .flare-anchor::after { animation: none; } /* ══════════════════════════════════════════════════════════ 02b Top-left brand name ΔιάΝους (click → home) ══════════════════════════════════════════════════════════ */ /* ★ 标题样式套用自用户上传的赛博朋克粒子页面：等宽字体 + 品红霓虹光 （青色/白色复合阴影）+ 故障感闪烁动画。不再分深浅模式两套颜色—— 全站背景始终是深色，这套高亮霓虹色在哪种模式下都清晰可见。 */ #luliy-brand { position: fixed; top: 14px; left: 18px; /* ☰ 已移到右上角，站名左移贴边 */ z-index: 10002; height: 44px; display: inline-flex; align-items: center; padding: 0 6px; font-family: 'Courier New', monospace; font-size: 22px; font-weight: 700; letter-spacing: 2px; line-height: 1; /* ★ 恒星核心发光效果：纯白文字 + 多层 text-shadow 叠出 "炽白核心 + 外层粉/紫/青晕染"的星光感，取代原来的霓虹故障风。 */ color: #fff; text-decoration: none !important; text-shadow: 0 0 4px #fff, 0 0 10px #fff, 0 0 18px #ff9eda, 0 0 32px #ff6ec7, 0 0 55px #b48cff, 0 0 90px #6ec7ff; animation: luliyBrandStarPulse 2.6s ease-in-out infinite; transition: transform 0.2s; white-space: nowrap; } #luliy-brand:hover { transform: translateY(-1px); } @keyframes luliyBrandStarPulse { 0%, 100% { filter: brightness(1); opacity: 1; } 50% { filter: brightness(1.35); opacity: 0.92; } } /* 结尾字符的十字星芒：一道横、一道竖，叠在最后一个字的右侧 */ #luliy-brand .flare-anchor { position: relative; display: inline-block; } #luliy-brand .flare-anchor::before, #luliy-brand .flare-anchor::after { content: ''; position: absolute; top: 50%; left: 100%; pointer-events: none; transform: translate(-50%, -50%); animation: luliyBrandStarPulse 2.6s ease-in-out infinite; } #luliy-brand .flare-anchor::before { width: 52px; height: 1.4px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); } #luliy-brand .flare-anchor::after { width: 1.4px; height: 24px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.9), transparent); } body.luliy-reduce-motion #luliy-brand, body.luliy-reduce-motion #luliy-brand .flare-anchor::before, body.luliy-reduce-motion #luliy-brand .flare-anchor::after { animation: none; } @media (max-width: 600px) { #luliy-brand { font-size: 18px; left: 64px; } #luliy-brand .flare-anchor::before { width: 38px; } #luliy-brand .flare-anchor::after { height: 18px; } } /* 博客名右边的「沉思者」图标：透明背景，发光样式和博客名一致 */ #luliy-issues-link { position: fixed; top: 14px; z-index: 10002; height: 44px; display: inline-flex; align-items: center; background: transparent; color: #fff; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #ff9eda) drop-shadow(0 0 16px #6ec7ff); opacity: 0.92; transition: transform 0.2s, opacity 0.2s, filter 0.3s; } #luliy-issues-link:hover { opacity: 1; transform: translateY(-1px) scale(1.06); filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #ff9eda) drop-shadow(0 0 22px #6ec7ff); } body.luliy-reduce-motion #luliy-issues-link { transition: none; } @media (max-width: 600px) { #luliy-issues-link svg { width: 18px; height: 18px; } } /* 副标题：紧贴在 ΔιάΝους 正下方，仅首页显示 */ #luliy-subtitle { position: fixed; top: 56px; left: 18px; /* 和站名左对齐 */ z-index: 10001; color: rgba(180,140,255,0.6); font-family: 'Courier New', monospace; font-size: 12px; letter-spacing: 1.5px; white-space: nowrap; pointer-events: auto; /* ★ 改为可点击 */ text-shadow: 0 1px 6px rgba(0,0,0,0.5); } /* 副标题链接：继承父元素颜色，悬停时变亮 */ .luliy-subtitle-link { color: inherit; text-decoration: none; transition: color 0.2s, text-shadow 0.2s; } .luliy-subtitle-link:hover { color: rgba(200,170,255,0.95); text-shadow: 0 0 10px rgba(180,140,255,0.6), 0 1px 6px rgba(0,0,0,0.5); } @media (max-width: 600px) { #luliy-subtitle { /* 手机端：副标题下移到导航栏下方，避免和博客名/图标重叠导致误触 */ top: 58px; left: 14px; right: 14px; font-size: 10px; letter-spacing: 0.8px; white-space: normal; /* 允许折行，不裁剪 */ max-width: none; overflow: visible; } } /* ★ 抽屉快捷链接：隐藏 Chronicle / Book / Favorites 三个页面的入口 （副标题已经承担了这三个页面的跳转功能，抽屉里不用重复显示）。 用 href 属性后缀匹配，只影响这三个链接，其余链接不受影响。 */ #luliy-drawer-quick .lds-link[href$="/chronicle.html"], #luliy-drawer-quick .lds-link[href$="/book.html"], #luliy-drawer-quick .lds-link[href$="/favorites.html"] { display: none !important; } /* ══════════════════════════════════════════════════════════ 02c Homepage category cards — 6 张，2 行 3 列，满屏垂直居中 ══════════════════════════════════════════════════════════ */ /* ★ 首页：把 Gmeek 原生 #content 里的所有东西全部隐藏（副标题、文章列表、 翻页器等），只保留我们注入的六张分类卡片。 用后代选择器（空格）而非直接子选择器（>），因为 Gmeek 运行时会把翻页器 包进 .paginate-container 等额外层级，直接子选择器会漏掉。 */ body.luliy-home #content { display: none !important; } /* 兜底：万一翻页器被插到 #content 之外，也一并隐藏 */ body.luliy-home .pagination, body.luliy-home .paginate-container, body.luliy-home #pagination { display: none !important; } /* 卡片区：正常文档流 + min-height:100vh + flex 居中。 能这样写是因为上面已经把 #content 整个 display:none 了（高度归零）， 所以卡片区不再被"它后面还有别的高内容"顶歪，可以放心居中； 同时它是 #footer（Gmeek 原生页脚）的前一个兄弟节点， página 自然顺序就是「卡片区 → footer」，footer 会乖乖待在卡片下方， 不用再像之前那样用 fixed 叠加层去"硬居中"。 */ #luliy-cats-wrap { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 96px 24px 32px; /* 顶部留出 logo / 播放器空间 */ box-sizing: border-box; } /* 卡片网格本身限制最大宽度并居中 ★ 宽度在原 1200px 基础上 +25% = 1500px；卡片高度在 375px 基础上 -10% ≈ 338px。两个尺寸都改成 CSS 变量驱动（--luliy-cat-w / --luliy-cat-h），设置面板里新增了对应滑块，可以自己再调， 不用每次都来回找我改代码。 */ #luliy-cats { /* ★ 修复宽度滑块"调大没反应"的真 bug：原来是 width:100% + max-width:var()， 而 max-width 只在"想要的值比容器自然宽度还小"时才生效——一旦滑块调 得比容器自然宽度（约 1300px 左右，取决于视口）还大，就彻底没效果了。 改成 width:min(var(...), 100%)，滑块的值永远优先生效， 只在超过视口实际可用宽度时才被压缩，调大调小都有反应。 */ width: min(var(--luliy-cat-w, 1500px), 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .luliy-cat-card { position: relative; will-change: transform, box-shadow; height: var(--luliy-cat-h, 338px); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; /* 1 倍 */ border-radius: 16px; /* 1 倍 */ text-decoration: none !important; overflow: hidden; isolation: isolate; box-shadow: 0 6px 26px rgba(0,0,0,0.35); transition: transform 0.35s cubic-bezier(.2,.7,.3,1), box-shadow 0.35s ease; } /* ★ 图片单独一层（::before），可以独立缩放/加滤镜而不带歪文字 */ .luliy-cat-card::before { content: ''; position: absolute; inset: 0; z-index: 0; will-change: transform, filter; background-image: var(--cat-img); background-size: cover; background-position: center; transition: transform 0.5s ease, filter 0.5s ease; } /* 底部渐变暗化遮罩，固定不跟着图片缩放，保证文字始终清晰可读 */ .luliy-cat-card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(6,5,16,0.88) 8%, rgba(6,5,16,0.30) 50%, rgba(6,5,16,0.10) 100%); pointer-events: none; } /* ★ 悬停效果：卡片本身上浮 6px + 阴影变大变深 + 一圈粉色霓虹光晕， 营造"悬浮发光"的赛博朋克质感。 */ .luliy-cat-card:hover { transform: translateY(-6px); box-shadow: 0 18px 46px rgba(0,0,0,0.55), 0 0 0 1.5px rgba(255,110,199,0.55), 0 0 36px 6px rgba(255,110,199,0.40); } /* ★ 悬停时图片单独放大到 106%（轻微视差/呼吸感）+ 滤镜增强 （饱和度/对比度/亮度都提高），瞬间更鲜艳更清晰 */ .luliy-cat-card:hover::before { transform: scale(1.06); filter: saturate(1.35) contrast(1.15) brightness(1.12); } .luliy-cat-card:hover .luliy-cat-title { transform: translateY(-3px); } .luliy-cat-kicker { position: relative; z-index: 2; align-self: flex-start; font-size: 12px; /* 1 倍 */ letter-spacing: 4px; /* 1 倍 */ font-weight: 700; color: rgba(255,255,255,0.9); text-transform: uppercase; margin-bottom: 8px; /* 1 倍 */ text-shadow: 0 1px 8px rgba(0,0,0,0.7); } .luliy-cat-title { position: relative; z-index: 2; margin: 0 0 8px; /* 1 倍 */ font-size: 26px; /* 1 倍 */ font-weight: 900; color: #fff; letter-spacing: 2px; /* 1 倍 */ text-shadow: 0 2px 18px rgba(0,0,0,0.7); transition: transform 0.3s ease; } .luliy-cat-desc { position: relative; z-index: 2; margin: 0; font-size: 13px; /* 1 倍 */ line-height: 1.5; color: rgba(255,255,255,0.86); text-shadow: 0 1px 10px rgba(0,0,0,0.6); } /* "more →" row, bottom-right, → archive ★ 同步用 min() 写法 */ #luliy-cats-more-row { width: min(var(--luliy-cat-w, 1500px), 100%); display: flex; justify-content: flex-end; margin: 18px auto 0; /* 1 倍 */ } #luliy-cats-more { display: inline-flex; align-items: center; gap: 8px; /* 1 倍 */ font-size: 14px; /* 1 倍 */ font-weight: 700; letter-spacing: 1px; /* 1 倍 */ color: #c8e8ff; text-decoration: none !important; padding: 9px 20px; /* 1 倍 */ border: 1px solid rgba(0,229,255,0.4); border-radius: 999px; background: rgba(0,200,255,0.06); transition: background 0.25s, color 0.25s, transform 0.2s, gap 0.25s; } #luliy-cats-more:hover { background: rgba(0,200,255,0.16); color: #fff; gap: 14px; transform: translateY(-2px); } [data-color-mode="light"] #luliy-cats-more { color: #0a6c8f; border-color: rgba(10,134,176,0.4); background: rgba(10,134,176,0.05); } [data-color-mode="light"] #luliy-cats-more:hover { color: #06506b; background: rgba(10,134,176,0.14); } /* Tablet: 3 列太挤，6 张卡片改 2 列（3 行）；手机进一步降到 1 列 */ @media (max-width: 860px) { #luliy-cats { grid-template-columns: repeat(2, 1fr); } .luliy-cat-card { height: 240px; } } @media (max-width: 560px) { #luliy-cats { grid-template-columns: 1fr; } /* 手机单列：6 张卡片总高超过一屏，容器顶对齐 + 可滚动，能看全 */ #luliy-cats-wrap { justify-content: flex-start; padding: 80px 16px 32px; } .luliy-cat-card { height: 200px; padding: 20px; } .luliy-cat-title { font-size: 24px; } } body.luliy-reduce-motion .luliy-cat-card, body.luliy-reduce-motion #luliy-cats-more { transition: none; } /* 矮窗口（如多数笔记本 ≤800px 高）：6 张卡片整体偏高，自动压缩卡片高度 与顶部留白，尽量让六张卡片 + more 在一屏内完整显示、保持居中。 */ @media (min-width: 861px) and (max-height: 800px) { #luliy-cats-wrap { padding-top: 72px; } .luliy-cat-card { height: 230px; } } @media (min-width: 861px) and (max-height: 680px) { #luliy-cats-wrap { padding-top: 60px; } .luliy-cat-card { height: 190px; padding: 18px; } .luliy-cat-title { font-size: 23px; margin-bottom: 6px; } .luliy-cat-desc { font-size: 12px; } } /* ── 大改后：隐藏因「锁定太空主题」而不再需要的功能入口 ── （元素仍在 DOM 里，只是视觉隐藏；日后恢复多主题时删掉本段即可） */ .luliy-hidden-feature { display: none !important; } /* 浮动设置面板里的「主题预览卡」（与已删的多主题对应，隐藏） */ .luliy-panel-theme-block { display: none !important; } /* Gmeek 原生 header 里的主题切换圆钮（onclick=modeSwitch） */ #themeSwitch, a[onclick*="modeSwitch"] { display: none !important; } /* ══════════════════════════════════════════════════════════ 02d Category page (tag.html) — 复用统一的卡片系统 原方案试图把 Gmeek 原生的 .lists/.SideNav-item 强行套成网格， 但和原生筛选逻辑冲突（见 enhance.js 注释）。现改为： · 隐藏原生 SideNav 列表与原生标签筛选条； · 我们自建的 #luliy-tag-grid 容器复用统一卡片系统（.luliy-card 等）。 ══════════════════════════════════════════════════════════ */ /* 隐藏原生列表与原生标签条（但放过我们自建的 #luliy-tag-grid 容器）。 用 body 标记覆盖原生"异步生成"的列表，避免漏网。 */ body.luliy-tag-takeover .SideNav:not(#luliy-tag-grid), body.luliy-tag-takeover #taglabel, body.luliy-tag-takeover .notFind { display: none !important; } /* 分类页标题（🏷️ 标签名） */ #luliy-tag-head { margin: 8px 0 20px; font-size: 26px; font-weight: 800; color: var(--th-h1, #00e5ff); } /* 我们自建的卡片容器：标准三列网格（≥860px，仅网格模式下生效）。 用 :not() 排除列表/时间轴模式，避免 ID 选择器的高优先级 抢了 .luliy-card-grid.luliy-card-list / .luliy-card-timeline 的样式 （那两个是纯 class 选择器，优先级比 ID 低，不加 :not() 会被盖掉）。 .luliy-card / .luliy-card-grid 等具体卡片样式由后面统一区块提供。 */ #luliy-tag-grid.luliy-card-grid:not(.luliy-card-list):not(.luliy-card-timeline) { grid-template-columns: repeat(3, 1fr); } @media (max-width: 860px) { #luliy-tag-grid.luliy-card-grid:not(.luliy-card-list):not(.luliy-card-timeline) { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { #luliy-tag-grid.luliy-card-grid:not(.luliy-card-list):not(.luliy-card-timeline) { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════ 03 Background — 纯色基底 #00020c（深浅模式通用） 原来这里还有一层 CSS 画的网格+光晕装饰，现已删除—— 背景装饰改由 #luliy-cyber-canvas（赛博朋克粒子系统）负责， 这里只保留纯色兜底，避免 canvas 还没绘制完成前露出白底。 ══════════════════════════════════════════════════════════ */ /* ★ 全站底色：从死黑 #00020c 换成赛博朋克渐变（取自用户上传的粒子页面）。 这是"中间黑色竖条"的根治办法——之前底色是近乎纯黑，全屏粒子 canvas 中间区域粒子稀疏时就会露出这片死黑；换成渐变后，无论粒子怎么分布， 背后始终是深蓝→紫→品红的渐变，不会再有死黑块。 渐变挂在 html 上铺满整个视口，body 透明，让 html 渐变透上来。 */ html { background: linear-gradient(160deg, #0a0e2a 0%, #1a1140 30%, #3d1a5c 55%, #5c1a4a 75%, #1a0e2e 100%) !important; background-attachment: fixed !important; min-height: 100%; } body { background: transparent !important; background-image: none !important; } [data-color-mode="light"] html { background: linear-gradient(160deg, #0a0e2a 0%, #1a1140 30%, #3d1a5c 55%, #5c1a4a 75%, #1a0e2e 100%) !important; background-attachment: fixed !important; } [data-color-mode="light"] body { background: transparent !important; } /* ══════════════════════════════════════════════════════════ 04 Typography — fonts + day/night colours ══════════════════════════════════════════════════════════ */ /* Body text: 霞鹜文楷 Screen (regular) */ body { font-family: 'LXGW WenKai Screen', 'LXGW WenKai', 'Noto Serif SC', serif; } /* ★ 页脚对比度修复：原来用的是 Primer 默认的灰黑色文字， 在咱们这套深色背景下几乎看不清。改成统一的浅灰/浅紫白， 链接用强调色，深浅模式都保证够亮。 */ #footer, #footer1, #footer2 { color: rgba(225,220,240,0.65) !important; } #footer a { color: var(--th-accent, #cba6f7) !important; } #footer a:hover { color: #fff !important; } [data-color-mode="light"] #footer, [data-color-mode="light"] #footer1, [data-color-mode="light"] #footer2 { color: rgba(230,225,245,0.70) !important; } [data-color-mode="light"] #footer a { color: var(--th-accent, #8250df) !important; } /* Headings: 思源黑体 Medium */ #postBody h1, #postBody h2, #postBody h3, #postBody h4, #postBody h5, #postBody h6, .luliy-card-title, #luliy-hero-name, .blogTitle, .blogTitle h1, .blogTitle a { font-family: 'Noto Sans SC', 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', sans-serif !important; font-weight: 500 !important; } #postBody h1 { font-weight: 700 !important; } #postBody h2 { font-weight: 600 !important; } /* Code: 霞鹜文楷等宽 (LXGW WenKai Mono) */ code, pre, kbd, samp, #postBody code, #postBody pre, .mac-lang, .luliy-date-badge { font-family: 'LXGW WenKai Mono', 'LXGW WenKai Screen', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; } /* ── 苍耳今楷模式: body.luliy-canger ─────────────────────── */ body.luliy-canger #postBody, body.luliy-canger #postBody p, body.luliy-canger #postBody li, body.luliy-canger #postBody td, body.luliy-canger #postBody th, body.luliy-canger #postBody blockquote { font-family: 'Ma Shan Zheng', 'LXGW WenKai Screen', serif !important; } /* ── 黑体模式: sans-serif reading toggle (body.luliy-sans) ── */ body.luliy-sans #postBody, body.luliy-sans #postBody p, body.luliy-sans #postBody li, body.luliy-sans #postBody td, body.luliy-sans #postBody th, body.luliy-sans #postBody blockquote { font-family: 'Noto Sans SC', 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', sans-serif !important; } /* ── Day mode: article text ─────────────────────────────── */ #postBody, #postBody p, #postBody li, #postBody td, #postBody th, #postBody span, #postBody blockquote, #postBody figcaption { color: #0d0d0d !important; } #postBody h1 { color: var(--th-h1, #111) !important; border-bottom: var(--th-h1-border, 2px solid rgba(130,80,223,0.2)); padding-bottom: 10px; margin-bottom: 20px; } #postBody h2 { color: var(--th-h2, #111) !important; border-left: var(--th-h2-bl, 5px solid #8250df); background: var(--th-h2-bg, rgba(130,80,223,0.06)); padding: 5px 12px; border-radius: 0 8px 8px 0; } #postBody h3 { color: var(--th-h3, #222) !important; } #postBody h4, #postBody h5 { color: var(--th-h4, #333) !important; } #postBody strong { color: var(--th-strong, #8250df) !important; font-weight: bold; } #postBody a { color: #0969da !important; text-decoration: none; } #postBody a:hover { color: #8250df !important; text-decoration: underline; } #postBody code { color: #d73a49 !important; background: rgba(130,80,223,0.08) !important; border-radius: 4px; padding: 1px 6px; font-size: 0.88em; font-weight: 600; } #postBody blockquote { border-left: 4px solid rgba(130,80,223,0.50); background: rgba(130,80,223,0.05) !important; color: #444 !important; padding: 12px 18px; border-radius: 0 8px 8px 0; margin: 1.2em 0; } #postBody img { display: block; margin: 0 auto; max-width: 100%; border-radius: 8px; cursor: zoom-in; } #postBody hr { border: 0; height: 2px; background: rgba(130,80,223,0.2); margin: 2em 0; } #postBody { font-size: 18px; line-height: 1.9; max-width: 100%; } /* ── Dark mode: article text ────────────────────────────── */ [data-color-mode="dark"] #postBody, [data-color-mode="dark"] #postBody p, [data-color-mode="dark"] #postBody li, [data-color-mode="dark"] #postBody td, [data-color-mode="dark"] #postBody span, [data-color-mode="dark"] #postBody blockquote, [data-color-mode="dark"] #postBody figcaption { color: #e8e8f0 !important; } [data-color-mode="dark"] #postBody h1 { color: var(--th-h1, #f0f0ff) !important; } [data-color-mode="dark"] #postBody h2 { color: var(--th-h2, #e0e0ff) !important; } [data-color-mode="dark"] #postBody h3 { color: var(--th-h3, #d0d0f0) !important; } [data-color-mode="dark"] #postBody a { color: #79b8ff !important; } [data-color-mode="dark"] #postBody a:hover { color: #cba6f7 !important; } [data-color-mode="dark"] #postBody code { color: #f38ba8 !important; background: rgba(130,80,223,0.18) !important; } [data-color-mode="dark"] #postBody blockquote { color: rgba(220,220,240,0.82) !important; background: rgba(130,80,223,0.10) !important; } [data-color-mode="dark"] #postBody strong { color: var(--th-strong, #cba6f7) !important; } /* Space theme forces light text even in day mode */ body[data-luliy-theme="space"] #postBody, body[data-luliy-theme="space"] #postBody p, body[data-luliy-theme="space"] #postBody li, body[data-luliy-theme="space"] #postBody span, body[data-luliy-theme="space"] #postBody figcaption { color: #c8e8ff !important; } /* Space theme forces light text even in day mode */ body[data-luliy-theme="cyberpunk"] #postBody, body[data-luliy-theme="cyberpunk"] #postBody p, body[data-luliy-theme="cyberpunk"] #postBody li, body[data-luliy-theme="cyberpunk"] #postBody span, body[data-luliy-theme="cyberpunk"] #postBody figcaption { color: #c8e8ff !important; } body[data-luliy-theme="space"] #postBody a { color: #00e5ff !important; } body[data-luliy-theme="cyberpunk"] #postBody a { color: #00e5ff !important; } body[data-luliy-theme="space"] #postBody a:hover { color: #80f4ff !important; } body[data-luliy-theme="cyberpunk"] #postBody a:hover { color: #80f4ff !important; } body[data-luliy-theme="space"] #postBody code { color: #00e5ff !important; background: rgba(0,200,255,0.12) !important; } body[data-luliy-theme="cyberpunk"] #postBody code { color: #00e5ff !important; background: rgba(0,200,255,0.12) !important; } body[data-luliy-theme="space"] #postBody strong { color: var(--th-strong, #00e5ff) !important; } body[data-luliy-theme="cyberpunk"] #postBody strong { color: var(--th-strong, #00e5ff) !important; } body[data-luliy-theme="space"] #postBody blockquote { color: rgba(180,220,255,0.80) !important; background: rgba(0,100,200,0.14) !important; border-left-color: rgba(0,200,255,0.50) !important; } body[data-luliy-theme="cyberpunk"] #postBody blockquote { color: rgba(220,200,255,0.85) !important; background: rgba(123,47,190,0.14) !important; border-left-color: rgba(255,43,214,0.55) !important; } /* ── Focus-visible (keyboard accessibility) ─────────────── */ :focus-visible { outline: 2px solid var(--th-accent, #8250df); outline-offset: 2px; border-radius: 4px; } button:focus-visible, a:focus-visible { outline: 2px solid var(--th-accent, #8250df); outline-offset: 3px; } /* Suppress outline for mouse/touch users */ :focus:not(:focus-visible) { outline: none; } /* Global selections & external link indicator */ ::selection { background: #f0b429; color: #000; } /* ★ 外链 ↗ 箭头已删除（会出现在沉思者图标、Music 等所有 target=_blank 元素上，影响美观） */ /* ── Label tags ─────────────────────────────────────────── */ a.Label { display: inline-flex !important; align-items: center !important; padding: 1px 8px !important; border-radius: 20px !important; font-size: 11px !important; line-height: 18px !important; height: 20px !important; margin: 0 3px 3px 0 !important; vertical-align: middle !important; white-space: nowrap !important; text-decoration: none !important; font-weight: 500 !important; box-sizing: border-box !important; transition: transform 0.15s, box-shadow 0.15s; } a.Label:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.15); } a.Label * { vertical-align: middle !important; line-height: 1 !important; } /* ══════════════════════════════════════════════════════════ 05 Navbar — high-contrast rebuilt layout Time: top-left | Blog name: centred large Nav icons: split left + right of name ══════════════════════════════════════════════════════════ */ /* ── Base #header — hosts the floating hero card ─────────── */ #header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; min-height: 84px !important; padding: 12px 20px 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; z-index: 9999 !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; overflow: visible !important; } /* ════════ Hero card — frosted glass, theme-aware ════════ */ #luliy-nav-rebuilt { width: 100%; max-width: 1480px; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; grid-template-areas: "left subtitle right" "capsule capsule capsule"; gap: 12px 20px; padding: 14px 28px 12px; box-sizing: border-box; border-radius: 24px; position: relative; /* Grey frosted glass */ background: var(--th-hero-bg, rgba(245,245,250,0.62)); -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7); border: 1px solid var(--th-hero-border, rgba(255,255,255,0.55)); box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.6) inset; transition: opacity 0.4s ease; } [data-color-mode="dark"] #luliy-nav-rebuilt { background: var(--th-hero-bg, rgba(18,16,26,0.66)); border-color: var(--th-hero-border, rgba(255,255,255,0.10)); box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset; } /* Theme accent top border on the card */ body[data-luliy-theme="default"] #luliy-nav-rebuilt { border-top: 2px solid rgba(130,80,223,0.55); } body[data-luliy-theme="sakura"] #luliy-nav-rebuilt { border-top: 2px solid rgba(201,64,112,0.55); } body[data-luliy-theme="your-name"] #luliy-nav-rebuilt{ border-top: 2px solid rgba(255,169,77,0.65); } body[data-luliy-theme="space"] #luliy-nav-rebuilt { border-top: 2px solid rgba(0,229,255,0.55); } body[data-luliy-theme="cyberpunk"] #luliy-nav-rebuilt { border-top: 2px solid rgba(255,43,214,0.55); } body[data-luliy-theme="sunset"] #luliy-nav-rebuilt { border-top: 2px solid rgba(232,168,56,0.65); } body[data-luliy-theme="mono"] #luliy-nav-rebuilt { border-top: 2px solid rgba(150,150,150,0.5); } /* ── LEFT: avatar + name + divider + time ────────────────── */ #luliy-hero-left { grid-area: left; display: flex; align-items: center; gap: 16px; } #luliy-nav-avatar-link { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } #luliy-nav-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--th-hero-avatar-ring, rgba(255,255,255,0.85)); box-shadow: 0 4px 16px rgba(0,0,0,0.18); transition: border-color 0.2s, transform 0.2s; } #luliy-nav-avatar:hover { border-color: var(--th-accent, #8250df); transform: scale(1.05); } #luliy-nav-blogname { font-size: 32px; font-weight: 900; letter-spacing: 1px; color: var(--th-hero-fg, #1a1430) !important; text-decoration: none !important; font-family: 'Noto Sans SC', sans-serif; white-space: nowrap; line-height: 1; } [data-color-mode="dark"] #luliy-nav-blogname { color: var(--th-hero-fg, #fff) !important; } #luliy-nav-blogname:hover { color: var(--th-accent, #8250df) !important; } #luliy-hero-divider { width: 1px; height: 38px; background: var(--th-hero-divider, rgba(0,0,0,0.14)); flex-shrink: 0; } [data-color-mode="dark"] #luliy-hero-divider { background: rgba(255,255,255,0.16); } #luliy-hero-timeblock { display: flex; flex-direction: column; gap: 3px; } #luliy-hero-time { display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 700; font-family: 'LXGW WenKai Mono', 'Noto Sans SC', monospace; color: var(--th-accent, #8250df); line-height: 1; } #luliy-hero-clock { display: inline-flex; color: var(--th-accent, #8250df); } #luliy-hero-date { font-size: 12px; letter-spacing: 0.5px; color: var(--th-hero-muted, rgba(0,0,0,0.45)); font-family: 'LXGW WenKai Mono', monospace; } [data-color-mode="dark"] #luliy-hero-date { color: rgba(255,255,255,0.5); } /* Day/night circle — beside the time block */ #luliy-nav-circle, .luliy-hero-circle { width: 34px; height: 34px; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; background: var(--th-accent-soft, rgba(130,80,223,0.12)) !important; color: var(--th-accent, #8250df) !important; cursor: pointer; transition: background 0.18s, transform 0.18s; } #luliy-nav-circle:hover { background: var(--th-accent-hover, rgba(130,80,223,0.24)) !important; transform: scale(1.1); } #luliy-nav-circle svg, .luliy-hero-circle svg { fill: currentColor !important; width: 17px; height: 17px; } /* ── CENTRE-BOTTOM: link capsule bar — full-width row 2 ─── */ #luliy-hero-capsule { grid-area: capsule; display: flex; align-items: center; /* ★ bug修复：原 justify-content:center + overflow-x:auto 组合是经典 CSS 陷阱——内容溢出时居中会让左侧溢出量变成「负向 scrollLeft」， 浏览器无法滚到那里，造成左侧文字永久裁切不可见（如"Favorites" 显示成"rites"），右侧也只能看到居中窗口内的一段。 现在改用 flex-start + overflow:hidden + 纯CSS响应式降级（窄屏只显 示图标，见 section 38），不再用 JS 测量溢出，没有滚动、没有 "测量时机不对"的问题，这个陷阱不会再出现。 */ justify-content: flex-start; gap: 0; padding: 6px 8px; border-radius: 14px; background: var(--th-hero-capsule, rgba(255,255,255,0.45)); border: 1px solid var(--th-hero-border, rgba(255,255,255,0.5)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); width: 100%; min-width: 0; overflow: hidden; } [data-color-mode="dark"] #luliy-hero-capsule { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); } .luliy-hero-cap-link { display: inline-flex !important; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 11px; color: var(--th-hero-fg, #2a2440) !important; text-decoration: none !important; border: none !important; background: transparent !important; font-size: 13px; font-weight: 600; font-family: 'Noto Sans SC', sans-serif; white-space: nowrap; flex: 1; justify-content: center; transition: background 0.15s, color 0.15s, transform 0.15s; } [data-color-mode="dark"] .luliy-hero-cap-link { color: var(--th-hero-fg, rgba(245,242,255,0.92)) !important; } .luliy-hero-cap-link:hover { background: var(--th-accent-soft, rgba(130,80,223,0.14)) !important; color: var(--th-accent, #8250df) !important; transform: translateY(-1px); } [data-color-mode="dark"] .luliy-hero-cap-link:hover { color: #fff !important; } .luliy-hero-cap-link svg { width: 17px; height: 17px; } .luliy-hero-cap-txt { text-transform: capitalize; } .luliy-hero-cap-sep { width: 1px; height: 18px; flex-shrink: 0; background: var(--th-hero-divider, rgba(0,0,0,0.1)); } [data-color-mode="dark"] .luliy-hero-cap-sep { background: rgba(255,255,255,0.12); } /* ── RIGHT: settings slot (the toolbar pill relocates here) ─ */ #luliy-hero-right { grid-area: right; display: flex; align-items: center; justify-content: flex-end; min-width: 56px; align-self: center; } /* When the pill lives in the hero, neutralise its fixed positioning */ #luliy-hero-right #luliy-toolbar { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; } /* Panel drops down-left from the pill when it lives in the hero */ #luliy-hero-right #luliy-ctrl-panel { top: calc(100% + 10px) !important; right: 0 !important; } /* ── SubTitle row (mobRow): links | subtitle | links ─────── */ /* ── 副标题（=导航切换按钮，仍用于 hero A 套） ─────────────── */ #luliy-hero-subtitle { align-self: center; justify-self: center; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; color: var(--th-accent, #8250df); opacity: 0.82; cursor: pointer; padding: 5px 10px; border-radius: 20px; background: var(--th-accent-soft, rgba(130,80,223,0.10)); border: 1px solid var(--th-accent-soft, rgba(130,80,223,0.20)); transition: opacity 0.2s, background 0.2s, transform 0.2s; white-space: nowrap; flex-shrink: 0; -webkit-user-select: none; user-select: none; } #luliy-hero-subtitle:hover { opacity: 1; transform: scale(1.05); background: var(--th-accent-soft, rgba(130,80,223,0.18)); } [data-color-mode="dark"] #luliy-hero-subtitle { color: var(--th-accent, #cba6f7); } /* mobRow / 旧汉堡 / 旧抽屉 / 黑洞 CSS 已删除，新抽屉见 section 35 */ /* .luliy-nav-item deprecated — replaced by drawer */ /* Hide RSS feed links */ .title-right a[href="rss.xml"], .title-right a[href="/rss.xml"], .title-right a[href="atom.xml"], .title-right a[href="/atom.xml"], .title-right a[href$="/rss"], .title-right a[href$="/feed.xml"], .title-right a[href$="rss.xml"], .title-right a[href$="atom.xml"] { display: none !important; } /* Hide "about" nav link (accessed via avatar) */ .title-right a[href="/about"], .title-right a[href="/about.html"], .title-right a[href="about"], .title-right a[href="about.html"], .title-right a[href$="/about"], .title-right a[href$="/about.html"] { display: none !important; } /* Scrolled (article page) — lighter dark glass, still legible */ #header.header-scrolled { background: transparent !important; border: none !important; box-shadow: none !important; } /* ══════════════════════════════════════════════════════════ 06 (merged into 05 — Navbar rebuild) ══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════ 07 Hero banner (scroll-fold on homepage) ══════════════════════════════════════════════════════════ */ #luliy-hero-banner { margin: 168px auto 0 auto; width: 95%; max-width: 1040px; padding: 16px 28px; background: var(--th-accent-soft, rgba(130,80,223,0.14)) !important; backdrop-filter: blur(20px) saturate(1.8) !important; -webkit-backdrop-filter: blur(20px) saturate(1.8) !important; border: 1px solid var(--th-accent-soft, rgba(130,80,223,0.30)); border-radius: 14px; text-align: center; font-size: 14px; font-weight: 800; letter-spacing: 2px; color: var(--th-accent, #8250df); text-shadow: 0 1px 2px rgba(255,255,255,0.5); box-shadow: 0 4px 20px var(--th-accent-soft, rgba(130,80,223,0.12)); box-sizing: border-box; will-change: transform, opacity; position: relative; z-index: 100; font-family: 'LXGW WenKai Screen', 'LXGW WenKai', serif; } [data-color-mode="dark"] #luliy-hero-banner { background: rgba(14,10,28,0.55) !important; border-color: var(--th-accent-soft, rgba(130,80,223,0.40)); color: var(--th-accent, #cba6f7); text-shadow: 0 1px 3px rgba(0,0,0,0.6); } /* ══════════════════════════════════════════════════════════ 08 Progress bar ══════════════════════════════════════════════════════════ */ #luliy-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--th-accent, #8250df), var(--th-h3, #ff6b9d), var(--th-h4, #f0b429)); z-index: 100000; transition: width 0.1s linear; box-shadow: 0 0 10px var(--th-accent-soft, rgba(130,80,223,0.6)); pointer-events: none; } /* ══════════════════════════════════════════════════════════ 09 Cards — frosted glass ══════════════════════════════════════════════════════════ */ #luliy-pinned-section, .luliy-card-grid { max-width: 1040px; width: 95%; margin: 0 auto; box-sizing: border-box; } .luliy-card-grid { list-style: none; padding: 0 0 32px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } /* Card shell */ .luliy-card { position: relative; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.68) !important; backdrop-filter: blur(24px) saturate(1.9) !important; -webkit-backdrop-filter: blur(24px) saturate(1.9) !important; border: 1.5px solid rgba(255,255,255,0.55) !important; border-top: 3.5px solid var(--th-accent, #8250df) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.80) inset !important; transition: transform 0.28s cubic-bezier(.4,0,.2,1), box-shadow 0.28s, border-color 0.28s, background 0.28s !important; cursor: pointer; animation: luliy-cardIn 0.38s cubic-bezier(.4,0,.2,1) both; } /* Accent colours cycling (per-card palette still applies on top) */ .luliy-card:nth-child(4n+1) { border-top-color: var(--card-c1) !important; } .luliy-card:nth-child(4n+2) { border-top-color: var(--card-c2) !important; } .luliy-card:nth-child(4n+3) { border-top-color: var(--card-c3) !important; } .luliy-card:nth-child(4n+0) { border-top-color: var(--card-c4) !important; } .luliy-card:hover { transform: translateY(-6px) !important; border-color: var(--th-accent, rgba(255,255,255,0.50)) !important; box-shadow: 0 18px 48px rgba(0,0,0,0.20), 0 0 0 1.5px var(--th-accent-soft, rgba(255,255,255,0.50)) inset !important; } [data-color-mode="dark"] .luliy-card { background: hsla(var(--luliy-glass-hue), 45%, 14%, var(--luliy-glass-opacity)) !important; backdrop-filter: blur(var(--luliy-glass-blur)) saturate(1.9) !important; -webkit-backdrop-filter: blur(var(--luliy-glass-blur)) saturate(1.9) !important; border-color: rgba(255,255,255,0.12) !important; } [data-color-mode="dark"] .luliy-card:hover { background: hsla(var(--luliy-glass-hue), 45%, 18%, calc(var(--luliy-glass-opacity) + 0.1)) !important; border-color: var(--th-accent, rgba(255,255,255,0.20)) !important; box-shadow: 0 18px 48px rgba(0,0,0,0.55), 0 0 0 1px var(--th-accent-soft, rgba(255,255,255,0.08)) inset !important; } /* Inner link */ .luliy-card-inner { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 14px; min-height: 110px; text-decoration: none !important; color: inherit; height: 100%; } /* Title */ .luliy-card-title { font-size: 15px; font-weight: 600; color: #111 !important; line-height: 1.5; word-break: break-word; flex: 1; transition: color 0.2s; } [data-color-mode="dark"] .luliy-card-title { color: #e8e8f8 !important; } .luliy-card:hover .luliy-card-title { color: var(--th-accent, #8250df) !important; } [data-color-mode="dark"] .luliy-card:hover .luliy-card-title { color: var(--th-accent, #cba6f7) !important; } /* Tags row */ .luliy-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; } .luliy-card-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #fff !important; text-decoration: none; line-height: 18px; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; opacity: 0.92; transition: opacity 0.15s, transform 0.15s; } .luliy-card-pill:hover { opacity: 1; transform: translateY(-1px); } /* Card entrance animation */ @keyframes luliy-cardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .luliy-card:nth-child(2) { animation-delay: 0.05s; } .luliy-card:nth-child(3) { animation-delay: 0.10s; } .luliy-card:nth-child(4) { animation-delay: 0.15s; } .luliy-card:nth-child(5) { animation-delay: 0.19s; } .luliy-card:nth-child(6) { animation-delay: 0.23s; } .luliy-card:nth-child(n+7) { animation-delay: 0.27s; } /* Subtle theme tint layer behind card content (follows --th-accent) */ .luliy-card::before { content: ''; position: absolute; inset: 0; background: var(--th-accent-soft, transparent); opacity: 0.5; pointer-events: none; z-index: 0; transition: opacity 0.28s; } .luliy-card:hover::before { opacity: 0.85; } .luliy-card-inner { position: relative; z-index: 1; } /* ── Theme decoration layer (.luliy-card-deco) ───────────── */ .luliy-card-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; border-radius: inherit; opacity: 0; /* hidden by default, shown only for themed variants */ transition: opacity 0.35s; } .luliy-card:hover .luliy-card-deco { opacity: 1; } /* Sakura theme: floating cherry blossom petals via radial dots */ body[data-luliy-theme="sakura"] .luliy-card-deco { opacity: 0.55; background-image: radial-gradient(ellipse 5px 7px at 15% 25%, rgba(255,160,190,0.65) 0%, transparent 70%), radial-gradient(ellipse 6px 5px at 72% 18%, rgba(255,190,210,0.55) 0%, transparent 70%), radial-gradient(ellipse 4px 6px at 88% 60%, rgba(255,140,175,0.50) 0%, transparent 70%), radial-gradient(ellipse 5px 4px at 30% 75%, rgba(255,170,200,0.45) 0%, transparent 70%), radial-gradient(ellipse 4px 6px at 55% 45%, rgba(255,180,215,0.40) 0%, transparent 70%), radial-gradient(ellipse 3px 5px at 8% 85%, rgba(255,150,185,0.35) 0%, transparent 70%), radial-gradient(ellipse 5px 3px at 64% 88%, rgba(255,200,220,0.40) 0%, transparent 70%); background-repeat: no-repeat; } body[data-luliy-theme="sakura"] .luliy-card:hover .luliy-card-deco { opacity: 0.80; } [data-color-mode="dark"] body[data-luliy-theme="sakura"] .luliy-card-deco { background-image: radial-gradient(ellipse 5px 7px at 15% 25%, rgba(255,130,165,0.55) 0%, transparent 70%), radial-gradient(ellipse 6px 5px at 72% 18%, rgba(255,160,190,0.45) 0%, transparent 70%), radial-gradient(ellipse 4px 6px at 88% 60%, rgba(255,120,160,0.50) 0%, transparent 70%), radial-gradient(ellipse 5px 4px at 30% 75%, rgba(255,140,175,0.45) 0%, transparent 70%), radial-gradient(ellipse 4px 6px at 55% 45%, rgba(255,150,185,0.40) 0%, transparent 70%), radial-gradient(ellipse 3px 5px at 8% 85%, rgba(255,120,160,0.35) 0%, transparent 70%), radial-gradient(ellipse 5px 3px at 64% 88%, rgba(255,170,200,0.40) 0%, transparent 70%); } /* Space theme: star field — tiny white twinkle dots */ body[data-luliy-theme="space"] .luliy-card-deco { opacity: 0.60; background-image: radial-gradient(circle 1.5px at 12% 20%, rgba(255,255,255,0.90) 0%, transparent 80%), radial-gradient(circle 1px at 78% 14%, rgba(180,230,255,0.85) 0%, transparent 80%), radial-gradient(circle 2px at 55% 30%, rgba(255,255,255,0.70) 0%, transparent 80%), radial-gradient(circle 1px at 92% 55%, rgba(200,240,255,0.80) 0%, transparent 80%), radial-gradient(circle 1.5px at 35% 68%, rgba(255,255,255,0.75) 0%, transparent 80%), radial-gradient(circle 1px at 20% 82%, rgba(180,210,255,0.65) 0%, transparent 80%), radial-gradient(circle 2px at 68% 75%, rgba(255,255,255,0.60) 0%, transparent 80%), radial-gradient(circle 1px at 47% 90%, rgba(200,230,255,0.70) 0%, transparent 80%), radial-gradient(circle 1.5px at 85% 88%, rgba(255,255,255,0.55) 0%, transparent 80%), radial-gradient(circle 1px at 5% 50%, rgba(180,220,255,0.60) 0%, transparent 80%); background-repeat: no-repeat; } /* Space theme: star field — tiny white twinkle dots */ body[data-luliy-theme="cyberpunk"] .luliy-card-deco { opacity: 0.60; background-image: radial-gradient(circle 1.5px at 12% 20%, rgba(255,255,255,0.90) 0%, transparent 80%), radial-gradient(circle 1px at 78% 14%, rgba(180,230,255,0.85) 0%, transparent 80%), radial-gradient(circle 2px at 55% 30%, rgba(255,255,255,0.70) 0%, transparent 80%), radial-gradient(circle 1px at 92% 55%, rgba(200,240,255,0.80) 0%, transparent 80%), radial-gradient(circle 1.5px at 35% 68%, rgba(255,255,255,0.75) 0%, transparent 80%), radial-gradient(circle 1px at 20% 82%, rgba(180,210,255,0.65) 0%, transparent 80%), radial-gradient(circle 2px at 68% 75%, rgba(255,255,255,0.60) 0%, transparent 80%), radial-gradient(circle 1px at 47% 90%, rgba(200,230,255,0.70) 0%, transparent 80%), radial-gradient(circle 1.5px at 85% 88%, rgba(255,255,255,0.55) 0%, transparent 80%), radial-gradient(circle 1px at 5% 50%, rgba(180,220,255,0.60) 0%, transparent 80%); background-repeat: no-repeat; } /* Animate star twinkle on hover */ @keyframes luliyStarTwinkle { 0%,100% { opacity: 0.60; } 50% { opacity: 0.90; } } body[data-luliy-theme="space"] .luliy-card:hover .luliy-card-deco { animation: luliyStarTwinkle 1.8s ease-in-out infinite; } body[data-luliy-theme="cyberpunk"] .luliy-card:hover .luliy-card-deco { animation: luliyStarTwinkle 1.8s ease-in-out infinite; } .luliy-card::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-20deg); pointer-events: none; z-index: 2; transition: left 0.55s cubic-bezier(.4,0,.2,1); } .luliy-card:hover::after { left: 130%; } [data-color-mode="dark"] .luliy-card::after { background: linear-gradient(105deg, transparent, rgba(255,255,255,0.12), transparent); } /* ── Card grouping — year divider row in the grid ────────── */ .luliy-card-yeardiv { grid-column: 1 / -1; list-style: none; display: flex; align-items: center; gap: 12px; margin: 6px 0 -4px; pointer-events: none; } .luliy-card-yeardiv span { font-size: 14px; font-weight: 800; letter-spacing: 2px; color: var(--card-c1, #8250df); font-family: 'Noto Sans SC', sans-serif; text-shadow: 0 1px 4px rgba(255,255,255,0.40); flex-shrink: 0; } [data-color-mode="dark"] .luliy-card-yeardiv span { text-shadow: 0 1px 4px rgba(0,0,0,0.50); } .luliy-card-yeardiv::after { content: ''; flex: 1; height: 1.5px; background: linear-gradient(90deg, var(--card-c1, #8250df), transparent); opacity: 0.35; } /* ══════════════════════════════════════════════════════════ 10 Date badge ══════════════════════════════════════════════════════════ */ .luliy-card-date { display: block; font-size: 11px; font-family: 'LXGW WenKai Mono', 'JetBrains Mono', monospace; letter-spacing: 0.4px; color: #777 !important; padding: 2px 0; } [data-color-mode="dark"] .luliy-card-date { color: rgba(200,195,240,0.65) !important; } /* ══════════════════════════════════════════════════════════ 11 Pinned section ══════════════════════════════════════════════════════════ */ #luliy-pinned-section { margin-bottom: 28px; } .luliy-pinned-grid { padding: 16px 16px 24px; background: rgba(255,255,255,0.10) !important; -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important; border: 1.5px solid rgba(240,180,41,0.38) !important; border-top: 3.5px solid #f0b429 !important; border-radius: 16px; box-sizing: border-box; } [data-color-mode="dark"] .luliy-pinned-grid { background: rgba(240,180,41,0.05) !important; border-color: rgba(240,180,41,0.24) !important; } /* ══════════════════════════════════════════════════════════ 12 Article reading panels — theme-specific Default → no background box (text directly on bg) Sakura → pink frosted glass (cherry blossom girl) Your Name → sky-blue frosted glass Space → deep space glass (always dark) ══════════════════════════════════════════════════════════ */ /* Layout */ #content, .main { margin-top: 16px !important; margin-right: auto !important; margin-left: auto !important; margin-bottom: 0 !important; padding: 0 24px !important; width: 95% !important; max-width: 1040px !important; background: transparent !important; background-color: transparent !important; border: none !important; box-sizing: border-box !important; } /* Post pages need extra top margin to clear fixed header */ body.luliy-post-page #content, body.luliy-post-page .main { margin-top: 104px !important; } /* Misc */ .subTitle, .SubTitle, #subTitle, .title-right ~ .subTitle, header + .subTitle, #content > .subTitle, .main > .subTitle { display: none !important; } .avatar { cursor: pointer; } .archive-page #postBody { max-width: 700px; } .SideNav-item .text-bold, #postBody .SideNav-item a { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; word-break: break-word !important; display: block !important; } .SideNav-item { transition: all 0.25s !important; border-left: 3px solid transparent !important; background: transparent !important; border-radius: 6px !important; margin-bottom: 4px !important; } .SideNav-item:hover { background: rgba(130,80,223,0.08) !important; transform: translateX(5px) !important; border-left-color: #8250df !important; } [data-color-mode="dark"] .SideNav-item:hover { background: rgba(130,80,223,0.14) !important; } /* ── Default: 50% iOS26 liquid glass background ─────────── */ body[data-luliy-theme="default"] #postBody, body:not([data-luliy-theme]) #postBody { background: hsla(0, 0%, 100%, var(--luliy-article-opacity, 0.5)) !important; backdrop-filter: blur(40px) saturate(2.2) brightness(1.06) !important; -webkit-backdrop-filter: blur(40px) saturate(2.2) brightness(1.06) !important; border: 1px solid rgba(255,255,255,0.65) !important; border-top: 2px solid rgba(255,255,255,0.80) !important; border-radius: 22px !important; padding: 36px 40px !important; margin-bottom: 48px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset, 0 8px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06) !important; } [data-color-mode="dark"] body[data-luliy-theme="default"] #postBody, [data-color-mode="dark"] body:not([data-luliy-theme]) #postBody { background: hsla(252, 45%, 7%, var(--luliy-article-opacity, 0.5)) !important; backdrop-filter: blur(40px) saturate(2.2) brightness(0.96) !important; -webkit-backdrop-filter: blur(40px) saturate(2.2) brightness(0.96) !important; border-color: rgba(255,255,255,0.10) !important; border-top-color: rgba(255,255,255,0.15) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.30) !important; } /* ── Sakura: cherry blossom girl — pink frosted glass ────── */ body[data-luliy-theme="sakura"] #postBody { background: hsla(338, 100%, 97%, var(--luliy-article-opacity, 0.5)) !important; backdrop-filter: blur(26px) saturate(1.6) !important; -webkit-backdrop-filter: blur(26px) saturate(1.6) !important; border: 1px solid rgba(249,168,201,0.50) !important; border-top: 3px solid rgba(224,92,138,0.60) !important; border-radius: 20px !important; padding: 36px 40px !important; margin-bottom: 48px !important; box-shadow: 0 6px 44px rgba(224,92,138,0.16), 0 0 60px rgba(249,168,201,0.08) !important; } [data-color-mode="dark"] body[data-luliy-theme="sakura"] #postBody { background: hsla(340, 62%, 10%, var(--luliy-article-opacity, 0.5)) !important; border-color: rgba(249,168,201,0.22) !important; } /* ── Your Name: sky blue frosted glass ───────────────────── */ /* ── Your Name: 新海诚 sky-blue glass with golden top light ── 三层背景：上面两层是金色/紫色点缀光晕，固定透明度不受滑块影响； 只有最底下的主基调层（蓝调渐变）接入 --luliy-article-opacity。 */ body[data-luliy-theme="your-name"] #postBody { background: radial-gradient(120% 80% at 80% -10%, rgba(255,212,59,0.18), transparent 55%), radial-gradient(120% 90% at 10% 0%, rgba(229,153,247,0.14), transparent 50%), linear-gradient(165deg, hsla(204,100%,94%,var(--luliy-article-opacity, 0.5)), hsla(204,100%,90%,var(--luliy-article-opacity, 0.5))) !important; backdrop-filter: blur(28px) saturate(1.7) !important; -webkit-backdrop-filter: blur(28px) saturate(1.7) !important; border: 1px solid rgba(30,111,212,0.28) !important; border-top: 3px solid rgba(255,169,77,0.75) !important; border-radius: 22px !important; padding: 36px 40px !important; margin-bottom: 48px !important; box-shadow: 0 6px 44px rgba(30,111,212,0.16), 0 0 70px rgba(255,212,59,0.10), 0 1px 0 rgba(255,255,255,0.7) inset !important; } [data-color-mode="dark"] body[data-luliy-theme="your-name"] #postBody { background: radial-gradient(120% 80% at 80% -10%, rgba(255,212,59,0.12), transparent 55%), radial-gradient(120% 90% at 10% 0%, rgba(116,192,252,0.14), transparent 50%), linear-gradient(165deg, hsla(220,75%,14%,var(--luliy-article-opacity, 0.5)), hsla(220,85%,10%,var(--luliy-article-opacity, 0.5))) !important; border-color: rgba(116,192,252,0.30) !important; border-top-color: rgba(255,212,59,0.55) !important; } /* ── Space: 液态玻璃文章面板（参数由设置面板的三个滑块控制） ── */ body[data-luliy-theme="space"] #postBody { background: hsla(var(--luliy-glass-hue), 70%, 9%, var(--luliy-article-opacity, 0.5)) !important; backdrop-filter: blur(var(--luliy-glass-blur)) saturate(2) !important; -webkit-backdrop-filter: blur(var(--luliy-glass-blur)) saturate(2) !important; border: 1px solid rgba(0,200,255,0.22) !important; border-top: 3px solid rgba(0,200,255,0.50) !important; border-radius: 20px !important; padding: 36px 40px !important; margin-bottom: 48px !important; box-shadow: 0 6px 44px rgba(0,80,180,0.30), 0 0 80px rgba(0,200,255,0.08) !important; } /* ── Space: 液态玻璃文章面板（参数由设置面板的三个滑块控制） ── */ body[data-luliy-theme="cyberpunk"] #postBody { background: hsla(var(--luliy-glass-hue), 70%, 9%, var(--luliy-article-opacity, 0.5)) !important; backdrop-filter: blur(var(--luliy-glass-blur)) saturate(2) !important; -webkit-backdrop-filter: blur(var(--luliy-glass-blur)) saturate(2) !important; border: 1px solid rgba(255,43,214,0.22) !important; border-top: 3px solid rgba(255,43,214,0.55) !important; border-radius: 20px !important; padding: 36px 40px !important; margin-bottom: 48px !important; box-shadow: 0 6px 44px rgba(120,0,140,0.28), 0 0 80px rgba(0,200,255,0.10) !important; } /* ── Sunset: 日落大道 highway dusk gradient glass ─────────── */ body[data-luliy-theme="sunset"] #postBody { background: radial-gradient(130% 70% at 50% -10%, rgba(255,214,120,0.42), transparent 55%), radial-gradient(120% 60% at 85% 110%, rgba(240,180,41,0.22), transparent 55%), linear-gradient(170deg, hsla(45,100%,93%,var(--luliy-article-opacity, 0.5)), hsla(42,100%,88%,var(--luliy-article-opacity, 0.5))) !important; backdrop-filter: blur(26px) saturate(1.5) !important; -webkit-backdrop-filter: blur(26px) saturate(1.5) !important; border: 1px solid rgba(232,168,56,0.36) !important; border-top: 3px solid rgba(240,180,41,0.78) !important; border-radius: 20px !important; padding: 36px 40px !important; margin-bottom: 48px !important; box-shadow: 0 6px 44px rgba(217,147,13,0.18), 0 0 70px rgba(255,214,120,0.16), 0 1px 0 rgba(255,255,255,0.7) inset !important; } [data-color-mode="dark"] body[data-luliy-theme="sunset"] #postBody { background: radial-gradient(130% 70% at 50% -10%, rgba(255,193,77,0.20), transparent 55%), radial-gradient(120% 70% at 85% 115%, rgba(232,130,30,0.18), transparent 55%), linear-gradient(170deg, hsla(38,48%,11%,var(--luliy-article-opacity, 0.5)), hsla(35,45%,7%,var(--luliy-article-opacity, 0.5))) !important; border-color: rgba(255,193,77,0.30) !important; border-top-color: rgba(255,193,77,0.58) !important; } /* ── Mono: minimalist black & white paper ────────────────── */ body[data-luliy-theme="mono"] #postBody { background: hsla(0, 0%, 100%, var(--luliy-article-opacity, 0.5)) !important; backdrop-filter: blur(18px) saturate(0.2) !important; -webkit-backdrop-filter: blur(18px) saturate(0.2) !important; border: 1px solid rgba(0,0,0,0.16) !important; border-top: 3px solid #222 !important; border-radius: 14px !important; padding: 36px 40px !important; margin-bottom: 48px !important; box-shadow: 0 4px 30px rgba(0,0,0,0.12) !important; } [data-color-mode="dark"] body[data-luliy-theme="mono"] #postBody { background: hsla(0, 0%, 5%, var(--luliy-article-opacity, 0.5)) !important; border-color: rgba(255,255,255,0.16) !important; border-top-color: #ddd !important; } /* Mono: strip colour from links / inline code for true B&W */ body[data-luliy-theme="mono"] #postBody a { color: #111 !important; text-decoration: underline; } body[data-luliy-theme="mono"] #postBody a:hover { color: #555 !important; } [data-color-mode="dark"] body[data-luliy-theme="mono"] #postBody a { color: #eee !important; } [data-color-mode="dark"] body[data-luliy-theme="mono"] #postBody a:hover { color: #aaa !important; } body[data-luliy-theme="mono"] #postBody code { color: #111 !important; background: rgba(0,0,0,0.07) !important; } [data-color-mode="dark"] body[data-luliy-theme="mono"] #postBody code { color: #eee !important; background: rgba(255,255,255,0.10) !important; } body[data-luliy-theme="mono"] #postBody blockquote { border-left-color: rgba(0,0,0,0.45) !important; background: rgba(0,0,0,0.04) !important; } [data-color-mode="dark"] body[data-luliy-theme="mono"] #postBody blockquote { border-left-color: rgba(255,255,255,0.40) !important; background: rgba(255,255,255,0.05) !important; } /* ══════════════════════════════════════════════════════════ 13 Code blocks — day=light / dark=dark ══════════════════════════════════════════════════════════ */ #postBody pre { position: relative; padding-top: 44px !important; overflow-x: auto; max-width: 100%; background: rgba(248,246,255,0.95) !important; border: 1px solid rgba(130,80,223,0.18) !important; border-radius: 14px !important; box-shadow: 0 3px 16px rgba(0,0,0,0.08) !important; transition: box-shadow 0.25s, transform 0.25s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #postBody pre:hover { box-shadow: 0 6px 28px rgba(130,80,223,0.18) !important; transform: translateY(-1px); } [data-color-mode="dark"] #postBody pre, body[data-luliy-theme="space"] #postBody pre { background: rgba(14,12,26,0.97) !important; border-color: rgba(130,80,223,0.40) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 0 40px rgba(130,80,223,0.12) !important; } [data-color-mode="dark"] #postBody pre, body[data-luliy-theme="cyberpunk"] #postBody pre { background: rgba(14,12,26,0.97) !important; border-color: rgba(130,80,223,0.40) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 0 40px rgba(130,80,223,0.12) !important; } [data-color-mode="dark"] #postBody pre:hover, body[data-luliy-theme="space"] #postBody pre:hover { box-shadow: 0 10px 40px rgba(0,0,0,0.65), 0 0 55px rgba(130,80,223,0.22) !important; } [data-color-mode="dark"] #postBody pre:hover, body[data-luliy-theme="cyberpunk"] #postBody pre:hover { box-shadow: 0 10px 40px rgba(0,0,0,0.65), 0 0 55px rgba(130,80,223,0.22) !important; } /* Mono theme: grayscale code blocks */ body[data-luliy-theme="mono"] #postBody pre { background: rgba(248,248,248,0.97) !important; border-color: rgba(0,0,0,0.16) !important; box-shadow: 0 3px 16px rgba(0,0,0,0.10) !important; } [data-color-mode="dark"] body[data-luliy-theme="mono"] #postBody pre { background: rgba(20,20,20,0.97) !important; border-color: rgba(255,255,255,0.16) !important; } body[data-luliy-theme="mono"] .mac-strip { background: rgba(238,238,238,0.92); border-bottom-color: rgba(0,0,0,0.10); } [data-color-mode="dark"] body[data-luliy-theme="mono"] .mac-strip { background: rgba(30,30,30,0.94); border-bottom-color: rgba(255,255,255,0.10); } body[data-luliy-theme="mono"] .mac-lang { color: rgba(0,0,0,0.50); } [data-color-mode="dark"] body[data-luliy-theme="mono"] .mac-lang { color: rgba(255,255,255,0.45); } /* Code text colour */ #postBody pre code { color: #2d2040 !important; background: none !important; padding: 0 !important; font-weight: normal !important; } [data-color-mode="dark"] #postBody pre code, body[data-luliy-theme="space"] #postBody pre code { color: #cdd6f4 !important; } [data-color-mode="dark"] #postBody pre code, body[data-luliy-theme="cyberpunk"] #postBody pre code { color: #cdd6f4 !important; } /* macOS title strip */ .mac-strip { position: absolute; top: 0; left: 0; right: 0; height: 36px; display: flex; align-items: center; padding: 0 14px; gap: 7px; background: rgba(240,238,255,0.88); border-bottom: 1px solid rgba(130,80,223,0.12); border-radius: 14px 14px 0 0; } [data-color-mode="dark"] .mac-strip, body[data-luliy-theme="space"] .mac-strip { background: rgba(22,18,40,0.92); border-bottom-color: rgba(130,80,223,0.28); } [data-color-mode="dark"] .mac-strip, body[data-luliy-theme="cyberpunk"] .mac-strip { background: rgba(22,18,40,0.92); border-bottom-color: rgba(130,80,223,0.28); } .mac-btn { width: 13px; height: 13px; border-radius: 50%; border: none; cursor: pointer; position: relative; transition: filter 0.2s, transform 0.2s; flex-shrink: 0; } .mac-btn:hover { filter: brightness(1.28); transform: scale(1.15); } .mac-btn-red { background: #ff5f57; } .mac-btn-yellow { background: #ffbd2e; } .mac-btn-green { background: #28c840; } .mac-btn::after { content: attr(data-tip); position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(20,16,40,0.88); color: #fff; font-size: 10px; white-space: nowrap; padding: 3px 8px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 0.2s; } .mac-btn:hover::after { opacity: 1; } .mac-lang { margin-left: auto; font-size: 11px; color: rgba(130,80,223,0.75); letter-spacing: 0.5px; font-weight: 600; } [data-color-mode="dark"] .mac-lang, body[data-luliy-theme="space"] .mac-lang { color: rgba(160,140,255,0.70); } [data-color-mode="dark"] .mac-lang, body[data-luliy-theme="cyberpunk"] .mac-lang { color: rgba(160,140,255,0.70); } /* Folded state */ pre.is-folded { max-height: 40px !important; overflow: hidden !important; } pre.is-folded > code { visibility: hidden; } /* Fullscreen */ pre.code-fullscreen { position: fixed !important; inset: 0 !important; z-index: 99990 !important; border-radius: 0 !important; margin: 0 !important; overflow: auto !important; padding-top: 44px !important; } /* ══════════════════════════════════════════════════════════ 14 Tables — day / dark + sticky header NOTE: overflow:hidden removed (it breaks position:sticky); rounded corners are applied to the corner cells instead. ══════════════════════════════════════════════════════════ */ #postBody table { /* 需求①：阅读宽度拉大后表格填满——覆盖 Primer 的 display:block; width:max-content */ /* 需求⑦：窄屏（<600px）下宽表自动变成卡片（每行一张卡，th 文字注入 data-label） */ width: 100% !important; display: table !important; /* 覆盖 Primer 的 display:block */ border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: visible; margin: 1.5em 0; box-shadow: 0 2px 14px rgba(0,0,0,0.08), 0 0 0 1px rgba(130,80,223,0.14); /* 需求：表格背景不再固定白色，叠加一层主题强调色(--th-accent-soft)使其随主题继承 */ background: linear-gradient(var(--th-accent-soft, rgba(130,80,223,0.10)), var(--th-accent-soft, rgba(130,80,223,0.10))), rgba(255,255,255,0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); table-layout: auto; } /* Last column absorbs remaining width so no white gap appears when the reading panel is widened. */ #postBody table td:last-child, #postBody table th:last-child { width: auto; } #postBody table td, #postBody table th { word-break: break-word; } /* Rounded corners via corner cells (since overflow:hidden is gone) */ #postBody thead tr:first-child th:first-child { border-top-left-radius: 12px; } #postBody thead tr:first-child th:last-child { border-top-right-radius: 12px; } #postBody tr:last-child td:first-child { border-bottom-left-radius: 12px; } #postBody tr:last-child td:last-child { border-bottom-right-radius: 12px; } [data-color-mode="dark"] #postBody table, body[data-luliy-theme="space"] #postBody table { /* 深色 / 星空主题：深色底上同样叠加主题色调 */ background: linear-gradient(var(--th-accent-soft, rgba(0,200,255,0.12)), var(--th-accent-soft, rgba(0,200,255,0.12))), rgba(18,14,32,0.90); box-shadow: 0 2px 16px rgba(0,0,0,0.50), 0 0 0 1px rgba(130,80,223,0.22); } [data-color-mode="dark"] #postBody table, body[data-luliy-theme="cyberpunk"] #postBody table { /* 深色 / 星空主题：深色底上同样叠加主题色调 */ background: linear-gradient(var(--th-accent-soft, rgba(0,200,255,0.12)), var(--th-accent-soft, rgba(0,200,255,0.12))), rgba(18,14,32,0.90); box-shadow: 0 2px 16px rgba(0,0,0,0.50), 0 0 0 1px rgba(130,80,223,0.22); } /* 表头渐变也跟随主题强调色（原为固定紫色） */ #postBody thead tr { background: linear-gradient(90deg, var(--th-accent-soft, rgba(130,80,223,0.10)), transparent); } [data-color-mode="dark"] #postBody thead tr, body[data-luliy-theme="space"] #postBody thead tr { background: linear-gradient(90deg, rgba(130,80,223,0.26), rgba(9,105,218,0.20)); } [data-color-mode="dark"] #postBody thead tr, body[data-luliy-theme="cyberpunk"] #postBody thead tr { background: linear-gradient(90deg, rgba(130,80,223,0.26), rgba(9,105,218,0.20)); } #postBody th { padding: 11px 16px; font-size: 13px; font-weight: 700; color: var(--th-h2, #8250df) !important; text-align: left; border-bottom: 2px solid rgba(130,80,223,0.18); font-family: 'Noto Sans SC', sans-serif; } [data-color-mode="dark"] #postBody th { color: #cba6f7 !important; border-bottom-color: rgba(130,80,223,0.32); background: rgba(26,20,46,0.97); } body[data-luliy-theme="space"] #postBody th { color: #00e5ff !important; background: rgba(8,14,38,0.97); } body[data-luliy-theme="cyberpunk"] #postBody th { color: #00e5ff !important; background: rgba(8,14,38,0.97); } body[data-luliy-theme="sakura"] #postBody th { background: rgba(253,236,243,0.97); } body[data-luliy-theme="your-name"] #postBody th { background: rgba(232,243,253,0.97); } body[data-luliy-theme="sunset"] #postBody th { background: rgba(255,243,214,0.97); } body[data-luliy-theme="mono"] #postBody th { background: rgba(245,245,245,0.98); } [data-color-mode="dark"] body[data-luliy-theme="sakura"] #postBody th { background: rgba(46,16,30,0.97); } [data-color-mode="dark"] body[data-luliy-theme="your-name"] #postBody th{ background: rgba(8,20,56,0.97); } [data-color-mode="dark"] body[data-luliy-theme="sunset"] #postBody th { background: rgba(44,34,14,0.97); } [data-color-mode="dark"] body[data-luliy-theme="mono"] #postBody th { background: rgba(24,24,24,0.98); } #postBody td { padding: 9px 16px; font-size: 14px; color: #111 !important; border-bottom: 1px solid rgba(130,80,223,0.07); vertical-align: top; line-height: 1.6; } [data-color-mode="dark"] #postBody td, body[data-luliy-theme="space"] #postBody td { color: #cdd6f4 !important; border-bottom-color: rgba(130,80,223,0.12); } [data-color-mode="dark"] #postBody td, body[data-luliy-theme="cyberpunk"] #postBody td { color: #cdd6f4 !important; border-bottom-color: rgba(130,80,223,0.12); } #postBody tr:last-child td { border-bottom: none; } #postBody tbody tr:nth-child(even) { background: rgba(130,80,223,0.03); } [data-color-mode="dark"] #postBody tbody tr:nth-child(even) { background: rgba(130,80,223,0.07); } #postBody tbody tr:hover { background: rgba(130,80,223,0.07) !important; } [data-color-mode="dark"] #postBody tbody tr:hover { background: rgba(130,80,223,0.15) !important; } /* ══════════════════════════════════════════════════════════ 15 Article theme CSS variables — 6 themes Theme 1: Default — classic purple (no bg box) Theme 2: Sakura — cherry blossom girl (少女樱花) Theme 3: Your Name — sky blue + golden (你的名字·天空蓝) Theme 4: Space — space travel deep night blue (太空旅行·深夜蓝) Theme 5: Sunset — dusk orange + warm rose (日落黄昏) Theme 6: Mono — minimalist black & white (极简黑白) ══════════════════════════════════════════════════════════ */ /* 1 Default */ body[data-luliy-theme="default"], body:not([data-luliy-theme]) { --th-h1: #1a0a3a; --th-h1-border: 2px solid rgba(130,80,223,0.28); --th-h2: #8250df; --th-h2-bl: 5px solid #8250df; --th-h2-bg: rgba(130,80,223,0.06); --th-h3: #6030b0; --th-h4: #7040c8; --th-strong: #8250df; /* Accent used by cards + TOC (auto-follows theme) */ --th-accent: #8250df; --th-accent-soft: rgba(130,80,223,0.10); --th-accent-hover: rgba(130,80,223,0.16); } /* 2 Sakura — cherry blossom girl */ body[data-luliy-theme="sakura"] { --th-h1: #7a1040; --th-h1-border: 2px solid rgba(224,92,138,0.35); --th-h2: #c94070; --th-h2-bl: 5px solid #f9a8c9; --th-h2-bg: rgba(249,168,201,0.12); --th-h3: #d45c7e; --th-h4: #e07098; --th-strong: #e05c8a; --th-accent: #c94070; --th-accent-soft: rgba(201,64,112,0.10); --th-accent-hover: rgba(201,64,112,0.16); } /* 3 Your Name — sky blue + golden */ /* 3 Your Name — 新海诚 vivid sky-blue × golden-hour orange */ body[data-luliy-theme="your-name"] { --th-h1: #0b3d91; --th-h1-border: 2px solid rgba(30,111,212,0.42); --th-h2: #1e6fd4; --th-h2-bl: 5px solid #ffa94d; --th-h2-bg: rgba(30,111,212,0.09); --th-h3: #2b7de0; --th-h4: #3d8bed; --th-strong: #f08c00; --th-accent: #1e6fd4; --th-accent-soft: rgba(30,111,212,0.11); --th-accent-hover: rgba(30,111,212,0.18); } /* 4 Space — deep night blue */ body[data-luliy-theme="space"] { --th-h1: #00c8ff; --th-h1-border: 2px solid rgba(0,200,255,0.35); --th-h2: #4a9de0; --th-h2-bl: 5px solid #00e5ff; --th-h2-bg: rgba(0,100,200,0.10); --th-h3: #70b8f0; --th-h4: #90ccff; --th-strong: #00e5ff; --th-accent: #00c8ff; --th-accent-soft: rgba(0,200,255,0.12); --th-accent-hover: rgba(0,200,255,0.20); } /* 5 Cyberpunk — neon city (青 + 品红，默认主题) */ body[data-luliy-theme="cyberpunk"] { /* ★ 赛博朋克主题专属配色：青 + 品红双色调，呼应粒子背景/品牌名/光标 的统一霓虹色板，和纯青色调的「太空旅行」主题做出区分。 */ --th-h1: #ff2bd6; --th-h1-border: 2px solid rgba(255,43,214,0.35); --th-h2: #00c8ff; --th-h2-bl: 5px solid #ff2bd6; --th-h2-bg: rgba(123,47,190,0.12); --th-h3: #c77dff; --th-h4: #6ec7ff; --th-strong: #ff6ec7; --th-accent: #00e5ff; --th-accent-soft: rgba(255,43,214,0.14); --th-accent-hover: rgba(255,43,214,0.24); } /* 5 Sunset — dusk orange */ /* 5 Sunset — 日落大道 highway dusk (purple→magenta→orange) */ body[data-luliy-theme="sunset"] { /* 日落黄昏 — warm amber / golden hour, light theme */ --th-h1: #9a5a00; --th-h1-border: 2px solid rgba(232,168,56,0.55); --th-h2: #c47d12; --th-h2-bl: 5px solid #e8a838; --th-h2-bg: rgba(232,168,56,0.12); --th-h3: #b8860b; --th-h4: #a8761a; --th-strong: #d9730d; --th-link: #c2710a; --th-accent: #d9930d; --th-accent-soft: rgba(217,147,13,0.13); --th-accent-hover: rgba(217,147,13,0.22); } /* Markdown text colours (light) */ body[data-luliy-theme="sunset"] #postBody a, body[data-luliy-theme="sunset"] #postBody a code { color: var(--th-link, #c2710a) !important; } body[data-luliy-theme="sunset"] #postBody strong, body[data-luliy-theme="sunset"] #postBody b { color: var(--th-strong, #d9730d) !important; } body[data-luliy-theme="sunset"] #postBody h1 { color: var(--th-h1) !important; } body[data-luliy-theme="sunset"] #postBody h2 { color: var(--th-h2) !important; } body[data-luliy-theme="sunset"] #postBody h3 { color: var(--th-h3) !important; } body[data-luliy-theme="sunset"] #postBody h4 { color: var(--th-h4) !important; } body[data-luliy-theme="sunset"] #postBody blockquote { border-left: 4px solid var(--th-accent, #e8a838) !important; background: rgba(232,168,56,0.08) !important; } body[data-luliy-theme="sunset"] #postBody code { background: rgba(232,168,56,0.14) !important; color: #9a5a00 !important; } /* 6 Mono — minimalist black & white */ body[data-luliy-theme="mono"] { --th-h1: #111111; --th-h1-border: 2px solid rgba(0,0,0,0.35); --th-h2: #111111; --th-h2-bl: 5px solid #222222; --th-h2-bg: rgba(0,0,0,0.05); --th-h3: #222222; --th-h4: #333333; --th-strong: #000000; --th-accent: #222222; --th-accent-soft: rgba(0,0,0,0.07); --th-accent-hover: rgba(0,0,0,0.12); } /* Dark mode overrides */ [data-color-mode="dark"] body[data-luliy-theme="default"], [data-color-mode="dark"] body:not([data-luliy-theme]) { --th-h1: #cba6f7; --th-h2: #b4befe; --th-h3: #cdd6f4; --th-h4: #bac2de; --th-strong: #cba6f7; --th-accent: #cba6f7; --th-accent-soft: rgba(130,80,223,0.20); --th-accent-hover: rgba(130,80,223,0.32); } [data-color-mode="dark"] body[data-luliy-theme="sakura"] { --th-h1: #f9a8c9; --th-h2: #ffb7c5; --th-h3: #ffc5d0; --th-h4: #ffd5e0; --th-strong: #f9a8c9; --th-accent: #f9a8c9; --th-accent-soft: rgba(249,168,201,0.18); --th-accent-hover: rgba(249,168,201,0.30); } [data-color-mode="dark"] body[data-luliy-theme="your-name"] { --th-h1: #74c0fc; --th-h2: #a5d8ff; --th-h3: #c0e4ff; --th-h4: #d0ecff; --th-strong: #ffd43b; --th-accent: #74c0fc; --th-accent-soft: rgba(116,192,252,0.20); --th-accent-hover: rgba(116,192,252,0.34); } /* space is always light on dark bg — same variables */ [data-color-mode="dark"] body[data-luliy-theme="space"] { --th-h1: #40d8ff; --th-h2: #60e0ff; --th-h3: #80eaff; --th-strong: #00e5ff; --th-accent: #40d8ff; --th-accent-soft: rgba(0,229,255,0.18); --th-accent-hover: rgba(0,229,255,0.30); } /* cyberpunk：黑夜也是霓虹都市，白天/夜间都一样亮 */ [data-color-mode="dark"] body[data-luliy-theme="cyberpunk"] { --th-h1: #ff6ec7; --th-h2: #6ec7ff; --th-h3: #c77dff; --th-strong: #ff9eda; --th-accent: #00e5ff; --th-accent-soft: rgba(255,43,214,0.18); --th-accent-hover: rgba(255,43,214,0.30); } [data-color-mode="dark"] body[data-luliy-theme="sunset"] { --th-h1: #ffce6b; --th-h2: #ffd98a; --th-h3: #ffe2a8; --th-h4: #ffecc4; --th-strong: #ffb347; --th-link: #ffcb6b; --th-accent: #ffc14d; --th-accent-soft: rgba(255,193,77,0.18); --th-accent-hover: rgba(255,193,77,0.32); } [data-color-mode="dark"] body[data-luliy-theme="sunset"] #postBody a, [data-color-mode="dark"] body[data-luliy-theme="sunset"] #postBody a code { color: var(--th-link, #ffcb6b) !important; } [data-color-mode="dark"] body[data-luliy-theme="sunset"] #postBody strong { color: var(--th-strong, #ffb347) !important; } [data-color-mode="dark"] body[data-luliy-theme="sunset"] #postBody code { background: rgba(255,193,77,0.16) !important; color: #ffd98a !important; } [data-color-mode="dark"] body[data-luliy-theme="mono"] { --th-h1: #f0f0f0; --th-h2: #e0e0e0; --th-h3: #cccccc; --th-h4: #bbbbbb; --th-strong: #ffffff; --th-accent: #e8e8e8; --th-accent-soft: rgba(255,255,255,0.12); --th-accent-hover: rgba(255,255,255,0.20); } /* ══════════════════════════════════════════════════════════ 16 Rebuilt button-style TOC (popup panel from the TOC fab) ══════════════════════════════════════════════════════════ */ /* Hide the native articletoc.js TOC — we render our own panel. */ #TOC, .articletoc, #articleTOC, [id*="articleTOC"], [class*="ArticleTOC"] { display: none !important; } /* ── Panel: hidden until .is-open, pops up from the fab ──── */ #luliy-toc-panel { position: fixed; right: 20px; bottom: 120px; /* just above the TOC fab (which sits ~64px) */ width: 260px; max-height: min(60vh, 460px); display: flex; flex-direction: column; z-index: 9993; opacity: 0; pointer-events: none; transform: translateY(16px) scale(0.96); transform-origin: bottom right; transition: opacity 0.26s ease, transform 0.3s cubic-bezier(.2,.7,.3,1); /* Theme glass */ background: var(--th-toc-bg, rgba(255,255,255,0.97)); -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7); border: 1px solid var(--th-accent-soft, rgba(130,80,223,0.22)); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.7) inset; overflow: hidden; } #luliy-toc-panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } [data-color-mode="dark"] #luliy-toc-panel { background: var(--th-toc-bg, rgba(16,12,30,0.97)); border-color: var(--th-accent-soft, rgba(130,80,223,0.36)); box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.06) inset; } /* Header */ .luliy-toc-hdr { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 10px; border-bottom: 1px solid var(--th-accent-soft, rgba(130,80,223,0.16)); flex-shrink: 0; } .luliy-toc-hdr-label { font-size: 14px; font-weight: 800; letter-spacing: 1px; color: var(--th-accent, #8250df); font-family: 'Noto Sans SC', sans-serif; } [data-color-mode="dark"] .luliy-toc-hdr-label { color: var(--th-accent, #cba6f7); } .luliy-toc-hdr-top { font-size: 12px; border: none; cursor: pointer; background: var(--th-accent-soft, rgba(130,80,223,0.12)); color: var(--th-accent, #8250df); padding: 4px 10px; border-radius: 20px; font-family: 'Noto Sans SC', sans-serif; transition: background 0.18s; } .luliy-toc-hdr-top:hover { background: var(--th-accent-hover, rgba(130,80,223,0.24)); } [data-color-mode="dark"] .luliy-toc-hdr-top { color: var(--th-accent, #cba6f7); } /* List */ .luliy-toc-list { overflow-y: auto; padding: 8px 6px 10px; scrollbar-width: thin; scrollbar-color: var(--th-accent-soft, rgba(130,80,223,0.30)) transparent; } .luliy-toc-list::-webkit-scrollbar { width: 4px; } .luliy-toc-list::-webkit-scrollbar-thumb { background: var(--th-accent-soft, rgba(130,80,223,0.30)); border-radius: 3px; } .luliy-toc-item { display: block; text-decoration: none; padding: 7px 12px; margin: 1px 0; border-radius: 8px; font-size: 13px; line-height: 1.5; color: #333; /* high-contrast default (light) */ border-left: 2px solid transparent; transition: background 0.16s, color 0.16s, border-color 0.16s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'LXGW WenKai Screen', 'Noto Sans SC', sans-serif; } [data-color-mode="dark"] .luliy-toc-item { color: rgba(235,230,250,0.92); } .luliy-toc-lv1 { font-weight: 700; } .luliy-toc-lv2 { padding-left: 22px; } .luliy-toc-lv3 { padding-left: 34px; font-size: 12.5px; opacity: 0.92; } .luliy-toc-lv4 { padding-left: 46px; font-size: 12px; opacity: 0.84; } .luliy-toc-item:hover { background: var(--th-accent-soft, rgba(130,80,223,0.12)); color: var(--th-accent, #8250df); } [data-color-mode="dark"] .luliy-toc-item:hover { color: #fff; } .luliy-toc-item.is-current { background: var(--th-accent-soft, rgba(130,80,223,0.18)); color: var(--th-accent, #8250df); border-left-color: var(--th-accent, #8250df); font-weight: 700; } [data-color-mode="dark"] .luliy-toc-item.is-current { color: #fff; background: var(--th-accent, rgba(130,80,223,0.5)); } /* Mobile: panel spans bottom area */ @media (max-width: 768px) { #luliy-toc-panel { right: 12px; left: 12px; width: auto; bottom: 110px; max-height: 55vh; } } /* ══════════════════════════════════════════════════════════ 17 Floating toolbar + ctrl dropdown panel ══════════════════════════════════════════════════════════ */ #luliy-toolbar { position: fixed; top: 76px; right: 20px; display: flex; flex-direction: column; align-items: flex-end; z-index: 9990; } /* ── Pill trigger button ──────────────────────────────── */ #luliy-ctrl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 20px; background: rgba(255,255,255,0.22); backdrop-filter: blur(16px) saturate(1.8); -webkit-backdrop-filter: blur(16px) saturate(1.8); border: 1px solid rgba(255,255,255,0.40); color: rgba(20,10,40,0.90); font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: 0.5px; box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.55) inset; transition: background 0.22s, transform 0.22s, box-shadow 0.22s; white-space: nowrap; position: relative; } [data-color-mode="dark"] #luliy-ctrl-btn { background: rgba(18,14,36,0.72); border-color: rgba(130,80,223,0.36); color: rgba(220,215,255,0.92); box-shadow: 0 4px 16px rgba(0,0,0,0.55); } #luliy-ctrl-btn:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(130,80,223,0.32), 0 1px 0 rgba(255,255,255,0.70) inset; background: rgba(255,255,255,0.36); } #luliy-ctrl-btn.is-open { background: rgba(130,80,223,0.14); border-color: rgba(130,80,223,0.45); box-shadow: 0 8px 24px rgba(130,80,223,0.28); } [data-color-mode="dark"] #luliy-ctrl-btn.is-open { background: rgba(130,80,223,0.26); } /* ── Ctrl dropdown panel ──────────────────────────────── */ #luliy-ctrl-panel { display: none; flex-direction: column; /* Opens to the LEFT of the pill button so it never covers the right-edge column where the TOC, back-to-top and search FAB live. */ position: absolute; top: 0; right: calc(100% + 10px); min-width: 248px; max-width: 280px; max-height: min(560px, calc(100vh - 120px)); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(130,80,223,0.20) transparent; background: rgba(255,255,255,0.97); border: 1px solid rgba(130,80,223,0.18); border-radius: 18px; padding: 10px 8px; box-shadow: 0 18px 52px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.80) inset; backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8); z-index: 9991; gap: 1px; } [data-color-mode="dark"] #luliy-ctrl-panel { background: rgba(14,10,28,0.98); border-color: rgba(130,80,223,0.32); box-shadow: 0 18px 52px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.05) inset; } #luliy-ctrl-panel.is-open { display: flex; } /* Separator */ .luliy-ctrl-sep { border: none; border-top: 1px solid rgba(130,80,223,0.12); margin: 5px 2px; } [data-color-mode="dark"] .luliy-ctrl-sep { border-top-color: rgba(130,80,223,0.22); } /* Section label */ .luliy-ctrl-sec { font-size: 10px; font-weight: 700; color: #8250df; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 10px 2px; opacity: 0.75; font-family: 'Noto Sans SC', sans-serif; } [data-color-mode="dark"] .luliy-ctrl-sec { color: #cba6f7; } /* Row buttons — shared style for SFX / Sakura / BG rows */ .luliy-ctrl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; border: none; background: transparent; cursor: pointer; text-align: left; transition: background 0.15s; width: 100%; font-family: 'LXGW WenKai Screen', 'LXGW WenKai', serif; } .luliy-ctrl-row:hover { background: rgba(130,80,223,0.09); } [data-color-mode="dark"] .luliy-ctrl-row:hover { background: rgba(130,80,223,0.18); } .luliy-ctrl-row.is-active { background: rgba(130,80,223,0.14); } [data-color-mode="dark"] .luliy-ctrl-row.is-active { background: rgba(130,80,223,0.26); } .luliy-ctrl-lbl { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #1e1032; font-family: 'Noto Sans SC', sans-serif; pointer-events: none; } [data-color-mode="dark"] .luliy-ctrl-lbl { color: #ece8ff; } .luliy-ctrl-row.is-active .luliy-ctrl-lbl { color: #8250df; } [data-color-mode="dark"] .luliy-ctrl-row.is-active .luliy-ctrl-lbl { color: #cba6f7; } .luliy-ctrl-badge { font-size: 11px; font-weight: 700; color: #8250df; background: rgba(130,80,223,0.10); padding: 2px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; pointer-events: none; transition: background 0.15s; } [data-color-mode="dark"] .luliy-ctrl-badge { color: #d9c4ff; background: rgba(130,80,223,0.30); } /* A- / A+ font-size buttons (ctrl panel + mobile dropdown) */ .luliy-fs-btn { border: 1px solid rgba(130,80,223,0.30); background: rgba(130,80,223,0.06); color: #8250df; border-radius: 8px; font-size: 11px; font-weight: 700; padding: 3px 8px; cursor: pointer; font-family: 'Noto Sans SC', sans-serif; transition: background 0.15s, transform 0.15s; flex-shrink: 0; } .luliy-fs-btn:hover { background: rgba(130,80,223,0.14); transform: translateY(-1px); } [data-color-mode="dark"] .luliy-fs-btn { color: #cba6f7; border-color: rgba(130,80,223,0.42); background: rgba(130,80,223,0.14); } [data-color-mode="dark"] .luliy-fs-btn:hover { background: rgba(130,80,223,0.26); } /* ── Slider rows (background blur / reading width) ────────── */ .luliy-ctrl-slider { flex-direction: column !important; align-items: stretch !important; gap: 9px !important; padding-top: 10px !important; padding-bottom: 12px !important; } .luliy-slider-top { display: flex; align-items: center; justify-content: space-between; width: 100%; } .luliy-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0; border-radius: 6px; cursor: pointer; background: linear-gradient(to right, var(--th-accent, #8250df) 0%, var(--th-accent, #8250df) var(--luliy-range-pct, 0%), var(--th-accent-soft, rgba(130,80,223,0.18)) var(--luliy-range-pct, 0%), var(--th-accent-soft, rgba(130,80,223,0.18)) 100%); transition: background 0.05s linear; } .luliy-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%; background: var(--th-accent, #8250df); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.3); cursor: grab; transition: transform 0.12s; } .luliy-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.18); } .luliy-range::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; background: var(--th-accent, #8250df); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.3); cursor: grab; } .luliy-range::-moz-range-track { background: transparent; height: 6px; border-radius: 6px; } [data-color-mode="dark"] .luliy-range::-webkit-slider-thumb, [data-color-mode="dark"] .luliy-range::-moz-range-thumb { border-color: #1c1530; } /* Theme rows (sink opts) inside ctrl panel */ .luliy-sink-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: none; background: transparent; cursor: pointer; font-family: inherit; text-align: left; transition: background 0.15s; width: 100%; } .luliy-sink-opt:hover { background: rgba(130,80,223,0.09); } .luliy-sink-opt.is-active { background: rgba(130,80,223,0.14); } [data-color-mode="dark"] .luliy-sink-opt:hover { background: rgba(130,80,223,0.18); } [data-color-mode="dark"] .luliy-sink-opt.is-active { background: rgba(130,80,223,0.26); } .luliy-sink-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,0.5); } .luliy-sink-name { font-size: 13px; font-weight: 700; color: #1e1032; line-height: 1.3; font-family: 'Noto Sans SC', sans-serif; } [data-color-mode="dark"] .luliy-sink-name { color: #cdd6f4; } .luliy-sink-opt.is-active .luliy-sink-name { color: #8250df; } [data-color-mode="dark"] .luliy-sink-opt.is-active .luliy-sink-name { color: #cba6f7; } /* checkmark badge on active theme row */ .luliy-sink-opt .luliy-ctrl-badge { margin-left: auto; } /* ── Theme day/night preview cards ───────────────────────── */ .luliy-ctrl-theme-preview { display: flex; gap: 6px; padding: 4px 10px 8px; } .luliy-ctrl-preview-card { flex: 1; border-radius: 10px; padding: 7px 6px 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-align: center; border: 1px solid transparent; line-height: 1.5; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; cursor: pointer; /* interactive */ -webkit-user-select: none; user-select: none; } .luliy-ctrl-preview-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.22); } .luliy-ctrl-preview-card:active { transform: scale(0.96); } /* Active mode card: accent ring + check badge */ .luliy-ctrl-preview-card.is-active { border-color: var(--th-accent, #8250df) !important; box-shadow: 0 0 0 2px var(--th-accent-soft, rgba(130,80,223,0.35)), 0 4px 14px rgba(0,0,0,0.18); position: relative; } .luliy-ctrl-preview-card.is-active::after { content: '\2713'; position: absolute; top: -7px; right: -7px; width: 17px; height: 17px; border-radius: 50%; background: var(--th-accent, #8250df); color: #fff; font-size: 11px; line-height: 17px; text-align: center; font-weight: 900; box-shadow: 0 2px 6px rgba(0,0,0,0.3); } .luliy-ctrl-preview-card .preview-dot { width: 8px; height: 8px; border-radius: 50%; margin: 0 auto 3px; display: block; } .luliy-ctrl-preview-card .preview-label { font-size: 9px; color: inherit; opacity: 0.75; display: block; letter-spacing: 0.5px; text-transform: uppercase; } /* day card */ .luliy-ctrl-preview-card.day { background: rgba(255,255,255,0.92); border-color: rgba(130,80,223,0.16); color: #1e1032; box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 0 rgba(255,255,255,0.90) inset; } /* night card */ .luliy-ctrl-preview-card.night { background: rgba(14,10,28,0.88); border-color: rgba(130,80,223,0.26); color: #cdd6f4; box-shadow: 0 2px 8px rgba(0,0,0,0.30); } /* ══════════════════════════════════════════════════════════ 18 Prev / Next navigation ══════════════════════════════════════════════════════════ */ .luliy-prevnext { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; } .luliy-prevnext a { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: 12px; text-decoration: none !important; background: rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.30); box-shadow: 0 3px 14px rgba(0,0,0,0.10); transition: transform 0.22s, box-shadow 0.22s, background 0.22s; color: inherit; } .luliy-prevnext a:hover { transform: translateY(-3px); background: rgba(255,255,255,0.24); box-shadow: 0 8px 28px rgba(0,0,0,0.16); } [data-color-mode="dark"] .luliy-prevnext a { background: rgba(18,14,36,0.55); border-color: rgba(255,255,255,0.10); } [data-color-mode="dark"] .luliy-prevnext a:hover { background: rgba(28,22,50,0.75); } .pn-label { font-size: 11px; color: rgba(130,80,223,0.80); font-weight: 600; letter-spacing: 0.4px; } .pn-title { font-size: 14px; font-weight: 700; color: #1e1032; line-height: 1.4; font-family: 'Noto Sans SC', sans-serif; } [data-color-mode="dark"] .pn-title { color: #cdd6f4; } /* ══════════════════════════════════════════════════════════ 19 Lightbox ══════════════════════════════════════════════════════════ */ #luliy-lightbox { position: fixed; inset: 0; z-index: 99996; -webkit-backdrop-filter: blur(8px); background: rgba(0,0,0,0.88); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.28s; } #luliy-lightbox.is-open { opacity: 1; pointer-events: all; } #luliy-lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.60); } #luliy-lightbox-close { position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.30); color: #fff; font-size: 22px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } #luliy-lightbox-close:hover { background: rgba(255,255,255,0.32); } /* ══════════════════════════════════════════════════════════ 20 Back-to-top ══════════════════════════════════════════════════════════ */ #luliy-back-top { position: fixed; bottom: 112px; right: 22px; width: 44px; height: 44px; border-radius: 50%; background: var(--th-accent-soft, rgba(130,80,223,0.22)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--th-accent-soft, rgba(130,80,223,0.35)); color: var(--th-accent, #8250df); font-size: 18px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.28s, transform 0.28s, color 0.3s, background 0.3s, border-color 0.3s; z-index: 9994; /* above TOC(9992) so clicks always land */ will-change: transform; /* stacking context without Safari isolation bug */ } #luliy-back-top.is-visible { opacity: 1; pointer-events: all; } #luliy-back-top:hover { transform: translateY(-3px); background: var(--th-accent-hover, rgba(130,80,223,0.35)); } [data-color-mode="dark"] #luliy-back-top { color: var(--th-accent, #cba6f7); } /* Reading progress ring — contained inside button */ #luliy-back-top .luliy-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; border-radius: 50%; } #luliy-back-top .luliy-ring-bg { fill: none; stroke: var(--th-accent-soft, rgba(130,80,223,0.18)); stroke-width: 2.5; } #luliy-back-top .luliy-ring-fg { fill: none; stroke: var(--th-accent, #8250df); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; } /* ══════════════════════════════════════════════════════════ 21 Sakura canvas + shooting stars / theme ripple ══════════════════════════════════════════════════════════ */ #luliy-sakura-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.50; } #luliy-theme-ripple { position: fixed; border-radius: 50%; transform: scale(0); pointer-events: none; z-index: 99998; transition: none; } /* ══════════════════════════════════════════════════════════ 22 Uptime counter ══════════════════════════════════════════════════════════ */ #luliy-uptime { text-align: center; font-size: 13px; color: rgba(255,255,255,0.65); padding: 12px 0; margin-top: 16px; text-shadow: 0 1px 4px rgba(0,0,0,0.30); font-family: 'LXGW WenKai Mono', monospace; } [data-color-mode="dark"] #luliy-uptime { color: rgba(180,175,220,0.60); } /* ══════════════════════════════════════════════════════════ 23 Timeline / archive ══════════════════════════════════════════════════════════ */ .tl-year { font-size: 22px; font-weight: 800; color: #8250df; margin: 28px 0 10px; padding-left: 16px; border-left: 4px solid #8250df; font-family: 'Noto Sans SC', sans-serif; } [data-color-mode="dark"] .tl-year { color: #cba6f7; border-left-color: #cba6f7; } .tl-list { list-style: none; padding: 0; margin: 0 0 16px; } .tl-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-radius: 8px; margin-bottom: 4px; background: rgba(255,255,255,0.10); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.20); transition: background 0.2s, transform 0.2s; } .tl-item:hover { background: rgba(255,255,255,0.20); transform: translateX(4px); } .tl-item a { text-decoration: none; font-weight: 600; color: #1e1032; flex: 1; } [data-color-mode="dark"] .tl-item a { color: #cdd6f4; } .tl-date { font-size: 12px; color: #888; font-family: 'LXGW WenKai Mono', monospace; margin-left: 12px; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════ 24 Homepage bottom gallery banner — banner / grid / custom ══════════════════════════════════════════════════════════ */ #luliy-home-gallery { max-width: 1040px; width: 95%; margin: 8px auto 48px; border-radius: 20px; overflow: hidden; height: 220px; position: relative; box-shadow: 0 8px 40px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.15); flex-shrink: 0; } .luliy-gallery-cell { width: 100%; height: 100%; overflow: hidden; } #luliy-home-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(.4,0,.2,1); } .luliy-gallery-cell:hover img { transform: scale(1.05); } /* Grid mode — 2+ images become a responsive tile grid */ #luliy-home-gallery.is-grid { height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; padding: 6px; background: rgba(255,255,255,0.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } [data-color-mode="dark"] #luliy-home-gallery.is-grid { background: rgba(14,10,28,0.40); } #luliy-home-gallery.is-grid .luliy-gallery-cell { height: 160px; border-radius: 14px; overflow: hidden; } #luliy-home-gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,20,0.60) 0%, rgba(0,0,20,0.10) 60%, transparent 100%); display: flex; align-items: flex-end; padding: 22px 28px; pointer-events: none; } #luliy-home-gallery-text { color: #fff; font-size: 18px; font-weight: 800; font-family: 'Noto Sans SC', sans-serif; text-shadow: 0 2px 16px rgba(0,0,0,0.65); letter-spacing: 2px; } /* ✎ Custom-image edit button */ #luliy-gallery-edit { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.50); background: rgba(0,0,0,0.30); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 14px; cursor: pointer; z-index: 3; opacity: 0; transition: opacity 0.25s, background 0.2s; display: flex; align-items: center; justify-content: center; } #luliy-home-gallery:hover #luliy-gallery-edit { opacity: 1; } #luliy-gallery-edit:hover { background: rgba(0,0,0,0.55); } /* ══════════════════════════════════════════════════════════ 25 Favorites lock gate ══════════════════════════════════════════════════════════ */ /* Content is hidden + blurred while locked */ #postBody.luliy-locked { filter: blur(14px); -webkit-user-select: none; user-select: none; pointer-events: none; max-height: 60vh; overflow: hidden !important; } #luliy-fav-gate { position: fixed; inset: 0; z-index: 99995; display: flex; align-items: center; justify-content: center; background: rgba(10,6,22,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 0.45s; } #luliy-fav-gate.is-leaving { opacity: 0; pointer-events: none; } #luliy-fav-gate-card { width: min(92vw, 340px); padding: 34px 30px 28px; border-radius: 22px; text-align: center; background: rgba(255,255,255,0.92); backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8); border: 1px solid rgba(130,80,223,0.25); box-shadow: 0 24px 70px rgba(0,0,0,0.40), 0 1px 0 rgba(255,255,255,0.80) inset; animation: welcomeFadeIn 0.55s cubic-bezier(.4,0,.2,1) both; } [data-color-mode="dark"] #luliy-fav-gate-card { background: rgba(18,14,34,0.94); border-color: rgba(130,80,223,0.40); } #luliy-fav-gate-icon { font-size: 38px; margin-bottom: 10px; } #luliy-fav-gate-title { font-size: 19px; font-weight: 800; color: #1e1032; font-family: 'Noto Sans SC', sans-serif; letter-spacing: 3px; margin-bottom: 6px; } [data-color-mode="dark"] #luliy-fav-gate-title { color: #e8e8f8; } #luliy-fav-gate-sub { font-size: 12.5px; color: #888; margin-bottom: 20px; letter-spacing: 1px; } #luliy-fav-gate-input { width: 100%; box-sizing: border-box; padding: 11px 16px; margin-bottom: 12px; border-radius: 12px; border: 1.5px solid rgba(130,80,223,0.30); background: rgba(255,255,255,0.80); font-size: 16px; text-align: center; letter-spacing: 6px; outline: none; font-family: 'LXGW WenKai Mono', monospace; transition: border-color 0.2s, box-shadow 0.2s; color: #1e1032; } #luliy-fav-gate-input:focus { border-color: #8250df; box-shadow: 0 0 0 3px rgba(130,80,223,0.18); } [data-color-mode="dark"] #luliy-fav-gate-input { background: rgba(10,8,20,0.80); color: #e8e8f8; border-color: rgba(130,80,223,0.45); } #luliy-fav-gate-btn { width: 100%; padding: 11px 0; border: none; border-radius: 12px; background: linear-gradient(90deg, #8250df, #b07ce8); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 4px; cursor: pointer; font-family: 'Noto Sans SC', sans-serif; box-shadow: 0 6px 18px rgba(130,80,223,0.35); transition: transform 0.2s, box-shadow 0.2s; } #luliy-fav-gate-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(130,80,223,0.45); } #luliy-fav-gate-err { min-height: 18px; margin-top: 10px; font-size: 12px; color: #e05c5c; letter-spacing: 1px; } /* Wrong-password shake */ @keyframes luliyShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } } #luliy-fav-gate-card.shake { animation: luliyShake 0.45s ease; } /* ══════════════════════════════════════════════════════════ 26 APlayer mini player (top-left, folded by default) ══════════════════════════════════════════════════════════ */ /* ── APlayer — draggable mini ball, full theme support ────── */ #luliy-aplayer { position: fixed !important; z-index: 9989 !important; cursor: grab; -webkit-user-select: none; user-select: none; touch-action: none; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 8px 32px rgba(0,0,0,0.40) !important; transition: box-shadow 0.2s; } #luliy-aplayer.is-dragging { cursor: grabbing; box-shadow: 0 16px 48px rgba(0,0,0,0.55) !important; } /* ── Light mode: clean glass ─────────────────────────────── */ #luliy-aplayer .aplayer, #luliy-aplayer.aplayer { background: rgba(255,255,255,0.92) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.60) !important; border-radius: 12px !important; } /* ── Dark mode (follows data-color-mode directly) ────────── */ [data-color-mode="dark"] #luliy-aplayer .aplayer, [data-color-mode="dark"] #luliy-aplayer.aplayer { background: rgba(14,10,28,0.92) !important; border-color: rgba(255,255,255,0.12) !important; } [data-color-mode="dark"] #luliy-aplayer .aplayer-title, [data-color-mode="dark"] #luliy-aplayer .aplayer-author { color: rgba(240,235,255,0.90) !important; } [data-color-mode="dark"] #luliy-aplayer .aplayer-time { color: rgba(200,195,240,0.60) !important; } [data-color-mode="dark"] #luliy-aplayer .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded { background: rgba(255,255,255,0.18) !important; } /* ★ 修复夜间模式播放列表一黑一白问题： APlayer 默认用 nth-child 给奇偶行设不同背景，强制全部统一为深色 */ [data-color-mode="dark"] #luliy-aplayer .aplayer-list ol li, [data-color-mode="dark"] #luliy-aplayer .aplayer-list ol li:nth-child(even) { background: rgba(14,10,28,0.92) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; } [data-color-mode="dark"] #luliy-aplayer .aplayer-list ol li:hover, [data-color-mode="dark"] #luliy-aplayer .aplayer-list ol li.aplayer-list-cur { background: rgba(var(--luliy-glass-hue, 250), 0%, 0%, 0.12) !important; background: hsla(var(--luliy-glass-hue, 250), 40%, 30%, 0.30) !important; } [data-color-mode="dark"] #luliy-aplayer .aplayer-list-author, [data-color-mode="dark"] #luliy-aplayer .aplayer-list-index, [data-color-mode="dark"] #luliy-aplayer .aplayer-list-title { color: rgba(220,215,250,0.80) !important; } [data-color-mode="dark"] #luliy-aplayer .aplayer-list-cur .aplayer-list-title { color: var(--th-accent, #00e5ff) !important; } /* Theme accent on progress bar */ #luliy-aplayer .aplayer-bar .aplayer-played { background: var(--th-accent, #e8a838) !important; } #luliy-aplayer .aplayer-volume-bar .aplayer-volume { background: var(--th-accent, #e8a838) !important; } #luliy-aplayer .aplayer-icon { color: var(--th-accent, #8250df) !important; } /* Mini mode pic */ #luliy-aplayer .aplayer-pic { border-radius: 10px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important; } /* ── Mini control strip: add-music ──────────────────────── */ .luliy-ap-tools { display: flex; gap: 4px; position: absolute; top: 2px; right: 2px; z-index: 5; } .luliy-ap-tool { width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; background: rgba(0,0,0,0.35); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform 0.15s, background 0.15s; padding: 0; } .luliy-ap-tool:hover { transform: scale(1.15); background: var(--th-accent, #8250df); } .luliy-ap-add { font-size: 15px; font-weight: 700; } [data-color-mode="dark"] #luliy-aplayer .luliy-ap-tool { background: rgba(255,255,255,0.18); } /* ══════════════════════════════════════════════════════════ 音乐播放器：圆形按钮默认收起，点击展开（交互方式与目录按钮一致） ══════════════════════════════════════════════════════════ */ /* 圆形折叠按钮，样式参照 #luliy-toc-fab，在它正上方紧接着排列 */ #luliy-ap-fab { /* ★ 位置改由 JS 控制（left/top），支持拖拽 + 和播放器位置同步， 不再写死 bottom/right。 */ position: fixed; width: 44px; height: 44px; border-radius: 50%; background: var(--th-accent-soft, rgba(130,80,223,0.22)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--th-accent-soft, rgba(130,80,223,0.35)); color: var(--th-accent, #8250df); font-size: 18px; cursor: grab; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; z-index: 9994; user-select: none; touch-action: none; transition: opacity 0.28s, background 0.25s, color 0.25s, box-shadow 0.2s; } #luliy-ap-fab.is-visible { opacity: 1; pointer-events: all; } /* 播放器展开时，按钮藏起来（两者共用同一坐标点，不隐藏会糊在 展开后面板的左上角，造成重叠） */ #luliy-ap-fab.is-hidden-while-open { opacity: 0 !important; pointer-events: none !important; } #luliy-ap-fab.is-dragging { cursor: grabbing; transition: none; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } #luliy-ap-fab.is-active { background: var(--th-accent, #8250df) !important; color: #fff !important; border-color: var(--th-accent, #8250df) !important; } #luliy-ap-fab:hover:not(.is-dragging) { background: var(--th-accent-hover, rgba(130,80,223,0.35)); } [data-color-mode="dark"] #luliy-ap-fab { color: var(--th-accent, #cba6f7); } /* 完整播放器：默认收起（不占地方、不拦截点击），点圆形按钮后展开 */ #luliy-aplayer { opacity: 0; transform: scale(0.92); pointer-events: none; visibility: hidden; transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.2,.8,.3,1), visibility 0.22s; transform-origin: top right; } #luliy-aplayer.is-open { opacity: 1; transform: scale(1); pointer-events: auto; visibility: visible; } @media (max-width: 768px) { /* 位置已改由 JS 的 left/top 控制（含手机端默认值），这里不用再写 bottom */ } /* ══════════════════════════════════════════════════════════ 28 NEW (v10) — gradient headings, blockquotes, card list, skeletons, series, search, tag cloud, archive calendar, trail, fireflies, focus mode, reduce motion ══════════════════════════════════════════════════════════ */ /* ── 28.1 Theme gradient headings (background-clip:text) ──── */ #postBody h1, #postBody h2 { background-image: linear-gradient(120deg, var(--th-h1, #1a0a3a), var(--th-accent, #8250df)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--th-h1, #8250df); } /* Graceful fallback where background-clip:text unsupported */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { #postBody h1, #postBody h2 { -webkit-text-fill-color: currentColor; color: var(--th-h2, #8250df); } } body[data-luliy-theme="mono"] #postBody h1, body[data-luliy-theme="mono"] #postBody h2 { background-image: none; -webkit-text-fill-color: currentColor; color: var(--th-h1, #111) !important; } /* ── 28.2 Blockquote beautify (theme gradient bar + quote) ── */ #postBody blockquote { position: relative; margin: 1.5em 0; padding: 14px 20px 14px 26px; border: none !important; border-radius: 0 12px 12px 0; background: var(--th-accent-soft, rgba(130,80,223,0.06)); overflow: hidden; } #postBody blockquote::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, var(--th-accent, #8250df), transparent); } #postBody blockquote::after { content: '\201C'; position: absolute; right: 12px; top: 2px; font-size: 46px; line-height: 1; font-family: Georgia, serif; color: var(--th-accent, #8250df); opacity: 0.14; pointer-events: none; } #postBody blockquote p { margin: 0.3em 0; } [data-color-mode="dark"] #postBody blockquote { background: var(--th-accent-soft, rgba(130,80,223,0.14)); } /* ── 28.3 Card list & timeline views ──────────────────────── */ #luliy-cardview-bar { display: flex; justify-content: flex-start; margin: 0 0 14px; } #luliy-cardview-toggle { display: inline-flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--th-accent-soft, rgba(130,80,223,0.28)); background: var(--th-accent-soft, rgba(130,80,223,0.06)); } #luliy-cardview-toggle button { padding: 5px 13px; font-size: 15px; color: var(--th-accent, #8250df); background: transparent; border: none; cursor: pointer; transition: background 0.18s, color 0.18s; line-height: 1.2; } #luliy-cardview-toggle button:hover { background: var(--th-accent-soft, rgba(130,80,223,0.12)); } #luliy-cardview-toggle[data-view="grid"] .cv-grid, #luliy-cardview-toggle[data-view="list"] .cv-list, #luliy-cardview-toggle[data-view="timeline"] .cv-timeline { background: var(--th-accent, #8250df); color: #fff; } [data-color-mode="dark"] #luliy-cardview-toggle button { color: var(--th-accent, #cba6f7); } [data-color-mode="dark"] #luliy-cardview-toggle[data-view="grid"] .cv-grid, [data-color-mode="dark"] #luliy-cardview-toggle[data-view="list"] .cv-list, [data-color-mode="dark"] #luliy-cardview-toggle[data-view="timeline"] .cv-timeline { color: #fff; } /* List layout: single column, show summary row */ .luliy-card-grid.luliy-card-list { grid-template-columns: 1fr !important; } .luliy-card-list .luliy-card { border-radius: 12px; } .luliy-card-list .luliy-card-inner { flex-direction: row !important; align-items: center; gap: 14px; min-height: 0 !important; padding: 12px 18px; } .luliy-card-list .luliy-card-title { font-size: 15px; margin: 0; } .luliy-card-list .luliy-card-date { order: 3; margin-left: auto; flex-shrink: 0; } .luliy-card-list .luliy-card-tags { order: 2; flex-shrink: 0; } .luliy-card-list .luliy-card-deco { display: none; } .luliy-card-list .luliy-card-yeardiv { grid-column: 1 / -1; } /* ── Timeline view: vertical spine with dotted cards ──────── */ /* ── Timeline: centre spine, cards alternate left ↔ right ─── */ .luliy-card-grid.luliy-card-timeline { display: block !important; /* leave grid — use normal flow */ position: relative; padding: 0 0 40px !important; } /* Centre vertical spine */ .luliy-card-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(to bottom, var(--th-accent, #8250df), var(--th-accent-soft, rgba(130,80,223,0.15))); border-radius: 2px; pointer-events: none; } /* Year divider — full-width centred header */ .luliy-card-timeline .luliy-card-yeardiv { display: flex !important; justify-content: center !important; margin: 28px 0 18px !important; grid-column: unset !important; position: relative; z-index: 2; } .luliy-card-timeline .luliy-card-yeardiv span { background: var(--th-accent, #8250df); color: #fff; padding: 4px 20px; border-radius: 30px; font-size: 14px; font-weight: 800; letter-spacing: 2px; box-shadow: 0 4px 14px var(--th-accent-soft, rgba(130,80,223,0.40)); } .luliy-card-timeline .luliy-card-yeardiv::after { display: none !important; } /* Individual timeline card — alternates left / right */ .luliy-card-timeline .luliy-card { position: relative; width: calc(50% - 36px); margin-bottom: 18px; border-radius: 14px; /* default: right side */ margin-left: calc(50% + 18px); } /* Even-indexed cards go to the left */ .luliy-card-timeline .luliy-card:nth-child(even) { margin-left: 0; margin-right: calc(50% + 18px); } /* Connector dot on the spine */ .luliy-card-timeline .luliy-card::before { content: ''; position: absolute; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--th-accent, #8250df); border: 3px solid var(--color-canvas-default, #fff); box-shadow: 0 0 0 2px var(--th-accent-soft, rgba(130,80,223,0.4)); opacity: 1; z-index: 3; /* Right-side card: spine is to its LEFT → dot sits at left edge. Card's left edge is 18px right of spine; dot is 12px + 6px border ⇒ centre the dot on the spine: left = -(18 + 9) = -27px */ left: -27px; right: auto; } /* Left-side card: spine is to its RIGHT → dot at right edge */ .luliy-card-timeline .luliy-card:nth-child(even)::before { left: auto; right: -27px; } [data-color-mode="dark"] .luliy-card-timeline .luliy-card::before { border-color: rgba(10,6,20,0.95); } /* Card inner: compact single row */ .luliy-card-timeline .luliy-card-inner { flex-direction: column !important; min-height: 0 !important; padding: 12px 16px !important; gap: 6px !important; } .luliy-card-timeline .luliy-card-title { font-size: 14px; margin: 0; } .luliy-card-timeline .luliy-card-date { order: 0; font-size: 11px; } .luliy-card-timeline .luliy-card-tags { order: 2; } .luliy-card-timeline .luliy-card-deco { display: none; } /* ── Infinite-scroll sentinel (timeline view) ─────────────── */ #luliy-tl-sentinel { text-align: center; padding: 22px 0 30px; font-size: 13px; letter-spacing: 2px; color: var(--th-accent, #8250df); opacity: 0.75; font-family: 'Noto Sans SC', sans-serif; animation: luliyTlPulse 1.4s ease-in-out infinite; } #luliy-tl-sentinel.is-done { animation: none; opacity: 0.55; color: var(--color-fg-muted, #888); } @keyframes luliyTlPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } } /* Timeline infinite mode: hide page-based navigation (it no longer applies) */ body.luliy-tl-infinite .pagination, body.luliy-tl-infinite .paginate, body.luliy-tl-infinite #pagination, body.luliy-tl-infinite .Paginate, body.luliy-tl-infinite .pagenav, body.luliy-tl-infinite a[href*="?page="], /* ★ 分类页 / 归档页：始终隐藏 Gmeek 原生「上一页/下一页」翻页器 （含运行时包裹的 .paginate-container 层） */ body.luliy-hide-pagination .pagination, body.luliy-hide-pagination .paginate-container, body.luliy-hide-pagination .paginate, body.luliy-hide-pagination #pagination, body.luliy-hide-pagination .Paginate, body.luliy-hide-pagination .pagenav { display: none !important; } /* ============================================================ 归档页 Archives —— 双标签页 + 按年分组 + 分页（赛博朋克风） ============================================================ */ .luliy-archives { max-width: 760px; margin: 0 auto; padding: 8px 0 40px; } .luliy-arch-loading, .luliy-arch-error, .luliy-arch-empty { text-align: center; padding: 40px 16px; color: rgba(220,210,245,0.7); font-size: 15px; } .luliy-arch-error { color: #ff6ec7; } .luliy-arch-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,43,214,0.28); } .luliy-arch-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: 2px; color: #fff; text-shadow: 0 0 10px rgba(255,110,199,0.5), 0 0 28px rgba(110,199,255,0.3); } .luliy-arch-tabbar { display: flex; align-items: center; gap: 12px; } .luliy-arch-tab { background: none; border: none; cursor: pointer; font-size: 15px; font-weight: 600; letter-spacing: 1px; color: rgba(200,190,230,0.55); padding: 4px 2px; transition: color 0.2s, text-shadow 0.2s; } .luliy-arch-tab:hover { color: rgba(255,255,255,0.85); } .luliy-arch-tab.is-active { color: #fff; text-shadow: 0 0 10px var(--th-accent, #00e5ff); } .luliy-arch-tabsep { width: 1px; height: 16px; background: rgba(255,255,255,0.25); } .luliy-arch-year { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: var(--th-accent, #00e5ff); margin: 26px 0 10px; padding-bottom: 4px; text-shadow: 0 0 12px rgba(0,229,255,0.35); } .luliy-arch-year:first-child { margin-top: 4px; } .luliy-arch-row { display: flex; align-items: baseline; gap: 16px; padding: 9px 10px; border-radius: 8px; text-decoration: none !important; transition: background 0.18s, transform 0.18s; } .luliy-arch-row:hover { background: hsla(var(--luliy-glass-hue, 250), 50%, 50%, 0.10); transform: translateX(4px); } .luliy-arch-date { flex: 0 0 auto; width: 96px; font-family: 'Courier New', monospace; font-size: 13px; color: rgba(180,170,210,0.7); } .luliy-arch-name { flex: 1 1 auto; font-size: 15px; line-height: 1.5; color: rgba(235,230,250,0.92); transition: color 0.18s; } .luliy-arch-row:hover .luliy-arch-name { color: #fff; } .luliy-arch-row:hover .luliy-arch-date { color: var(--th-accent, #00e5ff); } .luliy-arch-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); } .luliy-arch-pgbtn { width: 36px; height: 36px; border-radius: 8px; cursor: pointer; background: hsla(var(--luliy-glass-hue, 250), 50%, 50%, 0.12); border: 1px solid rgba(255,43,214,0.30); color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background 0.18s, transform 0.15s, box-shadow 0.18s; } .luliy-arch-pgbtn:hover:not(:disabled) { background: var(--th-accent, #00e5ff); color: #0a0e2a; box-shadow: 0 0 16px rgba(0,229,255,0.5); } .luliy-arch-pgbtn:disabled { opacity: 0.3; cursor: default; } .luliy-arch-pginfo { font-family: 'Courier New', monospace; font-size: 14px; color: rgba(210,200,235,0.8); letter-spacing: 0.5px; } /* ============================================================ 编年史 Chronicle —— 年份/分类切换 + 三种表格（赛博朋克风） ============================================================ */ .luliy-chronicle { max-width: 1100px; margin: 0 auto; padding: 8px 0 40px; } .luliy-chron-loading, .luliy-chron-error, .luliy-chron-empty { text-align: center; padding: 40px 16px; color: rgba(220,210,245,0.7); font-size: 15px; } .luliy-chron-error { color: #ff6ec7; } .luliy-chron-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid rgba(255,43,214,0.28); } .luliy-chron-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: 2px; color: #fff; text-shadow: 0 0 10px rgba(255,110,199,0.5), 0 0 28px rgba(110,199,255,0.3); } .luliy-chron-years { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .luliy-chron-year-tab { background: none; border: none; cursor: pointer; font-size: 15px; font-weight: 700; letter-spacing: 1px; color: rgba(200,190,230,0.5); padding: 4px 2px; position: relative; transition: color 0.2s; } .luliy-chron-year-tab:hover { color: rgba(255,255,255,0.85); } .luliy-chron-year-tab.is-active { color: #fff; } .luliy-chron-year-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--th-accent, #00e5ff); box-shadow: 0 0 8px var(--th-accent, #00e5ff); } .luliy-chron-cats { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 18px 0 22px; } .luliy-chron-cat-tab { background: none; border: none; cursor: pointer; font-size: 16px; font-weight: 600; letter-spacing: 1px; color: rgba(200,190,230,0.5); padding: 4px 2px; position: relative; transition: color 0.2s; } .luliy-chron-cat-tab:hover { color: rgba(255,255,255,0.85); } .luliy-chron-cat-tab.is-active { color: #fff; text-shadow: 0 0 10px rgba(255,110,199,0.4); } .luliy-chron-cat-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: #ff2bd6; box-shadow: 0 0 8px #ff2bd6; } /* 横向滚动用外层容器处理，避免 overflow-x:auto 隐式把 overflow-y 也改成 auto，导致表格高度被截断、内容从顶部被裁掉 */ .luliy-chron-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } .luliy-chron-tablewrap { /* 不再在这里设置 overflow */ min-width: 580px; /* 确保窄屏下触发外层横向滚动 */ } .luliy-chron-table { width: 100%; border-collapse: collapse; font-size: 14px; background: transparent; /* ★ 表格整体透明 */ } .luliy-chron-table td[rowspan], .luliy-chron-table .luliy-chron-month-cell { vertical-align: middle; /* ★ 垂直居中 */ font-weight: 600; white-space: nowrap; min-width: 52px; text-align: center; /* ★ 水平居中 */ border-right: 1px solid rgba(255,255,255,0.35); } .luliy-chron-table th, .luliy-chron-table td { border: 1px solid rgba(255,255,255,0.25); padding: 10px 14px; text-align: left; vertical-align: top; } .luliy-chron-table th { background: hsla(var(--luliy-glass-hue, 250), 55%, 14%, 0.55); color: var(--th-accent, #00e5ff); font-weight: 700; white-space: nowrap; letter-spacing: 0.5px; } /* ★ 夜间模式下 td 完全无底纹 */ [data-color-mode="dark"] .luliy-chron-table td, .luliy-chron-table td { background: transparent; color: rgba(230,225,250,0.9); } .luliy-chron-table a { color: var(--th-accent, #6ec7ff); text-decoration: none; } .luliy-chron-table a:hover { text-decoration: underline; color: #fff; } /* ★ Chronicle 页面：隐藏顶部「预计阅读 X 分钟 | 共 XX 字」和文末字数信息条 */ body.luliy-chronicle-takeover #luliy-readmeta, body.luliy-chronicle-takeover #luliy-post-footer-bar { display: none !important; } /* 海报墙 7/5/3 列响应式 */ .luliy-chron-posters { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; } .luliy-poster-item { position: relative; display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 2 / 3; text-decoration: none !important; border: 1px solid rgba(255,43,214,0.22); background: hsla(var(--luliy-glass-hue, 250), 45%, 9%, 0.4); cursor: pointer; padding: 0; /* button reset */ -webkit-appearance: none; appearance: none; } /* ══════════════════════════════════════════════════════ 海报灯箱（全屏展示 + 左右切换 + 触摸滑动） ══════════════════════════════════════════════════════ */ #luliy-lb { position: fixed; inset: 0; z-index: 200000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; } #luliy-lb.is-open { opacity: 1; visibility: visible; } body.luliy-lb-open { overflow: hidden; } .luliy-lb-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .luliy-lb-img-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: min(90vw, 520px); max-height: 90vh; } .luliy-lb-img { display: block; max-width: 100%; max-height: calc(90vh - 80px); object-fit: contain; border-radius: 12px; box-shadow: 0 8px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,43,214,0.25); transition: opacity 0.2s; } .luliy-lb-cap { margin-top: 12px; font-size: 14px; color: rgba(240,235,255,0.85); text-align: center; letter-spacing: 0.5px; text-shadow: 0 0 12px rgba(180,140,255,0.4); } .luliy-lb-link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--th-accent, #00e5ff); text-decoration: none; letter-spacing: 0.5px; opacity: 0.8; transition: opacity 0.15s; } .luliy-lb-link:hover { opacity: 1; text-decoration: underline; } /* 左右箭头 */ .luliy-lb-prev, .luliy-lb-next { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.10); color: #fff; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.15s, transform 0.15s; } .luliy-lb-prev { left: 16px; } .luliy-lb-next { right: 16px; } .luliy-lb-prev:hover, .luliy-lb-next:hover { background: rgba(255,43,214,0.40); transform: translateY(-50%) scale(1.08); } .luliy-lb-prev:disabled, .luliy-lb-next:disabled { opacity: 0.2; cursor: default; } /* 关闭按钮 */ .luliy-lb-close { position: absolute; z-index: 2; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.12); color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .luliy-lb-close:hover { background: rgba(255,43,214,0.45); } @media (max-width: 640px) { .luliy-lb-prev { left: 4px; width: 38px; height: 38px; font-size: 20px; } .luliy-lb-next { right: 4px; width: 38px; height: 38px; font-size: 20px; } .luliy-lb-img-wrap { max-width: 96vw; } } .luliy-poster-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s ease; } .luliy-poster-item:hover .luliy-poster-img { transform: scale(1.08); } .luliy-poster-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 8px; font-size: 12px; line-height: 1.4; color: #fff; background: linear-gradient(to top, rgba(6,5,16,0.92), transparent); opacity: 0; transition: opacity 0.25s ease; } .luliy-poster-item:hover .luliy-poster-title { opacity: 1; } @media (max-width: 900px) { .luliy-chron-posters { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 560px) { .luliy-chron-posters { grid-template-columns: repeat(3, 1fr); } .luliy-arch-date { width: 78px; } .luliy-arch-title, .luliy-chron-title { font-size: 23px; } } /* ══════════════════════════════════════════════════════ Chronicle 手机端适配（≤ 640px） 两个表格在小屏下从「多列横排」转为「卡片堆叠」， 每条记录变成一块独立卡片，清晰易读。 ══════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* 容器收窄 */ .luliy-chronicle { padding: 4px 0 32px; } /* 标题和年份标签竖排（年份多时不挤在一行） */ .luliy-chron-header { flex-direction: column; align-items: flex-start; gap: 10px; } .luliy-chron-years { gap: 12px; } .luliy-chron-cats { gap: 16px; margin: 12px 0 16px; } .luliy-chron-title { font-size: 22px; } /* ── 出游 / 书影游：卡片化 ── */ /* 关掉外层横向滚动，改用纵向卡片堆叠 */ .luliy-chron-scroll-x { overflow-x: visible; } .luliy-chron-tablewrap { min-width: 0; } /* 整个表格变成 block 流式排列 */ .luliy-chron-table, .luliy-chron-table thead, .luliy-chron-table tbody, .luliy-chron-table tr, .luliy-chron-table th, .luliy-chron-table td { display: block; width: 100% !important; box-sizing: border-box; } /* 表头隐藏 */ .luliy-chron-table thead { display: none !important; } /* 每行变成一张卡片 */ .luliy-chron-table tbody tr { margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; overflow: hidden; } /* 每个 td：flex 横排「列名 + 内容」 */ .luliy-chron-table td { display: flex !important; align-items: baseline; gap: 8px; padding: 8px 14px; border: none !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; text-align: left !important; vertical-align: top !important; white-space: normal !important; min-width: 0; } .luliy-chron-table td:last-child { border-bottom: none !important; } /* data-label 前置标签（给非月份格用） */ .luliy-chron-table td:not(.luliy-chron-month-cell)::before { content: attr(data-label); flex: 0 0 4.5em; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: var(--th-accent, #00e5ff); opacity: 0.75; white-space: nowrap; padding-top: 1px; } /* 月份行：居中、加粗、深色背景突出 */ .luliy-chron-table .luliy-chron-month-cell { justify-content: center !important; background: hsla(var(--luliy-glass-hue,250), 55%, 20%, 0.45) !important; font-size: 13px; font-weight: 800; border-bottom: 1px solid rgba(255,255,255,0.15) !important; border-right: none !important; white-space: nowrap !important; } /* 海报墙：手机端 2 列（3 列图片偏小） */ .luliy-chron-posters { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; } } /* Mobile: collapse to single left-aligned column */ @media (max-width: 768px) { .luliy-card-timeline::before { left: 16px; margin-left: 0; } .luliy-card-timeline .luliy-card, .luliy-card-timeline .luliy-card:nth-child(even) { width: calc(100% - 44px); margin-left: 44px !important; margin-right: 0 !important; } .luliy-card-timeline .luliy-card::before, .luliy-card-timeline .luliy-card:nth-child(even)::before { left: -33px !important; right: auto !important; } } /* focus-exit 按钮、退出提示已删除（专注模式整体移除） */ /* ══════════════════════════════════════════════════════ 书架 Bookshelf —— 赛博朋克风 ══════════════════════════════════════════════════════ */ .luliy-bookshelf { max-width: 1080px; margin: 0 auto; padding: 8px 0 40px; } .luliy-book-loading, .luliy-book-error { text-align: center; padding: 40px 16px; color: rgba(220,210,245,0.7); font-size: 15px; } .luliy-book-error { color: #ff6ec7; } .luliy-book-header { text-align: center; margin-bottom: 32px; } .luliy-book-title { margin: 0 0 8px; font-size: 30px; font-weight: 800; letter-spacing: 3px; color: #fff; text-shadow: 0 0 10px rgba(255,110,199,0.5), 0 0 28px rgba(110,199,255,0.35); } .luliy-book-sub { margin: 0; font-size: 13px; color: rgba(190,180,225,0.7); letter-spacing: 1px; } /* 书柜外框：暗色玻璃 + 霓虹描边 */ .luliy-bookcase { background: linear-gradient(180deg, hsla(var(--luliy-glass-hue,250),45%,12%,0.55), hsla(var(--luliy-glass-hue,250),50%,7%,0.65)); border: 1px solid rgba(255,43,214,0.30); border-radius: 14px; padding: 28px 18px 18px; display: flex; flex-direction: column; gap: 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 0 40px rgba(110,199,255,0.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .luliy-shelf { position: relative; } .luliy-shelf-plaque { display: inline-flex; align-items: baseline; gap: 6px; background: linear-gradient(90deg, var(--th-accent, #00e5ff), #6ec7ff); color: #0a0e2a; font-weight: 800; font-size: 13px; padding: 4px 14px 5px; border-radius: 4px 4px 0 0; margin-left: 14px; letter-spacing: 1px; box-shadow: 0 0 14px rgba(0,229,255,0.4); } .luliy-shelf-count { font-size: 11px; font-weight: 600; opacity: 0.7; } .luliy-shelf-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 7px; padding: 0 16px 12px; min-height: 60px; } .luliy-shelf-empty { color: rgba(180,170,210,0.5); font-size: 13px; padding: 18px 6px; font-style: italic; } .luliy-shelf-board { height: 5px; margin: 0 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--th-accent, #00e5ff), #ff2bd6, transparent); opacity: 0.55; box-shadow: 0 0 12px rgba(0,229,255,0.4); } /* 书脊 */ .luliy-spine { display: flex; align-items: center; justify-content: center; text-decoration: none !important; color: #fff; border-radius: 3px 3px 1px 1px; box-shadow: inset -3px 0 6px rgba(0,0,0,0.35), inset 2px 0 0 rgba(255,255,255,0.14), 0 3px 8px rgba(0,0,0,0.4); cursor: pointer; position: relative; padding: 10px 0; transform: rotate(var(--tilt, 0deg)); transition: transform 0.18s ease, box-shadow 0.18s ease; } .luliy-spine:hover, .luliy-spine:focus-visible { transform: translateY(-12px) rotate(0deg); box-shadow: inset -3px 0 6px rgba(0,0,0,0.35), inset 2px 0 0 rgba(255,255,255,0.14), 0 14px 22px rgba(0,0,0,0.5), 0 0 22px rgba(255,110,199,0.5); outline: none; } .luliy-spine-title { writing-mode: vertical-rl; text-orientation: mixed; font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 15px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%; text-shadow: 0 1px 2px rgba(0,0,0,0.4); } /* 悬停提示卡 */ .luliy-spine-tip { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 6px); min-width: 120px; max-width: 200px; background: hsla(var(--luliy-glass-hue,250),50%,16%,0.96); border: 1px solid rgba(255,43,214,0.35); color: #fff; border-radius: 8px; padding: 8px 12px; writing-mode: horizontal-tb; text-orientation: initial; opacity: 0; pointer-events: none; margin-bottom: 8px; z-index: 5; transition: opacity 0.15s ease, transform 0.15s ease; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .luliy-spine:hover .luliy-spine-tip, .luliy-spine:focus-visible .luliy-spine-tip { opacity: 1; transform: translate(-50%, 0); } .luliy-spine-tip strong { display: block; font-size: 13px; margin-bottom: 2px; } .luliy-spine-note { display: block; font-size: 11px; color: var(--th-accent, #6ec7ff); } /* 在读书堆 */ .luliy-reading-zone { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 4px; } .luliy-reading-label { font-size: 10px; letter-spacing: 2px; color: var(--th-accent, #00e5ff); font-weight: 700; } .luliy-reading-stack { position: relative; width: 88px; height: 50px; } .luliy-flat-book { position: absolute; left: 0; width: 88px; height: 16px; border-radius: 2px; text-decoration: none !important; display: flex; align-items: center; padding-left: 8px; font-family: 'Noto Serif SC', serif; font-size: 9px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 3px 6px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.12); transition: transform 0.15s ease; } .luliy-flat-book:hover { transform: translateX(3px); } .luliy-flat-book.is-top { transform: rotate(-5deg); } @media (max-width: 560px) { .luliy-bookcase { padding: 22px 10px 12px; gap: 24px; } .luliy-book-title { font-size: 24px; } .luliy-shelf-row { padding: 0 8px 10px; gap: 5px; } .luliy-spine-title { font-size: 13px; } .luliy-reading-zone { margin-left: 0; margin-top: 10px; } } /* ── 28.4 Card skeleton ───────────────────────────────────── */ .luliy-card-skeleton { border-radius: 16px; padding: 16px 18px; min-height: 110px; background: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.4); list-style: none; overflow: hidden; } [data-color-mode="dark"] .luliy-card-skeleton { background: rgba(18,14,34,0.5); border-color: rgba(255,255,255,0.08); } .luliy-card-skeleton .sk-line { height: 12px; border-radius: 6px; margin-bottom: 10px; background: linear-gradient(90deg, var(--th-accent-soft, rgba(130,80,223,0.10)) 25%, var(--th-accent-hover, rgba(130,80,223,0.20)) 37%, var(--th-accent-soft, rgba(130,80,223,0.10)) 63%); background-size: 400% 100%; animation: luliySkeleton 1.4s ease infinite; } .luliy-card-skeleton .sk-date { width: 40%; height: 9px; } .luliy-card-skeleton .sk-title { width: 85%; height: 14px; } .luliy-card-skeleton .sk-title2 { width: 60%; height: 14px; } .luliy-card-skeleton .sk-tags { display: flex; gap: 6px; margin-top: 14px; } .luliy-card-skeleton .sk-tags span { width: 44px; height: 16px; border-radius: 20px; background: var(--th-accent-soft, rgba(130,80,223,0.12)); } @keyframes luliySkeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ── 28.5 Series navigation ───────────────────────────────── */ .luliy-series { margin: 0 0 26px; padding: 16px 18px; border-radius: 14px; background: var(--th-accent-soft, rgba(130,80,223,0.07)); border: 1px solid var(--th-accent-soft, rgba(130,80,223,0.20)); } .luliy-series-head { font-size: 14px; color: var(--th-h2, #8250df); margin-bottom: 10px; } .luliy-series-head b { color: var(--th-accent, #8250df); } .luliy-series-prog { float: right; font-size: 12px; font-family: 'LXGW WenKai Mono', monospace; background: var(--th-accent, #8250df); color: #fff !important; padding: 3px 10px; border-radius: 20px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,0.25); } .luliy-series-prog b { font-size: 14px; } .luliy-series-prog-sep { opacity: 0.7; margin: 0 2px; } /* Per-theme high-contrast badge colours */ body[data-luliy-theme="sunset"] .luliy-series-prog { background: #d9930d; } body[data-luliy-theme="mono"] .luliy-series-prog { background: #444; } body[data-luliy-theme="your-name"] .luliy-series-prog{ background: #1e6fd4; } body[data-luliy-theme="sakura"] .luliy-series-prog { background: #c94070; } body[data-luliy-theme="space"] .luliy-series-prog { background: #0070b8; } body[data-luliy-theme="cyberpunk"] .luliy-series-prog { background: #0070b8; } .luliy-series-dots { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .luliy-series-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--th-accent-soft, rgba(130,80,223,0.25)); transition: transform 0.2s; cursor: pointer; } .luliy-series-dot:hover { transform: scale(1.5); } .luliy-series-dot.is-current { background: var(--th-accent, #8250df); transform: scale(1.35); } /* Collapsed: hide the title list, show only dots */ .luliy-series.is-collapsed .luliy-series-dots { margin-bottom: 0; } .luliy-series-list.is-collapsed { max-height: 0 !important; overflow: hidden !important; opacity: 0; margin: 0; padding: 0; transition: max-height 0.3s ease, opacity 0.25s ease; } .luliy-series-list { list-style: none; padding: 0; margin: 8px 0 0; /* Show 5 items (~5 × 28px), scroll beyond */ max-height: none; /* JS controls max-height during animation */ overflow: hidden; opacity: 1; transition: max-height 0.35s cubic-bezier(.4,0,.2,1), opacity 0.3s ease; scrollbar-width: thin; scrollbar-color: var(--th-accent-soft, rgba(130,80,223,0.20)) transparent; } .luliy-series-list::-webkit-scrollbar { width: 3px; } .luliy-series-list::-webkit-scrollbar-thumb { background: var(--th-accent-soft, rgba(130,80,223,0.28)); border-radius: 2px; } .luliy-series-list li { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 13px; } .luliy-series-list .ls-num { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--th-accent-soft, rgba(130,80,223,0.16)); color: var(--th-accent, #8250df); font-family: 'LXGW WenKai Mono', monospace; } .luliy-series-list li.is-current .ls-num { background: var(--th-accent, #8250df); color: #fff; } .luliy-series-list a { text-decoration: none; color: var(--color-fg-default, #333); } [data-color-mode="dark"] .luliy-series-list a { color: #cdd6f4; } .luliy-series-list a:hover { color: var(--th-accent, #8250df); } .luliy-series-list .ls-cur { font-weight: 700; color: var(--th-accent, #8250df); } /* ── 28.6 Resume reading toast ────────────────────────────── */ .luliy-resume { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 80px); background: var(--th-accent, #8250df); color: #fff; padding: 11px 22px; border-radius: 30px; font-size: 13px; cursor: pointer; box-shadow: 0 8px 28px rgba(0,0,0,0.28); z-index: 9990; opacity: 0; transition: transform 0.4s cubic-bezier(.2,.7,.3,1), opacity 0.4s; } .luliy-resume.is-in { transform: translate(-50%, 0); opacity: 1; } .luliy-resume b { font-weight: 700; } /* ── 28.7 In-page search ──────────────────────────────────── */ #luliy-search-fab { position: fixed; bottom: 164px; right: 22px; width: 44px; height: 44px; border-radius: 50%; background: var(--th-accent-soft, rgba(130,80,223,0.22)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--th-accent-soft, rgba(130,80,223,0.35)); color: var(--th-accent, #8250df); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.28s, transform 0.28s; z-index: 9994; } #luliy-search-fab.is-visible { opacity: 1; pointer-events: all; } #luliy-search-fab:hover { transform: translateY(-3px); } /* ── TOC FAB — same glass style as back-top / search ─────── */ #luliy-toc-fab { position: fixed; bottom: 216px; right: 22px; width: 44px; height: 44px; border-radius: 50%; background: var(--th-accent-soft, rgba(130,80,223,0.22)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--th-accent-soft, rgba(130,80,223,0.35)); color: var(--th-accent, #8250df); font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; z-index: 9994; transition: opacity 0.28s, transform 0.28s, background 0.25s, color 0.25s; } #luliy-toc-fab.is-visible { opacity: 1; pointer-events: all; } #luliy-toc-fab.is-active { background: var(--th-accent, #8250df) !important; color: #fff !important; border-color: var(--th-accent, #8250df) !important; } #luliy-toc-fab:hover { transform: translateY(-3px); background: var(--th-accent-hover, rgba(130,80,223,0.35)); } [data-color-mode="dark"] #luliy-toc-fab { color: var(--th-accent, #cba6f7); } #luliy-search-bar { position: fixed; top: 70px; left: 50%; transform: translate(-50%, -130%); display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,0.96); backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8); border: 1px solid var(--th-accent-soft, rgba(130,80,223,0.25)); box-shadow: 0 14px 40px rgba(0,0,0,0.22); z-index: 99990; opacity: 0; transition: transform 0.3s cubic-bezier(.2,.7,.3,1), opacity 0.3s; width: min(92vw, 420px); pointer-events: none; /* closed = click-through */ } [data-color-mode="dark"] #luliy-search-bar { background: rgba(16,12,30,0.97); } #luliy-search-bar.is-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .luliy-search-icon { font-size: 15px; opacity: 0.7; flex-shrink: 0; } #luliy-search-input { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; color: var(--color-fg-default, #1e1032); min-width: 0; font-family: 'Noto Sans SC', sans-serif; } [data-color-mode="dark"] #luliy-search-input { color: #e8e8f8; } #luliy-search-count { font-size: 12px; color: #888; font-family: 'LXGW WenKai Mono', monospace; flex-shrink: 0; min-width: 38px; text-align: center; } #luliy-search-bar button { border: none; background: var(--th-accent-soft, rgba(130,80,223,0.10)); color: var(--th-accent, #8250df); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; flex-shrink: 0; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } #luliy-search-bar button:hover { background: var(--th-accent-hover, rgba(130,80,223,0.20)); } [data-color-mode="dark"] #luliy-search-bar button { color: var(--th-accent, #cba6f7); } mark.luliy-search-hit { background: rgba(255,220,90,0.55); color: inherit; border-radius: 3px; padding: 0 1px; } mark.luliy-search-hit.is-current { background: var(--th-accent, #8250df); color: #fff; box-shadow: 0 0 0 2px var(--th-accent-soft, rgba(130,80,223,0.4)); } /* ── 28.8 Tag cloud page ──────────────────────────────────── */ #luliy-tagcloud { margin: 0 0 30px; } .luliy-tagcloud-title { font-size: 24px; font-weight: 800; margin: 10px 0 20px; color: var(--th-h1, #8250df); font-family: 'Noto Sans SC', sans-serif; } .luliy-tagcloud-body { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 22px; border-radius: 18px; background: rgba(255,255,255,0.40); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.30); } [data-color-mode="dark"] .luliy-tagcloud-body { background: hsla(var(--luliy-glass-hue), 45%, 14%, calc(var(--luliy-glass-opacity) * 0.9)); -webkit-backdrop-filter: blur(var(--luliy-glass-blur)); backdrop-filter: blur(var(--luliy-glass-blur)); border-color: rgba(255,255,255,0.08); } .luliy-tag-bubble { --tag-c: #8250df; display: inline-flex; align-items: baseline; gap: 2px; padding: 5px 14px; border-radius: 24px; text-decoration: none; line-height: 1.2; font-weight: 600; color: var(--tag-c); background: color-mix(in srgb, var(--tag-c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tag-c) 30%, transparent); transition: transform 0.2s, background 0.2s, box-shadow 0.2s; } .luliy-tag-bubble:hover { transform: translateY(-3px) scale(1.06); background: color-mix(in srgb, var(--tag-c) 22%, transparent); box-shadow: 0 6px 18px color-mix(in srgb, var(--tag-c) 30%, transparent); } .luliy-tag-bubble sup { font-size: 0.6em; opacity: 0.7; font-weight: 700; } /* Fallback for browsers without color-mix */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .luliy-tag-bubble { background: rgba(130,80,223,0.12); border-color: rgba(130,80,223,0.3); } } /* ── 28.9 Archive: tabs + calendar ────────────────────────── */ .luliy-archive-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-bottom: 2px solid var(--th-accent-soft, rgba(240,180,41,0.4)); padding-bottom: 12px; margin-bottom: 26px; } .luliy-archive-head h1 { margin: 0; font-size: 22px; } .luliy-archive-tabs { display: inline-flex; gap: 4px; border-radius: 10px; background: var(--th-accent-soft, rgba(130,80,223,0.08)); padding: 3px; } .luliy-archive-tabs button { border: none; background: transparent; cursor: pointer; padding: 6px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--th-accent, #8250df); transition: background 0.18s, color 0.18s; font-family: 'Noto Sans SC', sans-serif; } .luliy-archive-tabs button.is-active { background: var(--th-accent, #8250df); color: #fff; } [data-color-mode="dark"] .luliy-archive-tabs button { color: var(--th-accent, #cba6f7); } [data-color-mode="dark"] .luliy-archive-tabs button.is-active { color: #fff; } .tl-count { font-size: 12px; font-weight: 500; opacity: 0.6; margin-left: 8px; } .tl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--th-accent, #8250df); margin-right: 4px; } /* Calendar */ .cal-month { margin-bottom: 28px; } .cal-mhead { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--th-h2, #8250df); font-family: 'Noto Sans SC', sans-serif; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cal-dow { text-align: center; font-size: 11px; color: #999; padding: 4px 0; font-weight: 600; } .cal-cell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 8px; font-size: 12px; color: var(--color-fg-default, #555); background: rgba(255,255,255,0.20); border: 1px solid rgba(255,255,255,0.15); text-decoration: none; } [data-color-mode="dark"] .cal-cell { color: #aaa; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); } .cal-cell.cal-empty { background: transparent; border: none; } .cal-cell.cal-has { background: var(--th-accent-soft, rgba(130,80,223,0.16)); border-color: var(--th-accent, #8250df); color: var(--th-accent, #8250df); font-weight: 700; transition: transform 0.18s, box-shadow 0.18s; } .cal-cell.cal-has:hover { transform: scale(1.12); z-index: 2; box-shadow: 0 4px 14px var(--th-accent-soft, rgba(130,80,223,0.4)); } .cal-badge { position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 8px; background: var(--th-accent, #8250df); color: #fff; font-size: 9px; line-height: 14px; text-align: center; font-weight: 700; } /* ── 28.11 Mouse trail ────────────────────────────────────── */ .luliy-trail-dot { position: fixed; pointer-events: none; z-index: 99997; font-size: 14px; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); animation: luliyTrail 1.1s ease-out forwards; will-change: transform, opacity; } @keyframes luliyTrail { 0% { opacity: 0.9; } 100% { opacity: 0; transform: translate(-50%, 20px) rotate(var(--rot, 0deg)) scale(0.4); } } /* 专注模式整段样式已删除（好处已并入文章默认样式，见上方 04/21 区块） */ /* ── 28.13 Reduce motion ──────────────────────────────────── */ body.luliy-reduce-motion #luliy-sakura-canvas, body.luliy-reduce-motion #luliy-firefly-canvas { display: none !important; } body.luliy-reduce-motion * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { #luliy-sakura-canvas, .luliy-trail-dot { display: none !important; } } /* ── 28.15 View Transitions cross-page fade ───────────────── */ @media (prefers-reduced-motion: no-preference) { /* Default: simple fade */ ::view-transition-old(root) { animation: luliyVtOut 0.22s ease both; } ::view-transition-new(root) { animation: luliyVtIn 0.28s ease both; } /* home → article: slide up */ html[data-vt-dir="post"] ::view-transition-old(root) { animation: luliyVtSlideOut 0.30s ease both; } html[data-vt-dir="post"] ::view-transition-new(root) { animation: luliyVtSlideIn 0.35s cubic-bezier(.2,.7,.3,1) both; } /* article → home: slide down */ html[data-vt-dir="home"] ::view-transition-old(root) { animation: luliyVtDown 0.28s ease both; } html[data-vt-dir="home"] ::view-transition-new(root) { animation: luliyVtFadeIn 0.32s ease both; } /* article → next: slide left */ html[data-vt-dir="next"] ::view-transition-old(root) { animation: luliyVtLeft 0.28s ease both; } html[data-vt-dir="next"] ::view-transition-new(root) { animation: luliyVtFromRight 0.32s cubic-bezier(.2,.7,.3,1) both; } /* article → prev: slide right */ html[data-vt-dir="prev"] ::view-transition-old(root) { animation: luliyVtRight 0.28s ease both; } html[data-vt-dir="prev"] ::view-transition-new(root) { animation: luliyVtFromLeft 0.32s cubic-bezier(.2,.7,.3,1) both; } } @keyframes luliyVtOut { to { opacity: 0; } } @keyframes luliyVtIn { from { opacity: 0; } } @keyframes luliyVtFadeIn { from { opacity: 0; } } @keyframes luliyVtSlideOut { to { opacity: 0; transform: translateY(-18px) scale(0.97); } } @keyframes luliyVtSlideIn { from { opacity: 0; transform: translateY(22px); } } @keyframes luliyVtDown { to { opacity: 0; transform: translateY(14px); } } @keyframes luliyVtLeft { to { opacity: 0; transform: translateX(-24px); } } @keyframes luliyVtFromRight{ from { opacity: 0; transform: translateX(28px); } } @keyframes luliyVtRight { to { opacity: 0; transform: translateX(24px); } } @keyframes luliyVtFromLeft { from { opacity: 0; transform: translateX(-28px); } } /* ── 28.16 Favorites progressive reveal ───────────────────── */ #postBody.luliy-unlocking { filter: none; transition: filter 0.6s ease; } /* ── 28.17 Safe-area (notch / home-indicator) insets ──────── */ @supports (padding: env(safe-area-inset-bottom)) { #luliy-toolbar { bottom: calc(22px + env(safe-area-inset-bottom)) !important; right: calc(22px + env(safe-area-inset-right)) !important; } #luliy-back-top { bottom: calc(112px + env(safe-area-inset-bottom)); } #luliy-search-fab { bottom: calc(164px + env(safe-area-inset-bottom)); } #luliy-music, #luliy-progress-bar { /* progress bar at top unaffected */ } .luliy-resume { bottom: calc(28px + env(safe-area-inset-bottom)); } #header { padding-left: max(clamp(12px, calc((100vw - 1040px)/2 + 20px), 50%), env(safe-area-inset-left)) !important; padding-right: max(clamp(12px, calc((100vw - 1040px)/2 + 20px), 50%), env(safe-area-inset-right)) !important; } } /* ── 28.18 External link favicon hover preview ────────────── */ .luliy-linktip { position: fixed; z-index: 99996; pointer-events: none; display: flex; align-items: center; gap: 10px; width: 240px; box-sizing: border-box; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,0.97); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border: 1px solid var(--th-accent-soft, rgba(130,80,223,0.22)); box-shadow: 0 10px 30px rgba(0,0,0,0.22); opacity: 0; transform: translateY(6px) scale(0.96); transition: opacity 0.18s, transform 0.18s; } .luliy-linktip.is-on { opacity: 1; transform: translateY(0) scale(1); } [data-color-mode="dark"] .luliy-linktip { background: rgba(18,14,32,0.97); border-color: var(--th-accent-soft, rgba(130,80,223,0.34)); } .luliy-linktip img { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; background: rgba(130,80,223,0.08); } .luliy-linktip .lt-meta { min-width: 0; flex: 1; } .luliy-linktip .lt-host { font-size: 13px; font-weight: 700; color: var(--th-accent, #8250df); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Noto Sans SC', sans-serif; } [data-color-mode="dark"] .luliy-linktip .lt-host { color: var(--th-accent, #cba6f7); } .luliy-linktip .lt-path { font-size: 11px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'LXGW WenKai Mono', monospace; } /* ══════════════════════════════════════════════════════════ 27 Responsive (mobile) ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ══ 仅保留：触摸优化 + 表格横滑 + 内容排版（旧 hero/汉堡/mobrow 已删，导航改用抽屉）══ */ /* ── 触摸优化：滑块加大 ───────────────────────────── */ .luliy-range { height: 8px; touch-action: pan-y; } .luliy-range::-webkit-slider-thumb { width: 22px; height: 22px; } .luliy-range::-moz-range-thumb { width: 22px; height: 22px; } .luliy-ctrl-slider { padding-top: 12px !important; padding-bottom: 14px !important; } /* ── 内容排版：窄屏字号/单列 ──────────────────────── */ #content, .main { padding: 0 12px !important; } .luliy-card-grid { grid-template-columns: 1fr; } .luliy-prevnext { flex-direction: column; } #postBody { font-size: 16px !important; line-height: 1.82 !important; } #postBody h1 { font-size: 1.5rem !important; } #postBody h2 { font-size: 1.2rem !important; } #postBody pre { font-size: 13px !important; } /* 文章页全宽 */ body.luliy-post-page #content, body.luliy-post-page .main { width: 100% !important; max-width: 100% !important; padding: 0 !important; } body.luliy-post-page #postBody { border-radius: 0 !important; padding: 20px 15px !important; margin-bottom: 0 !important; } body[data-luliy-theme="default"] #postBody, body:not([data-luliy-theme]) #postBody, body[data-luliy-theme="sakura"] #postBody, body[data-luliy-theme="your-name"] #postBody, body[data-luliy-theme="space"] #postBody, body[data-luliy-theme="sunset"] #postBody, body[data-luliy-theme="mono"] #postBody { border-radius: 0 !important; padding: 20px 15px !important; } body[data-luliy-theme="default"] #postBody, body:not([data-luliy-theme]) #postBody, body[data-luliy-theme="sakura"] #postBody, body[data-luliy-theme="your-name"] #postBody, body[data-luliy-theme="cyberpunk"] #postBody, body[data-luliy-theme="sunset"] #postBody, body[data-luliy-theme="mono"] #postBody { border-radius: 0 !important; padding: 20px 15px !important; } /* ── 表格横向滚动（≥600px 时；<600px 由 section 31 卡片化接管）─── */ #luliy-back-top { right: 14px; bottom: 94px; } #luliy-home-gallery { height: 140px; border-radius: 14px; } #luliy-home-gallery-text { font-size: 14px; } #luliy-home-gallery.is-grid { grid-template-columns: repeat(2, 1fr); } #luliy-home-gallery.is-grid .luliy-gallery-cell { height: 110px; } #luliy-gallery-edit { opacity: 1; } #luliy-search-fab { bottom: 158px; right: 14px; width: 40px; height: 40px; } #luliy-search-bar { top: 64px; width: 94vw; } .luliy-tag-bubble { padding: 4px 11px; } .cal-grid { gap: 3px; } .cal-cell { font-size: 11px; border-radius: 6px; } .cal-badge { min-width: 12px; height: 12px; font-size: 8px; line-height: 12px; } .luliy-archive-head { flex-direction: column; align-items: flex-start; } .luliy-series-prog { float: none; display: inline-block; margin-left: 6px; } .luliy-card-list .luliy-card-inner { flex-wrap: wrap; } .luliy-card-list .luliy-card-date { order: 4; margin-left: 0; width: 100%; } #luliy-fav-gate-card { padding: 28px 22px 22px; } /* 背景按钮（控制面板内） */ #luliy-bg-btn { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 10px 16px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important; color: #1e1032 !important; border: none !important; background: transparent !important; cursor: pointer !important; text-align: left !important; width: 100% !important; transition: background 0.15s !important; } #luliy-bg-btn:hover { background: rgba(130,80,223,0.09) !important; } [data-color-mode="dark"] #luliy-bg-btn { color: #e0daf8 !important; } [data-color-mode="dark"] #luliy-bg-btn:hover { background: rgba(130,80,223,0.18) !important; } } /* ══════════════════════════════════════════════════════════ 29 移动端性能优化（手机适配 / 滚动流畅度） ★新增 说明：本块只在 ≤768px 生效，且置于文件末尾，因此其 !important 规则在同等优先级下会覆盖前面的基础声明，桌面端完全不受影响。 ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* (1) 关闭 background-attachment:fixed。 iOS Safari 对 fixed 背景支持极差（实际会退化为 scroll，并造成 大面积重绘 / 滚动卡顿）。显式设为 scroll 既修复 iOS 表现，也消除 移动端滚动时的重绘开销。 */ body { background-attachment: scroll !important; } /* (2) 降低毛玻璃模糊半径。 手机 GPU/合成器对 backdrop-filter 极敏感，首页一屏多张 blur(24px) 卡片同时合成是滚动掉帧的首要原因。移动端把半径降到 ~8-10px： 观感几乎一致，合成成本大幅下降。 */ .luliy-card { -webkit-backdrop-filter: blur(8px) saturate(1.5) !important; backdrop-filter: blur(8px) saturate(1.5) !important; } #luliy-nav-rebuilt { -webkit-backdrop-filter: blur(12px) saturate(1.5) !important; backdrop-filter: blur(12px) saturate(1.5) !important; } #luliy-ctrl-panel, .luliy-tag-list-card, #luliy-home-gallery-overlay { -webkit-backdrop-filter: blur(10px) saturate(1.4) !important; backdrop-filter: blur(10px) saturate(1.4) !important; } /* (3) 文章容器：移动端去掉常驻的 will-change，避免长页面把整篇文章 永久提升为合成层、白白占用大量显存。 */ #luliy-hero-banner { will-change: auto !important; } } /* ══════════════════════════════════════════════════════════ 31 响应式表格——窄屏卡片化 ★新增 宽度 < 600px 时，每行变一张卡片，th 文字通过 data-label 注入 td 前 配合 display:table !important / width:100% !important 完整修复表格 ══════════════════════════════════════════════════════════ */ @media (max-width: 599px) { /* 整张表变块，不再横向溢出 */ #postBody table, #postBody thead, #postBody tbody, #postBody tfoot, #postBody tr { display: block !important; width: 100% !important; } /* 表头行整体隐藏（内容以 data-label 形式显示在每个 td 前） */ #postBody thead { display: none !important; } /* 每个 td 变成卡片内的一行 label:value */ #postBody td { display: flex !important; align-items: flex-start; padding: 8px 14px !important; border-bottom: 1px solid rgba(130,80,223,0.10) !important; gap: 10px; } #postBody td:last-child { border-bottom: none !important; } /* data-label 注入的标题前缀 */ #postBody td::before { content: attr(data-label); flex: 0 0 auto; min-width: 5em; font-weight: 700; font-size: 12px; color: var(--th-accent, #8250df); opacity: 0.85; padding-top: 1px; white-space: nowrap; } /* 每行 tr 作为一张卡 */ #postBody tr { border-radius: 10px !important; margin-bottom: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; overflow: hidden !important; background: rgba(255,255,255,0.72) !important; } [data-color-mode="dark"] #postBody tr { background: rgba(18,14,32,0.72) !important; } /* 圆角相关（原来由 corner-cell 实现，现在 tr 自己带圆角即可） */ #postBody thead tr:first-child th:first-child, #postBody thead tr:first-child th:last-child, #postBody tr:last-child td:first-child, #postBody tr:last-child td:last-child { border-radius: 0 !important; } } /* ══════════════════════════════════════════════════════════ 32 导航栏透明度开关按钮样式 ★新增 ══════════════════════════════════════════════════════════ */ .luliy-fade-toggle-row { width: 100%; display: flex; align-items: center; padding: 9px 14px; gap: 8px; border: none; background: none; cursor: pointer; border-radius: 8px; font-family: inherit; font-size: 13px; color: var(--th-accent, #8250df); transition: background 0.15s; text-align: left; } .luliy-fade-toggle-row:hover { background: var(--th-accent-soft, rgba(130,80,223,0.10)); } .luliy-fade-toggle-row.is-active .luliy-fade-badge { color: #22c55e; } .luliy-fade-toggle-row:not(.is-active) .luliy-fade-badge { color: #f87171; } .luliy-fade-badge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: rgba(130,80,223,0.08); } /* ══════════════════════════════════════════════════════════ 33 键盘快捷键提示 Toast ★新增 ══════════════════════════════════════════════════════════ */ #luliy-kb-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(12px); background: rgba(18,14,32,0.92); color: #e8e2f5; padding: 10px 18px; border-radius: 12px; font-size: 13px; pointer-events: none; z-index: 99998; opacity: 0; transition: opacity 0.3s, transform 0.3s; white-space: nowrap; backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.35); border: 1px solid rgba(130,80,223,0.25); } #luliy-kb-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } #luliy-kb-toast kbd { display: inline-block; padding: 1px 6px; border-radius: 5px; background: rgba(130,80,223,0.25); color: #cba6f7; font-size: 12px; font-family: monospace; margin: 0 2px; border: 1px solid rgba(130,80,223,0.35); } [data-color-mode="dark"] #luliy-kb-toast { background: rgba(10,6,22,0.94); } /* ══════════════════════════════════════════════════════════ 34 文末字数 + 阅读时长信息条 ★新增 ══════════════════════════════════════════════════════════ */ #luliy-post-footer-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2.5rem 0 1rem; padding: 12px 18px; border-radius: 12px; background: var(--th-accent-soft, rgba(130,80,223,0.08)); border: 1px solid var(--th-accent-soft, rgba(130,80,223,0.18)); font-size: 13px; color: var(--th-accent, #8250df); font-family: 'Noto Sans SC', sans-serif; } #luliy-post-footer-bar svg { vertical-align: middle; opacity: 0.75; flex-shrink: 0; } .lpfb-item { display: inline-flex; align-items: center; gap: 5px; } .lpfb-item b { font-weight: 700; } .lpfb-sep { opacity: 0.4; font-size: 16px; } [data-color-mode="dark"] #luliy-post-footer-bar { background: rgba(130,80,223,0.12); border-color: rgba(130,80,223,0.22); color: var(--th-accent, #cba6f7); } /* ══════════════════════════════════════════════════════════ 35 左滑抽屉导航 + ☰ 按钮 + 双导航模式 ★全新 ══════════════════════════════════════════════════════════ */ /* ── 双导航模式显隐 ── body.luliy-nav-hero → 显示桌面 hero 导航栏，隐藏 ☰ body.luliy-nav-drawer → 隐藏 hero 导航栏，显示 ☰ */ body.luliy-nav-drawer #luliy-nav-rebuilt { display: none !important; } body.luliy-nav-drawer #header { min-height: 0 !important; padding: 0 !important; background: transparent !important; } body.luliy-nav-hero #luliy-ham-btn { display: none !important; } /* drawer 模式：右下角浮动工具条的「触发按钮」隐藏（设置已搬进抽屉，避免两处重复）。 只隐藏触发钮 #luliy-ctrl-btn，不隐藏 #luliy-ctrl-panel 本体（它此时在抽屉里）。 */ body.luliy-nav-drawer #luliy-ctrl-btn { display: none !important; } /* drawer 模式下内容上移（不再被 hero 占位） */ body.luliy-nav-drawer #content, body.luliy-nav-drawer .main { margin-top: 64px !important; } body.luliy-nav-drawer.luliy-post-page #content { margin-top: 60px !important; } body.luliy-nav-drawer #luliy-hero-banner { margin-top: 70px; } /* ── ☰「更多」按钮（固定左上角）── */ #luliy-ham-btn { position: fixed; top: 14px; right: 14px; z-index: 10002; width: 44px; height: 44px; padding: 12px 10px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; cursor: pointer; background: rgba(20,16,34,0.55); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background 0.2s, transform 0.2s; } #luliy-ham-btn:hover { background: rgba(40,30,60,0.75); transform: scale(1.05); } #luliy-ham-btn span { display: block; width: 100%; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.92); transition: transform 0.28s, opacity 0.28s; } #luliy-ham-btn.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } #luliy-ham-btn.is-open span:nth-child(2) { opacity: 0; } #luliy-ham-btn.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } [data-color-mode="light"] #luliy-ham-btn { background: rgba(255,255,255,0.65); border-color: rgba(0,0,0,0.10); } [data-color-mode="light"] #luliy-ham-btn span { background: rgba(40,30,60,0.88); } /* ── 遮罩 ── */ /* ★ 不再给页面其它区域加黑色蒙版——保留这个元素只是为了 "点击抽屉外部关闭抽屉"的交互能继续工作，但视觉上完全透明， 旁边的页面内容保持原样可见。 */ #luliy-drawer-mask { position: fixed; inset: 0; z-index: 10003; background: transparent; opacity: 0; visibility: hidden; pointer-events: none; transition: visibility 0.3s; } #luliy-drawer-mask.is-open { opacity: 1; visibility: visible; pointer-events: auto; } /* ── 抽屉本体（从左滑入）── */ #luliy-drawer { position: fixed; top: 0; right: 0; z-index: 10004; width: 300px; max-width: 86vw; height: 100%; display: flex; flex-direction: column; will-change: transform; /* ★ 默认（赛博朋克主题）背景，下面按主题分别覆盖 */ background: hsla(var(--luliy-glass-hue, 250), 45%, 12%, var(--luliy-glass-opacity, 0.5)); -webkit-backdrop-filter: blur(var(--luliy-glass-blur, 22px)) saturate(1.6); backdrop-filter: blur(var(--luliy-glass-blur, 22px)) saturate(1.6); border-left: 1px solid rgba(255,255,255,0.10); box-shadow: -6px 0 40px rgba(0,0,0,0.45); transform: translateX(105%); transition: transform 0.34s cubic-bezier(.4,.0,.2,1), background 0.3s; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } #luliy-drawer.is-open { transform: translateX(0); } /* ★ 抽屉样式跟文章正文面板一样，按当前选择的主题变化—— 每套主题给抽屉一个专属色相，模糊/透明度仍由液态玻璃滑块统一控制。 */ body[data-luliy-theme="cyberpunk"] #luliy-drawer { background: hsla(320, 60%, 12%, var(--luliy-glass-opacity, 0.5)); border-left-color: rgba(255,110,199,0.18); } body[data-luliy-theme="default"] #luliy-drawer, body:not([data-luliy-theme]) #luliy-drawer { background: hsla(265, 45%, 12%, var(--luliy-glass-opacity, 0.5)); border-left-color: rgba(130,80,223,0.18); } body[data-luliy-theme="sakura"] #luliy-drawer { background: hsla(338, 55%, 14%, var(--luliy-glass-opacity, 0.5)); border-left-color: rgba(249,168,201,0.22); } body[data-luliy-theme="your-name"] #luliy-drawer { background: hsla(212, 60%, 12%, var(--luliy-glass-opacity, 0.5)); border-left-color: rgba(116,192,252,0.20); } body[data-luliy-theme="space"] #luliy-drawer { background: hsla(195, 65%, 9%, var(--luliy-glass-opacity, 0.5)); border-left-color: rgba(0,200,255,0.20); } body[data-luliy-theme="sunset"] #luliy-drawer { background: hsla(36, 55%, 13%, var(--luliy-glass-opacity, 0.5)); border-left-color: rgba(255,193,77,0.22); } body[data-luliy-theme="mono"] #luliy-drawer { background: hsla(0, 0%, 10%, var(--luliy-glass-opacity, 0.5)); border-left-color: rgba(255,255,255,0.14); } /* 白天 / 浅色外观时，抽屉换成对应的浅色玻璃质感 */ [data-color-mode="light"] #luliy-drawer { background: hsla(var(--luliy-glass-hue, 250), 35%, 95%, var(--luliy-glass-opacity, 0.5)); border-left-color: rgba(0,0,0,0.08); } [data-color-mode="light"] body[data-luliy-theme="default"] #luliy-drawer, [data-color-mode="light"] body:not([data-luliy-theme]) #luliy-drawer { background: hsla(265, 40%, 95%, var(--luliy-glass-opacity, 0.5)); } [data-color-mode="light"] body[data-luliy-theme="sakura"] #luliy-drawer { background: hsla(338, 70%, 96%, var(--luliy-glass-opacity, 0.5)); } [data-color-mode="light"] body[data-luliy-theme="your-name"] #luliy-drawer { background: hsla(204, 70%, 94%, var(--luliy-glass-opacity, 0.5)); } [data-color-mode="light"] body[data-luliy-theme="sunset"] #luliy-drawer { background: hsla(45, 80%, 94%, var(--luliy-glass-opacity, 0.5)); } [data-color-mode="light"] body[data-luliy-theme="mono"] #luliy-drawer { background: hsla(0, 0%, 98%, var(--luliy-glass-opacity, 0.5)); } /* cyberpunk / space 主题本来就是常驻深色调，浅色模式下也保持深色玻璃质感 */ [data-color-mode="light"] body[data-luliy-theme="cyberpunk"] #luliy-drawer { background: hsla(320, 60%, 12%, var(--luliy-glass-opacity, 0.5)); } [data-color-mode="light"] body[data-luliy-theme="space"] #luliy-drawer { background: hsla(195, 65%, 9%, var(--luliy-glass-opacity, 0.5)); } /* ★ 这两个主题在白天模式下抽屉背景依然是深色，文字要强制改回白色系， 不然会出现"深色字配深色底"看不清的问题（其它 5 套浅色背景主题 不受影响，继续用原来的深色文字）。 */ [data-color-mode="light"] body[data-luliy-theme="cyberpunk"] .ldh-name, [data-color-mode="light"] body[data-luliy-theme="space"] .ldh-name, [data-color-mode="light"] body[data-luliy-theme="cyberpunk"] .lds-header, [data-color-mode="light"] body[data-luliy-theme="space"] .lds-header, [data-color-mode="light"] body[data-luliy-theme="cyberpunk"] .lds-link, [data-color-mode="light"] body[data-luliy-theme="space"] .lds-link { color: #fff !important; } [data-color-mode="light"] body[data-luliy-theme="cyberpunk"] .ldh-date, [data-color-mode="light"] body[data-luliy-theme="space"] .ldh-date { color: rgba(255,255,255,0.55) !important; } [data-color-mode="light"] body[data-luliy-theme="cyberpunk"] .lds-link:hover, [data-color-mode="light"] body[data-luliy-theme="space"] .lds-link:hover { color: var(--th-accent, #00e5ff) !important; } /* 抽屉滚动条 */ #luliy-drawer::-webkit-scrollbar { width: 6px; } #luliy-drawer::-webkit-scrollbar-thumb { background: rgba(130,80,223,0.4); border-radius: 3px; } /* ── 抽屉顶部信息区 ── */ #luliy-drawer-head { position: relative; padding: 26px 20px 18px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.08); } [data-color-mode="light"] #luliy-drawer-head { border-bottom-color: rgba(0,0,0,0.06); } /* 抽屉关闭按钮：右上角，明确可见的退出入口 （之前蒙版改透明后，光靠"点外面关闭"不够直观，加这个更保险） */ #luliy-drawer-close { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s, transform 0.15s; z-index: 2; } #luliy-drawer-close:hover { background: var(--th-accent, #8250df); color: #fff; transform: scale(1.08); } [data-color-mode="light"] #luliy-drawer-close { background: rgba(0,0,0,0.06); color: rgba(20,15,40,0.65); } .ldh-avatar { display: inline-block; width: 72px; height: 72px; overflow: visible; } .ldh-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; } .ldh-name { display: block; margin: 10px 0 0; font-size: 20px; font-weight: 700; color: #fff; text-decoration: none; letter-spacing: 0.5px; } [data-color-mode="light"] .ldh-name { color: #1e1032; } .ldh-accent { width: 36px; height: 3px; border-radius: 2px; margin: 8px auto 14px; background: var(--th-accent, #8250df); } .ldh-time { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--th-accent, #cba6f7); font-size: 17px; font-weight: 600; } .ldh-time .ldh-clock { display: inline-flex; } .ldh-date { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 3px; letter-spacing: 0.5px; } [data-color-mode="light"] .ldh-date { color: rgba(40,30,60,0.6); } /* 抽屉导航模式切换按钮已删除（顶部导航系统整体移除） */ /* ── 折叠分区 ── */ .luliy-drawer-section { border-bottom: 1px solid rgba(255,255,255,0.06); } [data-color-mode="light"] .luliy-drawer-section { border-bottom-color: rgba(0,0,0,0.05); } .lds-header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; background: none; border: none; cursor: pointer; color: #fff; font-size: 14px; font-weight: 700; font-family: 'Noto Sans SC', sans-serif; letter-spacing: 0.5px; transition: background 0.15s; } [data-color-mode="light"] .lds-header { color: #1e1032; } .lds-header:hover { background: rgba(130,80,223,0.10); } .lds-arrow { font-size: 18px; opacity: 0.6; transition: transform 0.28s; } .luliy-drawer-section.is-open .lds-arrow { transform: rotate(90deg); } .lds-body { max-height: 0; overflow: hidden; transition: max-height 0.34s cubic-bezier(.4,.0,.2,1); } .luliy-drawer-section.is-open .lds-body { max-height: 1200px; } /* 快捷访问链接 */ .lds-body > .lds-link:first-child { margin-top: 2px; } .lds-link { display: flex; align-items: center; gap: 12px; padding: 11px 22px; text-decoration: none; color: rgba(255,255,255,0.82); font-size: 14px; transition: background 0.15s, color 0.15s, padding-left 0.15s; } [data-color-mode="light"] .lds-link { color: rgba(40,30,60,0.82); } .lds-link:hover { background: var(--th-accent-soft, rgba(130,80,223,0.14)); color: var(--th-accent, #cba6f7); padding-left: 26px; } [data-color-mode="light"] .lds-link:hover { color: var(--th-accent, #8250df); } .lds-link:active { background: var(--th-accent, #8250df); color: #fff; } .lds-link-ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; } .lds-link-ico svg { width: 18px; height: 18px; fill: currentColor; } .lds-link-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.7; } .lds-link-txt { text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 主题分区网格 */ .lds-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 16px 14px; } .luliy-drawer-theme-cell { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.12s; font-family: 'Noto Sans SC', sans-serif; } [data-color-mode="light"] .luliy-drawer-theme-cell { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); } .luliy-drawer-theme-cell:hover { background: rgba(130,80,223,0.16); } .luliy-drawer-theme-cell:active { transform: scale(0.96); } .luliy-drawer-theme-cell.is-active { background: var(--th-accent-soft, rgba(130,80,223,0.22)); border-color: var(--th-accent, #8250df); } .ldt-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,0.18); } .ldt-name { font-size: 12px; font-weight: 600; white-space: nowrap; color: rgba(255,255,255,0.85); } [data-color-mode="light"] .ldt-name { color: rgba(40,30,60,0.85); } /* 设置分区：嵌入的浮动面板 */ .lds-settings-host { padding: 4px 12px 14px; } #luliy-ctrl-panel.in-drawer { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-shadow: none !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* 面板搬进抽屉后，隐藏其内部重复的「主题预览卡 + 风格主题选择」（抽屉已有主题分区） */ #luliy-ctrl-panel.in-drawer .luliy-ctrl-theme-preview { display: none !important; } /* ── APlayer 完整模式微调（恢复原生进度条/音量/列表后宽度更大）── */ #luliy-aplayer { position: fixed; z-index: 9000; width: 320px; max-width: 92vw; } #luliy-aplayer.is-dragging { opacity: 0.92; cursor: grabbing; } #luliy-aplayer .aplayer { margin: 0; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.30); } /* 抽屉打开时把 APlayer 降到遮罩之下，避免遮挡（用 body class，兼容性优于 :has） */ body.luliy-drawer-open #luliy-aplayer { z-index: 8000; } /* ══════════════════════════════════════════════════════════ 36 桌面端 hero 导航栏响应式补强 ★ 需求：桌面端任何窗口尺寸下，hero 元素可随窗口缩放，但绝不被 遮挡/隐藏/折叠/裁剪。用 min-width:0 + flex 收缩 + 文字省略实现。 ══════════════════════════════════════════════════════════ */ #luliy-nav-rebuilt { overflow: visible; } /* 不裁剪子元素 */ /* 左区(头像+名+时间)允许整体收缩，名字过长省略而非溢出 */ #luliy-hero-left { min-width: 0; } #luliy-nav-blogname { min-width: 0; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 中间副标题(切换按钮)允许收缩，不挤压两侧 */ #luliy-hero-subtitle { min-width: 0; } /* 链接胶囊：min-width:0 + overflow:hidden 已在基础规则定义， 窄屏降级为纯图标见 section 38，不再有 JS 测量/滚动相关的设置 */ /* 右区(设置pill)不收缩、始终可见 */ #luliy-hero-right { flex-shrink: 0; } /* 中窄桌面(769~1024)：缩小间距与字号，保持单行不折叠 */ @media (min-width: 769px) and (max-width: 1024px) { #luliy-nav-rebuilt { padding: 12px 18px 10px; gap: 10px 14px; } #luliy-nav-blogname { font-size: 20px; max-width: 24vw; } #luliy-hero-time { font-size: 15px; } #luliy-hero-subtitle { font-size: 12px; padding: 4px 10px; } .luliy-hero-cap-link { padding: 5px 10px; font-size: 13px; } } /* ══════════════════════════════════════════════════════════ 37 抽屉快捷链接平铺 + 顶部日夜按钮 + 隐藏重复主题 ★ ══════════════════════════════════════════════════════════ */ /* ── 抽屉顶部：切换按钮 + 日夜按钮 并排 ── */ .ldh-btn-row { display: flex; gap: 8px; margin-top: 14px; align-items: stretch; } #luliy-drawer-dnbtn { margin-top: 0 !important; flex: 1; } /* 日夜按钮占满该行 */ #luliy-drawer-dnbtn { flex: 0 0 auto; width: 42px; display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; background: var(--th-accent-soft, rgba(130,80,223,0.18)); border: 1px solid var(--th-accent, #8250df); color: var(--th-accent, #cba6f7); transition: background 0.18s, transform 0.15s; } #luliy-drawer-dnbtn:hover { background: var(--th-accent, #8250df); color: #fff; } #luliy-drawer-dnbtn:active { transform: scale(0.94); } /* ── 快捷链接：直接平铺在抽屉顶部下方（无折叠）── */ #luliy-drawer-quick { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } [data-color-mode="light"] #luliy-drawer-quick { border-bottom-color: rgba(0,0,0,0.05); } /* ★ 抽屉快捷链接的外链 ↗ 箭头已删除 */ /* ── 设置分区：隐藏搬进抽屉后的「风格主题」标题+6行（抽屉已有独立主题分区）── */ #luliy-ctrl-panel.in-drawer .luliy-panel-theme-block { display: none !important; } /* 风格主题区前的分隔线也一并隐藏（紧邻的 hr） */ #luliy-ctrl-panel.in-drawer .luliy-ctrl-theme-preview { display: none !important; } /* ══════════════════════════════════════════════════════════ 38 hero 链接胶囊响应式降级（替代已删除的 More 下拉） ★ 逻辑：More 机制依赖 JS 测量元素宽度来决定收纳，但测量时机很容易 出错（隐藏态测量为 0、resize 不覆盖所有触发场景等），上一版就因 此出现过显示异常。改用纯 CSS 方案后没有这些问题： - 空间还够时，图标+文字都显示 - 视口变窄、capsule 撑不下全部链接文字时，文字自动隐藏，只留图标 - 纯 CSS 渐进降级，没有"测量时机"这个概念，不存在出错的时间窗口 断点选择：每个链接图标+间距约 36px，文字额外占 50~70px， 1024px 临界是经验值——可按实际链接数量调整。 ══════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .luliy-hero-cap-link .luliy-hero-cap-txt { display: none; } .luliy-hero-cap-link { padding: 7px 9px; } /* 纯图标时缩小左右留白，更紧凑 */ } /* 更窄时（逼近抽屉切换的临界区）进一步收紧分隔符间距，挤出更多空间 */ @media (max-width: 860px) { .luliy-hero-cap-sep { margin: 0 2px; } #luliy-hero-capsule { gap: 0; padding: 6px 6px; } } /* ══════════════════════════════════════════════════════════ 32 自定义鼠标样式 —— 赛博朋克激光箭头 素材来源：用户提供的 Windows .ani 动态光标包（lasers 文件夹）。 说明：浏览器不支持 .ani 这种 Windows 专用格式，所以这里取了其中 一帧裁成静态 PNG，转 Base64 直接内嵌（不用另外上传图片文件， 替换这一份 enhance.css 就能用）。 · 默认光标：珊瑚粉箭头（来自 laser arrow.ani 第一帧） · 链接/按钮悬停：亮品红箭头（来自 laser link.ani 第一帧） 热点坐标（光标图片里"指尖"对应的像素点）已经按原文件保留， 保证点击定位准确。放在文件最后 + !important， 确保能覆盖前面散落的 34 处 cursor:pointer 声明。 ══════════════════════════════════════════════════════════ */ html, body { cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABy1BMVEX/////UWv/UWv/UWv/UWv/UWv/UWv/UWv/UWv/UWv/UWv/UWv/////hZP/UWv/UWv/UWv/UWv/m6X/UWv/UWv/UWv/UWv/UWv/3+L/lqD/UWv/UWv/UWv/UWv/UWv/c4T/3uD/kZz/UWv/UWv/UWv/UWv/eYn/4OL/i5f/UWv/UWv/UWv/fo3/4uT/hpP/UWv/gpD/5Ob/gY//UWv/h5T/5uj/fYz/6Or/eon/j5v/UWv/UWv/6uz/eIj/k57/UWv/U2z/7O7/dYX/lqH/UWv/UWv/Vm//7/D/coP/mqT/UWv/UWv/W3L/8PH/cYL/nqf/UWv/UWv/X3X/8vP/oar/UWv/UWv/UWv/Y3j/9PX/pK3/UWv/UWv/an3/9vb+/v7/qLD/cIL/9/j/dob/q7P/UWv/d4f/+Pn/rrX/UWv/+vr/sbj/hJL/+vv/tLv/i5j/+/v/UWv/t73/kp7/usD/e4r/vcL/fIv/wMX/qLH/wsf/r7f/f47/xcr/tr3/9/f/gI7/yMz/vsP/9fX/y8//xsv/8/T/zdH/g5H/z9P/09f/7u//0tb/VG3/2dz9/f3/1Nj/WHD/trz/pa3/n6j/19r/297/6er/qrJknfD5AAAAmXRSTlMABQoUHigjMktfWjf/r6qWc4L/8MOHRqX////SfWm+////uXgtbv////q0Qf////X///+v////////5uH////c/////82g/////5Fk/////4xV////UBnr////1w///////////zz///+b/////////8j///////////////////////////////////////////////////+YHlefAAAACXBIWXMAAA9hAAAPYQGoP6dpAAADPklEQVRYhe3X+3vSVhgHcMIlB9JXCCMF/UJRCekFVFTmZVDFKWiFuZVNqApbvFVXr61uc/PuNu/azd3/3J1Tn+rKSgjhNx+/PyY5nyfJec/JG5frHYkkuSVpgOFuj9cnez1up4Dby/wBxT8kOxU8TKE1wZDqdyp4/WGiDyLacNShIAditJbWIZ6Ieh0JvpEkrd9AG5HSnQlpQ6NRjNH4REbPOhGYqtEmYDNtyWVUJwIzUrQVwDbaHnEkMCNPH3IAO2inI4EZQRoXAHbRbieCAD5CrlAsYJL2OBDEI+xFKRUMlvZ9TPv7FwRwAOVKwqgUDx6iqb7ngql5OoxytZatVYqfHKFP+xWYmqHPUJ6uy0O1WOHzL2hqItVXRQngKOLVhqc5NBKbOXac1vcnCOAEWtVGW+JCMPLlV+Z+9CMwNUUn0Qo12i4uGPnIqdPmGSTtCwI4i1Ko3ubbW3PWyE+cO2+eQ9L26mZ6kr5GcU4ALndzVs1g5wVzDzS7ggAuovAa4DtkVk3h0mVz1LYggCsoVJQlQAh6Elfnzd1YsCcwXaNrmIkpHteykNBwfUkI2xEE8A0ibwAuRMMLODxvfmtPYAmNvkMuGFgGXG45Gi7j6Lx5A2UbAkss0PcrAC74h+P44YK5yY4ggJuYyNfeAkKYbuHWefO2EHp8L1iiTHeAfK35n4NtuVEt4e498z7ivQQBPAAyKwBX29eoFvHjT+Z2xHt8swTwMwdGVgBcqIcKePjI3NpLYOE4PQZSHQAXlLkZPD5iPoGmzza7NxACeAokOwGpnVYqkX3PnpuXchXF1/0WBPCCA0YHIIRALPdycfKXJymDtS2AFv0KaIa388ySMPPqt9//SKpDntXGvgH+5ID6P8AleVhgrhzJtSo1ZgEMl2gRWFgFEEI9EapUVb/P4hE48FcXgAu+2YZSj6abFi+RAxuAsr4asNTDyaKHs5jG4SKNAXFd7nKBJNJ1+GtgsxXQK2y6SNuAVmIQYMcgQJrXwd/iJToFfHxPnBSLadVZsBG5FqR/UJpTOteC3Xgb4UypFdSz3WvNOrxa9eq04U877dZ5ux+tN7Jpiy3DOlJ7wB8OUe/ugf553ud9Bs2/C+GRdDvhxBUAAAAASUVORK5CYII=") 6 6, auto !important; } a, button, [role="button"], [onclick], input[type="button"], input[type="submit"], input[type="reset"], select, summary, label[for], .luliy-cat-card, .luliy-card, .luliy-tag-bubble, #luliy-ham-btn, #luliy-brand, #luliy-cats-more, .luliy-ctrl-panel button, .luliy-ctrl-row, #luliy-ap-fab, #luliy-toc-fab, #luliy-search-fab, #luliy-back-top { cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAA9hAAAPYQGoP6dpAAAP9klEQVR4nO2bW4xkx1nHf1/VOX2bW89Md+9cdtZrJ/bam7U3iU1CbkQOhChCIZZIACGUFyQQBgkheABFvPEWIZEH/ABCSNwkBCgBojghFyeOUYQTkggvTpysnZ3r7k7P9ExP3/ucqo+H02emd7y73pnt9SLhTyqNZqa7Lv/6na++r6oO/D83uVMV65PPXLdueepxvVNtHsdGLsBg4GZQd/pz/9+AT3/+XxBjZAIMDdz2ur0gDAPrQxNK3xkAGwQecEMlAlSeetyNqg/HMTPiuqx3LhMHMt2xutB17lQvZ073Q7nXq6940RlgAsgDOcDqk8/YEfbhyDYSAgazHwKZdhzNuKyZd+icqs4gkjeKC1V2jLIbqlStmF2gCXSAPuDuFgmjIsACAZD3gczF6P0x+ujYb771181byx+NQ3lf3+i7Y6NvjS0PePVzwBRQADIkJNwxh3wzC263gqFnP4zieMqFLDnRcz5rz2fOlt/hGv3tzss7TdeMtkGWRXXKIMaoekQO+4XXnYJREGBIhMxGhooXvc/BQ9lHT7zF92IT3FssB28pne6LfzASfdipnvOG+z26CEwDY9xFCm6LgEGHLcnzn/eWea/c40VPZx+cLbVfrBLOFsg/UpH+pd1CtNleDIw477XpRRoGbYJ0gC7JqvC6UzAKAgTIOKOTzrDgLQseytkHS7nmtzfo/Gib/JumCU9PGZ8xhVh03hnu88JpFU6Q+IK7RsHtCmAYeP++9xUPcx4qn/va02P9altcvcfesyvEez3G3jaH5kNxohNOddEL93hhEXQGGCdZFoMR9OnIAziWDeFvgawzWlavFUSnPvHnv5/trdbx3RjX6LH33ApBMUf+zCyRqI1FZxy65FWXVKhwEBu87hTcrtoCZDx+zEPFW2Y/+/wXxrMPlsL+2h6u1QegfWET1+iTOzODTOeJjY7F6ImBCIvo3aPgdhoyDNb/vqHshbLC9Mc/8avjru9MtN1Be4k/c/Ue7QubFM6WyZyaIg4NsdFpJyw6YcEnvuCuUHA7AqTRXy5WX/KqZQ/F7Llyob+2h2/2k5RnkO60X6wSVdtMvvcUOhESieZj0YoXlhSdv44veF1C5GMJMPT8B6hmvVBWw6yKTuUenM32rzSJ93pYkcRJKLjtDs1vbWCLWXIPlohDI7FoMRZdcMKiQoW7EB0el4AU/0zX+IpHT3jVUnhvcVxDY6NqC9/oYz186fkvkVEhVKHx3Aqu3iV3/wyf+seniETzDq041SWHLiDXUJBod4dFOK4AQ/hrxRspe5Hpr//N04XoagtX7+0r9MRjHyLrDVkVAoS951bJnynxh5/8JLFgI9FpZ3TBC6c8+3FBgQMR7qgdWYBr8IesF0petaSGyZ//t9/LRVdbRDsdrIJVIVAhMyhPP/9FopU6vdU6xZ+5D6azRKI5J1QcetJDuiJMAlkSke8oBcchYB//Hq7k0TlFZ+38+LhMZW1UbeFqXQzCd3/0XYIB/oETfuGxD0OtS/f7W2QWJsg/VMJnjI1Eiw5d9OiSN6+ODkc43usO5qiWEpCJDSW1UvYiM7lzpUJUTWb/U5/9MwyQD7JYpG+RzcDIRqDUreKa31wjrnUonJ+DYo7YkI8NFSd60queHPIFd5yCIwkwhH8GyHmh7NGyF53Mni1n46028VabP3jit/jq955lLMw5o2yJsiaOVatyJVBpmFj9ztMXCefHyd43TQ9vYtEphy54Yckr80CRRISUgjsSHB210hT/sK9uxnmdc1A2M/nJYHEiiLY7RNU2FuFD59/PmcU3tyyyaYQVK3LJIpcClc3PPPevvWitob3lOmNvn8MUc/RFc7EMKEhWhBKJAHkSCuROUHBUAVICsrGh7NE5hOncw+V8OvviFFH43sX/9kalYZQrqKwbuGSUS9az9svv+uiu1nu++9I2mYUJCucq+JyVSHQqTqLDJa86R7JfUCB5FO4IBbdc4fDOD5BzohUPZYdO5c6WMnGtQ3+ztb8X/tibzvcN7KJUgSqwbpVliywHymbg6XYubKpr9Jh8/z3IVI7IkI3Vl53oKS8sDiiY5CBEHjkFR1F03/vHRoteqKjREoVwInP/bBDvdokuNxJEVLBI1yo1EbYTAaQqIhsGVqyyaj27tCK/9/UVTC6gcL5CFApfvPDspBPmHSx5ZY7EF6QrQnjEPo9UAGGw9vejuOKFEx5mcg+X8/Ful+hqC+17jMK3Xvo24rRtVLZBdoBdoGbgilVZsY7lANk0fd/rXqxpb7VO7oFZbDnPe8+/LxPtU6AnFS1xkCgFjJiCWxLgMP4+kLJD57yhmH+4knE7HfpXmvzxP30ag/DuMz/hDNIE6tcUlW0jctWKrAWe9UBlN95u076wSWZunPyZEj5viS0TDl1wwpIXToJOcxAij5SCo1RkgYzDTzpD2auWvchE9kzJxns9+hsN/uhjv4NFMErPitQlGfgeyRlAA2gYqBpkwyKrgWMzVOl2X9mhf6VJ8QP3Yos5ItEwMpSccI/CokKZJDgaebp8qwKkoW8mMpQ9zKthJn++knPtvkRXW/hWlDgJBYN0rFKTBP0m0CI5BGmJSt2KXDbKaiCyEarUdafn2xc2kaxl/J2L+LGQSPxY7P28E11SYZ5kRUiDo5GtCK9ZySH8s7H6kvd6wsF0/lw54xp9+huNpLLE+WGVliC7IOnstwcCdICWiXUrQNYscilANk3X9bo/2qa/tkfugVmCuTEiIYiszsaqpxx6SlXTdHmkFByJAKd+wsMJbyn91TP/MJ49U7Ku0aO3vgcC//afn8cokVXZG+DfGAy+S3IE1gM6YkxDHFeM01WrrAcqjfhyS5vfuUw4m0/2DkMhEi3EovMelrzoPGgaHWYZ0dbZrVSQLn+5yGjFic570fJvPPlkTq1IvNXB7XQRhY+98+cwStcgNYEa157/RYPSA1rWSs0as2E9awFshiq97is7dC/tMvboAtnKOH1RGxudcUaXvLCkek2iNJIc4aYCHE59nVDyhnkvMp1/SyXjGj16q3WA/fTXIm2jOox/KkDMwbF4T1TqgcrlAFkOVNas0tBqx3cv1jAZy/h7TiITWfqi+Qidd+gpL7rAgS9Il8XbouBWvmyBjHpf8EL5Ky98o+xUJ7IPlaxvRwcCIBivapG95PmnQeL8UvwdyQ6hG/zeMciWVVm1jpXv/OC/NqXvo+5L20TbbQrnKoRLE7jQmK99/5vTgyVxSdWP1Be8lgD70V/fUnbqF9//yHtns/cWc2Y8lLjWIbraAh18UKVnlZ1D+PdIZt8PSkpBB2gaI1esyOq7H3hsLYSGu9rSzv9UMRnL2Pk5XChcql/Nx6InnHBqcJhSJAmObnsb/bW+mOKfi0UrznDCwfQX/+IzoWtF9Jbr+x+yKhiRtlHZOeT909l3Q1diUgraRtmxyob1shKoqf71F/6+3/nBNr3VPXKni2TvLfLEez4ifdHpZNOEJRUOH68Hx6XghgIMKpRBA3mvmh59Tf3Slz9pfTemu5IIMLT8NUTYIVkBmlyLP7B/SWqfAlHZtZjLVlgNlPUT49PN/mpduxdrSDahwEzmiERzsWHOiZ5yXhdRneUgUQo55s7RzQjYP/frqSs7y7wTLQcL4zk7mxdX79IfCPAv3/wcVoktUsezw0Hw0xsM9HoXooYo0Kr1rFtkeW58tmrBtV/YJN7tMva2OTL3TOJCw5cufKMYG056wyk/ooPVmwmQJj85Z6g4dEFFivmHK4HvxvR+vJtUoPDxn/wIFukYZEdE0vB3//oL+8cjg4qvpaArYhrWmMvWs/a+M+/YCFUafqernZe20cgz8a6TMB5ysbaeHRypnUruF7x662wkArzq3N9Q/uoLz1U8OpU/Wzbac3QvJQJYBocfntYg9E3xHxbA36B9xyAuEKc1K7JqlZVApSrtKO79sEZUbRGWx8jdP8Ov/PQv0hedig0LDl1Sbp+CGxGw7/0j8bOx6vxPPfKesszmc+HihPHtiO4rOwCIQoBgRXaNUiOZ/TYH+Lvr3Qcc/E0Hn+kYZNd6uWpVlgMn6xZpdV+uaW+5jlgh/1AJkiO1zPMvf6/i0UWHLqj6GYZOk24ypiMJkB58ZGNDyYkuOJgpnCsHvu+SwXvdH7xxdIzK7iD3H17/Yw7hf8jSZbGPSEtUq1ZlLRBWQ5UtA27v2WVcK6Jwtkz2niIuY3j4zY+MOytz3jCnRg4/BkfaL3iVAMMXHoGM8376Kxe+UfIwkTtbMRo5Oi/X9r9sFIzSEq81job/MAUxCQV1i1yxKishshGqtLQVafvFKr4dMfX4aex0DieaidEpD7MKRdD9oIgj+oGbERD0o2jCWyl24/6kjGcy2TdPG4083YsDARQCD4GYuhHZHhIgDX5u5b6PJ3kM+og0DWxbZNU4fhyqbJqui3sXa0TVNsFklvyZEn/37D+LF7IeHffouHotMEonOPi7daEpOO+LH3r7B/Jj5yuiUYK/9lyCvxisSNsoW4JUBwKk+N/w+R+2QxT0RNkxPtlADVUuhSq7f/rpP3GdF6u0XthEDeRs1gOqXgXFYCR12im9t+wHrvfB/YvOaiWnSgbQ/LmKjbY7dL6/BcBf/vvfEni8Vdk1IldIwt86Bw4wDX9vxVIKugMKtiyybD2vhCrLv/vhX9trfn3ZNb58Sd0ru76QzfaN0jIiLRHpid5yO6+yG16T86LGO2/ESk+UZus/VlvemrDzwy1jFX77g5/wgZOG9awbWAe2OCDgmujvtUyeelz1yWeGfUHNwqqHYui0IFaw2PnPPfP5sYwNeOLRn21YlapADdUWYjoDAY98+/yGArjYq1i6xulOYLgSv7BVjkUlgFyI8aFKN0CuBmJeEWUN2OYgALpR9HczSynoIdK0whU8OTFYUfpWtfbE2z5YxGOtSst6NgyyLsoWck3OkSZdtyWAYiQm9m0byiawIjBmlZ4gBaNogDRDZM0oF0FSAhoczQHu2xAFaY5QD2BZVNR4bTqvl9XKLELGqLQFtoyybpGrHDjeI1NwPQE84K3SzQS25mHNqGZc4qq2UcaMgjXSsJ7LBn4MpD4gTYCOe9szjQt6QBMRrKoakUYgdsM5X8RIVhQnRhpJ2i1bh9o9Enk3IsAZY2IDDef8prGC9XQRmVbVgjEi4rRtMVVEqhw4wA6D2T/O2yADClLxkmBGxInSFdgRJA8Soupx2hekjdDiWsd7pHavGzENXmIISDYcCur9hArTGCmgZFXVCPSMmCaJ+mkZvv9/7NdhDuUiAUmQkx6NpWt9mk2mJWKw8hyl7RsJMNyBDEmYmePaPfm0A10S9dPQNxrFu0CHItLhkvY5zSiHy5HfQ7phzHzoKmw6E+ngZagDqfLprs9Ib3tf5yWsYUtfwIJjvoR106ThUOPDmVYqQNqBY6l/FLtZgnM77d5S1jTU+PUiR3+7nXjD3rA37A17w96wu2P/C2N8c67eo8ZDAAAAAElFTkSuQmCC") 23 7, pointer !important; } /* 极简模式：取消上面那套自定义光标，用系统默认箭头/手型 */ html:has(body.luliy-minimal), body.luliy-minimal, body.luliy-minimal * { cursor: auto !important; } body.luliy-minimal a, body.luliy-minimal button, body.luliy-minimal [role="button"], body.luliy-minimal [onclick] { cursor: pointer !important; } /* 触屏设备没有鼠标，自定义光标没有意义，干脆不设，用系统默认即可 */ @media (hover: none) and (pointer: coarse) { html, body, a, button, [role="button"], [onclick], input[type="button"], input[type="submit"], input[type="reset"], select, summary, label[for], .luliy-cat-card, .luliy-card, .luliy-tag-bubble, #luliy-ham-btn, #luliy-brand, #luliy-cats-more, .luliy-ctrl-panel button, .luliy-ctrl-row, #luliy-ap-fab, #luliy-toc-fab, #luliy-search-fab, #luliy-back-top { cursor: auto !important; } } /* ════════════════════════════════════════════════════════════ 极简系统 Minimal System 黑白灰 + 衬线大标题 + 账本式留白。配色/字体/留白/组件/布局 严格按规范。只在 body.luliy-minimal 下生效，绝不影响赛博系统。 ════════════════════════════════════════════════════════════ */ body.luliy-minimal { /* —— 配色 —— */ --min-bg: rgb(230, 225, 212); --min-title: #1c1c1e; /* 标题：近黑炭灰 */ --min-text: #3a3a3a; /* 正文：深灰，不用纯黑 */ --min-muted: #8c8c8c; /* 次要：中灰（日期/字数/未激活tab） */ --min-line: #3a3a3a; /* 硬边框线：深灰近黑 */ --min-serif: 'Noto Serif SC', 'Songti SC', Georgia, 'Times New Roman', serif; --min-sans: 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--min-bg) !important; color: var(--min-text); font-family: var(--min-sans); zoom: 1 !important; } /* 极简系统下：彻底隐藏所有赛博系统的元素（保险，即使没初始化） */ body.luliy-minimal #luliy-cyber-canvas, body.luliy-minimal #luliy-sakura-canvas, body.luliy-minimal #luliy-splash, body.luliy-minimal #luliy-brand, body.luliy-minimal #luliy-subtitle, body.luliy-minimal #luliy-issues-link, body.luliy-minimal #luliy-to-minimal, body.luliy-minimal #luliy-ham-btn, body.luliy-minimal #luliy-drawer, body.luliy-minimal #luliy-drawer-scrim, body.luliy-minimal #luliy-aplayer, body.luliy-minimal #luliy-ap-fab, body.luliy-minimal #luliy-ctrl-panel, body.luliy-minimal #luliy-ctrl-fab, body.luliy-minimal .luliy-cats, body.luliy-minimal #header, body.luliy-minimal #footer { display: none !important; } body.luliy-minimal #content { background: transparent !important; } /* —— 右侧常驻导航：Home / Archives / Chronicle / Book / About —— */ #luliy-min-nav { position: fixed; top: 56px; left: 40px; right: auto; z-index: 65; display: flex; flex-direction: row; gap: 5px; font-family: var(--min-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--min-muted); text-align: left; } #luliy-min-nav a { color: var(--min-title); text-decoration: none; font-weight: 700; transition: opacity 0.15s; } #luliy-min-nav a:hover { opacity: 0.55; } #luliy-min-nav .luliy-min-nav-sep { color: var(--min-muted); font-weight: 400; } /* —— 系统切换按钮（极简 → 赛博） —— */ #luliy-system-toggle { position: fixed; top: 22px; right: 28px; z-index: 100; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--min-line); background: transparent; color: var(--min-title); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } #luliy-system-toggle:hover { background: var(--min-title); color: var(--min-bg); } /* —— 赛博系统里「切到极简」的按钮（放沉思者图标旁） —— */ #luliy-to-minimal { position: fixed; top: 14px; z-index: 10002; width: 30px; height: 44px; background: transparent; border: none; cursor: pointer; color: #fff; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.7; filter: drop-shadow(0 0 6px rgba(110,199,255,0.6)); transition: opacity 0.2s, transform 0.2s; } #luliy-to-minimal:hover { opacity: 1; transform: scale(1.15); } /* ════════ 主页：大图 + 左侧竖排文字导航 ════════ */ #luliy-min-home { position: fixed; inset: 0; background: var(--min-bg); display: flex; align-items: center; justify-content: center; z-index: 50; } .luliy-min-home-stage { position: relative; width: 100%; height: 100%; } .luliy-min-home-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; } .luliy-min-home-nav { position: absolute; top: 48px; left: 48px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-family: var(--min-sans); font-size: 32px; /* 21px → 32px，明显更大 */ font-weight: 500; letter-spacing: 0.5px; color: var(--min-muted); } .luliy-min-home-nav a { color: var(--min-title); text-decoration: none; transition: opacity 0.15s, transform 0.15s; } .luliy-min-home-nav a:hover { opacity: 0.55; transform: translateX(4px); } /* 竖排列表，不再需要 "/" 分隔符 */ .luliy-min-home-nav .luliy-min-nav-sep { display: none; } @media (max-width: 640px) { .luliy-min-home-nav { top: 24px; left: 20px; gap: 10px; font-size: 21px; } } /* ════════════════════════════════════════════════════════════ 普通文章 / about：Editorial Reading Experience 复刻 Anthropic 官网 / Blog / Docs 的阅读体验：Typography / Reading Rhythm / Whitespace / Editorial Layout / Markdown Typography。不引入品牌色，背景/主色沿用极简系统既有变量。 仅作用于文章正文（#postBody），不影响导航、侧栏、首页。 留白严格使用 8px Grid（个别项按需求文档显式指定的数值执行， 已在对应规则处用注释标出）。 ════════════════════════════════════════════════════════════ */ body.luliy-min-article { /* —— 字体：英文 Inter，中文思源黑体，中英文合并为一条 font-family， 交给浏览器按字符自动取字形，天然中英混排、不额外调字距 —— */ --ed-font: "Inter", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ed-font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; /* —— 间距 Token：8px Grid —— */ --ed-space-1: 8px; --ed-space-2: 16px; --ed-space-3: 24px; --ed-space-4: 32px; --ed-space-5: 40px; --ed-space-6: 48px; --ed-space-7: 56px; --ed-space-8: 64px; --ed-space-9: 72px; --ed-space-10: 88px; --ed-space-11: 96px; --ed-space-12: 120px; /* —— 颜色：复用极简系统既有变量，不新增品牌色/背景色 —— */ --ed-text: var(--min-text); --ed-heading: var(--min-title); --ed-muted: var(--min-muted); --ed-line: rgba(0, 0, 0, 0.14); /* 极浅灰，用于 hr / 表格线 / 引用边 */ --ed-code-bg: rgba(0, 0, 0, 0.045); /* 相对当前背景取暗，不引入新色相 */ } /* —— 布局：整体页面 ~1280px，正文列 720px 居中，无卡片/无阴影/无容器背景 —— */ body.luliy-min-article #content { max-width: 1280px; margin: 0 auto; padding: 0 var(--ed-space-6) var(--ed-space-12); /* 48px / 120px */ background: transparent; box-shadow: none; } body.luliy-min-article #postBody { max-width: 720px; margin: 0 auto; font-family: var(--ed-font); font-weight: 400; font-size: 18px; line-height: 1.75; letter-spacing: 0; color: var(--ed-text); background: transparent; box-shadow: none; } body.luliy-min-article #postBody > *:first-child { margin-top: 0; } /* —— 标题：字重仅 400/500/600，字距为 0，不用衬线 —— */ body.luliy-min-article #postBody h1, body.luliy-min-article #postBody h2, body.luliy-min-article #postBody h3, body.luliy-min-article #postBody h4, body.luliy-min-article #postBody h5, body.luliy-min-article #postBody h6 { font-family: var(--ed-font); font-weight: 500; letter-spacing: 0; color: var(--ed-heading); border-bottom: none; padding-bottom: 0; position: static; } body.luliy-min-article #postBody h4::before { content: none; } /* 去掉旧版 ▍ 装饰 */ body.luliy-min-article #postBody h1 { font-size: 48px; line-height: 1.1; margin: 0 0 var(--ed-space-5); /* 40px */ } body.luliy-min-article #postBody h2 { font-size: 34px; line-height: 1.2; margin: var(--ed-space-10) 0 var(--ed-space-3); /* 88px / 24px */ } body.luliy-min-article #postBody h3 { font-size: 26px; line-height: 1.25; margin: var(--ed-space-7) 0 20px; /* 56px / 20px —— 20px 为需求文档显式指定值，不在 8px 网格内，按原文精确执行 */ } body.luliy-min-article #postBody h4, body.luliy-min-article #postBody h5, body.luliy-min-article #postBody h6 { font-size: 22px; line-height: 1.3; margin: var(--ed-space-5) 0 var(--ed-space-2); /* 40px / 16px */ } /* —— 段落：32px 间距，不首行缩进，不压缩 —— */ body.luliy-min-article #postBody p { margin: 0 0 var(--ed-space-4); /* 32px */ color: var(--ed-text); text-indent: 0; } body.luliy-min-article #postBody strong { font-weight: 600; /* 不用 700+ */ color: var(--ed-heading); } body.luliy-min-article #postBody em { font-style: italic; color: inherit; } /* —— 链接：颜色继承正文，默认下划线，hover 降低透明度，不用蓝色 —— */ body.luliy-min-article #postBody a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity 150ms ease; /* 全站统一动效节奏 */ } body.luliy-min-article #postBody a:hover { opacity: 0.6; } /* —— 图片：块级居中，圆角 16px，无阴影无边框，上下 64px —— */ body.luliy-min-article #postBody img { display: block; max-width: 100%; margin: var(--ed-space-8) auto; /* 64px 上下 */ border-radius: 16px; border: none; box-shadow: none; } body.luliy-min-article #postBody figure { margin: 0; text-align: center; } body.luliy-min-article #postBody figure img { margin: var(--ed-space-8) auto 0; } body.luliy-min-article #postBody figcaption { margin: var(--ed-space-2) 0 var(--ed-space-8); /* 16px / 64px */ font-size: 15px; color: var(--ed-muted); text-align: center; } /* —— 引用：左侧 2px 浅灰边框，透明背景，18px/1.8，上下 48px —— */ body.luliy-min-article #postBody blockquote { margin: var(--ed-space-6) 0; /* 48px */ padding: 0 0 0 var(--ed-space-3); /* 24px */ border-left: 2px solid var(--ed-line); background: transparent; border-radius: 0; font-size: 18px; line-height: 1.8; color: var(--ed-text); } body.luliy-min-article #postBody blockquote p { margin-bottom: var(--ed-space-2); } body.luliy-min-article #postBody blockquote p:last-child { margin-bottom: 0; } /* —— 代码块：浅色背景，圆角 14px，padding 24px，15px/1.6，无深色主题 —— */ body.luliy-min-article #postBody pre { background: var(--ed-code-bg); border: none; border-radius: 14px; padding: var(--ed-space-3); /* 24px */ margin: var(--ed-space-4) 0; /* 32px */ font-family: var(--ed-font-mono); font-size: 15px; line-height: 1.6; color: var(--ed-text); box-shadow: none; overflow-x: auto; } body.luliy-min-article #postBody pre code { background: transparent; padding: 0; border-radius: 0; font-size: inherit; line-height: inherit; } /* —— 行内代码：轻背景、轻圆角、低存在感 —— */ body.luliy-min-article #postBody code { font-family: var(--ed-font-mono); font-size: 0.9em; background: var(--ed-code-bg); padding: 2px 6px; border-radius: 4px; color: var(--ed-text); } /* —— 列表：整体上下 32px，单项间距 10px（需求文档显式指定），缩进自然 —— */ body.luliy-min-article #postBody ul, body.luliy-min-article #postBody ol { margin: var(--ed-space-4) 0; /* 32px */ padding-left: var(--ed-space-3); /* 24px，自然缩进 */ color: var(--ed-text); } body.luliy-min-article #postBody li { margin-bottom: 10px; /* 10px 为需求文档显式指定值 */ line-height: 1.75; } body.luliy-min-article #postBody li:last-child { margin-bottom: 0; } body.luliy-min-article #postBody li > ul, body.luliy-min-article #postBody li > ol { margin: var(--ed-space-1) 0 0; /* 嵌套列表：8px */ } /* —— 表格：极简，无斑马纹、无粗边框、无阴影，仅保留必要横线 —— */ body.luliy-min-article #postBody table { width: 100%; border-collapse: collapse; margin: var(--ed-space-6) 0; /* 48px */ font-size: 16px; box-shadow: none; } body.luliy-min-article #postBody th, body.luliy-min-article #postBody td { padding: var(--ed-space-2) var(--ed-space-3); /* 16px 24px */ text-align: left; border: none; border-bottom: 1px solid var(--ed-line); } body.luliy-min-article #postBody thead th { font-weight: 600; color: var(--ed-heading); border-bottom: 1px solid var(--ed-heading); } body.luliy-min-article #postBody tbody tr { background: transparent; /* 取消斑马纹 */ } body.luliy-min-article #postBody tbody tr:last-child td { border-bottom: none; } /* —— 分隔线：极浅灰，上下 64px —— */ body.luliy-min-article #postBody hr { border: none; border-top: 1px solid var(--ed-line); margin: var(--ed-space-8) 0; /* 64px */ } /* 文章 meta（日期/字数）：最小、浅灰、等宽数字感 */ body.luliy-min-article #postBody .luliy-readmeta, body.luliy-min-article .luliy-readmeta { font-family: var(--ed-font); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--min-muted) !important; margin-bottom: var(--ed-space-5); /* 40px */ } /* —— 右侧悬浮目录（漂浮在留白区，不占主列） —— */ #luliy-min-toc { position: fixed; top: 120px; left: max(40px, calc((100vw - 1280px) / 2 + 48px)); right: auto; width: 220px; max-height: 70vh; overflow-y: auto; font-family: var(--min-sans); font-size: 13px; line-height: 1.7; z-index: 40; } #luliy-min-toc a { display: block; color: var(--min-muted); text-decoration: none; transition: color 0.15s; } #luliy-min-toc a:hover { color: var(--min-title); } #luliy-min-toc .luliy-min-toc-h1 { color: var(--min-text); font-weight: 600; margin-top: 10px; } #luliy-min-toc .luliy-min-toc-h2 { padding-left: 14px; } #luliy-min-toc .luliy-min-toc-h3 { padding-left: 28px; font-size: 12px; } @media (max-width: 1080px) { #luliy-min-toc { display: none; } /* 窄屏不显示边注目录 */ body.luliy-min-article #content { padding: 0 24px 80px; } } /* ════════════════════════════════════════════════════════════ 极简系统 · 专注模式 Focus Mode 触发：文章页内双击正文，或按 F 键（Esc 退出）。 编辑部 / 学术期刊排版规范：象牙白底 + 近黑正文 + 单一陶土色强调， 衬线正文 + 无衬线 UI + 等宽大写元信息，居中 720px 主列，1.65 行高， 无阴影 / 无渐变 / 无圆角，1px 浅灰硬边框，大量留白，无背景图/纹理。 仅在 body.luliy-minimal.luliy-focus-mode 下生效，不影响其他状态。 ════════════════════════════════════════════════════════════ */ body.luliy-minimal.luliy-focus-mode { --focus-bg: #faf9f5; /* 暖象牙白，禁止纯白 */ --focus-text: #141413; /* 近黑正文 */ --focus-accent: #d97757; /* 唯一强调色：陶土橙，仅用于链接/强调 */ --focus-border: #d1cfc5; /* 1px 浅灰硬边框 */ --focus-serif: 'Source Serif 4', 'Lora', 'Noto Serif SC', Georgia, 'Times New Roman', serif; --focus-sans: 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; --focus-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, 'Courier New', monospace; background: var(--focus-bg) !important; background-image: none !important; } /* 隐藏一切会分散注意力的界面：右侧导航、悬浮目录、系统切换按钮 */ body.luliy-minimal.luliy-focus-mode #luliy-min-nav, body.luliy-minimal.luliy-focus-mode #luliy-min-toc, body.luliy-minimal.luliy-focus-mode #luliy-system-toggle { display: none !important; } /* 扁平化：全局去阴影 / 去渐变 / 去圆角，只保留 1px 硬边框 */ body.luliy-minimal.luliy-focus-mode #content, body.luliy-minimal.luliy-focus-mode #content *, body.luliy-minimal.luliy-focus-mode #postBody, body.luliy-minimal.luliy-focus-mode #postBody * { box-shadow: none !important; background-image: none !important; border-radius: 0 !important; text-shadow: none !important; } /* 正文主列：居中，720px，衬线，1.65 行高 */ body.luliy-minimal.luliy-focus-mode #content { max-width: 720px !important; margin: 0 auto !important; padding: 96px 24px 160px !important; background: var(--focus-bg) !important; } body.luliy-minimal.luliy-focus-mode #postBody { max-width: 720px !important; margin: 0 !important; font-family: var(--focus-serif); font-size: 18px; line-height: 1.65; color: var(--focus-text); } body.luliy-minimal.luliy-focus-mode #postBody h1, body.luliy-minimal.luliy-focus-mode #postBody h2, body.luliy-minimal.luliy-focus-mode #postBody h3, body.luliy-minimal.luliy-focus-mode #postBody h4 { font-family: var(--focus-serif); color: var(--focus-text); font-weight: 600; letter-spacing: 0; } body.luliy-minimal.luliy-focus-mode #postBody h1 { font-size: 36px; line-height: 1.25; margin: 0 0 40px; padding-bottom: 28px; border-bottom: 1px solid var(--focus-border); } body.luliy-minimal.luliy-focus-mode #postBody h2 { font-size: 24px; margin: 64px 0 20px; } body.luliy-minimal.luliy-focus-mode #postBody h3 { font-size: 19px; margin: 44px 0 14px; } body.luliy-minimal.luliy-focus-mode #postBody h4 { font-size: 17px; margin: 32px 0 12px; padding-left: 0; } body.luliy-minimal.luliy-focus-mode #postBody h4::before { content: none; } body.luliy-minimal.luliy-focus-mode #postBody p { margin: 0 0 28px; color: var(--focus-text); } /* 唯一强调色：只用在链接上 */ body.luliy-minimal.luliy-focus-mode #postBody a { color: var(--focus-accent); text-decoration: underline; text-underline-offset: 3px; } body.luliy-minimal.luliy-focus-mode #postBody strong, body.luliy-minimal.luliy-focus-mode #postBody b { color: var(--focus-text); font-weight: 600; } body.luliy-minimal.luliy-focus-mode #postBody em, body.luliy-minimal.luliy-focus-mode #postBody i { color: var(--focus-accent); font-style: italic; } /* 图片：无圆角、无阴影，细边框代替 */ body.luliy-minimal.luliy-focus-mode #postBody img { max-width: 100%; border: 1px solid var(--focus-border); } /* 代码块：扁平、单色，等宽字体 */ body.luliy-minimal.luliy-focus-mode #postBody pre, body.luliy-minimal.luliy-focus-mode #postBody code { font-family: var(--focus-mono); background: #f2f0e9; border: 1px solid var(--focus-border); } body.luliy-minimal.luliy-focus-mode #postBody blockquote { border-left: 2px solid var(--focus-border); border-radius: 0; padding-left: 20px; color: var(--focus-text); opacity: 0.75; background: transparent; } /* 元信息（日期/分类）：等宽大写字体，宽字距，用作细节而非重点 */ body.luliy-minimal.luliy-focus-mode #postBody .luliy-readmeta, body.luliy-minimal.luliy-focus-mode .luliy-readmeta { font-family: var(--focus-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; color: var(--focus-text); opacity: 0.55; margin-bottom: 48px; } /* 退出提示（居中底部小字，2.2s 后自动淡出） */ #luliy-focus-hint { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 200; font-family: var(--focus-mono, 'JetBrains Mono', monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: #141413; background: #faf9f5; border: 1px solid #d1cfc5; border-radius: 0; padding: 8px 16px; opacity: 1; transition: opacity 0.4s ease; pointer-events: none; } #luliy-focus-hint.is-out { opacity: 0; } @media (max-width: 640px) { body.luliy-minimal.luliy-focus-mode #content { padding: 72px 20px 120px !important; } body.luliy-minimal.luliy-focus-mode #postBody h1 { font-size: 28px; } } /* ════════ Archives / Chronicle / Book 的极简皮肤 ════════ 复用现有结构，只覆盖颜色/字体/边框，做成黑白灰账本风。 */ body.luliy-minimal .luliy-archives, body.luliy-minimal .luliy-chronicle, body.luliy-minimal .luliy-bookshelf { max-width: 1100px; margin: 0 auto; padding: 8px 48px 80px; } /* 年份/分组大标题：衬线斜体数字感 */ body.luliy-minimal .luliy-arch-title, body.luliy-minimal .luliy-chron-title, body.luliy-minimal .luliy-book-title, body.luliy-minimal .luliy-arch-year { font-family: var(--min-serif) !important; font-weight: 700 !important; font-style: italic; color: var(--min-title) !important; text-shadow: none !important; } body.luliy-minimal .luliy-arch-title, body.luliy-minimal .luliy-chron-title, body.luliy-minimal .luliy-book-title { font-size: 32px !important; font-style: normal; } body.luliy-minimal .luliy-arch-year { font-size: 28px !important; margin: 56px 0 14px !important; /* 年份间大留白 */ } /* Tab：纯文字，激活态仅下划线 */ body.luliy-minimal .luliy-arch-tab, body.luliy-minimal .luliy-chron-year-tab, body.luliy-minimal .luliy-chron-cat-tab { background: none !important; color: var(--min-muted) !important; text-shadow: none !important; font-family: var(--min-sans) !important; border-radius: 0 !important; } body.luliy-minimal .luliy-arch-tab.is-active, body.luliy-minimal .luliy-chron-year-tab.is-active, body.luliy-minimal .luliy-chron-cat-tab.is-active { color: var(--min-title) !important; } body.luliy-minimal .luliy-arch-tab.is-active::after, body.luliy-minimal .luliy-chron-year-tab.is-active::after, body.luliy-minimal .luliy-chron-cat-tab.is-active::after { background: var(--min-title) !important; box-shadow: none !important; } body.luliy-minimal .luliy-arch-tabsep { background: var(--min-muted) !important; } /* 归档列表：无卡片无分割线，靠两栏对齐 + 行距 */ body.luliy-minimal .luliy-arch-row { background: none !important; } body.luliy-minimal .luliy-arch-row:hover { background: rgba(28,28,30,0.04) !important; transform: none !important; } body.luliy-minimal .luliy-arch-date { color: var(--min-muted) !important; font-variant-numeric: tabular-nums; } body.luliy-minimal .luliy-arch-name { color: var(--min-title) !important; } body.luliy-minimal .luliy-arch-row:hover .luliy-arch-date, body.luliy-minimal .luliy-arch-row:hover .luliy-arch-name { color: var(--min-title) !important; } body.luliy-minimal .luliy-arch-header, body.luliy-minimal .luliy-chron-header { border-bottom: none !important; } /* 分页 */ body.luliy-minimal .luliy-arch-pgbtn { background: none !important; border: 1px solid var(--min-line) !important; color: var(--min-title) !important; box-shadow: none !important; } body.luliy-minimal .luliy-arch-pgbtn:hover:not(:disabled) { background: var(--min-title) !important; color: var(--min-bg) !important; } body.luliy-minimal .luliy-arch-pginfo { color: var(--min-muted) !important; font-variant-numeric: tabular-nums; } /* 编年史表格：全站唯一硬边框组件，1px 直角网格，无底色无斑马纹 */ body.luliy-minimal .luliy-chron-table { background: transparent !important; } body.luliy-minimal .luliy-chron-table th, body.luliy-minimal .luliy-chron-table td { border: 1px solid var(--min-line) !important; color: var(--min-text) !important; background: transparent !important; } body.luliy-minimal .luliy-chron-table th { font-weight: 700 !important; color: var(--min-title) !important; background: transparent !important; } body.luliy-minimal .luliy-chron-month-cell { border-right: 1px solid var(--min-line) !important; color: var(--min-title) !important; font-weight: 700 !important; } body.luliy-minimal .luliy-chron-table a { color: var(--min-title) !important; text-decoration: underline; } /* 海报墙：去霓虹，简单灰边框 */ body.luliy-minimal .luliy-poster-item { background: rgba(28,28,30,0.04) !important; border: 1px solid var(--min-line) !important; } body.luliy-minimal .luliy-poster-title { background: linear-gradient(to top, rgba(28,28,30,0.8), transparent) !important; } /* 书架：去木质/霓虹，做成极简层架 */ body.luliy-minimal .luliy-bookcase { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; gap: 40px !important; } body.luliy-minimal .luliy-shelf-plaque { background: none !important; color: var(--min-title) !important; box-shadow: none !important; font-family: var(--min-serif) !important; font-style: italic; font-size: 18px !important; padding-left: 0 !important; margin-left: 0 !important; } body.luliy-minimal .luliy-shelf-count { color: var(--min-muted) !important; } body.luliy-minimal .luliy-shelf-board { background: var(--min-line) !important; opacity: 1 !important; height: 1px !important; box-shadow: none !important; } body.luliy-minimal .luliy-spine { background: rgba(28,28,30,0.06) !important; color: var(--min-title) !important; box-shadow: inset 0 0 0 1px var(--min-line) !important; } body.luliy-minimal .luliy-spine:hover { box-shadow: inset 0 0 0 1px var(--min-line), 0 8px 16px rgba(0,0,0,0.12) !important; } body.luliy-minimal .luliy-spine-title { color: var(--min-title) !important; text-shadow: none !important; } body.luliy-minimal .luliy-spine-tip { background: var(--min-bg) !important; border: 1px solid var(--min-line) !important; color: var(--min-text) !important; } body.luliy-minimal .luliy-spine-note { color: var(--min-muted) !important; } body.luliy-minimal .luliy-flat-book { color: var(--min-title) !important; background: rgba(28,28,30,0.08) !important; } body.luliy-minimal .luliy-reading-label { color: var(--min-muted) !important; } body.luliy-minimal .luliy-book-sub, body.luliy-minimal .luliy-shelf-empty { color: var(--min-muted) !important; } @media (max-width: 720px) { #luliy-min-nav { left: 14px; top: 14px; gap: 6px; font-size: 11px; } body.luliy-minimal .luliy-archives, body.luliy-minimal .luliy-chronicle, body.luliy-minimal .luliy-bookshelf { padding: 8px 20px 60px; } } /* ── 极简系统：强制压过赛博系统的文章面板/标题装饰/文字色 ── */ body.luliy-minimal #postBody, body.luliy-min-article #postBody { background: transparent !important; box-shadow: none !important; border: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.luliy-min-article #postBody h1, body.luliy-min-article #postBody h2, body.luliy-min-article #postBody h3 { color: #1c1c1e !important; border-left: none !important; padding-left: 0 !important; background: none !important; -webkit-text-fill-color: #1c1c1e !important; text-shadow: none !important; } body.luliy-min-article #postBody h2, body.luliy-min-article #postBody h3 { border: none !important; } body.luliy-min-article #postBody h1 { font-family: 'Noto Serif SC', Georgia, serif !important; -webkit-text-fill-color: #1c1c1e !important; border: none !important; border-bottom: 1px solid rgba(28,28,30,0.12) !important; } body.luliy-min-article #postBody p, body.luliy-min-article #postBody li { color: #3a3a3a !important; -webkit-text-fill-color: #3a3a3a !important; } /* 分割线：极细线 + 居中 ◇ 微弱装饰 */ body.luliy-min-article #postBody hr { border: 0 !important; height: 1px !important; background: rgba(28,28,30,0.16) !important; margin: 56px 0 !important; position: relative !important; box-shadow: none !important; } body.luliy-min-article #postBody hr::after { content: '◇'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgb(230,225,212); padding: 0 14px; color: var(--min-muted); font-size: 12px; line-height: 1; } /* 去掉赛博系统给 h2 加的竖条/色块装饰 */ body.luliy-min-article #postBody h2::after, body.luliy-min-article #postBody h2::marker { content: none !important; } /* ════════════════════════════════════════════════════════════ 极简系统 v2 总清洗 —— 彻底压掉所有泄漏的赛博样式 规则：背景全屏 RGB(230,225,212)、文字纯黑/灰、表格无底色、 md 装饰色全清、面板透明、目录在右。优先级用 html/body 双重限定。 ════════════════════════════════════════════════════════════ */ /* —— 1. 背景全屏铺满（html + body + 所有容器都强制纯色） —— */ html:has(body.luliy-minimal), html:has(body.luliy-minimal) body.luliy-minimal { background: rgb(230,225,212) !important; background-image: none !important; } /* —— 2. 内层容器（文章面板/表格容器等）强制透明、去掉磨砂玻璃效果 —— ★ 同样套上 html:has(body.luliy-minimal) 外壳。原来这条选择器特异性 跟"Default 50% iOS26 liquid glass background"那条主题面板规则刚好 打平，谁赢全看文件里谁写在后面——这在多次复制粘贴、分段编辑之后 非常容易被破坏（顺序一旦被打乱，面板的磨砂玻璃背景就会重新盖回来， 正是截图里圆角卡片+背景图纹理的来源）。现在这条选择器比任何主题面板 规则都多两层（html + :has()），优先级稳赢，不再依赖文件顺序。 */ html:has(body.luliy-minimal) body.luliy-minimal, html:has(body.luliy-minimal) body.luliy-minimal #content, html:has(body.luliy-minimal) body.luliy-minimal .markdown-body, html:has(body.luliy-minimal) body.luliy-minimal #postBody, html:has(body.luliy-minimal) body.luliy-minimal .SideNav, html:has(body.luliy-minimal) body.luliy-minimal main, html:has(body.luliy-minimal) body.luliy-minimal article { background: transparent !important; background-image: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: none !important; border-radius: 0 !important; } /* body 本体保留底色（作为全屏背景，首页之外的页面会被下面的背景图规则再覆盖一次） */ html:has(body.luliy-minimal) body.luliy-minimal { background: rgb(230,225,212) !important; } /* —— 2. 所有文字强制黑/灰，清除一切发光、渐变、彩色 —— */ body.luliy-minimal #postBody, body.luliy-minimal #postBody *, body.luliy-minimal .luliy-archives *, body.luliy-minimal .luliy-chronicle *, body.luliy-minimal .luliy-bookshelf * { text-shadow: none !important; } /* md 正文里所有元素：统一深灰，标题近黑 */ body.luliy-min-article #postBody, body.luliy-min-article #postBody p, body.luliy-min-article #postBody li, body.luliy-min-article #postBody span, body.luliy-min-article #postBody td, body.luliy-min-article #postBody div, body.luliy-min-article #postBody strong, body.luliy-min-article #postBody em, body.luliy-min-article #postBody blockquote { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; background: transparent !important; } body.luliy-min-article #postBody h1, body.luliy-min-article #postBody h2, body.luliy-min-article #postBody h3, body.luliy-min-article #postBody h4 { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; } /* md 链接：黑色带下划线 */ body.luliy-min-article #postBody a { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; text-decoration: underline !important; } /* md 里的 blockquote / 代码块 / 高亮：去掉所有底色和彩边，变成极简 */ body.luliy-min-article #postBody blockquote { background: transparent !important; border: none !important; border-left: 2px solid #3a3a3a !important; padding-left: 16px !important; margin-left: 0 !important; } body.luliy-min-article #postBody pre, body.luliy-min-article #postBody code { background: rgba(28,28,30,0.05) !important; color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; border: none !important; box-shadow: none !important; } body.luliy-min-article #postBody pre * { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; text-shadow: none !important; background: transparent !important; } /* mac 三点装饰：不受上面"pre 内全部强制透明背景"规则影响， 保留原本的红/黄/绿配色，否则三个点会变成看不见的黑底黑点 */ body.luliy-min-article #postBody pre .mac-strip { background: rgba(0,0,0,0.04) !important; border-bottom: 1px solid rgba(28,28,30,0.10) !important; } body.luliy-min-article #postBody pre .mac-btn { -webkit-text-fill-color: initial !important; } body.luliy-min-article #postBody pre .mac-btn-red { background: #ff5f57 !important; } body.luliy-min-article #postBody pre .mac-btn-yellow { background: #ffbd2e !important; } body.luliy-min-article #postBody pre .mac-btn-green { background: #28c840 !important; } body.luliy-min-article #postBody pre .mac-lang { color: var(--min-muted) !important; -webkit-text-fill-color: var(--min-muted) !important; } /* —— 3. 编年史表格：全屏背景下无底色、纯黑细线网格、文字纯黑 —— */ body.luliy-minimal .luliy-chron-table, body.luliy-minimal .luliy-chron-table thead, body.luliy-minimal .luliy-chron-table tbody, body.luliy-minimal .luliy-chron-table tr { background: transparent !important; } body.luliy-minimal .luliy-chron-table th, body.luliy-minimal .luliy-chron-table td, body.luliy-minimal .luliy-chron-month-cell { background: transparent !important; color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; border: 1px solid #3a3a3a !important; text-shadow: none !important; } body.luliy-minimal .luliy-chron-table th { font-weight: 700 !important; } body.luliy-minimal .luliy-chron-table a { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; text-decoration: underline !important; } /* 表格外层那个圆角玻璃容器也去掉 */ body.luliy-minimal .luliy-chron-tablewrap, body.luliy-minimal .luliy-chron-scroll-x { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* —— 4. 归档列表：文字纯黑/灰，无底色，激活行不要色块 —— */ body.luliy-minimal .luliy-arch-row, body.luliy-minimal .luliy-arch-row * { background: transparent !important; text-shadow: none !important; } body.luliy-minimal .luliy-arch-name { color: #1c1c1e !important; -webkit-text-fill-color:#1c1c1e !important; } body.luliy-minimal .luliy-arch-date { color: #8c8c8c !important; -webkit-text-fill-color:#8c8c8c !important; } body.luliy-minimal .luliy-arch-row:hover { background: rgba(28,28,30,0.05) !important; } /* 标题 Chronicle/Archives：去掉粉色渐变和下划线发光，改纯黑衬线 */ body.luliy-minimal .luliy-arch-title, body.luliy-minimal .luliy-chron-title, body.luliy-minimal .luliy-book-title { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; background: none !important; text-shadow: none !important; border-bottom: none !important; } /* 标题下面那条粉色装饰线删除 */ body.luliy-minimal .luliy-arch-title::after, body.luliy-minimal .luliy-chron-title::after, body.luliy-minimal .luliy-book-title::after { display: none !important; } /* —— 5. Tab 文字（事件/书影音/海报墙、年份、Weekly|Other）：灰→黑，激活仅下划线 —— */ body.luliy-minimal .luliy-arch-tab, body.luliy-minimal .luliy-chron-cat-tab, body.luliy-minimal .luliy-chron-year-tab { color: #8c8c8c !important; -webkit-text-fill-color: #8c8c8c !important; text-shadow: none !important; background: none !important; } body.luliy-minimal .luliy-arch-tab.is-active, body.luliy-minimal .luliy-chron-cat-tab.is-active, body.luliy-minimal .luliy-chron-year-tab.is-active { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; } body.luliy-minimal .luliy-arch-tab.is-active::after, body.luliy-minimal .luliy-chron-cat-tab.is-active::after, body.luliy-minimal .luliy-chron-year-tab.is-active::after { background: #1c1c1e !important; box-shadow: none !important; } /* —— 6. 目录固定在左侧（之前可能被覆盖） —— */ #luliy-min-toc { position: fixed !important; top: 110px !important; left: 40px !important; right: auto !important; width: 200px !important; text-align: left; z-index: 60 !important; } #luliy-min-toc a { color: #8c8c8c !important; -webkit-text-fill-color:#8c8c8c !important; } #luliy-min-toc a:hover, #luliy-min-toc .luliy-min-toc-h1 { color: #1c1c1e !important; -webkit-text-fill-color:#1c1c1e !important; } /* —— 7. 主页：背景全屏 + 图片居中 —— */ #luliy-min-home { position: fixed !important; inset: 0 !important; background: rgb(230,225,212) !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 50 !important; } /* 注：此前这里有一份 #luliy-min-home-nav（ID 选择器）规则，实际元素用的 是 class="luliy-min-home-nav"，选择器从未命中过，是完全不生效的死代码， 已删除。真正生效的样式见上面 "主页：大图 + 左侧文字导航" 区块。 */ /* —— 8. 切换按钮：极简风、放右上角 —— */ #luliy-system-toggle { background: transparent !important; border: 1px solid #3a3a3a !important; color: #1c1c1e !important; } #luliy-system-toggle:hover { background: #1c1c1e !important; color: rgb(230,225,212) !important; } @media (max-width: 1080px) { #luliy-min-toc { display: none !important; } } @media (max-width: 720px) { /* 首页导航尺寸/位置已改为在 .luliy-min-home-nav 的移动端媒体查询里统一处理 */ } /* —— v2 补丁：标题/表头颜色 + 表格外框，更强覆盖 —— */ body.luliy-minimal .luliy-chron-title, body.luliy-minimal .luliy-arch-title, body.luliy-minimal .luliy-book-title { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; background: none !important; background-clip: border-box !important; -webkit-background-clip: border-box !important; font-family: 'Noto Serif SC', Georgia, serif !important; font-style: normal !important; } /* 表头文字纯黑（去青色） */ body.luliy-minimal .luliy-chron-table th, body.luliy-minimal .luliy-chron-table thead th, body.luliy-minimal .luliy-chron-table thead td { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; } /* 表格内容文字纯黑（去淡蓝） */ body.luliy-minimal .luliy-chron-table tbody td, body.luliy-minimal .luliy-chron-table tbody th, body.luliy-minimal .luliy-chron-month-cell { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; } /* 表格最外层容器：去圆角去描边去阴影 */ body.luliy-minimal .luliy-chron-tablewrap, body.luliy-minimal .luliy-chron-scroll-x, body.luliy-minimal .luliy-chronicle .luliy-chron-body { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; outline: none !important; } /* 表格本身直角无圆角 */ body.luliy-minimal .luliy-chron-table { border-radius: 0 !important; overflow: visible !important; } /* ════════ v3 最终覆盖：用 [data-color-mode] 前缀提足优先级 ════════ 赛博的泄漏规则多是 [data-color-mode="dark"] body:not([data-luliy-theme]) #xxx， 优先级很高。极简覆盖必须同等或更高，这里统一加 [data-color-mode] 前缀。 */ /* 文章面板：彻底透明（压掉 :not([data-luliy-theme]) #postBody 的深色面板） */ [data-color-mode] body.luliy-minimal #postBody, [data-color-mode] body.luliy-minimal .markdown-body, [data-color-mode] body.luliy-minimal #content { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Chronicle/Archives/Book 标题：纯黑衬线（压掉粉色渐变） */ [data-color-mode] body.luliy-minimal .luliy-chron-title, [data-color-mode] body.luliy-minimal .luliy-arch-title, [data-color-mode] body.luliy-minimal .luliy-book-title { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; font-family: 'Noto Serif SC', Georgia, serif !important; text-shadow: none !important; } /* 表头 + 表格内容：纯黑（压掉青色/淡蓝） */ [data-color-mode] body.luliy-minimal .luliy-chron-table th, [data-color-mode] body.luliy-minimal .luliy-chron-table td, [data-color-mode] body.luliy-minimal .luliy-chron-month-cell, [data-color-mode] body.luliy-minimal .luliy-chron-table tbody td, [data-color-mode] body.luliy-minimal .luliy-chron-table thead th { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; background: transparent !important; border: 1px solid #3a3a3a !important; text-shadow: none !important; } /* 归档列表文字 */ [data-color-mode] body.luliy-minimal .luliy-arch-name { color:#1c1c1e !important; -webkit-text-fill-color:#1c1c1e !important; } [data-color-mode] body.luliy-minimal .luliy-arch-date { color:#8c8c8c !important; -webkit-text-fill-color:#8c8c8c !important; } /* Tab 文字 */ [data-color-mode] body.luliy-minimal .luliy-arch-tab, [data-color-mode] body.luliy-minimal .luliy-chron-cat-tab, [data-color-mode] body.luliy-minimal .luliy-chron-year-tab { color:#8c8c8c !important; -webkit-text-fill-color:#8c8c8c !important; } [data-color-mode] body.luliy-minimal .luliy-arch-tab.is-active, [data-color-mode] body.luliy-minimal .luliy-chron-cat-tab.is-active, [data-color-mode] body.luliy-minimal .luliy-chron-year-tab.is-active { color:#1c1c1e !important; -webkit-text-fill-color:#1c1c1e !important; } /* ════════ v4 终极方案：极简模式下重定义所有主题色变量为黑/灰 ════════ 赛博的标题/表头/链接大量用 var(--th-accent) var(--th-h1) 等， 与其逐个覆盖，不如直接把这些变量在极简模式下全设成黑灰， 所有引用它们的地方自动变成极简配色。这是最干净的根治。 */ [data-color-mode] body.luliy-minimal, body.luliy-minimal { --th-accent: #1c1c1e !important; --th-accent-soft: rgba(28,28,30,0.08) !important; --th-accent-hover: rgba(28,28,30,0.15) !important; --th-h1: #1c1c1e !important; --th-h2: #1c1c1e !important; --th-h3: #1c1c1e !important; --th-h4: #1c1c1e !important; --th-strong: #1c1c1e !important; --th-h1-border: none !important; --th-h2-bl: none !important; --th-h2-bg: transparent !important; --luliy-glass-opacity: 0 !important; } /* ════════ v5 暴力覆盖：html 前缀拉满特异性，强制标题/表头黑色 ════════ */ html body.luliy-minimal .luliy-chron-title, html body.luliy-minimal .luliy-arch-title, html body.luliy-minimal .luliy-book-title, html body.luliy-minimal .luliy-chron-table th, html body.luliy-minimal .luliy-chron-table thead th, html body.luliy-minimal .luliy-chron-table td, html body.luliy-minimal .luliy-chron-month-cell, html body.luliy-minimal .luliy-arch-year { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; text-fill-color: #1c1c1e !important; background: transparent !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; text-shadow: none !important; } html body.luliy-minimal .luliy-chron-title, html body.luliy-minimal .luliy-arch-title, html body.luliy-minimal .luliy-book-title, html body.luliy-minimal .luliy-arch-year { font-family: 'Noto Serif SC', Georgia, serif !important; } /* ════════════════════════════════════════════════════════════ 高对比度收尾层 —— 提升所有主题日/夜模式下文章可读性 核心：提高文章面板不透明度（默认 0.5 → 0.82），让文字坐在 更实的底上；强化正文/标题/链接/代码/按钮对比度。 放在文件最末尾，确保优先级最高。 ════════════════════════════════════════════════════════════ */ /* 1. 文章面板不透明度：完全交由用户的"透明度"滑杆控制， 这里不再强制覆盖（之前固定 0.86/0.88 导致滑杆调了也没用， 面板永远是接近全实心的样子，挡住了背景）。 */ /* 2. 白天模式：正文深色、标题更黑，保证 7:1 以上对比 */ [data-color-mode="light"] #postBody, [data-color-mode="light"] #postBody p, [data-color-mode="light"] #postBody li, [data-color-mode="light"] #postBody span, [data-color-mode="light"] #postBody td, [data-color-mode="light"] #postBody figcaption { color: #1a1a1f !important; -webkit-text-fill-color: #1a1a1f !important; } [data-color-mode="light"] #postBody h1, [data-color-mode="light"] #postBody h2, [data-color-mode="light"] #postBody h3, [data-color-mode="light"] #postBody h4 { color: #0d0d12 !important; -webkit-text-fill-color: #0d0d12 !important; } /* 3. 夜间模式：正文足够亮（避免灰蒙蒙），标题更白 */ [data-color-mode="dark"] #postBody, [data-color-mode="dark"] #postBody p, [data-color-mode="dark"] #postBody li, [data-color-mode="dark"] #postBody span, [data-color-mode="dark"] #postBody td, [data-color-mode="dark"] #postBody figcaption { color: #e8e6f0 !important; -webkit-text-fill-color: #e8e6f0 !important; } [data-color-mode="dark"] #postBody h1, [data-color-mode="dark"] #postBody h2, [data-color-mode="dark"] #postBody h3, [data-color-mode="dark"] #postBody h4 { color: #f5f3fb !important; -webkit-text-fill-color: #f5f3fb !important; } /* 4. 链接：日/夜都用高对比强调色 + 下划线，确保可识别 */ [data-color-mode="light"] #postBody a { color: #5b21b6 !important; -webkit-text-fill-color: #5b21b6 !important; text-decoration: underline !important; text-underline-offset: 2px !important; } [data-color-mode="dark"] #postBody a { color: #b9a3ff !important; -webkit-text-fill-color: #b9a3ff !important; text-decoration: underline !important; text-underline-offset: 2px !important; } /* 5. 行内代码：日/夜都有清晰底色和高对比文字 */ [data-color-mode="light"] #postBody code { background: rgba(28,28,34,0.07) !important; color: #9333ea !important; -webkit-text-fill-color: #9333ea !important; padding: 2px 6px; border-radius: 4px; } [data-color-mode="dark"] #postBody code { background: rgba(255,255,255,0.10) !important; color: #d6bcfa !important; -webkit-text-fill-color: #d6bcfa !important; padding: 2px 6px; border-radius: 4px; } /* 6. 功能按钮（浮动面板/抽屉/FAB）高对比 */ [data-color-mode="light"] #luliy-ham-btn span { background: #1a1a1f !important; } [data-color-mode="dark"] #luliy-ham-btn span { background: #f0eef8 !important; } [data-color-mode="light"] #luliy-issues-link, [data-color-mode="light"] #luliy-to-minimal, [data-color-mode="light"] #luliy-top-link { color: #2a2440 !important; } [data-color-mode="dark"] #luliy-issues-link, [data-color-mode="dark"] #luliy-to-minimal, [data-color-mode="dark"] #luliy-top-link { color: #e8e6f0 !important; } /* 7. 文末字数信息条：日/夜都清晰可读 */ [data-color-mode="light"] #luliy-post-footer-bar { color: #555 !important; border-top-color: rgba(0,0,0,0.10) !important; } [data-color-mode="dark"] #luliy-post-footer-bar { color: #aaa !important; border-top-color: rgba(255,255,255,0.12) !important; } /* ════════ 极简模式：隐藏右下角 目录/搜索/回顶 三个悬浮按钮 ════════ */ body.luliy-minimal #luliy-toc-fab, body.luliy-minimal #luliy-search-fab, body.luliy-minimal #luliy-search-bar, body.luliy-minimal #luliy-back-top { display: none !important; } /* ════════ 极简模式：文章表格去掉所有样式，仅保留细黑线边框 ════════ */ html body.luliy-minimal #postBody table { width: 100% !important; display: table !important; border-collapse: collapse !important; border-spacing: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid #1c1c1e !important; margin: 1.5em 0 !important; } html body.luliy-minimal #postBody thead tr, html body.luliy-minimal #postBody tr, html body.luliy-minimal #postBody th, html body.luliy-minimal #postBody td { background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; } html body.luliy-minimal #postBody th, html body.luliy-minimal #postBody td { border: 1px solid #1c1c1e !important; padding: 8px 12px !important; color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; font-weight: 400 !important; text-align: left; } html body.luliy-minimal #postBody th { font-weight: 700 !important; } /* ════════ 极简模式：右侧目录跟随页面滚动，当前项用细竖线高亮 ════════ */ #luliy-min-toc a { border-left: 1px solid transparent; margin-left: -7px; padding-left: 6px; transition: color 0.15s, border-color 0.15s; } #luliy-min-toc a.is-current { color: var(--min-title) !important; -webkit-text-fill-color: var(--min-title) !important; font-weight: 600; border-left: 1px solid var(--min-title); } [data-color-mode] body.luliy-minimal #luliy-min-toc a.is-current { color: #1c1c1e !important; -webkit-text-fill-color: #1c1c1e !important; border-left: 1px solid #1c1c1e !important; } /* ════════ 极简模式：除首页外，加入统一背景图（叠加半透明遮罩保证可读性） ════════ ★ 图片画在 html 上而不是 body 上 —— body 的实际渲染宽度可能比视口窄 （内容区域居中、两侧留白），如果背景图画在 body 上就只会铺满 body 那一条， 两侧露出 html 的纯色底，正是"背景图只在中间"这个问题的根源。 html 才是真正贴满整个视口边缘的元素，背景图必须画在它上面。 ★ 同时把 body 在这个场景下改成完全透明，否则 body 自己的纯色底会盖在 html 的背景图上面，把图整个挡住。 ★ 选择器继续套 html:has(body.luliy-minimal) 外壳并多加一层 :not()， 保证优先级压得过前面"v2 总清洗"那条 background-image:none!important。 */ html:has(body.luliy-minimal):not(:has(body.luliy-min-home-page)) { background-color: rgb(230,225,212) !important; background-image: linear-gradient(rgba(230,225,212,0.01), rgba(230,225,212,0.01)), url('https://free.picui.cn/free/2026/06/28/6a4119ecea136.png') !important; background-size: cover !important; background-position: center top !important; background-attachment: fixed !important; background-repeat: no-repeat !important; } html:has(body.luliy-minimal):not(:has(body.luliy-min-home-page)) body.luliy-minimal { background: transparent !important; background-image: none !important; } @media (max-width: 768px) { /* 移动端 fixed 背景在部分浏览器有性能/兼容问题，改为随页面滚动 */ html:has(body.luliy-minimal):not(:has(body.luliy-min-home-page)) { background-attachment: scroll !important; } } /* ════════ 极简模式：隐藏顶部「预计阅读」和文末字数/阅读时长信息条 ════════ */ body.luliy-minimal #luliy-readmeta, body.luliy-minimal .luliy-readmeta, body.luliy-minimal #luliy-post-footer-bar { display: none !important; } /* ── 顶部操作组：[Link] [简洁模式]（沉思者图标右边）── */ #luliy-top-actions { position: fixed; top: 14px; z-index: 10002; display: inline-flex; align-items: center; gap: 14px; height: 44px; } #luliy-top-link, #luliy-to-minimal { background: transparent; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; color: #fff; padding: 4px 2px; opacity: 0.78; transition: opacity 0.2s, transform 0.2s; text-decoration: none; white-space: nowrap; filter: drop-shadow(0 0 6px rgba(110,199,255,0.5)); } #luliy-top-link:hover, #luliy-to-minimal:hover { opacity: 1; transform: translateY(-1px); } #luliy-to-minimal { border: 1px solid rgba(255,255,255,0.35); border-radius: 14px; padding: 4px 12px; } [data-color-mode="light"] #luliy-to-minimal { border-color: rgba(0,0,0,0.25); } @media (max-width: 600px) { #luliy-top-actions { gap: 8px; } #luliy-top-link, #luliy-to-minimal { font-size: 11px; } #luliy-to-minimal { padding: 3px 8px; } } /* ════════════════════════════════════════════════════════════ 极简模式：点击水墨特效 若干深浅不一的墨滴从点击处向外溅开，由大变小、逐渐淡出。 纯 CSS 动画，JS 只负责按随机参数生成/销毁 DOM 节点（见 enhance.js 的 initMinimalInkClick）。 ════════════════════════════════════════════════════════════ */ .luliy-ink-wrap { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 9999; } .luliy-ink-drop { position: absolute; left: 0; top: 0; border-radius: 50%; background: #1c1c1e; opacity: 0; transform: translate(0, 0) scale(1.4); animation: luliyInkDrop 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) forwards; } @keyframes luliyInkDrop { 0% { opacity: var(--luliy-drop-op, 0.5); transform: translate(0, 0) scale(1.4); } 100% { opacity: 0; transform: translate(var(--luliy-dx), var(--luliy-dy)) scale(0.15); } } /* ════════════════════════════════════════════════════════════ 极简模式：文章 H2~H6 标题下方的毛笔笔触装饰（浅灰、静态常驻， 跟点击特效无关）。用渐变模拟一笔扫过的笔锋，左淡入、右淡出。 H1 不加这个装饰。 ════════════════════════════════════════════════════════════ */ body.luliy-min-article #postBody h2, body.luliy-min-article #postBody h3, body.luliy-min-article #postBody h4, body.luliy-min-article #postBody h5, body.luliy-min-article #postBody h6 { position: relative; padding-bottom: 14px; } body.luliy-min-article #postBody h2::after, body.luliy-min-article #postBody h3::after, body.luliy-min-article #postBody h4::after, body.luliy-min-article #postBody h5::after, body.luliy-min-article #postBody h6::after { content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, rgba(140,140,140,0) 0%, rgba(140,140,140,0.55) 12%, rgba(140,140,140,0.32) 45%, rgba(140,140,140,0.5) 70%, rgba(140,140,140,0) 100%); } body.luliy-min-article #postBody h3::after, body.luliy-min-article #postBody h4::after, body.luliy-min-article #postBody h5::after, body.luliy-min-article #postBody h6::after { width: 48px; height: 4px; } /* ── 修复：卡片宽度滑块无响应 ─────────────────────────────── 原规则 width:min(var(--luliy-cat-w,1500px),100%) 里 100% 的参照物是 body（Gmeek 居中 max-width 容器），一旦滑块值超过容器宽度就被封顶 （默认 1700 早已超过，所以调大无反应）。 这里把卡片区拉成通栏（突破 body max-width），宽度上限 --luliy-cat-max 由 JS 按实测视口宽度写入（已扣除 48px 内边距并补偿 html 的 zoom）， 滑块 900~2000 全程有响应，只受屏幕实际宽度约束。 */ #luliy-cats-wrap { width: 100vw; max-width: none !important; margin-left: calc(50% - 50vw); } #luliy-cats, #luliy-cats-more-row { width: min(var(--luliy-cat-w, 1700px), var(--luliy-cat-max, calc(100vw - 48px))); }