@charset "utf-8"; /* ═══════════════════════════════════════════════════════════════ ☾ my moonlit dream — 月島蛍 × 星井遊 · 梦向备份 · Tistory Skin style.css v2.0.4 · ハイキュー!! ──────────────────────────────────────────────────────────── 单页整合(carrd风) · 明亮暖色 · 色调统一(奶黄×樱粉×暖棕) · 圆润字体 🔧 颜色 / 字体 / 圆角 / 间距 全部在下面 :root 里改 v2.0 更新：封面更慢的淡入 · 左侧头像栏+category · 右侧对话框模拟 光标粉色拖影 · 板块间距加大 · 手机端细字体 · 文章页修复 v2.0.4 更新：① 简介图 1:1·无边框·与卡片同底色 ② 漂浮小人改轻幅上下浮·去阴影 ③ script.js 顶部 BGM 替换处加醒目标注 ④ 手机端 UI 全面缩小·主页紧凑单卡片 ═══════════════════════════════════════════════════════════════ */ :root { /* ── 🔧 统一配色（明亮暖色 · 奶黄 + 樱粉 + 暖棕）────────── */ --c-bg: #FDF6E7; /* 页面背景 · 奶黄（明亮）*/ --c-paper: #FFFCF6; /* 卡片底 · 近白暖调 */ --c-paper-2: #FCF1DC; /* 次级底 · 浅黄 */ --c-pink: #E8AAB2; /* 樱粉 */ --c-pink-dp: #C97486; /* 深玫瑰粉 · 主色（链接/图标/激活）*/ --c-pink-soft: #F8E5E7; /* 浅粉 · 标签/hover 底 */ /* 🎨🔧【手机端 日历/运势/天气 三个板块的背景色 —— 想改就改这一行】 默认改成更亮更浅的近白色；想更明显可换更白的 #FFFFFF，或带点暖调的 #FFFDF6 等 */ --mob-card-bg: #FFFEFB; --c-brown: #A07E63; /* 暖棕 · 次级文字 */ --c-brown-dp: #6B5340; /* 深棕 · 标题/按钮 */ --c-text: #574531; /* 正文（高对比，易读）*/ --c-text-soft: #998269; /* 弱文字 */ --c-line: #EFE0CD; /* 描边 */ --c-line-soft: #F6ECDC; /* 浅描边 */ --c-accent: #DE8C97; /* 暖调点缀（少量）*/ --c-moon: #E2C57F; /* 柔和月光金（仅 ☾ ✦ 小装饰）*/ /* 🔧 对话气泡配色（#2 消息模拟）── 左=奶黄 右=浅棕 ──── */ --c-bub-l: #F8E8B4; /* 左侧气泡 · 黄 */ --c-bub-l-bd: #ECD697; /* 左侧气泡描边 */ --c-bub-r: #705949; /* 右侧气泡 · 棕（用户提供的参考色）*/ --c-bub-r-bd: #5E4A3C; /* 右侧气泡描边 */ --c-bub-r-tx: #FBF3E6; /* 右侧气泡文字（奶白，保证深底可读）*/ /* 兼容旧变量名（指向粉色，避免任何遗漏引用出错）*/ --c-sage: var(--c-pink); --c-sage-dp: var(--c-pink-dp); --c-sage-soft: var(--c-pink-soft); /* ── 🔧 字体（主体圆润；英文标题保留优雅衬线）──────────── */ --f-display: "Cormorant Garamond", "Noto Serif SC", serif; /* 英文标题（优雅）*/ --f-serif: "Noto Serif SC", "Noto Serif JP", serif; /* 中日衬线（标题/副标题）*/ --f-sans: "Quicksand", "Noto Sans SC", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; /* 拉丁=Quicksand(更细圆体)；中日文统一=Noto Sans SC */ /* ── 🔧 圆角 / 阴影 / 宽度 / 间距 / 缓动 ──────────────── */ --r-card: 24px; --r-md: 16px; --r-sm: 12px; --r-pill: 999px; --sh-card: 0 16px 44px -28px rgba(120,90,70,.30); --sh-soft: 0 10px 26px -20px rgba(120,90,70,.26); --sh-pop: 0 20px 48px -22px rgba(120,90,70,.36); --wrap: 840px; --gap: 40px; --hd-h: 62px; --ease: cubic-bezier(.22, 1, .36, 1); /* 顺滑缓出（主缓动）*/ --ease-soft: cubic-bezier(.4, 0, .2, 1); /* 柔和进出 */ } /* ━━━━━━━━━━ reset ━━━━━━━━━━ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; } input { font-family: inherit; } ul, ol { list-style: none; } body { font-family: var(--f-sans); font-size: 13.5px; font-weight: 300; line-height: 1.95; color: var(--c-text); background: var(--c-bg); letter-spacing: .012em; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚠ 页面类型显示规则（#13 修复核心 · 请勿删除） + 引导脚本会给 加： · is-home → 首页：显示首页整合面板，隐藏文章区 · no-splash → 非首页 或 本会话已进入过 → 不弹封面 即使 script.js 加载失败，文章页也能正常显示（CSS 兜底）。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .hm-sections { display: none; } html.is-home .hm-sections { display: block; } .hm-sections.show { display: block; } /* 兼容旧逻辑，无副作用 */ .t-content { display: block; } html.is-home .t-content { display: none; } html:not(.is-home) .splash, html.no-splash .splash { display: none; } /* 不加 !important，返回封面按钮可临时覆盖 */ /* JS 失效兜底：已跳过封面的页面强制可见（is-ready 的进场动画不受影响）*/ html.no-splash .site-wrap.is-loading { opacity: 1; pointer-events: auto; } html.no-splash .site-wrap.is-loading .reveal { opacity: 1; transform: none; } /* script.js 未加载时，整体隐藏依赖脚本的悬浮组件（聊天框 / 播放器）*/ html:not(.js-on) .bgm-wrap, html:not(.js-on) .chat-wrap { display: none; } /* 极淡月/星装饰（纯色字符，可在 HTML 删 .bg-deco）*/ .bg-deco { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .bg-deco i { position: absolute; font-style: normal; user-select: none; color: var(--c-moon); } .bg-deco i:nth-child(1){ top: 14%; left: 7%; font-size: 20px; opacity:.42; animation: twinkle 6s ease-in-out infinite; } .bg-deco i:nth-child(2){ top: 70%; left: 9%; font-size: 12px; opacity:.32; animation: float 16s ease-in-out infinite .6s; } .bg-deco i:nth-child(3){ top: 24%; right: 8%; font-size: 15px; opacity:.4; animation: twinkle 7s ease-in-out infinite 1.2s; } .bg-deco i:nth-child(4){ top: 80%; right: 9%; font-size: 13px; opacity:.3; animation: float 19s ease-in-out infinite .3s; } .bg-deco i:nth-child(5){ display: none; } @keyframes float { 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-12px) rotate(8deg); } } @keyframes twinkle { 0%,100%{ opacity:.16; transform: scale(.85); } 50%{ opacity:.5; transform: scale(1.08); } } /* ━━━━━━━━━━ 🔧 背景丝带 & 漂浮花瓣（不喜欢可删 skin.html 的 .bg-ribbons 整段）━━━━━━━━━━ */ .bg-ribbons { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .bg-ribbon { position: absolute; display: block; } /* 🔧 丝带图片位置 & 大小：替换 images/ribon.png ┌─ 可调旋钮（电脑端）──────────────────────────────── │ top = 向下移多少（数字越大越往下；原 -10px，现已下移） │ left = 水平位置（负数往左出血） │ width = 丝带大小（数字越小越小；原 min(28vw,300px)，现已缩小） └──────────────────────────────────────────────── */ .bg-ribbon-tl { top: 44px; left: -14px; width: min(19vw, 205px); height: auto; opacity: .55; transform-origin: 20% 0; animation: ribbonSway 16s ease-in-out infinite; } @keyframes ribbonSway { 0%,100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(1.6deg) translateY(7px); } } .bg-petal { position: absolute; top: -26px; width: 11px; height: 15px; opacity: 0; background: linear-gradient(140deg, #F6CDD4, var(--c-pink)); border-radius: 72% 28% 62% 38% / 54% 62% 38% 46%; animation: petalFall linear infinite; will-change: transform, opacity; } .bg-petal.p1 { left: 12%; animation-duration: 21s; animation-delay: -3s; } .bg-petal.p2 { left: 34%; animation-duration: 26s; animation-delay: -14s; width: 9px; height: 12px; } .bg-petal.p3 { left: 62%; animation-duration: 23s; animation-delay: -8s; } .bg-petal.p4 { left: 84%; animation-duration: 28s; animation-delay: -19s; width: 8px; height: 11px; } @keyframes petalFall { 0% { transform: translate3d(0,-3vh,0) rotate(0deg); opacity: 0; } 6% { opacity: .42; } 88% { opacity: .42; } 100% { transform: translate3d(7vw,106vh,0) rotate(300deg); opacity: 0; } } @media (max-width: 840px) { /* 🔧 手机端丝带：top 下移 / width 缩小 */ .bg-ribbon-tl { top: 30px; width: 27vw; opacity: .4; } } /* ━━━━━━━━━━ 自定义光标 + 🔧 #12 粉色拖影 ━━━━━━━━━━ */ /* 仅当 script.js 正常加载（html.cursor-on）才显示，避免脚本缺失时圆点卡在左上角 */ .cur-dot, .cur-ring { display: none; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; } html.cursor-on .cur-dot, html.cursor-on .cur-ring { display: block; } .cur-dot { width: 6px; height: 6px; background: var(--c-pink-dp); } .cur-ring { width: 26px; height: 26px; border: 1px solid rgba(201,116,134,.45); transition: width .26s var(--ease), height .26s var(--ease), background .26s var(--ease), border-color .26s var(--ease); } .cur-ring.hover { width: 40px; height: 40px; background: rgba(248,229,231,.5); border-color: var(--c-pink-dp); } /* 拖影粒子（由 script.js 生成池并复用，流畅不卡顿）*/ .cur-trail { position: fixed; top: 0; left: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; pointer-events: none; z-index: 9998; opacity: 0; background: radial-gradient(circle, rgba(236,160,172,.95) 0%, rgba(236,160,172,.45) 45%, rgba(236,160,172,0) 72%); box-shadow: 0 0 8px rgba(232,170,178,.55); will-change: transform, opacity; } .cur-trail.tr-star { background: none; box-shadow: none; width: auto; height: auto; margin: -6px 0 0 -5px; color: var(--c-pink); font-size: 10px; line-height: 1; } .cur-trail.on { animation: trailFade .72s var(--ease) forwards; } @keyframes trailFade { 0% { opacity: .9; transform: scale(var(--ts, 1)); } 100% { opacity: 0; transform: scale(.12) translateY(3px); } } @media (hover: none), (pointer: coarse) { .cur-dot, .cur-ring, .cur-trail { display: none !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 封面 | Splash（图片 1:1 居中放大 · 文字在下 · 已去掉 enter 按钮） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .splash { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: var(--c-bg); cursor: pointer; overflow: hidden; transition: opacity 1.25s var(--ease-soft), visibility 1.25s; /* 🔧 #1 点击进入的淡出时长 */ } .splash.sp-out { opacity: 0; visibility: hidden; pointer-events: none; } /* 竖向居中：图片在上、文字在下 */ .splash-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 26px; max-width: 460px; padding: 32px; text-align: center; } /* 🔧 #1 封面图文淡入：错落上浮（想更慢就把 1.6s/延迟调大）*/ .splash .sp-img-col, .splash .sp-text-col { opacity: 1; } /* 无 JS 时的安全可见态 */ .splash.sp-anim .sp-img-col { animation: spReveal 1.6s var(--ease) .1s both; } .splash.sp-anim .sp-text-col { animation: spReveal 1.6s var(--ease) .5s both; } @keyframes spReveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* 🔧 封面图：1:1 正方形 · 放大（改尺寸只改 width，height 会跟随保持正方形）*/ .sp-img-col { width: 100%; display: flex; justify-content: center; } .sp-img-frame { position: relative; width: min(340px, 78vw); aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; background: var(--c-paper-2); border: 1px solid var(--c-line); box-shadow: var(--sh-card); } .sp-cover { width: 100%; height: 100%; object-fit: cover; } /* 文字区：整体偏小、克制（占比不大）*/ .sp-text-col { max-width: 360px; } .sp-eyebrow { font-family: var(--f-sans); font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--c-pink-dp); margin-bottom: 10px; } .sp-title { font-family: var(--f-display); font-weight: 500; font-size: 30px; line-height: 1.12; color: var(--c-brown-dp); margin-bottom: 8px; } .sp-sub { font-family: var(--f-serif); font-size: 12.5px; color: var(--c-text-soft); line-height: 1.7; } .sp-sub b { color: var(--c-pink-dp); font-weight: 400; } .sp-tag { display: inline-block; margin-top: 7px; font-size: 10px; letter-spacing: .14em; color: var(--c-text-soft); } .sp-hint { margin-top: 18px; font-size: 9.5px; letter-spacing: .14em; color: var(--c-text-soft); opacity: .72; animation: spHintPulse 2.6s ease-in-out infinite; } @keyframes spHintPulse { 0%,100%{ opacity: .4; } 50%{ opacity: .82; } } /* ━━━━━━━━━━ 主体淡入（#1 进入主页动画更慢）━━━━━━━━━━ */ .site-wrap { position: relative; z-index: 1; opacity: 1; } .site-wrap.is-loading { opacity: 0; pointer-events: none; } .site-wrap.is-ready { opacity: 1; animation: wrapIn 1.4s var(--ease) both; } /* 🔧 #1 */ @keyframes wrapIn { from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 头部 | Header（category 已移至左侧头像栏下） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .site-hd { position: sticky; top: 0; z-index: 200; background: rgba(253,246,231,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .45s var(--ease), background .4s var(--ease); } .site-hd.scrolled { border-bottom-color: var(--c-line); box-shadow: 0 6px 22px -20px rgba(120,90,70,.5); } .hd-row { max-width: var(--wrap); margin: 0 auto; height: var(--hd-h); display: flex; align-items: center; gap: 12px; padding: 0 26px; } .hd-logo { display: flex; align-items: center; gap: 9px; margin-right: auto; } .hd-logo-img { height: 38px; width: auto; } .hd-logo-txt { font-family: var(--f-display); font-weight: 500; font-size: 23px; letter-spacing: .01em; color: var(--c-brown-dp); } .hd-logo-txt::before { content: "☾ "; color: var(--c-moon); font-size: 16px; } .hd-nav { display: flex; align-items: center; gap: 8px; } .hd-home { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--c-brown); transition: background .26s var(--ease), color .26s var(--ease); } .hd-home:hover { background: var(--c-pink-soft); color: var(--c-pink-dp); } .hd-cover-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: var(--c-moon); background: var(--c-paper-2); transition: transform .55s var(--ease), background .3s var(--ease), color .3s var(--ease); } .hd-cover-ico:hover { transform: rotate(180deg); background: var(--c-pink-soft); color: var(--c-pink-dp); } .hd-search-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--c-brown); transition: background .26s var(--ease), color .26s var(--ease); } .hd-search-ico:hover { background: var(--c-pink-soft); color: var(--c-pink-dp); } /* 搜索栏 */ .hd-searchbar { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s var(--ease), opacity .35s var(--ease), padding .45s var(--ease); } .hd-searchbar.open { max-height: 70px; opacity: 1; padding-bottom: 14px; } .hd-sf { display: flex; align-items: center; gap: 8px; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 7px 8px 7px 18px; box-shadow: var(--sh-soft); } .hd-si { flex: 1; border: none; outline: none; background: none; font-size: 13px; color: var(--c-text); letter-spacing: .04em; min-width: 0; } .hd-si::placeholder { color: var(--c-text-soft); } .hd-ss { width: 30px; height: 30px; border-radius: 50%; background: var(--c-brown-dp); color: #fff; display: grid; place-items: center; flex-shrink: 0; transition: background .26s var(--ease); } .hd-ss:hover { background: var(--c-pink-dp); } .hd-sx { color: var(--c-text-soft); font-size: 13px; padding: 0 7px; transition: color .2s var(--ease); } .hd-sx:hover { color: var(--c-accent); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 页面主体（#11 整体居中） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pg-body { max-width: var(--wrap); margin: 0 auto; padding: 34px 26px 78px; position: relative; } .site-main { width: 100%; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ★ #4 #5 左侧用户栏 | Side Rail（头像 + category） ≥1320px：固定在居中内容左侧；更窄屏自动收成居中小栏 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .side-rail { position: fixed; left: calc(50% - var(--wrap) / 2 - 248px); top: calc(var(--hd-h) + 40px); width: 224px; z-index: 150; display: flex; flex-direction: column; align-items: center; gap: 18px; } /* ① 头像（悬停显示名字 · 点击展开社交图标）*/ .rail-ava-box { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; } .rail-ava { position: relative; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: var(--c-paper-2); border: 2px solid var(--c-line); box-shadow: var(--sh-soft); transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .rail-ava img { width: 100%; height: 100%; object-fit: cover; } .rail-ava-moon { display: none; position: absolute; inset: 0; place-items: center; font-size: 26px; color: var(--c-moon); } .rail-ava.no-img .rail-ava-moon { display: grid; } .rail-ava:hover { transform: translateY(-3px) scale(1.04); border-color: var(--c-pink); box-shadow: var(--sh-pop); } .rail-ava[aria-expanded="true"] { border-color: var(--c-pink-dp); } /* 🔧 #7 用户名提示（悬停头像时浮现）—— 柔和奶白卡片 UI（与卡片统一） 想换底色/字色：改 background / color；想去掉小月亮：删 .rn-moon 规则 + html 里那行 */ .rail-name { position: absolute; top: calc(100% + 11px); left: 50%; transform: translate(-50%, -5px) scale(.95); display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: var(--r-pill); white-space: nowrap; background: var(--c-paper); border: 1px solid var(--c-line); color: var(--c-pink-dp); font-family: var(--f-sans); font-size: 11.5px; font-weight: 400; letter-spacing: .24em; box-shadow: var(--sh-pop); opacity: 0; pointer-events: none; z-index: 6; transition: opacity .4s var(--ease), transform .4s var(--ease); } .rail-name .rn-moon { color: var(--c-moon); font-size: 11px; letter-spacing: 0; transform: translateY(.5px); } .rail-name .rn-tx { display: inline-block; text-indent: .24em; } /* 抵消末尾字距，左右更对称 */ .rail-name::before { /* 指向头像的小三角（与卡片同色描边）*/ content: ""; position: absolute; left: 50%; top: -5px; transform: translateX(-50%) rotate(45deg); width: 9px; height: 9px; background: var(--c-paper); border-left: 1px solid var(--c-line); border-top: 1px solid var(--c-line); border-radius: 3px 0 0 0; } .rail-ava-box:hover .rail-name { opacity: 1; transform: translate(-50%, 0) scale(1); } .rail-ava-box.soc-open .rail-name { opacity: 0; } /* 展开社交时让位 */ /* 社交图标（点击头像展开 · 仅图标）*/ .rail-soc { width: 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); } .rail-soc.open { grid-template-rows: 1fr; } .rail-soc-in { overflow: hidden; min-height: 0; display: flex; justify-content: center; gap: 10px; } .rail-soc.open .rail-soc-in { padding-top: 14px; } .rail-soc-in { transition: padding-top .5s var(--ease); } .rail-soc-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--c-paper); border: 1px solid var(--c-line); color: var(--c-brown); box-shadow: var(--sh-soft); opacity: 0; transform: translateY(-6px) scale(.85); transition: background .26s var(--ease), color .26s var(--ease), border-color .26s var(--ease), transform .45s var(--ease), opacity .45s var(--ease); } .rail-soc.open .rail-soc-btn { opacity: 1; transform: none; } .rail-soc.open .rail-soc-btn:nth-child(1) { transition-delay: .05s; } .rail-soc.open .rail-soc-btn:nth-child(2) { transition-delay: .12s; } .rail-soc.open .rail-soc-btn:nth-child(3) { transition-delay: .19s; } .rail-soc-btn:hover { background: var(--c-pink-dp); border-color: var(--c-pink-dp); color: #fff; transform: translateY(-2px); } /* ② category（#5 移到头像下方）*/ .rail-cat { width: 100%; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-soft); padding: 8px; } .rail-cat-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border-radius: var(--r-sm); color: var(--c-pink-dp); transition: background .26s var(--ease); } @media (hover: hover) and (pointer: fine) { .rail-cat-btn:hover { background: var(--c-pink-soft); } } .rail-cat-tt { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 400; } .rail-cat-tt::before { content: "☾ "; color: var(--c-moon); letter-spacing: 0; } .rail-cat-arr { transition: transform .45s var(--ease); flex-shrink: 0; pointer-events: none; } .rail-cat-btn[aria-expanded="true"] .rail-cat-arr { transform: rotate(180deg); } /* 🔧 #1 整个 category 按钮（含右侧箭头）都可点：箭头 SVG 不再单独吃掉点击， 触摸点落在按钮任意位置（文字 / 空白 / 箭头）都能展开收起 */ .rail-cat-btn { touch-action: manipulation; } .rail-cat-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .62s var(--ease-soft); } /* 🔧 展开更慢更顺滑（原 .55s）*/ .rail-cat-panel.open { grid-template-rows: 1fr; } .rail-cat-in { overflow: hidden; min-height: 0; } .rail-cat-panel.open .rail-cat-in { padding-top: 4px; } /* 分类菜单（#5 子项目字体粗细、字号统一）*/ .cat-menu { display: flex; flex-direction: column; gap: 1px; } .cat-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: var(--r-sm); text-align: left; color: var(--c-text); font-size: 12.5px; font-weight: 400; letter-spacing: .02em; transition: background .24s var(--ease), color .24s var(--ease), padding-left .24s var(--ease); } .cat-row:hover { background: var(--c-pink-soft); color: var(--c-pink-dp); padding-left: 14px; } .cat-row.active { background: var(--c-pink-soft); color: var(--c-pink-dp); } .cat-ic { width: 17px; height: 17px; display: grid; place-items: center; color: var(--c-pink-dp); flex-shrink: 0; } .cat-ic svg { width: 15px; height: 15px; } .cat-tx { flex: 1; font-family: var(--f-sans); font-weight: 400; font-size: 12.5px; } /* 🔧 #5 统一粗细 */ .cat-chev { width: 10px; height: 10px; color: var(--c-text-soft); transition: transform .4s var(--ease); flex-shrink: 0; pointer-events: none; } .cat-parent[aria-expanded="true"] > .cat-chev { transform: rotate(180deg); } /* 🔧 #1 子分类展开按钮整体可点（含箭头）；图标也设为穿透，触摸落点更宽容 */ .cat-parent { touch-action: manipulation; } .cat-ic { pointer-events: none; } /* 折叠子目录（grid 0fr→1fr，丝滑且支持多级嵌套）*/ .cat-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); } .cat-sub > .cat-sub-in { overflow: hidden; min-height: 0; padding-left: 13px; } .cat-parent[aria-expanded="true"] + .cat-sub { grid-template-rows: 1fr; } .cat-subrow { padding: 8px 11px; font-size: 12.5px; position: relative; } /* #5 与上级同字号同粗细 */ .cat-subrow::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: var(--c-line); } .cat-subrow .cat-ic { color: var(--c-brown); } .cat-sub-2 > .cat-sub-in { padding-left: 13px; } .cat-subrow-2 { font-size: 12.5px; } .cat-subrow-2 .cat-ic { color: var(--c-text-soft); } .cat-locked { color: var(--c-text-soft); } .cat-locked .cat-ic { color: var(--c-text-soft); } /* ════════════════════════════════════════════════════════ #15 Tistory 原生默认分类（[##_category_list_##] 自动输出，下面只做素净外观） —— 完整展示分类树；仅做配色/缩进/hover/当前高亮，不加任何自定义结构 ════════════════════════════════════════════════════════ */ .cat-tree, .cat-tree ul { list-style: none; margin: 0; padding: 0; } .cat-tree { font-family: var(--f-sans); font-size: 12.5px; line-height: 1.5; } .cat-tree li { position: relative; } /* 每一行（分类链接）*/ .cat-tree a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; word-break: break-word; transition: background .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease); } @media (hover: hover) and (pointer: fine) { .cat-tree a:hover { background: var(--c-pink-soft); color: var(--c-pink-dp); padding-left: 16px; } } .cat-tree a.is-current { background: var(--c-pink-soft); color: var(--c-pink-dp); font-weight: 500; } /* 文章数量（Tistory 输出的计数，通用地变淡靠右；不显示也无妨）*/ .cat-tree a .c_cnt, .cat-tree a .cnt, .cat-tree a .count { margin-left: auto; color: var(--c-text-soft); font-size: 10.5px; font-weight: 400; flex: 0 0 auto; } /* 子分类：缩进 + 柔和虚线引导 */ .cat-tree ul { margin: 2px 0 5px; padding-left: 12px; border-left: 1px dashed var(--c-line); } .cat-tree ul ul { padding-left: 12px; } /* #嵌套父分类 → 展开/收起按钮（JS 加 .cat-parent / .cat-collapsed / 包一层 .cat-subwrap）*/ .cat-tree .cat-parent > a { cursor: pointer; } /* 展开/收起动画：grid 0fr↔1fr（精确高度、丝滑，支持多级嵌套）·柔和缓动 + 淡入淡出，避免生硬 */ .cat-subwrap { display: grid; grid-template-rows: 1fr; } .cat-anim .cat-subwrap { transition: grid-template-rows .5s var(--ease-soft); } .cat-tree li.cat-collapsed > .cat-subwrap { grid-template-rows: 0fr; } .cat-subwrap > ul { overflow: hidden; min-height: 0; margin: 0; opacity: 1; } .cat-anim .cat-subwrap > ul { transition: opacity .42s var(--ease-soft); } .cat-tree li.cat-collapsed > .cat-subwrap > ul { opacity: 0; } .cat-tree .cat-chev { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; margin-left: 4px; color: var(--c-text-soft); flex: 0 0 auto; pointer-events: auto; cursor: pointer; border-radius: 50%; transition: transform .4s var(--ease-soft), background .2s var(--ease), color .2s var(--ease); } .cat-tree li.cat-parent > a .cat-chev:active { background: var(--c-pink-soft); color: var(--c-pink-dp); } .cat-tree .cat-chev-ic { width: 12px; height: 12px; } .cat-tree li.cat-parent:not(.cat-collapsed) > a .cat-chev { transform: rotate(180deg); } /* 每个分类前的粉色文件夹图标 */ .cat-tree .cat-fico { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; color: var(--c-pink); flex: 0 0 auto; } .cat-tree .cat-fico-ic { width: 15px; height: 15px; } .cat-tree a.is-current .cat-fico { color: var(--c-pink-dp); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ★ 首页整合面板（单一界面 · #7 板块间距加大） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .hm-sections { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-card); } .hm-block { padding: 48px 46px; } /* 🔧 #7 原 36/42 → 48/46 */ .hm-block + .hm-block { border-top: 1px solid var(--c-line-soft); } /* ── ① 简介（#3 上方留白加大）── */ .hm-block.hm-intro { padding: 40px 46px 54px; } /* 🔧 #d1 顶部留白缩短 */ .hm-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } /* 🔧 ① 简介图框：正方形 1:1 · 无边框 · 底色与卡片一致（想改回竖图 → 1/1 改成 3/3.7）*/ .hm-intro-img { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1/1; background: var(--c-paper); border: none; } .hm-intro-img img { width: 100%; height: 100%; object-fit: cover; } .frame-tag { position: absolute; left: 12px; bottom: 12px; padding: 3px 11px; border-radius: var(--r-pill); background: rgba(255,252,246,.92); color: var(--c-pink-dp); font-size: 10px; letter-spacing: .14em; backdrop-filter: blur(4px); } .hm-intro-txt .eye { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--c-pink-dp); margin-bottom: 9px; } .hm-intro-txt .eye::before { content: "✦ "; color: var(--c-moon); } .hm-intro-txt h2 { font-family: var(--f-display); font-weight: 500; font-size: 34px; line-height: 1.15; color: var(--c-brown-dp); margin-bottom: 5px; } .hm-intro-txt .h-cjk { font-family: var(--f-sans); font-size: 13.5px; color: var(--c-pink-dp); margin-bottom: 16px; letter-spacing: .06em; } .hm-intro-txt p { font-size: 13px; color: var(--c-text); line-height: 2.05; margin-bottom: 8px; } /* ── ② 纪念日（#10 文案已改为「月を歩いている」）── */ .hm-block.hm-anniv { padding-top: 30px; padding-bottom: 30px; } /* 与上下板块空隙更小 */ .hm-anniv { text-align: center; position: relative; overflow: hidden; } /* 装饰：散落的星月 + 数字后柔光 + 底部星线 */ .anniv-deco { position: absolute; pointer-events: none; user-select: none; line-height: 1; } .anniv-deco-1 { top: 20px; left: 11%; font-size: 13px; color: var(--c-pink); opacity: .5; } .anniv-deco-2 { top: 34px; right: 14%; font-size: 17px; color: var(--c-moon); opacity: .6; } .anniv-deco-3 { bottom: 52px; left: 16%; font-size: 12px; color: var(--c-moon); opacity: .5; } .anniv-deco-4 { bottom: 26px; right: 13%; font-size: 19px; color: var(--c-pink); opacity: .42; } .anniv-deco-5 { top: 48%; left: 7%; font-size: 11px; color: var(--c-pink); opacity: .4; } .anniv-days { position: relative; } .anniv-days::before { content: ""; position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); width: 240px; height: 130px; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(232,170,178,.18), rgba(226,197,127,.08) 45%, transparent 72%); } .anniv-days > * { position: relative; } .anniv-stars { margin-top: 18px; font-size: 12px; letter-spacing: .3em; color: var(--c-moon); opacity: .65; } .anniv-eye { font-size: 12px; letter-spacing: .3em; color: var(--c-pink-dp); margin-bottom: 10px; font-family: var(--f-sans); } .anniv-eye::before, .anniv-eye::after { content: "✦"; color: var(--c-moon); margin: 0 8px; } .anniv-since { font-family: var(--f-display); font-size: 20px; letter-spacing: .06em; color: var(--c-text-soft); margin-bottom: 14px; } .anniv-days { font-family: var(--f-display); font-weight: 500; font-size: 54px; line-height: 1; color: var(--c-brown-dp); } .anniv-days .plus { color: var(--c-pink-dp); font-size: 30px; vertical-align: 6px; margin-right: 2px; } .anniv-days .unit { font-family: var(--f-sans); font-weight: 300; font-size: 13px; letter-spacing: .1em; color: var(--c-text-soft); margin-left: 8px; vertical-align: 8px; } .anniv-clock { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 7px 18px; background: var(--c-paper-2); border: 1px solid var(--c-line); border-radius: var(--r-pill); font-size: 12px; letter-spacing: .08em; color: var(--c-brown); font-variant-numeric: tabular-nums; } .anniv-clock .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-pink-dp); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%,100%{ opacity: 1; } 50%{ opacity: .3; } } /* 区块标题 */ .hm-secttl { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .hm-secttl .ttl { font-family: var(--f-display); font-weight: 500; font-size: 25px; letter-spacing: .03em; color: var(--c-brown-dp); display: flex; align-items: baseline; gap: 10px; } .hm-secttl .ttl::before { content: "☾"; color: var(--c-moon); font-size: 15px; } .hm-secttl .ttl small { font-family: var(--f-sans); font-size: 11.5px; font-weight: 300; letter-spacing: .12em; color: var(--c-text-soft); } .hm-secttl .ln { flex: 1; height: 1px; background: var(--c-line); } /* ── ★ 精选 featured（位于纪念日下方 · 横向 3 张 · 图片 4:3）── */ .hm-block.hm-feat { padding: 34px 46px 38px; } .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feat-card { display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden; cursor: default; background: var(--c-paper-2); border: 1px solid var(--c-line-soft); transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease); } .feat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-soft); border-color: var(--c-pink); } .feat-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--c-paper-2); } .feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); } .feat-card:hover .feat-img img { transform: scale(1.06); } .feat-ov { position: absolute; inset: 0; background: rgba(201,116,134,.06); opacity: 0; transition: opacity .3s var(--ease); } .feat-card:hover .feat-ov { opacity: 1; } .feat-info { padding: 12px 14px 15px; } /* featured 文字已按需求隐藏（skin.html 中已注释，想恢复取消注释即可）*/ .feat-tag { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); background: var(--c-pink-soft); color: var(--c-pink-dp); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; } .feat-title { font-family: var(--f-sans); font-size: 13.5px; color: var(--c-text); line-height: 1.5; } /* ── ④ 更新日志 ── */ .upd-list { display: flex; flex-direction: column; } .upd-item { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; font-size: 13px; border-bottom: 1px dashed var(--c-line-soft); } .upd-item:last-child { border-bottom: none; } .upd-d { font-family: var(--f-display); font-size: 13.5px; color: var(--c-pink-dp); letter-spacing: .04em; flex: 0 0 auto; } .upd-sep { color: var(--c-moon); flex: 0 0 auto; } .upd-t { color: var(--c-text-soft); text-decoration: none; transition: color .2s var(--ease); } .upd-t:hover { color: var(--c-pink-dp); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Tistory 内容区（#13 修复后的文章 / 列表 / 留言页） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* — 分类/搜索/标签页头 — */ .lst-wrap { margin-bottom: 30px; } .lst-head { text-align: center; margin-bottom: 26px; padding: 40px 24px 0; } .lst-eye { font-size: 11px; letter-spacing: .3em; color: var(--c-pink-dp); margin-bottom: 8px; } .lst-title { font-family: var(--f-display); font-weight: 500; font-size: 30px; color: var(--c-brown-dp); line-height: 1.25; } .lst-cnt { margin-top: 6px; font-size: 11.5px; letter-spacing: .12em; color: var(--c-text-soft); } /* #卡片框：与主页 .hm-sections 同款（奶白底 + 描边 + 圆角 + 阴影），文章列表放在框内 */ .lst-card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 26px; } .lst-empty { text-align: center; padding: 40px 20px; color: var(--c-text-soft); font-size: 13px; line-height: 2; } /* 目录型列表（s_list_rep）· 自适应排版 有封面（含 Tistory 提供了代表图的加密文章）→ 1:1 封面方格：默认不显示文章名，hover/轻触浮现标题 无封面（纯文字 / 加密文章未提供代表图）→ 整行文字列表卡：保留标题（恢复 v2.5.6 之前的列表形式） 分类由 JS(enhanceList) 即时判定：缩略图加载成功 = 封面方格；为空 / 加载失败 = 整行列表 （每页篇数由 Tistory 后台「글 수」统一设定；列表方式需设为 목록형，见说明文档）*/ .lst-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; } .lst-item { min-width: 0; } .lst-link { display: flex; flex-direction: column; gap: 9px; padding: 0; background: transparent; border: none; box-shadow: none; transition: transform .3s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* —— 封面方格（默认态：避免有图文章在分类前后布局抖动）—— */ .lst-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--c-paper-2); border: 1px solid var(--c-line); box-shadow: var(--sh-soft); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .lst-thumb .lst-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .lst-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; border-radius: inherit; background: rgba(87,69,49,.50); opacity: 0; transition: opacity .32s var(--ease); } .lst-ov-tt { font-family: var(--f-sans); font-weight: 500; font-size: 13.5px; line-height: 1.5; color: #FFF8EE; letter-spacing: .02em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* 封面态默认隐藏卡片下方文字（标题改为 hover / 轻触浮层）*/ .lst-item .lst-body { display: none; } @media (hover: hover) and (pointer: fine) { .lst-item:not(.no-thumb) .lst-link:hover .lst-thumb { transform: translateY(-3px); border-color: var(--c-pink); box-shadow: var(--sh-pop); } .lst-item:not(.no-thumb) .lst-link:hover .lst-ov { opacity: 1; } } /* 触屏无 hover → 纯封面卡片；轻触显示居中标题浮层，再点才跳转 （JS enhanceListTouch 给首次轻触的卡片加 .lst-revealed）*/ @media (hover: none), (pointer: coarse) { .lst-item:not(.no-thumb) .lst-link.lst-revealed .lst-thumb { border-color: var(--c-pink); box-shadow: var(--sh-pop); } .lst-item:not(.no-thumb) .lst-link.lst-revealed .lst-ov { opacity: 1; } } /* —— 无封面 → 整行文字列表卡（恢复 v2.5.6 之前的列表形式：占整行、标题为主）—— */ .lst-item.no-thumb { grid-column: 1 / -1; } .lst-item.no-thumb .lst-thumb { display: none; } .lst-item.no-thumb .lst-body { display: flex; } .lst-item.no-thumb .lst-link { flex-direction: column; gap: 6px; padding: 17px 22px; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-soft); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } @media (hover: hover) and (pointer: fine) { .lst-item.no-thumb .lst-link:hover { border-color: var(--c-pink); box-shadow: var(--sh-pop); } } .lst-item.no-thumb .lst-sum { display: none; } /* —— 共通文字 —— */ .lst-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .lst-tt { font-family: var(--f-sans); font-weight: 400; font-size: 15px; color: var(--c-brown-dp); line-height: 1.6; } .lst-link:hover .lst-tt { color: var(--c-pink-dp); } .lst-sum { font-size: 12px; color: var(--c-text-soft); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lst-meta { margin-top: 2px; font-size: 10.5px; letter-spacing: .08em; color: var(--c-text-soft); } .lst-meta i { font-style: normal; color: var(--c-moon); margin: 0 4px; } /* 列表网格响应式：电脑 4 列 → 平板 3 列 → 手机 2 列（仅影响有封面方格；无封面整行不受列数影响）*/ @media (max-width: 1080px) { .lst-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media (max-width: 720px) { .lst-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .lst-card { padding: 14px; } .lst-ov { padding: 10px; } .lst-ov-tt { font-size: 12px; line-height: 1.4; -webkit-line-clamp: 4; letter-spacing: 0; } .lst-item.no-thumb .lst-link { padding: 14px 16px; } } /* — 首页/分类「展开型」文章卡片（s_index_article_rep）— */ .post-card { margin-bottom: 18px; } .pc-link { display: flex; gap: 18px; padding: 22px 24px; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-soft); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .pc-link:hover { transform: translateY(-3px); border-color: var(--c-pink); box-shadow: var(--sh-pop); } .pc-thumb { flex-shrink: 0; width: 132px; border-radius: var(--r-md); overflow: hidden; background: var(--c-paper-2); align-self: stretch; } .pc-thumb img { width: 100%; height: 100%; object-fit: cover; min-height: 96px; } .pc-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .pc-cat { font-size: 10.5px; letter-spacing: .14em; color: var(--c-pink-dp); } .pc-cat::before { content: "☾ "; color: var(--c-moon); } .pc-title { font-family: var(--f-serif); font-weight: 400; font-size: 16.5px; color: var(--c-brown-dp); line-height: 1.55; } .pc-link:hover .pc-title { color: var(--c-pink-dp); } .pc-sum { font-size: 12.5px; color: var(--c-text-soft); line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pc-meta { margin-top: auto; padding-top: 6px; font-size: 10.5px; letter-spacing: .08em; color: var(--c-text-soft); } .pc-meta i { font-style: normal; color: var(--c-moon); margin: 0 4px; } /* — 文章正文页（s_permalink_article_rep）— */ .post-view { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 46px 48px 40px; } .pv-head { text-align: center; padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--c-line-soft); } .pv-cat { display: inline-block; padding: 3px 14px; border-radius: var(--r-pill); background: var(--c-pink-soft); color: var(--c-pink-dp); font-size: 10.5px; letter-spacing: .14em; margin-bottom: 14px; transition: background .26s var(--ease), color .26s var(--ease); } .pv-cat:hover { background: var(--c-pink-dp); color: #fff; } .pv-title { font-family: var(--f-sans); font-weight: 500; font-size: 25px; color: var(--c-brown-dp); line-height: 1.6; } .pv-meta { margin-top: 10px; font-size: 11px; letter-spacing: .12em; color: var(--c-text-soft); } .pv-meta::before { content: "☾ "; color: var(--c-moon); } /* 正文排版（你发的文章会自动套用这些样式，#14 风格统一）*/ .pv-body { font-size: 13.5px; line-height: 2.1; } .pv-body a { color: var(--c-pink-dp); border-bottom: 1px dashed var(--c-pink); } .pv-body a:hover { color: var(--c-brown-dp); border-bottom-color: var(--c-brown-dp); } .pv-body h1, .pv-body h2, .pv-body h3, .pv-body h4 { font-family: var(--f-serif); font-weight: 400; color: var(--c-brown-dp); line-height: 1.5; margin: 1.5em 0 .6em; letter-spacing: .01em; } .pv-body h1 { font-size: 22px; } .pv-body h2 { font-size: 19px; } .pv-body h3 { font-size: 16px; } .pv-body h4 { font-size: 14.5px; } .pv-body p { margin: 0 0 1.05em; } .pv-body img, .pv-body figure img { border-radius: var(--r-sm); margin: 1.1em auto; box-shadow: var(--sh-soft); } .pv-body figcaption { text-align: center; font-size: 11px; color: var(--c-text-soft); margin-top: -4px; } .pv-body hr { border: none; height: 1px; background: var(--c-line); margin: 2em 0; position: relative; overflow: visible; } .pv-body hr::after { content: "☾ ✦"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--c-paper); padding: 0 12px; color: var(--c-moon); font-size: 11px; letter-spacing: .3em; } .pv-body blockquote { margin: 1.4em 0; padding: 14px 20px; border-left: 3px solid var(--c-pink); background: var(--c-paper-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--c-text-soft); font-family: var(--f-serif); font-style: italic; } .pv-body code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--c-pink-soft); color: var(--c-pink-dp); padding: 2px 7px; border-radius: 6px; } .pv-body pre { background: #4a3a2b; color: #f6efe4; padding: 18px 20px; border-radius: var(--r-sm); overflow-x: auto; margin: 1.4em 0; font-size: 12.5px; line-height: 1.7; } .pv-body pre code { background: none; color: inherit; padding: 0; } .pv-body ul, .pv-body ol { margin: 0 0 1.05em; padding-left: 1.5em; } .pv-body ul li { list-style: none; position: relative; } .pv-body ul li::before { content: "✦"; position: absolute; left: -1.3em; color: var(--c-pink); font-size: 10px; top: .35em; } .pv-body ol li { list-style: decimal; } .pv-body table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.4em 0; font-size: 12.5px; border: 1px solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; } .pv-body th, .pv-body td { padding: 11px 14px; border-bottom: 1px solid var(--c-line-soft); text-align: left; } .pv-body th { background: var(--c-pink-soft); color: var(--c-brown-dp); font-weight: 400; } .pv-body tr:last-child td { border-bottom: none; } /* 标签 / 管理 / 评论 */ .pv-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; } .pv-tags a { background: var(--c-pink-soft); color: var(--c-pink-dp); padding: 4px 12px; border-radius: var(--r-pill); font-size: 11px; letter-spacing: .04em; transition: background .24s var(--ease), color .24s var(--ease); } .pv-tags a::before { content: "# "; } .pv-tags a:hover { background: var(--c-pink-dp); color: #fff; } .pv-admin { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } .pv-admin a { font-size: 10.5px; letter-spacing: .1em; color: var(--c-text-soft); padding: 4px 12px; border: 1px solid var(--c-line); border-radius: var(--r-pill); transition: color .22s var(--ease), border-color .22s var(--ease); } .pv-admin a:hover { color: var(--c-pink-dp); border-color: var(--c-pink); } .pv-comments { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--c-line); } .pv-comments a { color: var(--c-pink-dp); } /* — 保护文章（Backup 上锁分类）— */ .post-protected { text-align: center; padding: 56px 30px; background: var(--c-paper); border: 1px dashed var(--c-pink); border-radius: var(--r-card); box-shadow: var(--sh-soft); } .pp-lock { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-pink-soft); color: var(--c-pink-dp); margin-bottom: 16px; } .pp-title { font-family: var(--f-serif); font-weight: 400; font-size: 19px; color: var(--c-brown-dp); margin-bottom: 5px; } .pp-date { font-size: 11px; letter-spacing: .12em; color: var(--c-text-soft); margin-bottom: 14px; } .pp-msg { font-size: 12.5px; color: var(--c-text-soft); margin-bottom: 20px; } .pp-form { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; position: relative; z-index: 2; } .pp-form input[type="password"] { border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 9px 18px; outline: none; background: var(--c-paper-2); font-size: 12.5px; transition: border-color .25s var(--ease); touch-action: manipulation; } .pp-form input[type="password"]:focus { border-color: var(--c-pink); } .pp-form button { background: var(--c-brown-dp); color: #fff; border-radius: var(--r-pill); padding: 9px 22px; font-size: 12px; letter-spacing: .1em; transition: background .26s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; position: relative; z-index: 2; } .pp-form button:hover { background: var(--c-pink-dp); } /* 列表页（分类 / 标签 / 检索）即便被 Tistory 一并输出「文章正文 / 加密输入页」，也一律隐藏： 缩略图网格下方不再多出一个重复的「输入密码 / 文章正文」块（解决手机端分类页底部多出加密页的问题）。 ⚠ 加密功能本身完全保留——点进单篇加密文章(tt-body-page)时密码输入页照常显示、可正常解锁。 */ body#tt-body-category .post-view, body#tt-body-category .post-protected, body#tt-body-tag .post-view, body#tt-body-tag .post-protected, body#tt-body-search .post-view, body#tt-body-search .post-protected { display: none; } /* — 翻页 — */ .paging { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 38px 0 6px; } .pg-btn, .pg-num { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); border: 1px solid transparent; background: transparent; font-size: 12.5px; color: var(--c-text-soft); transition: background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease); } @media (hover: hover) and (pointer: fine) { .pg-btn:hover, .pg-num[href]:hover { background: var(--c-pink-soft); color: var(--c-pink-dp); } } .pg-nums { display: inline-flex; gap: 4px; } /* 翻页箭头：颜色加深一点 */ .pg-btn { color: var(--c-brown-dp); } /* 当前页：只保留文字（去掉背景底色），用主色加粗标示 */ .pg-num:not([href]), .pg-num.selected, .pg-nums .selected .pg-num, .paging .selected, .pg-num[aria-current], .pg-num.current { background: transparent; color: var(--c-pink-dp); border-color: transparent; font-weight: 600; cursor: default; } .pg-btn.no-more-prev, .pg-btn.no-more-next { opacity: .4; pointer-events: none; } /* — 留言簿 Guest book — */ .guest-wrap { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 14px 34px 36px; } .guest-wrap a { color: var(--c-pink-dp); } /* Tistory 默认评论/留言组件的轻度统一（textarea 等）*/ .t-content textarea { width: 100%; border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: 12px 14px; background: var(--c-paper-2); font-family: var(--f-sans); font-size: 12.5px; outline: none; resize: vertical; min-height: 88px; } .t-content input[type="text"], .t-content input[type="password"] { border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 8px 14px; background: var(--c-paper-2); font-size: 12.5px; outline: none; } /* ⚠ Tistory 文章内置组件修复（附件下载块 / 링크预览 / 视频卡片 等 data-ke 组件） 这些组件的容器高度按系统字体+常规行高设计；继承皮肤的较大行高后文字会被「削掉下半截」。 这里把组件内部行高/字距恢复成常规值，文字即完整显示。 */ .t-content figure[data-ke-type], .t-content figure[data-ke-type] * { line-height: 1.5 !important; letter-spacing: 0 !important; } .t-content figure[data-ke-type="file"], .t-content figure[data-ke-type="file"] * { font-family: -apple-system, BlinkMacSystemFont, "Noto Sans KR", "PingFang SC", "Microsoft YaHei", sans-serif !important; font-weight: 400 !important; } /* ━━━━━━━━━━ 页脚 ━━━━━━━━━━ */ .site-ft { border-top: 1px solid var(--c-line); margin-top: 26px; } .ft-row { max-width: var(--wrap); margin: 0 auto; padding: 36px 26px 48px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .ft-links { display: flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .06em; color: var(--c-text-soft); } .ft-links a { transition: color .22s var(--ease); } .ft-links a:hover { color: var(--c-pink-dp); } .ft-sep { color: var(--c-moon); } .ft-stats { display: flex; gap: 16px; font-size: 11px; letter-spacing: .1em; color: var(--c-text-soft); } .ft-stats b { color: var(--c-pink-dp); font-weight: 400; } .ft-cover { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-paper); color: var(--c-brown); font-size: 11.5px; letter-spacing: .06em; transition: background .26s var(--ease), color .26s var(--ease), border-color .26s var(--ease); } .ft-cover:hover { background: var(--c-pink-soft); color: var(--c-pink-dp); border-color: var(--c-pink); } .ft-copy { font-family: var(--f-display); font-size: 12.5px; letter-spacing: .06em; color: var(--c-text-soft); } .ft-copy::before { content: "☾ "; color: var(--c-moon); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✉ #2 #9 右侧对话框模拟 | Chat Widget ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ✉ 收起态「消息小气泡」容器（只是右侧那颗小按钮的位置；展开后的大对话框在「中央弹窗」区统一控制） 🔧 收起按钮位置：right = 离右边多少 / top = 离顶部多少（可自由调） ⚠️ 本容器千万不要加 transform / filter / will-change！ 只要祖先带 transform，里面 position:fixed 的「中央弹窗」和半透明遮罩 就会改以本容器为基准 → 弹窗卡在右上角、遮罩盖不满全屏（这正是之前的 bug）。 要让弹窗居中，就必须保持本容器无 transform。*/ .chat-wrap { position: fixed; right: 26px; top: 22%; z-index: 9998; display: flex; flex-direction: column; align-items: flex-end; /* 外层容器本身不吃点触（收起时它仍占着「隐藏面板」那块面积，会挡住网页点触） —— 只让真正可见可点的按钮/面板接收点触 */ pointer-events: none; } .chat-wrap > * { pointer-events: auto; } /* 小人(已 none)除外，其余子元素恢复可点 */ /* 🔧 #9 漂浮 Q 版图片（替换 images/chat-chibi.png）*/ /* 🔧 ② 漂浮小人：仅上下轻轻漂浮 · 无旋转 · 无阴影 浮动幅度改下方 -5px（越小越轻）· 速度改 4.6s（越大越慢）*/ .chat-mascot { width: 170px; height: auto; margin-bottom: -6px; position: relative; z-index: 2; pointer-events: none; user-select: none; animation: mascotFloat 1.5s ease-in-out infinite; } @keyframes mascotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* 收起态：消息弹窗 */ .chat-pop { display: inline-flex; align-items: center; gap: 9px; padding: 12px 19px; border-radius: var(--r-pill); background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: var(--sh-pop); font-size: 12.5px; letter-spacing: .04em; color: var(--c-text); animation: popNudge 3.6s ease-in-out infinite; transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .chat-pop:hover { border-color: var(--c-pink); color: var(--c-pink-dp); transform: translateY(-2px); animation-play-state: paused; } @keyframes popNudge { 0%, 86%, 100% { transform: translateY(0); } 90% { transform: translateY(-4px); } 94% { transform: translateY(0); } 97% { transform: translateY(-2px); } } .chat-pop-ic { display: grid; place-items: center; color: var(--c-pink-dp); } .chat-pop-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c-pink-dp); flex-shrink: 0; } .chat-pop-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--c-pink-dp); animation: popPing 1.8s ease-out infinite; } @keyframes popPing { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } .chat-pop-dot.off { display: none; } .chat-wrap.open .chat-pop { display: none; } /* 展开态：对话面板（中央弹窗模式；定位/动画统一在文件末尾的中央弹窗区块）*/ .chat-panel { background: var(--c-paper); border: 1px solid var(--c-line); overflow: hidden; } .chat-ph { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: var(--c-paper-2); border-bottom: 1px solid var(--c-line-soft); } .chat-ph-t { font-family: var(--f-sans); font-size: 13px; font-weight: 400; letter-spacing: .1em; color: var(--c-pink-dp); } /* 与气泡同字体 */ .chat-ph-min { width: 22px; height: 22px; border-radius: 8px; color: var(--c-text-soft); font-size: 14px; line-height: 1; transition: background .2s var(--ease), color .2s var(--ease); } .chat-ph-min:hover { background: var(--c-pink-soft); color: var(--c-pink-dp); } .chat-body { position: relative; cursor: pointer; } .chat-stream { position: absolute; inset: 0 0 30px 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 13px 8px; display: flex; flex-direction: column; gap: 9px; } .chat-stream::-webkit-scrollbar { width: 4px; } .chat-stream::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 4px; } .chat-hint { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 9.5px; letter-spacing: .2em; color: var(--c-text-soft); background: linear-gradient(to top, var(--c-paper) 55%, transparent); pointer-events: none; transition: opacity .4s var(--ease); } .chat-hint.off { opacity: 0; } /* 气泡（#2 左黄 / 右浅棕 · 弹入动画流畅）*/ .cb { max-width: 80%; padding: 10px 14px; border-radius: 15px; font-size: 12.5px; line-height: 1.8; color: var(--c-brown-dp); word-break: break-word; animation: cbPop .52s var(--ease) both; } .cb-l { align-self: flex-start; background: var(--c-bub-l); border: 1px solid var(--c-bub-l-bd); border-bottom-left-radius: 5px; } .cb-r { align-self: flex-end; background: var(--c-bub-r); border: 1px solid var(--c-bub-r-bd); border-bottom-right-radius: 5px; color: var(--c-bub-r-tx); } .cb-r .td { background: rgba(251,243,230,.6); } @keyframes cbPop { from { opacity: 0; transform: translateY(9px) scale(.9); } to { opacity: 1; transform: none; } } /* 打字中（三点跳动 → 正式气泡）*/ .cb.typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; } .cb .td { width: 5px; height: 5px; border-radius: 50%; background: rgba(107,83,64,.45); animation: tdBounce 1s ease-in-out infinite; } .cb .td:nth-child(2) { animation-delay: .15s; } .cb .td:nth-child(3) { animation-delay: .3s; } @keyframes tdBounce { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-3px); opacity: 1; } } /* 对话结束 / 重播 */ .chat-end { align-self: center; display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; font-size: 10px; letter-spacing: .18em; color: var(--c-text-soft); animation: cbPop .52s var(--ease) both; } .chat-end .ce-replay { width: 25px; height: 25px; border-radius: 50%; background: var(--c-pink-soft); color: var(--c-pink-dp); display: grid; place-items: center; font-size: 12px; transition: background .25s var(--ease), color .25s var(--ease), transform .4s var(--ease); } .chat-end .ce-replay:hover { background: var(--c-pink-dp); color: #fff; transform: rotate(-180deg); } /* ━━━━━━━━━━ BGM 播放器（#6 默认打开 · 收起停右下角）━━━━━━━━━━ */ .bgm-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 400; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; /* 🔧 播放器「统一配色」总开关：整台播放器只用这两种颜色 --bgm-accent = 主色（按钮/进度/音符） --bgm-surface = 浅底（按钮底/选中底） 想整体换成棕色系 → 把 --bgm-accent 改成 var(--c-brown-dp)、--bgm-surface 改成 var(--c-paper-2) */ /* 🔧 播放器「统一配色」总开关：默认为原来的粉色 --bgm-accent = 按钮/进度/音符/文字主色 --bgm-surface = 浅底（按钮底/选中底） 想改成奶白低调 → --bgm-accent: var(--c-brown)；--bgm-surface: var(--c-paper-2) */ --bgm-accent: var(--c-pink-dp); --bgm-surface: var(--c-pink-soft); /* 🔧 修复：同对话框——收起时容器仍占着「隐藏面板」面积会挡住网页点触，故容器透传点触 */ pointer-events: none; } .bgm-wrap > * { pointer-events: auto; } /* 收起后的右下角小条（替代原来的圆形 icon，点击重新展开）*/ .bgm-mini { display: none; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: var(--sh-pop); font-size: 11.5px; letter-spacing: .04em; color: var(--c-brown); transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .bgm-mini:hover { border-color: var(--bgm-accent); color: var(--bgm-accent); transform: translateY(-2px); } .bgm-wrap.collapsed .bgm-mini { display: inline-flex; } .bgm-mini-n { color: var(--bgm-accent); font-size: 13px; line-height: 1; display: inline-flex; align-items: center; } .bgm-mini-n svg { display: block; } .bgm-mini.playing .bgm-mini-n { animation: noteBeat 1.1s ease-in-out infinite; } @keyframes noteBeat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.18); } } .bgm-mini-t { max-width: 132px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bgm-panel { width: 250px; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-pop); padding: 16px; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.97); transform-origin: bottom right; transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s; } .bgm-panel.open { opacity: 1; visibility: visible; transform: none; } .bgm-ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .bgm-ph-t { font-family: var(--f-display); font-size: 15px; letter-spacing: .06em; color: var(--bgm-accent); } .bgm-ph-close { width: 22px; height: 22px; border-radius: 8px; color: var(--c-text-soft); font-size: 15px; line-height: 1; transition: background .2s var(--ease), color .2s var(--ease); } .bgm-ph-close:hover { background: var(--bgm-surface); color: var(--bgm-accent); } .bgm-now { font-size: 12px; color: var(--c-text); padding: 8px 11px; background: var(--c-paper-2); border-radius: var(--r-sm); margin-bottom: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bgm-prog-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .bgm-tt { font-size: 9.5px; color: var(--c-text-soft); min-width: 26px; font-variant-numeric: tabular-nums; } .bgm-prog { position: relative; flex: 1; height: 4px; background: var(--c-line); border-radius: var(--r-pill); cursor: pointer; } .bgm-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--bgm-accent); border-radius: var(--r-pill); } .bgm-thumb { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bgm-accent); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--bgm-surface); } .bgm-ctrl-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; } .bgm-ctrl-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--bgm-surface); color: var(--bgm-accent); display: grid; place-items: center; font-size: 13px; line-height: 1; transition: background .26s var(--ease), color .26s var(--ease), transform .26s var(--ease); } .bgm-ctrl-btn:hover { background: var(--bgm-accent); color: #fff; transform: scale(1.08); } .bgm-play { width: 48px; height: 48px; background: var(--bgm-accent); color: #fff; font-size: 14px; box-shadow: var(--sh-soft); } .bgm-play:hover { background: #B85F76; color: #fff; } .bgm-play-ic { display: block; } .bgm-vol-row { display: flex; align-items: center; gap: 8px; color: var(--c-text-soft); margin-bottom: 12px; } .bgm-vol-r { flex: 1; -webkit-appearance: none; appearance: none; height: 3px; background: var(--c-line); border-radius: var(--r-pill); outline: none; } .bgm-vol-r::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--bgm-accent); cursor: pointer; } .bgm-vol-r::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--bgm-accent); cursor: pointer; } .bgm-plist { max-height: 132px; overflow-y: auto; border-top: 1px solid var(--c-line-soft); padding-top: 8px; } .bgm-plist::-webkit-scrollbar { width: 4px; } .bgm-plist::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 4px; } .bgm-pi { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--r-sm); cursor: pointer; transition: background .2s var(--ease); } .bgm-pi:hover { background: var(--c-paper-2); } .bgm-pi.active { background: var(--bgm-surface); } .bgm-pi.active .bgm-pt { color: var(--bgm-accent); } .bgm-pn { font-family: var(--f-display); font-size: 12px; color: var(--c-text-soft); min-width: 18px; } .bgm-pt { font-size: 11.5px; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bgm-plist-empty { font-size: 11px; color: var(--c-text-soft); text-align: center; line-height: 1.7; padding: 14px 6px; } /* ━━━━━━━━━━ 悬浮组件可拖拽（BGM / 聊天框，按住任意处即可拖动）━━━━━━━━━━ */ .bgm-ph, .chat-pop, .chat-ph { cursor: grab; touch-action: none; } .bgm-wrap.dragging, .chat-wrap.dragging, .dragging .bgm-ph, .dragging .chat-pop, .dragging .chat-ph { cursor: grabbing !important; } .dragging, .dragging * { user-select: none; -webkit-user-select: none; } /* 回到顶部 */ .scroll-top { position: fixed; right: 26px; bottom: 82px; z-index: 390; width: 38px; height: 38px; border-radius: 50%; background: var(--c-paper); border: 1px solid var(--c-line); color: var(--c-pink-dp); font-size: 15px; box-shadow: var(--sh-soft); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s, background .26s var(--ease); } .scroll-top.show { opacity: 1; visibility: visible; transform: none; } .scroll-top:hover { background: var(--c-pink-soft); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ☾ 首页右侧栏：日历 + 每日占卜（新增） · 默认隐藏；仅「首页 + 宽屏(≥1344px)」显示（见文件底部媒体查询） · 位置镜像左侧头像栏，固定在内容右侧，不挤占原有居中排版 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .side-rail-r { display: none; /* 默认不显示，由媒体查询在宽屏首页打开 */ position: fixed; right: calc(50% - var(--wrap) / 2 - 248px); top: calc(var(--hd-h) + 40px); width: 224px; z-index: 150; flex-direction: column; gap: 16px; } html:not(.js-on) .side-rail-r { display: none !important; } /* 无 JS 时隐藏（日历/占卜依赖脚本）*/ /* ① 日历卡 */ .cal-box { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 16px 16px 18px; } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cal-title { display: flex; flex-direction: column; align-items: center; line-height: 1.2; } .cal-eye { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--c-pink-dp); } .cal-ym { font-family: var(--f-display); font-size: 15.5px; letter-spacing: .02em; color: var(--c-brown-dp); margin-top: 2px; } .cal-nav { width: 26px; height: 26px; border-radius: 50%; color: var(--c-pink-dp); font-size: 17px; line-height: 1; display: grid; place-items: center; transition: background .22s var(--ease), color .22s var(--ease); } .cal-nav:hover { background: var(--c-pink-soft); } .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; } .cal-week span { text-align: center; font-size: 9.5px; letter-spacing: .04em; color: var(--c-text-soft); padding: 3px 0; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cal-cell { aspect-ratio: 1 / 1; display: grid; place-items: center; font-size: 11px; color: var(--c-text); border-radius: 9px; font-variant-numeric: tabular-nums; } .cal-empty { visibility: hidden; } .cal-today { background: var(--c-pink-dp); color: #fff; font-weight: 500; box-shadow: 0 6px 14px -8px var(--c-pink-dp); position: relative; } .cal-today::after { content: "☾"; position: absolute; top: -8px; right: -5px; font-size: 9px; color: var(--c-moon); } /* 「今天」可点开予定时：手型 + 轻轻呼吸的小圈，提示这一格可点 */ .cal-cell.cal-can-todo { cursor: pointer; } .cal-cell.cal-can-todo::before { content: ""; position: absolute; inset: -3px; border-radius: 11px; border: 1.5px solid var(--c-pink); opacity: .55; animation: calTodoPing 2.4s ease-out infinite; pointer-events: none; } @keyframes calTodoPing { 0% { transform: scale(.86); opacity: .6; } 70%,100% { transform: scale(1.18); opacity: 0; } } /* ✅ 今日予定 / todo —— 共用样式（电脑右栏的下拉 .cal-todo + 手机底部的卡片 .todo-box）*/ .cal-todo { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .42s var(--ease), margin-top .42s var(--ease); margin-top: 0; } .cal-todo > .cal-todo-pad { min-height: 0; overflow: hidden; } .cal-todo.open { grid-template-rows: 1fr; margin-top: 12px; } .cal-todo-pad { border-top: 1px solid var(--c-line-soft); padding-top: 12px; } .cal-todo-hint { margin-top: 9px; text-align: center; font-size: 9.5px; letter-spacing: .12em; color: var(--c-pink-dp); cursor: pointer; user-select: none; transition: color .2s var(--ease); } .cal-todo-hint:hover { color: var(--c-brown-dp); } .todo-box { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 14px 15px 15px; } .todo-eye { font-family: var(--f-sans); font-size: 14px; font-weight: 400; letter-spacing: .14em; color: var(--c-pink-dp); margin-bottom: 13px; text-align: center; } .todo-list { display: flex; flex-direction: column; gap: 7px; } .todo-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.55; color: var(--c-brown-dp); } .todo-box-tick { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 2px; border-radius: 4px; border: 1.5px solid var(--c-pink); background: var(--c-pink-soft); } .todo-tx { flex: 1; word-break: break-word; } .todo-empty { font-size: 11.5px; color: var(--c-text-soft); letter-spacing: .03em; } /* ② 今日运势 —— 头像 + 名字 + 星级 + 中文运势（按示意图：左圆头像，右侧信息）*/ .horo-box { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: 0 14px 36px -24px rgba(201,116,134,.30); padding: 15px 15px 16px; } .horo-eye { font-family: var(--f-sans); font-size: 14px; font-weight: 400; letter-spacing: .14em; color: var(--c-pink-dp); margin-bottom: 13px; text-align: center; } .horo-list { display: flex; flex-direction: column; gap: 14px; } .horo-row { display: flex; align-items: center; gap: 12px; animation: horoIn .5s var(--ease) both; } .horo-row:nth-child(2){ animation-delay: .1s; } @keyframes horoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* 圆形头像（可换图：上传 horo-tsukishima.png / horo-hoshii.png；缺失时显示月亮占位）*/ .horo-ava { position: relative; flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--c-paper-2); border: 1.5px solid var(--c-pink); box-shadow: var(--sh-soft); } .horo-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .horo-ava-fb { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: var(--c-moon); } .horo-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .horo-name { font-family: var(--f-sans); font-size: 13.5px; color: var(--c-brown-dp); letter-spacing: .02em; } .horo-stars { font-size: 11px; letter-spacing: .08em; color: var(--c-moon); white-space: nowrap; } .horo-text { font-size: 10.5px; line-height: 1.6; color: var(--c-text); } /* ③ 今日の仙台 —— 天气（线条 SVG 图标 · 简约）*/ .wx-box { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: 0 14px 36px -24px rgba(201,116,134,.30); padding: 15px 16px 15px; } .wx-eye { font-family: var(--f-sans); font-size: 14px; font-weight: 400; letter-spacing: .14em; color: var(--c-pink-dp); margin-bottom: 13px; text-align: center; } .wx-main { display: flex; align-items: center; gap: 13px; } .wx-ico { width: 38px; height: 38px; flex-shrink: 0; color: var(--c-pink-dp); display: inline-flex; } /* 粉色图标 */ .wx-ico svg { width: 100%; height: 100%; display: block; } .wx-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .wx-temp { font-family: var(--f-display); font-size: 27px; font-weight: 500; color: var(--c-brown-dp); } .wx-cond { font-size: 11px; color: var(--c-pink-dp); letter-spacing: .02em; } /* 粉色天气名 */ .wx-sub { margin: 9px 0 9px; font-size: 9.5px; color: var(--c-text-soft); letter-spacing: .02em; text-align: center; } .wx-sub b { color: var(--c-pink-dp); font-weight: 500; font-variant-numeric: tabular-nums; } /* 数值粉色点缀 */ .wx-tip { font-size: 10.5px; line-height: 1.8; color: var(--c-text); background: var(--c-pink-soft); border-radius: var(--r-sm); padding: 9px 11px; } /* 浅粉提醒框 */ .wx-tip::before { content: "☂ "; color: var(--c-pink-dp); } .wx-foot { margin-top: 7px; font-size: 8px; letter-spacing: .06em; color: var(--c-text-soft); opacity: .55; text-align: right; } /* ✦ 右侧栏自定义小贴纸（可拖拽 + 缩放 + 旋转 + 自由重叠；数量在脚本 RAIL_STICKERS 配置）*/ .rail-stickers { position: absolute; inset: 0; pointer-events: none; z-index: 8; } .rail-sticker { position: absolute; pointer-events: auto; cursor: grab; touch-action: none; filter: drop-shadow(0 1px 2px rgba(120,90,70,.18)); transition: filter .2s var(--ease); } .rail-sticker:hover { filter: drop-shadow(0 2px 4px rgba(120,90,70,.22)); } .rail-sticker.dragging { cursor: grabbing; filter: drop-shadow(0 3px 6px rgba(120,90,70,.26)); } .rail-sticker img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; } /* 两个小手柄：右上角=旋转(↻)、右下角=缩放；悬停或拖动时显现 */ .rail-sticker-rot, .rail-sticker-rz { position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: var(--sh-soft); display: grid; place-items: center; color: #fff; font-size: 10px; line-height: 1; touch-action: none; opacity: 0; transform: scale(.6); transition: opacity .18s var(--ease), transform .18s var(--ease); } .rail-sticker-rz { right: -8px; bottom: -8px; background: var(--c-pink-dp); cursor: nwse-resize; } .rail-sticker-rot { right: -8px; top: -8px; background: var(--c-moon); cursor: grab; } .rail-sticker:hover .rail-sticker-rot, .rail-sticker:hover .rail-sticker-rz, .rail-sticker.dragging .rail-sticker-rot, .rail-sticker.dragging .rail-sticker-rz { opacity: 1; transform: scale(1); } /* 图片缺失时的占位贴纸（先能看到&试用，上传自己的图后自动替换；想去掉就删配置里那一行）*/ .rail-sticker.ph { aspect-ratio: 1; border-radius: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c.7 5.2 1.6 6.6 6.8 7.3-5.2.7-6.1 2.1-6.8 7.3-.7-5.2-1.6-6.6-6.8-7.3 5.2-.7 6.1-2.1 6.8-7.3z' fill='%23C97486'/%3E%3C/svg%3E") center / 44% no-repeat, radial-gradient(circle at 34% 30%, #FCE6EB, #F4C6D2); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.65), 0 5px 12px rgba(201,116,134,.32); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✦ 自定义光标（电脑端）—— 隐藏系统光标、只显示自定义；移动顺滑（脚本用 rAF + 缓动） · 仅当检测到鼠标（pointer:fine）时，脚本给 加 .cursor-on 才生效；手机/触屏完全不受影响 · 改颜色：把 #curRing::before 的 border-color 和 #curDot 的 background 改掉（默认用主题粉 --c-pink-dp） · 改大小：改 #curRing 的 width/height（margin 取它一半的负值）和 #curDot 的 width/height · 想整体关掉 → 把脚本顶部 CUSTOM_CURSOR 改成 false ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ #curRing, #curDot { display: none; } /* 默认不显示，由脚本在电脑端打开 */ html.cursor-on, html.cursor-on * { cursor: none !important; } /* 隐藏系统光标（含链接 / 输入框 / 缩放手柄等）*/ html.cursor-on #curRing, html.cursor-on #curDot { display: block; position: fixed; top: 0; left: 0; z-index: 2147483647; pointer-events: none; opacity: 0; transition: opacity .25s ease; will-change: transform; } html.cursor-on.cur-ready #curRing, html.cursor-on.cur-ready #curDot { opacity: 1; } /* 首次移动后淡入 */ html.cursor-on.cur-ready.cur-hover #curDot { opacity: 0; } /* 悬停可点元素时隐藏小点 */ /* 🔧 拖拽桌宠时：隐藏圆点+外圈，只保留星星拖影跟着走（避免光标卡在原地） 想「拖拽时连拖影也不要、完全隐藏」→ 本行无需改；拖影是另一套(.cur-trail)， 若要连拖影一起停，去 skin.html 的 initCursor 里把拖拽时的 dropTrail 调用注释掉即可。*/ html.cursor-on.cur-drag #curRing, html.cursor-on.cur-drag #curDot { opacity: 0 !important; } /* 外圈：柔和拖尾的描边圆（缩放/反馈走 ::before，不与位移 transform 冲突）*/ #curRing { width: 30px; height: 30px; margin: -15px 0 0 -15px; } #curRing::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid var(--c-pink-dp); background: transparent; transition: transform .18s var(--ease), background .18s var(--ease); } html.cur-hover #curRing::before { transform: scale(1.7); background: rgba(201,116,134,.12); } html.cur-down #curRing::before { transform: scale(.82); background: rgba(201,116,134,.18); } /* 内点：精确跟手的小圆点（标示真正的指针位置）*/ #curDot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--c-pink-dp); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🧸 可拖动小人（主页可随意拖动的 Q 版双人图，新增） · 仅首页进入后显示；按住图片即可拖动；位置本会话内记住 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .hm-chibi-float { display: none; /* 默认隐藏，由媒体查询在「首页 + 已进入」时显示 */ position: fixed; left: 26px; bottom: 104px; z-index: 360; /* 🔧 初始位置：可改 left/bottom */ width: 200px; /* 🔧 小人大小：改这里 */ cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 12px 20px rgba(120,90,70,.22)); animation: chibiFloat 4.5s ease-in-out infinite; } .hm-chibi-float.dragging { cursor: grabbing; animation: none; } .hm-chibi-img { width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; } @keyframes chibiFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-7px); } } html:not(.js-on) .hm-chibi-float { display: none !important; } /* ━━━━━━━━━━ 进场渐显（#1 更慢的错落上浮）━━━━━━━━━━ */ .reveal { opacity: 0; transform: translateY(22px); } .is-ready .reveal { animation: revIn .95s var(--ease) both; } .is-ready .reveal:nth-child(1){ animation-delay: .1s; } .is-ready .reveal:nth-child(2){ animation-delay: .25s; } .is-ready .reveal:nth-child(3){ animation-delay: .4s; } .is-ready .reveal:nth-child(4){ animation-delay: .55s; } .is-ready .reveal:nth-child(5){ animation-delay: .7s; } /* update 已移到最底部(第5块)，补一档错落延迟 */ @keyframes revIn { to { opacity: 1; transform: none; } } /* ━━━━━━━━━━ 响应式 ━━━━━━━━━━ */ /* 屏幕不够宽放不下固定左栏 → 收成内容上方的居中小栏 */ @media (max-width: 1343px) { .side-rail { position: static; width: 100%; max-width: 320px; margin: 0 auto 34px; } } /* ☾ 右侧「日历 + 占卜 + 天气」：电脑宽屏(≥1344px)下【始终显示】， 只要不是封面页都显示（首页进入后 + 浏览文章 / 分类 / 留言簿…均显示），仅封面(splash)时隐藏。 —— 关键就是把选择器从 html.is-home 改成 html.no-splash： · 封面页： 没有 no-splash → 右栏隐藏（封面不显示，符合需求） · 进入主页后 / 任何文章页： 带 no-splash → 右栏显示 🔧 想让平板(≥861px)也显示 → 把下面的 1344px 改成 861px； 🔧 想连手机也显示固定右栏 → 改成 0（不建议，手机已改为在主页底部内嵌显示，见 .hm-mob-rail）。 */ @media (min-width: 1344px) { html.no-splash .side-rail-r { display: flex; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📱 手机版主页底部区块（日历 + 今日运势 + 今日天气 + 可拖拽贴纸） · #mobRail 已是主页的一个普通区块(.hm-block)，与上面的简介/纪念日/精选/更新 共用同一套「奶白卡片 + 细线分割」，所以风格统一、不突兀；区块之间的分割线也都来自 .hm-block + .hm-block 的同一条细线（处理统一）。 · 仅 ≤1343px（平板/手机）显示；电脑宽屏(≥1344px)仍用右侧固定栏。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .hm-mob-rail { display: none; } /* 默认隐藏（电脑宽屏用右侧固定栏）*/ @media (max-width: 1343px) { /* 作为区块：定位以承载贴纸浮层；底部留白收紧一点，使与下方 update 的间距不至于太大 */ .hm-mob-rail { display: block; position: relative; padding-bottom: 22px; } /* 三个板块在手机端统一改成「轻卡片」（更亮更浅的底色 + 细描边 + 无重阴影）， 和主页「精选」里的小卡片同一种质感，融进页面不突兀。 🎨 底色想改 → 改 :root 里的 --mob-card-bg（已在文件顶部标注）*/ .hm-mob-rail .cal-box, .hm-mob-rail .horo-box, .hm-mob-rail .wx-box { background: var(--mob-card-bg); border: 1px solid var(--c-line-soft); box-shadow: none; } /* ① 日历：单独一行，居中、宽度收窄不占太大；点「今天」可下拉展开今日予定 */ .mob-cal { max-width: 332px; margin: 0 auto 14px; padding: 14px 14px 14px; } .mob-cal .cal-cell { font-size: 11px; } /* ② 今日运势 | 今日天气：并排一排，等宽等高 */ .mob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; } .mob-grid > .horo-box, .mob-grid > .wx-box { width: 100%; height: 100%; } /* 🔧 想在很窄的手机(≤430px)上把运势/天气叠成一列 → 取消下面这段注释即可： @media (max-width: 430px) { .mob-grid { grid-template-columns: 1fr; } } */ /* 📱 运势 / 天气 的【标题 + 内容】整体缩小一档，比例更和谐（窄卡片里不挤）*/ .mob-grid .horo-eye, .mob-grid .wx-eye { font-size: 10px; letter-spacing: .1em; margin-bottom: 10px; } .mob-grid .horo-list { gap: 11px; } .mob-grid .horo-ava { width: 40px; height: 40px; } .mob-grid .horo-ava-fb { font-size: 14px; } .mob-grid .horo-name { font-size: 10px; } .mob-grid .horo-stars { font-size: 9.5px; } .mob-grid .horo-text { font-size: 9px; line-height: 1.55; } .mob-grid .wx-main { gap: 10px; } .mob-grid .wx-ico { width: 30px; height: 30px; } .mob-grid .wx-temp { font-size: 21px; } .mob-grid .wx-cond { font-size: 9px; } .mob-grid .wx-sub { font-size: 9px; margin: 7px 0; } .mob-grid .wx-tip { font-size: 9px; line-height: 1.7; padding: 8px 9px; } .mob-grid .wx-foot { font-size: 7.5px; } /* 📱 日历下方「今日予定」：标题 + 事项文字都缩小，和上面运势/天气的文字大小接近 （标题≈运势/天气标题 10px，事项文字≈运势/天气正文 8.5px）*/ .hm-mob-rail .todo-eye { font-size: 10px; letter-spacing: .1em; margin-bottom: 9px; } .hm-mob-rail .todo-list { gap: 6px; } .hm-mob-rail .todo-item { font-size: 9px; line-height: 1.55; gap: 7px; } .hm-mob-rail .todo-box-tick { width: 10px; height: 10px; margin-top: 1px; } .hm-mob-rail .todo-empty { font-size: 8.5px; } /* 📱 贴纸默认「贴在」上面三个板块上：整层覆盖本区块(absolute inset:0)，初始散落在卡片上，可拖动/缩放/旋转 */ .mob-stickers { z-index: 9; } /* 其余定位继承基础 .rail-stickers(absolute inset:0) */ } /* 📱 很窄的手机上：日历再紧凑一点，避免数字被挤（只影响手机，平板不变）*/ @media (max-width: 560px) { .mob-cal { max-width: 300px; padding: 12px 10px; } .mob-cal .cal-cell { font-size: 10px; border-radius: 7px; } .mob-cal .cal-week span { font-size: 8.5px; } .mob-cal .cal-ym { font-size: 13.5px; } .mob-grid .horo-box, .mob-grid .wx-box { padding: 12px 11px; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📱 手机端（≤840px）的几处微调（按需求） · 精选 featured：去掉「featured」标题那一整行（标题文字 + 横线） · 更新 update：保留「update」标题，去掉标题后面那条横线 · 左侧 category：整体小一点（按钮 / 文字 / 分类树字号、内边距都收小） 🔧 想连平板(≤1343px)也这样 → 把下面的 840px 改成 1343px；想只在更小手机生效 → 改成 560px。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 840px) { /* featured：整条标题行隐藏（只剩下方三张图）*/ .hm-feat .hm-secttl { display: none; } /* update：留标题，去掉标题后的横线 */ .hm-upd .hm-secttl .ln { display: none; } /* category 小一点 */ .rail-cat { padding: 6px; } .rail-cat-btn { padding: 6px 9px; } .rail-cat-tt { font-size: 10px; letter-spacing: .24em; } .rail-cat-arr { width: 9px; height: 9px; } .cat-tree { font-size: 11.5px; } .cat-tree a { padding: 7px 10px; gap: 7px; } .cat-row, .cat-tx, .cat-subrow, .cat-subrow-2 { font-size: 11.5px; } .cat-ic { width: 15px; height: 15px; } .cat-ic svg { width: 13px; height: 13px; } } /* 🧸 可拖动小人：首页进入后显示； 默认电脑/平板(≥641px)显示，手机(≤640px)隐藏（避免遮挡/误触）。 🔧 想让手机端也显示 → 把下面的 641px 改成 0。 */ @media (min-width: 641px) { html.is-home.no-splash .hm-chibi-float { display: block; } } /* 📱 #m5 手机端 category：点击以「浮层」展开，浮在内容上方，不顶开/下滑页面 展开动画用 透明度 + 位移/缩放（GPU 加速，比 max-height 顺滑）*/ @media (max-width: 640px) { .rail-cat { position: relative; } .rail-cat-panel { position: absolute; left: 0; right: 0; top: calc(100% + 7px); z-index: 140; display: block; grid-template-rows: none; /* 覆盖桌面的 grid 内联展开 */ max-height: 68vh; overflow-y: auto; padding: 7px; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-pop); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.985); transform-origin: top center; /* 🔧 展开更慢更顺滑（原 .3s/.36s）*/ transition: opacity .42s var(--ease-soft), transform .52s var(--ease-soft), visibility .52s; } .rail-cat-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .rail-cat-panel.open .rail-cat-in { padding-top: 0; overflow: visible; } /* 📱 加大每行点触范围 + 右侧箭头做成更大的可点区域，方便展开/收起 */ /* 🔧 ① 修复手机端 category 点触卡顿 / 不灵敏： · touch-action: manipulation → 去掉移动端 ~300ms 点击延迟，点一下立刻响应 · 轻触即时高亮(:active) → 不再有「按了没反应」的错觉 · 展开 / 收起动画在触屏上加快，减少卡顿感 */ .cat-tree a, .cat-tree .cat-chev { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .cat-tree a { padding: 12px 12px; min-height: 48px; } .cat-tree a:active { background: var(--c-pink-soft); color: var(--c-pink-dp); } .cat-tree li.cat-parent > a:active .cat-chev { color: var(--c-pink-dp); } .cat-tree .cat-chev { padding: 9px; margin: -3px -5px -3px 2px; } .cat-tree .cat-chev-ic { width: 13px; height: 13px; } .cat-anim .cat-subwrap { transition-duration: .42s; } .cat-anim .cat-subwrap > ul { transition-duration: .34s; } /* category 浮层展开时：右下角漂浮按钮(对话框 / 播放器 / 回顶)不再吃掉落在它们上方的分类点触 */ html.cat-overlay .chat-wrap, html.cat-overlay .bgm-wrap, html.cat-overlay .scroll-top { pointer-events: none; } /* 🔧 ③ 修复手机端「加密文章 open 按钮点不到」： 输入框与按钮改为整列、居中，open 变成居中大按钮， 既远离右下角漂浮信封(不再被挡)，点触范围也更大 */ .post-protected { padding: 44px 22px; } .pp-form { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 11px; } .pp-form input[type="password"] { width: 100%; max-width: 280px; text-align: center; padding: 12px 18px; } .pp-form button { min-width: 160px; min-height: 48px; padding: 13px 30px; font-size: 13px; } } @media (max-width: 840px) { :root { --gap: 26px; } .splash-inner { gap: 24px; padding: 28px; } .sp-title { font-size: 27px; } .hd-row { gap: 8px; padding: 0 16px; } .hd-logo-txt { font-size: 20px; } .hd-searchbar, .hd-row { padding-left: 16px; padding-right: 16px; } .pg-body { padding: 44px 16px 58px; } .side-rail { margin-bottom: 28px; } .hm-block { padding: 34px 24px; } .hm-block.hm-intro { padding: 34px 24px 38px; } .hm-block.hm-feat { padding: 30px 24px 34px; } .hm-intro { grid-template-columns: 4fr 6fr; gap: 18px; align-items: center; } /* 🔧 ② 手机端 about：图:文 = 4:6（图更大）*/ .hm-intro-img { max-width: 100%; margin: 0; } .hm-intro-txt { text-align: left; } .anniv-days { font-size: 44px; } .feat-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .post-view { padding: 32px 24px 30px; } .pc-link { flex-direction: column; } .pc-thumb { width: 100%; max-height: 180px; } .pc-thumb img { min-height: 0; height: 100%; } .guest-wrap { padding: 8px 18px 26px; } .bgm-panel { width: 216px; } /* 手机端聊天组件：缩小并移到右下区域（BGM 上方）*/ .chat-wrap { right: 14px; top: auto; bottom: 150px; transform: none; } /* 📱 #m2 只保留一个小圆形 icon：隐藏漂浮小人与文字 */ .chat-mascot { display: none; } .chat-pop-tx { display: none; } .chat-pop { width: 52px; height: 52px; padding: 0; gap: 0; border-radius: 50%; display: grid; place-items: center; position: relative; } .chat-pop-ic svg { width: 21px; height: 21px; } .chat-pop-dot { position: absolute; top: 6px; right: 6px; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📱 🔧 ④ 手机端(≤520px)：UI 整体缩小 封面文字↓ · 播放器/对话框/category↓ · 主页四板块压紧在 同一张卡片里，尽量少滑动看完。想再大/再小就改下面数值。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 520px) { :root { --gap: 16px; --hd-h: 50px; --r-card: 18px; --r-md: 13px; } body { font-size: 12px; font-weight: 300; line-height: 1.8; } /* ── 封面：图与文字整体缩小（图仍为 1:1，文字克制）── */ .splash-inner { gap: 18px; padding: 22px; } .sp-img-frame { width: min(260px, 70vw); border-radius: 16px; } .sp-eyebrow { font-size: 9px; letter-spacing: .32em; margin-bottom: 7px; } .sp-title { font-size: 23px; font-weight: 400; margin-bottom: 6px; } .sp-sub { font-size: 11px; line-height: 1.6; } .sp-sub b { font-weight: 400; } .sp-tag { font-size: 9px; margin-top: 5px; letter-spacing: .1em; } .sp-hint { margin-top: 13px; font-size: 8.5px; } /* ── 头部 ── */ .hd-logo-txt { font-size: 17px; font-weight: 400; } .hd-logo-img { height: 30px; } .hd-home { width: 28px; height: 28px; } .hd-cover-ico, .hd-search-ico { width: 27px; height: 27px; font-size: 12px; } .pg-body { padding: 26px 14px 40px; } /* ── 头像 + category（手机端尺寸还原；仅保留加大点触 & 顺滑动画）── */ .side-rail { max-width: 230px; margin-bottom: 18px; gap: 11px; } .rail-ava { width: 62px; height: 62px; } .rail-name { font-size: 9.5px; padding: 5px 13px; letter-spacing: .2em; gap: 5px; } .rail-name .rn-moon { font-size: 9.5px; } .rail-soc-btn { width: 30px; height: 30px; } .rail-soc-btn svg { width: 13px; height: 13px; } .rail-cat { padding: 6px; border-radius: var(--r-sm); } .rail-cat-btn { padding: 11px 10px; min-height: 44px; } /* 保留加大点触(含右侧箭头) */ .rail-cat-tt { font-size: 9.5px; font-weight: 300; } .cat-tree a { padding: 13px 12px; min-height: 50px; } /* 保留加大每行点触 */ .cat-ic { width: 14px; height: 14px; } .cat-ic svg { width: 12.5px; height: 12.5px; } /* ── 主页：四个板块压紧在一张卡片内 ── */ .hm-block { padding: 16px; } .hm-block.hm-intro { padding: 20px 16px 16px; } .hm-intro { grid-template-columns: 4fr 6fr; gap: 14px; align-items: center; } /* 🔧 ② 图:文 = 4:6（图更大）*/ .hm-intro-img { max-width: 100%; margin: 0; border-radius: 12px; } .frame-tag { left: 6px; bottom: 6px; padding: 2px 7px; font-size: 7.5px; } .hm-intro-txt { text-align: left; } .hm-intro-txt .eye { font-size: 8.5px; letter-spacing: .22em; margin-bottom: 4px; } .hm-intro-txt h2 { font-size: 19px; font-weight: 400; margin-bottom: 2px; } .hm-intro-txt .h-cjk { font-size: 10.5px; margin-bottom: 6px; } .hm-intro-txt p { font-size: 10.5px; line-height: 1.75; margin-bottom: 3px; font-weight: 300; } .anniv-eye { font-size: 10px; margin-bottom: 4px; } .anniv-since { font-size: 13px; margin-bottom: 6px; font-weight: 300; } .anniv-days { font-size: 28px; font-weight: 400; } .anniv-days .plus { font-size: 16px; vertical-align: 3px; } .anniv-days .unit { font-size: 10px; margin-left: 5px; vertical-align: 4px; } .anniv-clock { margin-top: 8px; padding: 4px 12px; font-size: 9.5px; gap: 6px; } .hm-secttl { gap: 10px; margin-bottom: 12px; } .hm-secttl .ttl { font-size: 16px; font-weight: 400; gap: 7px; } .hm-secttl .ttl::before { font-size: 11px; } .hm-secttl .ttl small { font-size: 9px; } .feat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } /* 三张小图并排，不竖排占屏 */ .feat-img { aspect-ratio: 4/3; } .upd-item { padding: 5px 0; gap: 7px; font-size: 10.5px; } .upd-d { font-size: 11px; } /* 去掉原 min-width:44px，☾✦标题不再被撑出大空隙 */ .upd-t, .lst-sum, .pc-sum { font-weight: 300; } /* ── 文章/列表页字号同步缩小 ── */ .lst-head { padding-top: 20px; margin-bottom: 18px; } .lst-title { font-size: 22px; } .feat-title, .lst-tt, .pc-title, .pv-title, .pp-title { font-weight: 300; } .pv-title { font-size: 19px; } .post-view { padding: 24px 18px 22px; } .pv-body { font-weight: 300; font-size: 12.5px; } .pv-body h1, .pv-body h2, .pv-body h3, .pv-body h4 { font-weight: 300; } /* ── 对话框（缩小）── */ .chat-wrap { right: 10px; bottom: 128px; } .chat-mascot { width: 66px; margin-bottom: -9px; } .chat-pop { width: 48px; height: 48px; padding: 0; gap: 0; font-weight: 300; } .chat-pop-ic svg { width: 20px; height: 20px; } .chat-pop-dot { width: 6px; height: 6px; top: 5px; right: 5px; } .chat-ph { padding: 8px 12px; } .chat-ph-t { font-size: 11.5px; } .chat-stream { padding: 11px 10px 6px; gap: 7px; } .cb { font-weight: 300; font-size: 12px; padding: 8px 12px; } .chat-hint { font-size: 8px; font-weight: 300; height: 24px; } /* ── BGM 播放器（缩小；手机默认收起成小条，见 script.js）── */ .bgm-wrap { right: 10px; bottom: 10px; gap: 9px; } .bgm-panel { width: 196px; padding: 11px; border-radius: 13px; } .bgm-ph { margin-bottom: 8px; } .bgm-ph-t { font-size: 12px; } .bgm-now { font-size: 10px; padding: 5px 8px; margin-bottom: 8px; } .bgm-prog-row { margin-bottom: 9px; gap: 6px; } .bgm-tt { font-size: 8px; min-width: 22px; } .bgm-ctrl-row { gap: 10px; margin-bottom: 9px; } .bgm-ctrl-btn { width: 30px; height: 30px; } .bgm-ctrl-btn svg { width: 11px; height: 11px; } .bgm-play { width: 36px; height: 36px; font-size: 11px; } .bgm-vol-row { margin-bottom: 8px; gap: 6px; } .bgm-plist { max-height: 84px; padding-top: 6px; } .bgm-pi { padding: 5px 7px; gap: 7px; } .bgm-pn { font-size: 10px; min-width: 15px; } .bgm-pt { font-size: 10px; } /* ┌─────────────────────────────────────────────────────────────┐ │ 🔧【可改】📱手机端收起态 = 只显示一个「圆形音符」小钮 │ │ · --mini-size 改这一个数即可调圆钮大小（直径，px） │ │ · 想让手机端也显示「音符 + 文字」长条 → 删掉本整段即可 │ │ （删掉后会回退用电脑端那条带文字的胶囊样式） │ └─────────────────────────────────────────────────────────────┘ */ .bgm-mini { --mini-size: 44px; /* 🔧 圆钮直径，想更大/更小改这里 */ width: var(--mini-size); height: var(--mini-size); padding: 0; gap: 0; /* 去掉胶囊内边距，变正圆 */ border-radius: 50%; /* 圆形 */ justify-content: center; /* 音符水平居中 */ } .bgm-mini-t { display: none; } /* 隐藏 "music"/曲名文字，只留音符 */ .bgm-mini-n { font-size: 17px; } /* 🔧 音符图标大小（随圆钮可微调）*/ .bgm-mini-n svg { width: 18px; height: 18px; } /* 🔧 SVG 音符尺寸 */ .scroll-top { right: 12px; bottom: 56px; width: 30px; height: 30px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal, .splash .sp-img-col, .splash .sp-text-col { opacity: 1 !important; transform: none !important; } .cur-trail { display: none !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ Chat Popup Center Mode 点击后在屏幕中央弹出 ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ════════════════════════════════════════════════════════════ ✉ #6 消息对话框「中央弹窗」（点右侧小气泡 → 屏幕正中央丝滑弹出） —— 收起按钮位置在文件上方的 .chat-wrap；这里只管展开后的大对话框 ════════════════════════════════════════════════════════════ */ /* 半透明背景（点它即可关闭弹窗）*/ .chat-wrap::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.42); opacity:0; visibility:hidden; pointer-events:none; will-change:opacity; transition:opacity .3s ease, visibility .3s; z-index:9998; } /* 打开时显示背景 */ .chat-wrap.open::before{ opacity:1; visibility:visible; pointer-events:auto; } /* 聊天窗口 = 屏幕中央弹窗 🔧 弹窗大小：width / 内容高度在下方 .chat-body 调 🔧 弹出速度/手感：改 transition 里的秒数与缓动曲线 */ .chat-panel{ position:fixed !important; left:50% !important; top:50% !important; width:min(90vw,420px); height:auto; border-radius:18px; box-shadow:0 18px 60px rgba(0,0,0,.20), 0 3px 12px rgba(0,0,0,.08); transform:translate(-50%,-50%) scale(.86); opacity:0; visibility:hidden; z-index:9999; /* 丝滑关键：交给 GPU 合成层，只动 transform / opacity，杜绝卡顿 */ will-change:transform, opacity; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition: opacity .26s ease, transform .42s cubic-bezier(.22,1,.36,1), visibility .42s; } /* 打开动画：放大归位 + 淡入 */ .chat-wrap.open .chat-panel{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); } /* 聊天内容区加大 */ .chat-body{ height:min(65vh,520px); } /* 手机端 */ @media (max-width:840px){ .chat-panel{ width:min(92vw,310px); } .chat-body{ height:min(60vh,460px); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 封面页隐藏：聊天弹窗 + BGM 播放器 + シメジ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ html:not(.no-splash) .chat-wrap, html:not(.no-splash) .bgm-wrap, html:not(.no-splash) .mm-smg { visibility: hidden; pointer-events: none; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ 对话弹窗优化 ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .chat-wrap.open { pointer-events: auto; } .chat-wrap.open::before { cursor: pointer; } .chat-wrap.open .chat-mascot { opacity: 0; pointer-events: none; transition: opacity .3s ease; } .chat-ph { border-radius: 18px 18px 0 0; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🧸 シメジ CSS（网页桌面宠物 · Yuu & Kei） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .mm-smg { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9990; pointer-events: none; } .mm-smg > div { /* 🔧 シメジ大小：修改下面两个数字（原作 110px，现稍大一些）*/ width: 120px; height: 120px; position: fixed; bottom: 0px; user-select: none; will-change: transform; cursor: grab; pointer-events: auto; transition: filter .3s ease; } /* 🔧 悬停 / 单击时不再让小人变亮发光（按需求已去掉 brightness 高亮与外发光）。 若以后想加回一点轻微反馈，可在这里写：.mm-smg > div:hover { filter: ...; } */ .mm-smg > div:active { cursor: grabbing; } .mm-smg > div > img { width: 100%; height: 100%; display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; /* 🔧 #3 桌宠描边（已调细 + 调淡，电脑端/手机端一起生效）： 浓淡 → 改 --smg-stroke-color 的透明度（现 .25，想更淡就再调小） 粗细 → 改下面每行的 0.5px（八个方向一起改；更细可 0.4px，更粗可 1px）*/ --smg-stroke-color: rgba(64, 43, 23, 0.155); /* 🔧 #2 桌宠淡阴影（柔和投影，让小人更立体；电脑端 / 手机端都生效） 浓淡 → 改 --smg-shadow-color 的透明度（默认 .25） 投影方向 / 虚化程度 → 改最后一行 drop-shadow 的「0 2px 3px」*/ --smg-shadow-color: rgba(67, 40, 21, 0.155); filter: drop-shadow( 0.3px 0 0 var(--smg-stroke-color)) drop-shadow(-0.3px 0 0 var(--smg-stroke-color)) drop-shadow( 0 0.3px 0 var(--smg-stroke-color)) drop-shadow( 0 -0.3px 0 var(--smg-stroke-color)) drop-shadow( 0.3px 0.3px 0 var(--smg-stroke-color)) drop-shadow(-0.3px 0.3px 0 var(--smg-stroke-color)) drop-shadow( 0.3px -0.3px 0 var(--smg-stroke-color)) drop-shadow(-0.3px -0.3px 0 var(--smg-stroke-color)) drop-shadow( 0 1px 2px var(--smg-shadow-color)); } /* 🔧 #1 / #4 桌宠走路动效：上下轻颠（默认开） + 朝行进方向「前倾」（默认关，可调） · 前倾角度 → 改 --smg-walk-lean：默认 0deg = 不倾斜； 想要走路带前倾、方向更明显（尤其 Kei 这套贴图几乎正面）→ 改成 5deg ~ 10deg · 颠动幅度 → 改 translateY 的 -5px · 速度 → 改 .34s （注：纯代码改不了贴图本身的朝向；要让 Kei 真正侧身，得回 avatar 网站把 kei 的走路图导成「转身幅度更大」的版本，再同名替换即可）*/ .mm-smg > div { --smg-walk-lean: 1deg; } /* ← 默认不倾斜；想前倾改成 5deg~10deg */ @keyframes smgWalkBob { /* 兜底：纯上下颠 */ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes smgWalkR { /* 向右走：向右前倾 + 颠 */ 0%,100% { transform: rotate(var(--smg-walk-lean)) translateY(0); } 50% { transform: rotate(var(--smg-walk-lean)) translateY(-2px); } } @keyframes smgWalkL { /* 向左走：向左前倾 + 颠 */ 0%,100% { transform: rotate(calc(var(--smg-walk-lean) * -1)) translateY(0); } 50% { transform: rotate(calc(var(--smg-walk-lean) * -1)) translateY(-2px); } } .mm-smg > div.smg-walking > img { transform-origin: 50% 92%; } /* 以脚为支点倾斜更自然 */ .mm-smg > div.smg-walking.smg-dir-r > img { animation: smgWalkR .34s ease-in-out infinite; } .mm-smg > div.smg-walking.smg-dir-l > img { animation: smgWalkL .34s ease-in-out infinite; } .mm-smg > div.smg-walking:not(.smg-dir-l):not(.smg-dir-r) > img { animation: smgWalkBob .34s ease-in-out infinite; } /* 🔧 #2 桌宠被「拖拽」时左右摇晃（像被拎起来荡来荡去）：脚本会自动加 .smg-dragging · 摇晃幅度 → 改 rotate 的 7deg（越大晃得越狠） · 摆动速度 → 改 .55s · 支点在顶部(18%)，像被从上面拎住 */ @keyframes smgDragSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate( 4deg); } } .mm-smg > div.smg-dragging > img { animation: smgDragSway .75s ease-in-out infinite; transform-origin: 50% 18%; } /* シメジ台词气泡 */ .smg-s { display: block; max-width: 200px !important; width: max-content; font-family: var(--f-sans, 'Noto Sans KR', sans-serif); font-size: 11px; line-height: 1.6; color: var(--c-brown-dp, #5a4638); background: var(--c-paper, #fdf8f4); border: 1px solid var(--c-line, #e8ddd4); box-shadow: 0 3px 12px rgba(0,0,0,.1); text-align: center; white-space: normal; word-break: normal; overflow-wrap: anywhere; border-radius: 14px; padding: 8px 14px; pointer-events: none; position: absolute; z-index: 9999; animation: smg-pop .4s cubic-bezier(.22,1,.36,1) both, smg-out 1s ease 1.8s both; transform: translate(-50%, calc(-100% - 10px)); } .smg-s::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: var(--c-paper, #fdf8f4) transparent transparent transparent; filter: drop-shadow(0 1px 1px rgba(0,0,0,.08)); } @keyframes smg-pop { from { opacity: 0; transform: translate(-50%, calc(-100% - 2px)) scale(.85); } to { opacity: 1; transform: translate(-50%, calc(-100% - 10px)) scale(1); } } @keyframes smg-out { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } /* 📱 #5 手机端「站立时」常驻台词气泡：只弹入、不自动淡出（走路时脚本会主动隐藏）*/ .smg-s.smg-keep { animation: smg-pop .4s cubic-bezier(.22,1,.36,1) both !important; } /* 📱 手机端シメジ：缩小但不隐藏 */ @media only screen and (max-width: 840px) { .mm-smg > div { width: 110px; height: 110px; } .smg-s { font-size: 10px; max-width: 200px !important; padding: 6px 11px; } } /* ═══════════════════════════════════════════════════════════════ ↓↓↓ 由 Tistory→Typecho 迁移追加（可安全保留 / 微调）↓↓↓ ═══════════════════════════════════════════════════════════════ */ /* ① 色彩变量兜底：确保脱离 Tistory 变量注入后配色仍为原设定 */ :root{ --c-bg:#FDF6E7; --c-paper:#FFFCF6; --c-paper-2:#FCF1DC; --c-pink:#E8AAB2; --c-pink-dp:#C97486; --c-pink-soft:#F8E5E7; --c-brown:#A07E63; --c-brown-dp:#6B5340; --c-text:#574531; --c-text-soft:#998269; --c-line:#EFE0CD; --c-moon:#E2C57F; --c-bub-l:#F8E8B4; --c-bub-r:#705949; } /* ② 字体兜底：Google Fonts 不加载时，回退到系统中/日文字体，页面不会卡/缺字 */ :root{ --font-fallback:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif; } body{ font-family:"Quicksand","Noto Sans SC",var(--font-fallback); } /* ③ Typecho 分页导航（pageNav 输出 .page-navigator）套上原皮肤翻页样式 */ .paging .page-navigator{ list-style:none; display:flex; gap:6px; justify-content:center; padding:0; margin:0; flex-wrap:wrap; } .paging .page-navigator li{ display:inline-flex; } .paging .page-navigator a, .paging .page-navigator .current{ min-width:30px; height:30px; padding:0 8px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; text-decoration:none; color:var(--c-brown); background:var(--c-paper); border:1px solid var(--c-line); transition:.18s; } .paging .page-navigator a:hover{ background:var(--c-pink-soft); color:var(--c-pink-dp); } .paging .page-navigator .current{ background:var(--c-pink-dp); color:#fff; border-color:var(--c-pink-dp); } .pn-hidden{ display:none; } /* ④ 加密文章：Typecho content() 自动输出的密码表单，套原皮肤「受保护」外观 */ .pv-body form{ max-width:340px; margin:12px auto; padding:22px 20px; text-align:center; background:var(--c-paper); border:1px solid var(--c-line); border-radius:16px; } .pv-body form p{ color:var(--c-text-soft); font-size:13px; margin:0 0 12px; } .pv-body form input[type=password]{ width:100%; box-sizing:border-box; padding:9px 12px; border-radius:10px; border:1px solid var(--c-line); background:var(--c-paper-2); color:var(--c-text); font-size:14px; margin-bottom:10px; } .pv-body form input[type=submit],.pv-body form button{ padding:8px 20px; border:none; border-radius:10px; cursor:pointer; background:var(--c-brown-dp); color:#fff; font-size:13px; } /* ⑤ 评论 / 留言簿样式（Typecho comments） */ .cmt{ margin-top:26px; } .cmt-count{ font-size:13px; color:var(--c-text-soft); margin:0 0 12px; letter-spacing:.04em; } .cmt-list{ list-style:none; padding:0; margin:0 0 20px; } .cmt-list .comment-body{ padding:12px 14px; background:var(--c-paper); border:1px solid var(--c-line); border-radius:14px; margin-bottom:10px; } .cmt-list .comment-children{ margin-left:20px; } .cmt-list cite,.cmt-list cite a{ font-style:normal; font-weight:500; color:var(--c-pink-dp); text-decoration:none; font-size:13px; } .cmt-list .comment-meta{ font-size:11px; color:var(--c-text-soft); } .cmt-list .comment-content p{ margin:6px 0 0; font-size:14px; color:var(--c-text); line-height:1.7; } .cmt-form{ display:flex; flex-direction:column; gap:10px; } .cmt-fields{ display:flex; gap:8px; flex-wrap:wrap; } .cmt-fields input{ flex:1; min-width:120px; padding:9px 12px; border-radius:10px; border:1px solid var(--c-line); background:var(--c-paper-2); color:var(--c-text); font-size:13px; } .cmt-text{ width:100%; box-sizing:border-box; padding:11px 13px; border-radius:12px; border:1px solid var(--c-line); background:var(--c-paper-2); color:var(--c-text); font-size:14px; resize:vertical; } .cmt-submit{ align-self:flex-end; padding:9px 24px; border:none; border-radius:11px; cursor:pointer; background:var(--c-pink-dp); color:#fff; font-size:13px; } .cmt-loggedin,.cmt-closed{ font-size:13px; color:var(--c-text-soft); } /* __MMD_SELF_HOSTED_FONTS__ */ /* 自托管字体（latin 子集 woff）——中文/日文仍走系统字体，不加载大体积 CJK */ @font-face{font-family:'Quicksand';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/Quicksand-Light.woff') format('woff');} @font-face{font-family:'Quicksand';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Quicksand-Regular.woff') format('woff');} @font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Quicksand-Medium.woff') format('woff');} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/CormorantGaramond-Light.woff') format('woff');} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/CormorantGaramond-Regular.woff') format('woff');} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/CormorantGaramond-Medium.woff') format('woff');} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/CormorantGaramond-LightItalic.woff') format('woff');} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/CormorantGaramond-Italic.woff') format('woff');} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/CormorantGaramond-MediumItalic.woff') format('woff');}