/* ============================================================ 戳了么 · V1 样式 tokens: 纸 #F6F2EA / 墨 #252421 / 次 #8C8880 / 章红 #C94B3C 原则：留白多、边框轻、圆角小(2/4/6)、无明显投影 ============================================================ */ :root{ --paper:#F6F2EA; --ink:#252421; --sub:#8C8880; --accent:#C94B3C; --line:rgba(37,36,33,.12); --line-soft:rgba(37,36,33,.07); --faint:#C9C3B7; --r1:2px; --r2:4px; --r3:6px; /* 纸：点点格 / 装订孔 / 日付印红 */ --paper-page:#FBF8F1; --paper-dot:#D3CDBE; --paper-hole:rgba(37,36,33,.16); --datestamp:#C0453F; /* 木托盘 / 印泥铁盒 */ --tray:#EFD6A6; --tray-edge:#B27A3C; --tray-text:#6B4A1E; --tin:#C4C1B8; --tin-edge:#8A8780; /* 桌面与时段光照（规格 §7.1a）。四个 band 只换这几个变量，组件不感知时段。 */ /* 🔴 四档桌面色只在暖色里轻微挪动，夜里也不压黑（原来 #3E3833 一上来整块变洞， 用户实测打回）。时段主要靠今日页左上角那个小图标表达。 */ --desk:#E4DCC9; --desk-dawn:#E9E2D2; --desk-day:#E4DCC9; --desk-dusk:#E3D2B6; --desk-night:#DCD3C2; --lamp-dusk:rgba(226,150,80,0.14); --lamp-night:rgba(96,104,128,0.12); --paper-night:#F4EBDA; --cover:#C9A27A; --cover-edge:#9E7A4F; /* 动效（规格 §2.3）：可爱动作一律 --ease-pop，位移收尾用 --ease-out */ --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-pop:cubic-bezier(0.34,1.56,0.64,1); --dur-fast:120ms; --dur-base:220ms; --dur-slow:380ms; /* 字体角色：标题/章名/按钮=快乐体，界面正文=小赖，手写(一句话/谜面/称号)=文楷。 数字、时间戳、价格保持系统字体（等宽感更稳）。 */ --f-title:"ZCOOL KuaiLe","Xiaolai","PingFang SC","Microsoft YaHei",sans-serif; --f-ui:"Xiaolai","MiSans","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",sans-serif; --f-hand:"LXGW WenKai","Xiaolai","KaiTi","PingFang SC",serif; --f-num:"MiSans","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",sans-serif; } /* 字体本地打包，不走 CDN（国内网络）。子集见 ../_fonts_src/make_subset.py，授权见 ../licenses/ */ @font-face{ font-family:"ZCOOL KuaiLe"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/zcool-kuaile.woff2") format("woff2"); } @font-face{ font-family:"Xiaolai"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/xiaolai.woff2") format("woff2"); } @font-face{ font-family:"LXGW WenKai"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/lxgw-wenkai.woff2") format("woff2"); } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} /* 🔴 文档本身永远不许滚：只有 main 滚（它是 overflow-y:auto 的 flex:1）。 不写死这条的话，原生壳里 WKWebView 外层那个 UIScrollView 一旦变得可滚， 它的 pan 手势就会来抢触摸——表现是"贴纸拖不动、翻页翻不动"，而点按正常。 ⚠️ 网页版本来也不需要文档滚动，所以这条两边都安全。 */ html,body{height:100%; overflow:hidden} body{ background:var(--app-bg); color:var(--ink); font-family:var(--f-ui); font-size:15px; line-height:1.6; overscroll-behavior:none; } .hand{font-family:var(--f-hand)} /* 标题 / 章名 / Tab / 按钮 —— 快乐体没有粗体，一律 400，避免浏览器合成假粗糊成一团 */ #tabbar button,.col-title,.cd-t,.t-sect,.me-item .k, .dk-stamp .nm,.deck-cats button,.tool-btn,.ds-name,.ds-tip, .t-share,.pg-today-btn,.datestamp,.mem-seg button,.ob-t{ font-family:var(--f-title); font-weight:400; } /* 手写：用户写的一句话、隐藏章谜面、月度称号 */ #secret-card .cd-b,.me-title-card .v,.persona .p-n,.canvas-hint{ font-family:var(--f-hand); font-weight:400; } /* 数字、时间戳、价格：系统字体 */ .me-stat .v,.chip .tm,.t-date,.progress-num,.cal-cell .dn{font-family:var(--f-num)} /* 🔴 顶部安全区归 CSS 管（8-27 真机实测打回：页面全顶到灵动岛底下，「合上」「分享」 和本子里的年份都点不到）。原生壳的 ios.contentInset 从 always 改成 never 之后， WebView 铺满整屏、**壳不再替我们垫这一条**，而 CSS 当时只处理了底部（Tab 栏两处）。 ⚠️ 必须垫在 #app（那个 100dvh 的外壳）上，**不能垫在 main 里**——main 是滚动容器， 垫在它内部的话一往下滚，内容照样钻到灵动岛底下。垫在外面，滚动区从岛下面才开始。 ⚠️ 浏览器里 env() 取到 0，网页版一个像素都不动（十个页面状态逐像素对拍验过）。 （viewport-fit=cover 早就在 index.html 的 meta 里，没有它 env() 恒为 0。） */ #app{ position:relative; max-width:430px; height:100dvh; margin:0 auto; background-color:var(--paper); display:flex; flex-direction:column; overflow:hidden; padding-top:var(--safe-area-inset-top, env(safe-area-inset-top)); } /* 碎花只铺在本子/抽屉/我的三页——今日页按规格 §7.1a 是「一张木桌」，桌面归木纹， 两种桌面不能同时铺（8-26 用户拍板：冲突以规格为准，碎花做取舍）。 */ #page-memories,#page-collection,#page-me{background-image:var(--floral)} :root{ /* 桌布：满印小碎花（8-26 用户从三版里选定的 C 版，生成器留档 dev/_bg.html）。 88px 一个 tile：粉花 + 抹茶花 + 两朵奶油小花 + 一粒点，四角错开所以平铺看不出接缝。 ⚠️ data URI 里的 # 必须写成 %23，写成 # 整条 url() 会被当成片段标识符静默失效。 ⚠️ opacity=.55 是调过的：满印 100% 会在本子页/我的页这种留白多的页面上跟内容抢主角 （8-26 用户："本子页喧宾夺主"）。淡是靠整组 往下面的纸色里退， 不是改花的 hex——所以换季换纸色时花会跟着一起变暖/变冷，不用重算配色。 比稿页 dev/_bglight.html（?tab= 切页，三档并排）。 */ --floral:url("data:image/svg+xml;utf8,"); } #app::before{ /* 纸纹 */ content:""; position:absolute; inset:0; pointer-events:none; z-index:30; background-image:url("data:image/svg+xml;utf8,"); opacity:.05; mix-blend-mode:multiply; } main{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none} main::-webkit-scrollbar,.pick-grid::-webkit-scrollbar,.day-list::-webkit-scrollbar{display:none} .page{display:none; padding:26px 22px 40px; min-height:100%} .page.active{display:block} /* ---------- 标签栏 ---------- */ #tabbar{ display:flex; border-top:1px solid var(--line); background:var(--paper); padding-bottom:var(--safe-area-inset-bottom, env(safe-area-inset-bottom)); z-index:20; position:relative; } #tabbar button{ flex:1; padding:9px 0 7px; background:none; border:none; color:var(--sub); font-size:10.5px; letter-spacing:.1em; display:flex; flex-direction:column; align-items:center; gap:3px; font-family:inherit; cursor:pointer; } #tabbar button.active{color:var(--ink)} #tabbar svg{width:21px;height:21px} /* ---------- 今日 ---------- */ /* 今日画布：像一张纸，戳哪盖哪 */ /* 今日页顶栏：只剩翻页和分享，日期已经变成盖在纸上的日付印 */ .t-bar{display:flex; align-items:center; gap:6px; margin-bottom:2px} .t-bar>#pg-prev,.t-bar>#pg-next{ border:none; background:none; font-size:22px; color:var(--sub); cursor:pointer; padding:2px 8px; font-family:inherit; line-height:1; } .t-bar>#pg-prev:disabled,.t-bar>#pg-next:disabled{opacity:.22} .t-bar-mid{flex:1} .canvas{ position:relative; min-height:340px; margin-top:8px; border:1px dashed var(--line); border-radius:var(--r3); touch-action:manipulation; cursor:pointer; overflow:hidden; } .canvas .chip{position:absolute; transform:translate(-50%,-50%); margin:0} .canvas-hint{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; color:var(--sub); font-size:13px; letter-spacing:.06em; line-height:2; pointer-events:none; } /* 手持栏：当前拿在手里的章 */ #handbar.show{display:flex} #handbar button.pri{color:var(--accent); border-color:rgba(201,75,60,.4)} .chip{display:flex; flex-direction:column; align-items:center; gap:0; cursor:pointer; user-select:none;-webkit-user-select:none} .chip .tm{font-size:8px; color:var(--sub); letter-spacing:.03em; opacity:.75; margin-top:-3px} .chip.pop svg{animation:stampin .32s cubic-bezier(.2,1.4,.4,1)} @keyframes stampin{ 0%{transform:scale(.3) rotate(-8deg); opacity:0} 55%{transform:scale(1.06); opacity:1} 100%{transform:scale(1)} } .empty{ text-align:center; color:var(--sub); padding:34px 0 10px; font-size:13.5px; letter-spacing:.04em; } .cta{ display:block; width:100%; margin:20px 0 6px; padding:14px 0; background:var(--accent); color:var(--btn-face); border:none; border-radius:var(--r3); font-size:16px; letter-spacing:.3em; font-family:inherit; cursor:pointer; transition:transform .12s; } .cta:active{transform:scale(.97)} .card{ border:1px solid var(--line); border-radius:var(--r3); /* 桌布铺上碎花后，.25 的白透得太厉害、花纹会从卡片里冒出来抢字，抬到 .72 的暖白 */ padding:15px 16px; margin-top:14px; background:rgba(255,253,248,.72); } .card .cd-t{font-size:12px; color:var(--sub); letter-spacing:.18em; margin-bottom:6px} .card .cd-b{font-size:13.5px} .secret-q{font-size:24px; color:var(--faint); letter-spacing:.3em; font-weight:600} .bar{height:3px; background:var(--line-soft); border-radius:2px; margin-top:10px; overflow:hidden} .bar i{display:block; height:100%; background:var(--accent); border-radius:2px} /* ---------- 弹层 ---------- */ #backdrop{ position:absolute; inset:0; background:rgba(37,36,33,.32); opacity:0; pointer-events:none; transition:opacity .22s; z-index:40; } #backdrop.show{opacity:1; pointer-events:auto} .sheet{ position:absolute; left:0; right:0; bottom:0; z-index:50; background:var(--paper); border-radius:10px 10px 0 0; border-top:1px solid var(--line); transform:translateY(105%); transition:transform .26s cubic-bezier(.3,1,.4,1); max-height:76%; display:flex; flex-direction:column; padding-bottom:var(--safe-area-inset-bottom, env(safe-area-inset-bottom)); } .sheet.show{transform:translateY(0)} .sheet-grab{width:34px; height:4px; background:var(--line); border-radius:2px; margin:9px auto 2px} .sheet-title{text-align:center; font-size:13px; color:var(--sub); letter-spacing:.2em; padding:6px 0 2px} /* 印泥行 */ .ink-row .lb{font-size:11px; color:var(--sub); letter-spacing:.1em; flex:none} .ink-sw.sel{border-color:var(--ink)} /* 分类 tab */ .cat-tabs button.sel{color:var(--ink); background:rgba(37,36,33,.06)} .pick-cell .nm{font-size:11px; color:var(--ink)} .pick-cell.pressed svg{animation:press .3s cubic-bezier(.2,1.4,.4,1)} @keyframes press{0%{transform:scale(.96)}45%{transform:scale(1.05)}100%{transform:scale(1)}} /* 动作面板 */ .act-list{padding:6px 18px 18px} .act-list button{ display:block; width:100%; padding:13px 0; margin-top:8px; border:1px solid var(--line); background:none; border-radius:var(--r3); font-size:14.5px; font-family:inherit; color:var(--ink); cursor:pointer; letter-spacing:.1em; } .act-list button.danger{color:var(--accent); border-color:rgba(201,75,60,.4)} .act-list button.plain{border:none; color:var(--sub); font-size:13px} .act-time{display:flex; gap:10px; margin-top:8px} .act-time input{ flex:1; padding:11px; border:1px solid var(--line); border-radius:var(--r3); background:none; font-family:inherit; font-size:15px; color:var(--ink); } .act-time button{width:90px; margin-top:0} /* ---------- 全屏覆盖（隐藏章 / 分享 / 引导） ---------- */ /* 🔴 8-29 用户实测：日卡弹层点过「发个链接给朋友」之后**滚不动，而且顶部被切掉**。 两个毛病是同一个根子，缺一条都修不好： ① 没有 overflow-y —— 内容比屏幕高就是溢出，滚不了； ② justify-content:center —— 居中的 flex 一旦溢出，**吃的是上面那一截**， 而且它跑到了滚动区之外，滚都滚不回去（日期章直接被切走）。 所以 center 必须换成"首尾 auto 外边距"：有富余时照样居中，溢出时从顶部开始排。 实测（375×667，点过发链接）：溢出 42px → 顶部就被吃掉 42px。 ⚠️ 这三个弹层（隐藏章 / 分享 / 引导）共用这一段，改完三个都要重新看一眼。 ⚠️ 这里让它滚是安全的：抢手势那条红线针对的是 **html/body 文档级**滚动 （原生壳外面的 UIScrollView），内层容器滚动本来就是这个 App 的常态（main 就是）。 而且不溢出时 scrollHeight == clientHeight，压根不产生滚动。 */ .overlay{ position:absolute; inset:0; z-index:60; background:var(--paper); display:none; flex-direction:column; align-items:center; padding:40px 34px; text-align:center; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .overlay::-webkit-scrollbar{display:none} .overlay.show{display:flex} /* 代替 justify-content:center。写在 .show 上是因为 display:none 时没有 flex 项。 */ .overlay.show > *{flex-shrink:0} .overlay.show > :first-child{margin-top:auto} .overlay.show > :last-child{margin-bottom:auto} .ov-spark{font-size:22px; letter-spacing:.4em; color:var(--accent)} .ov-name{font-size:21px; font-weight:600; margin:16px 0 4px; letter-spacing:.08em} .ov-sub{font-size:12.5px; color:var(--sub); letter-spacing:.1em} .ov-badge{margin:26px 0; animation:drop .7s cubic-bezier(.2,1.3,.4,1)} @keyframes drop{ 0%{transform:scale(1.7); opacity:0} 60%{transform:scale(.97); opacity:1} 100%{transform:scale(1)} } .ov-btn{ margin-top:30px; padding:12px 44px; background:var(--accent); color:var(--btn-face); border:none; border-radius:var(--r3); font-size:15px; font-family:inherit; letter-spacing:.24em; cursor:pointer; } .ov-btn.ghost{background:none; border:1px solid var(--line); color:var(--sub); margin-top:12px; letter-spacing:.1em; font-size:13px} /* 8-31 月卡变长后 56dvh 限高会把宽度压成一条（用户："图太小/太晃"）。 图放大到 64dvh，省出来的竖向空间靠下面保存/分享并列一行找回—— 目标是弹层内容整体 ≤ 一屏，居中固定不滚（跟改版前一个手感）。 */ #ov-share img{max-width:94%; max-height:64dvh; border:1px solid var(--line); border-radius:var(--r2)} .sh-actions{display:flex; gap:12px; margin-top:18px; width:min(94%,420px)} .sh-actions .ov-btn{margin-top:0; flex:1; padding:12px 10px; white-space:nowrap} .sh-actions .ov-btn.line{background:none; border:1px solid var(--line); color:var(--ink)} #ov-share .gen{color:var(--sub); font-size:13px; letter-spacing:.2em} /* 引导 */ #ov-onboard .ob-stamps{display:flex; gap:16px; justify-content:center; margin-bottom:30px} #ov-onboard h2{font-size:24px; line-height:1.5; letter-spacing:.06em; white-space:pre-line} #ov-onboard p{color:var(--sub); font-size:14px; margin-top:14px; white-space:pre-line} #ov-onboard .dots{display:flex; gap:8px; margin-top:34px} #ov-onboard .dots i{width:6px; height:6px; border-radius:50%; background:var(--line)} #ov-onboard .dots i.on{background:var(--accent)} /* ---------- 图鉴 ---------- */ .col-head{margin-bottom:6px} .col-title{font-size:21px; font-weight:400; letter-spacing:.1em} .col-sub{font-size:12.5px; color:var(--sub); margin-top:2px} /* 抽屉里的盒子：外观按系列材质。纸盒=免费档，木盒=付费系列，铁盒=限定/隐藏 */ .box{margin-top:18px; border-radius:10px; padding:12px 12px 14px} .box-t{display:flex; align-items:baseline; gap:8px; margin-bottom:2px} .box-t .bx-n{font-family:var(--f-title); font-size:15px; letter-spacing:.06em} .box-t .bx-s{font-size:11px; color:var(--sub); letter-spacing:.04em} .box-paper{background:var(--card,var(--card)); border:.5px solid var(--line)} .box-w{background:linear-gradient(180deg,var(--tray-hi),var(--box-w)); border:1.5px solid var(--tray-edge)} .box-w .bx-s{color:var(--tray-text); opacity:.8} .box-p{background:linear-gradient(180deg,var(--box-p),var(--tin-dry-hi)); border:1.5px solid var(--tin-edge)} .box-sect{margin-top:12px} .box-sect .bs-t{font-size:11.5px; color:var(--sub); letter-spacing:.14em} .col-cell .ct{font-size:9.5px; color:var(--sub); opacity:.8; margin-top:-1px} /* 抽屉页顶部分段 */ .seg{display:inline-flex; gap:2px; margin-top:8px; padding:2px; border:1px solid var(--line); border-radius:7px} .seg button{ border:none; background:none; cursor:pointer; font-family:var(--f-title); font-weight:400; font-size:12.5px; color:var(--sub); padding:4px 14px; border-radius:5px; letter-spacing:.04em; } .seg button.sel{color:var(--ink); background:rgba(37,36,33,.07)} /* 抽屉里的章 = 实物：木柄 + 章面。和托盘里同一套语言。 */ /* 「我的」里收下朋友那边留的那一枚：6 位码输入 + 收下 */ .claim-box{display:flex; gap:8px; align-items:stretch; margin-top:6px} .claim-box input{ flex:1; min-width:0; padding:11px 14px; border:1px solid var(--line); border-radius:var(--r3); background:rgba(255,253,248,.8); color:var(--ink); outline:none; /* 码是 6 位小写字母数字，等宽 + 大字距最好认；⚠️ 不能 text-transform:uppercase， 码本身是小写的，显示成大写会让人照着大写去核对。 */ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:17px; letter-spacing:.24em; } .claim-box input::placeholder{ font-family:var(--f-ui); font-size:13px; letter-spacing:.04em; color:var(--faint); } .claim-go{ flex:0 0 auto; padding:0 20px; border:none; border-radius:var(--r3); background:var(--accent); color:var(--btn-face); font-family:inherit; font-size:14px; letter-spacing:.1em; cursor:pointer; } .claim-go[disabled]{opacity:.5} .claim-msg:empty{display:none} .claim-msg{ font-family:var(--f-hand); font-size:12.5px; color:var(--sub); line-height:1.8; margin-top:8px; } .dk-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px 2px; margin-top:8px} /* 封蜡那一栏底下的一句设定：「每一枚封蜡，来自一个不同的人。」 ⚠️ 手写体 + 弱化颜色，让它读起来是设定不是说明书。 */ .dk-note{ font-family:var(--f-hand); font-size:12px; line-height:1.7; color:var(--faint); letter-spacing:.04em; text-align:center; margin:14px 2px 2px; } .dk-cell{display:flex; flex-direction:column; align-items:center; gap:0; cursor:pointer} .dk-cell .handle{ width:26px; height:11px; border-radius:6px 6px 2px 2px; display:block; background:linear-gradient(180deg,var(--handle-hi) 0 38%,var(--handle) 39%,var(--tray-edge)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); } .dk-cell.raw .handle{background:linear-gradient(180deg,var(--handle-raw-hi) 0 38%,var(--handle-raw) 39%,var(--handle-raw-lo))} .dk-cell .face{ width:46px; height:40px; border-radius:4px; margin-top:-1px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 0 rgba(63,53,48,.16); } .dk-cell .face.inked{background:var(--card); border:1.5px solid currentColor} /* 赠礼章是封蜡，不是装在木柄上的橡皮章 —— 没有那圈章面的框，直接躺在格子里。 */ .dk-cell .face.inked.seal{background:none; border:none} /* 「写一句」前面那支笔：内联 SVG，跟章一样是线稿，不受字体缺字影响 */ .note-hint .nh-pen{width:1em; height:1em; vertical-align:-.13em; margin-right:.32em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round} /* 刻好还没蘸过墨的橡皮：图案只剩浅浅的凹痕 */ .dk-cell .face.carved{ background:linear-gradient(180deg,var(--carve-hi),var(--carve-mid)); border:1.5px solid var(--carve-lo); box-shadow:inset 0 1px 2px rgba(139,90,70,.22), 0 1px 0 rgba(63,53,48,.12); } .dk-cell .nm{font-size:10.5px; color:var(--ink); margin-top:3px} .dk-cell.raw .nm{color:var(--faint); letter-spacing:.14em} .dk-cell .ct{font-size:9.5px; color:var(--sub); opacity:.8; margin-top:-1px} /* 抽屉 · 印泥盒段 */ .sup-list-in .sup-row:last-child{border-bottom:none} .sup-row.base .sup-can{background:radial-gradient(circle at 32% 26%,var(--tin-base-hi),var(--tin-base) 62%,var(--tin-base-lo))} .sup-row.base .sup-can .bs{font-size:12px; color:var(--tray-text); opacity:.85} /* 今天的试用额度用完了：付费色淡下去，但**不消失**。 ⚠️ 原来是直接不画那坨墨（空井），读起来像"这盒坏了"； 淡色说的才是"今天用不了"，而且颜色本身还看得见。 */ .ink .faded, .ink.faded{opacity:.22} .dk-ink .ink.faded{opacity:.2} /* 判词：这一天的一句话结论（同时是分享卡的主角）。 用手写体、比正文大一档 —— 它是"写下来的一句话"，不是系统提示。 ⚠️ 但也不能压过纸上的章：不加粗、不加色块、字距松一点，让它像随手写在页脚。 */ .verdict-line{ /* 🔴 绝对定位：它**不能占布局流**。挂在托盘下面会把今日页撑高 41px， 而今日页一旦可滚，原生壳外面那个 UIScrollView 就会抢走触摸手势 （拖拽全废、翻页翻不动，点按却正常）。断言 `收起态今日页根本不需要滚` 守着这条。 */ position:absolute; left:0; right:0; bottom:12px; text-align:center; padding:0 22px; pointer-events:none; font-family:var(--f-hand); font-size:15px; color:var(--ink); letter-spacing:.08em; line-height:1.7; opacity:.8; } .shop-hint{text-align:center; font-size:10.5px; color:var(--faint); letter-spacing:.18em; padding:14px 0 4px} /* ---- 高级印泥盒的购买卡片 ---- 卡片本身是"桌上放着的一盒东西"：跟纸、卡片同族的浅底 + 发丝边， 没有角标、没有倒计时、没有"仅剩今天"。 ⚠️ 购买按钮用的是全局 .cta（实心朱红），跟「保存图片」那些主操作同一个样式—— 也就是说它是**醒目的**。这是有意的取舍：卡片安静、按钮明确。 要更轻的话就把 .cta 换成描边样式，但转化会掉。 ⛔ 只出现在印泥盒里（弹层 / 抽屉页那一段），首页不放、不弹窗、不放红点。 */ .pro-card{ margin:16px 10px 4px; padding:16px 16px 14px; border-radius:10px; background:var(--card); border:.5px solid var(--line); text-align:center; } .pro-card .pro-t{ font-family:var(--f-title); font-size:14.5px; color:var(--ink); letter-spacing:.06em; line-height:1.6; } .pro-card .pro-b{ font-family:var(--f-hand); font-size:12.5px; color:var(--sub); line-height:1.9; margin:8px 0 14px; } .pro-card .cta.pro-buy{width:100%; margin:0} .pro-card .pro-row{display:flex; justify-content:center; gap:22px; margin-top:10px} .pro-card .pro-plain{ border:none; background:none; cursor:pointer; font-family:var(--f-title); font-size:11.5px; color:var(--sub); letter-spacing:.1em; padding:6px 4px; } /* 买断之后就剩一句陈述，没有任何按钮 —— 卖完了就别再占地方 */ .pro-card.owned{padding:14px 16px} .pro-card.owned .pro-b{margin-bottom:0} .col-cell .nm{font-size:10.5px; color:var(--ink)} .col-cell.locked .nm{color:var(--faint); letter-spacing:.14em} .hid-hint{font-size:10px; color:var(--faint); max-width:86px; line-height:1.5; text-align:center} /* ---------- 本子 ---------- */ /* 书架：一年十二本，宽度 = 那个月盖了多少，越厚越沉 */ .shelf-wrap{margin-bottom:14px} .shelf-nav{display:flex; align-items:center; gap:2px; margin-bottom:6px} .shelf-nav .yr{font-family:var(--f-num); font-size:13px; color:var(--sub); letter-spacing:.1em} .shelf-nav button{border:none; background:none; font-size:17px; color:var(--sub); cursor:pointer; padding:0 8px; font-family:inherit; line-height:1} .shelf-nav button:disabled{opacity:.22} .shelf{ display:flex; align-items:flex-end; gap:3px; height:52px; padding:0 2px 5px; touch-action:pan-y; /* 横向留给「滑动切年」，纵向照旧滚页面 */ border-bottom:3px solid var(--tray-edge); border-radius:0 0 2px 2px; } .shelf::-webkit-scrollbar{display:none} .shelf .bk{ flex:none; height:42px; border:1px solid rgba(107,74,30,.35); border-radius:2px 2px 0 0; cursor:pointer; padding:0; display:flex; align-items:flex-end; justify-content:center; font-family:var(--f-title); color:var(--tray-text); font-size:10px; padding-bottom:3px; box-shadow:inset -2px 0 0 rgba(63,53,48,.07); } .shelf .bk.future{border-style:dashed; border-color:var(--line); color:var(--faint)} .shelf .bk.sel{height:50px; box-shadow:inset -2px 0 0 rgba(63,53,48,.07), 0 0 0 1.5px var(--ink)} .shelf .bk.cur{color:var(--accent)} .mem-sub{font-size:12px; color:var(--sub); margin:-4px 0 8px; letter-spacing:.03em} /* 月网格：每一格是那天那张纸的缩略，位置和真纸一致 */ .pg-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px 4px} .pg-cell{display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer} .pg-cell.pad{cursor:default} .pg-cell .pg-paper{ position:relative; width:100%; aspect-ratio:3/4; border-radius:2px; overflow:hidden; background: radial-gradient(circle at .6px .6px, var(--paper-dot) .6px, transparent .9px) 2px 2px/5px 5px, var(--paper-page); border:.5px solid var(--line); } .pg-cell .mn{position:absolute; transform:translate(-50%,-50%); line-height:0} .pg-cell .d{font-size:9.5px; color:var(--sub); font-family:var(--f-num)} .pg-cell.today .pg-paper{border:1.5px solid var(--accent)} .pg-cell.today .d{color:var(--accent)} .pg-cell.selday .pg-paper{box-shadow:0 0 0 1.5px rgba(37,36,33,.45)} /* 🔴 8-27 用户：月视图「偏空」。空日子原来跟有记录的日子长得一模一样，只是没章， 一整月扫过去就是一片空格子。给它一根淡淡的书写线 + 一个折过的角—— 读起来是「一张等着写的纸」，不是「一个空单元格」。 ⚠️ 不能靠调淡来区分：淡了就读成"不可用/已失效"，而这些日子恰恰是**还能补盖**的。 */ /* ⛔ 试过再加一个"折过的角"（右下角三角），13px 的格子里读不出来是折角， 渲染成一根杂乱的竖线。只留这一根书写线，安静但认得出。 */ .pg-cell.blank .pg-paper::after{ content:""; position:absolute; left:20%; right:20%; top:54%; height:1px; background:var(--line); opacity:.75; } .pg-cell.future .pg-paper{border-style:dashed; background:none} .pg-cell.future .d{color:var(--faint)} /* 合订本：一张对折的纸 */ .pg-cell.booklet .pg-fold{ position:relative; display:block; width:100%; aspect-ratio:3/4; border-radius:2px; background:linear-gradient(105deg, var(--paper-page) 48%, var(--fold-hi) 49%, var(--fold-lo)); border:.5px solid var(--line); } .pg-cell.booklet .d{font-family:var(--f-title); font-size:9px; color:var(--tray-text)} .dp-flip{ margin-left:auto; border:1px solid var(--line); background:none; border-radius:var(--r2); cursor:pointer; font-family:var(--f-title); font-size:11px; color:var(--sub); padding:3px 9px; letter-spacing:.04em; } /* ---------- 回忆（周视图沿用）---------- */ .mem-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px} .mem-nav h2{font-size:17px; letter-spacing:.14em; font-weight:500} .mem-nav button{border:none; background:none; font-size:19px; color:var(--sub); cursor:pointer; padding:4px 14px; font-family:inherit} .mem-nav button:disabled{opacity:.25} .cal-head{display:grid; grid-template-columns:repeat(7,1fr); font-size:10.5px; color:var(--sub); text-align:center; letter-spacing:.1em; margin-bottom:2px} .cal{display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--line-soft)} .cal-cell .d{font-size:11px; color:var(--sub); align-self:flex-start; padding-left:4px} .cal-cell.future .d{color:var(--faint)} .cal-cell.today .d{color:var(--accent); font-weight:600} .cal-more{font-size:9px; color:var(--sub)} .mem-sum{margin-top:20px} .sum-row{display:flex; gap:16px; align-items:flex-end; margin-top:10px; flex-wrap:wrap} .sum-item{display:flex; flex-direction:column; align-items:center; gap:0} .sum-item .n{font-size:13px} .sum-item .l{font-size:10px; color:var(--sub)} .persona{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line)} .persona .p-t{font-size:11.5px; color:var(--sub); letter-spacing:.2em} .persona .p-n{font-size:16.5px; font-weight:600; margin-top:4px; letter-spacing:.04em} .persona .p-l{font-size:12px; color:var(--sub); margin-top:2px} /* 某日详情 */ .day-item{display:flex; align-items:center; gap:12px; padding:9px 2px; border-bottom:1px solid var(--line-soft)} .day-item .nm{flex:1; font-size:14px} .day-item .tm{font-size:12px; color:var(--sub); letter-spacing:.04em} .day-item .del{border:none; background:none; color:var(--faint); font-size:16px; cursor:pointer; padding:4px 8px} /* ---------- 我的 ---------- */ .me-stat .v{font-size:21px; font-weight:600; letter-spacing:.04em} .me-stat .k{font-size:10.5px; color:var(--sub); letter-spacing:.1em; margin-top:1px} .me-title-card .k{font-size:11px; color:var(--sub); letter-spacing:.26em} .me-title-card .v{font-size:17px; font-weight:400; margin-top:6px} .me-list{margin-top:18px; border-top:1px solid var(--line-soft)} .me-item{ display:flex; align-items:center; justify-content:space-between; padding:14px 2px; border-bottom:1px solid var(--line-soft); font-size:14.5px; } .me-item .k{letter-spacing:.06em} .me-item button{border:none; background:none; font-family:inherit; font-size:13px; color:var(--sub); cursor:pointer; letter-spacing:.06em} .me-item button.danger{color:var(--accent)} /* 开关 */ .switch{position:relative; width:40px; height:22px; flex:none} .switch input{opacity:0; width:100%; height:100%; position:absolute; cursor:pointer; z-index:2} .switch i{ position:absolute; inset:0; background:var(--line); border-radius:12px; transition:background .18s; } .switch i::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--paper); transition:left .18s; } .switch input:checked + i{background:var(--accent)} .switch input:checked + i::after{left:21px} .me-foot{text-align:center; color:var(--faint); font-size:10.5px; letter-spacing:.24em; margin-top:30px} /* 工信部 App 备案号（9-05）：只在国内线的壳里出现，紧贴版本行下面；字距别学上面那行，编号要一眼能抄 */ .me-icp{text-align:center; color:var(--faint); font-size:10px; letter-spacing:.04em; margin-top:6px} /* toast */ #toast{ position:absolute; left:50%; bottom:86px; transform:translateX(-50%) translateY(8px); background:rgba(37,36,33,.88); color:var(--paper); font-size:13px; letter-spacing:.1em; padding:8px 18px; border-radius:20px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:70; white-space:nowrap; } #toast.show{opacity:1; transform:translateX(-50%) translateY(0)} /* ============ V1.3 木托盘（章抽屉）============ */ /* 结构和 id 与 V1.1 操作台保持一致（#deck / #deck-cats / #deck-inks / #deck-strip / .dk-stamp / .dk-ink / #tool-eraser / [data-mat]），只换皮不动手势与绑定。 */ .deck{ margin-top:12px; padding:7px 9px 8px; border-radius:12px; border:2px solid var(--tray-edge); background: repeating-linear-gradient(90deg, rgba(178,122,60,.055) 0 2px, transparent 2px 7px), linear-gradient(180deg,var(--tray-hi),var(--tray) 46%,var(--tray-lo)); box-shadow:0 2px 0 rgba(63,53,48,.08), inset 0 1px 0 rgba(255,255,255,.5); } /* 第 1 行：分类横滑 + 橡皮擦 */ .deck-status{display:flex; align-items:center; gap:6px} .deck-cats{display:flex; gap:2px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; touch-action:pan-x; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent)} .deck-cats::-webkit-scrollbar{display:none} .deck-cats button{ flex:none; border:none; background:none; cursor:pointer; font-family:inherit; font-size:12.5px; color:var(--tray-text); opacity:.6; padding:3px 8px; border-radius:6px; letter-spacing:.04em; } .deck-cats button.sel{opacity:1; background:rgba(178,122,60,.22)} .tool-btn{ flex:none; border:1px solid rgba(178,122,60,.55); background:rgba(255,255,255,.4); cursor:pointer; font-family:inherit; font-size:11px; color:var(--tray-text); padding:3px 8px; border-radius:5px; letter-spacing:.04em; } .tool-btn.on{background:var(--accent); border-color:var(--accent); color:var(--chip-on)} /* 第 2 行：印泥铁盒横排。盒里那坨墨的直径 = 这盒还剩多少，这是余量唯一的表达 */ .deck-inks{display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:6px 1px 2px; touch-action:pan-x} .deck-inks::-webkit-scrollbar{display:none} .deck-inks.locked{opacity:.35; pointer-events:none} .dk-ink{flex:none; cursor:pointer; line-height:0} .dk-ink .can{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--tin-edge); box-sizing:border-box; background:radial-gradient(circle at 32% 26%, var(--tin-hi), var(--tin) 62%, var(--tin-lo)); box-shadow:0 2px 0 rgba(63,53,48,.1); } .dk-ink .ink{border-radius:50%; box-shadow:inset 0 1px 2px rgba(37,36,33,.3)} .dk-ink.sel .can{border-color:var(--ink); box-shadow:0 0 0 2px rgba(37,36,33,.28)} .dk-ink.dry .can{background:radial-gradient(circle at 32% 26%,var(--tin-dry-hi),var(--tin-dry) 70%,var(--tin-dry-lo))} .dk-ink.base .can{background:radial-gradient(circle at 32% 26%,var(--tin-base-hi),var(--tin-base) 62%,var(--tin-base-lo))} .dk-ink .bs{font-size:11px; color:var(--tray-text); line-height:1; opacity:.85} /* 第 3 行：章立在托盘里（木柄 + 章面），两行横滑 */ .deck-strip{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,auto); gap:3px 1px; overflow-x:auto; padding:3px 0 1px; scrollbar-width:none; touch-action:pan-x; } .deck-strip::-webkit-scrollbar{display:none} /* ⚠️ touch-action:none 是铁律：手机上交给 bindStampCell 自判手势，改回 pan-x 拖拽幽灵会出不来 */ .dk-stamp{ width:58px; display:flex; flex-direction:column; align-items:center; gap:0; padding:3px 0 2px; border-radius:7px; cursor:grab; user-select:none;-webkit-user-select:none; touch-action:none; } .dk-stamp .handle{ width:29px; height:12px; border-radius:6px 6px 2px 2px; display:block; background:linear-gradient(180deg,var(--handle-hi) 0 38%,var(--handle) 39%,var(--tray-edge)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); } .dk-stamp .face{ width:44px; height:38px; border-radius:4px; margin-top:-1px; background:var(--card); border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 0 rgba(63,53,48,.16); } .dk-stamp .nm{font-size:10px; color:var(--tray-text); opacity:.72; margin-top:2px} .dk-stamp.sel .face{box-shadow:0 0 0 2px rgba(37,36,33,.4), 0 1px 0 rgba(63,53,48,.16)} .dk-stamp.sel .nm{opacity:1} /* 第 4 行：材质小木片 + 印泥状态（不出现次数） */ .tray-foot{ display:flex; align-items:center; gap:5px; margin-top:5px; padding-top:5px; border-top:1px dashed rgba(178,122,60,.45); } .mat-chip{ border:1px solid rgba(178,122,60,.5); background:rgba(255,255,255,.38); cursor:pointer; font-family:inherit; font-size:10.5px; color:var(--tray-text); padding:2px 7px; border-radius:5px; } .mat-chip.on{background:var(--tray-edge); border-color:var(--tray-edge); color:var(--chip-on)} .tray-note{margin-left:auto; font-size:10.5px; color:var(--tray-text); opacity:.85; text-align:right} /* 拖拽幽灵 + 画布提示态 */ #drag-ghost{position:fixed; z-index:80; pointer-events:none; display:none; transform:translate(-50%,-86%)} .canvas.armed{border-color:rgba(201,75,60,.5)} .canvas.erase-mode{border-color:rgba(117,147,166,.6)} /* 印泥扩散（盖章瞬间） */ .splat{position:absolute; width:64px; height:64px; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%) scale(.2); opacity:.5; filter:blur(6px); animation:splat .45s ease-out forwards} @keyframes splat{to{transform:translate(-50%,-50%) scale(1.5); opacity:0}} /* 今日头部小按钮 */ .t-share{border:1px solid var(--line); background:none; border-radius:var(--r2); cursor:pointer; font-family:inherit; font-size:11.5px; color:var(--sub); padding:4px 10px; letter-spacing:.08em} /* ============ 回忆：周/月切换 + 当日汇总面板 ============ */ .mem-seg{display:flex; gap:2px; border:1px solid var(--line); border-radius:var(--r2); padding:2px} .mem-seg button{border:none; background:none; font-family:inherit; cursor:pointer; font-size:12px; color:var(--sub); padding:3px 12px; border-radius:3px; letter-spacing:.1em} .mem-seg button.sel{color:var(--ink); background:rgba(37,36,33,.07)} .cal-cell.selday{background:rgba(201,75,60,.06)} .day-panel{margin-top:14px; border-top:1px solid var(--line-soft); padding-top:10px} .day-panel .dp-t{font-size:13px; letter-spacing:.1em; margin-bottom:4px; display:flex; align-items:center; gap:8px} .day-panel .dp-t .w{display:inline-flex} .day-panel .empty{padding:14px 0} .week-list{border-top:1px solid var(--line-soft); margin-top:6px} .week-row{display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line-soft); cursor:pointer} .week-row.selday{background:rgba(201,75,60,.05)} .week-row .wd{width:58px; flex:none} .week-row .wd .d1{font-size:13px} .week-row .wd .d2{font-size:10px; color:var(--sub); letter-spacing:.1em} .week-row .minis{flex:1; display:flex; align-items:center; gap:2px; overflow:hidden} .week-row .cnt{font-size:11px; color:var(--sub); flex:none} .week-row.today .wd .d1{color:var(--accent); font-weight:600} /* 今日手账卡分享层：天气选择 */ /* 🔴 8-29：这一行在 375 宽的屏上 scrollWidth 385 > 屏宽 375，左右各溢出 5px —— 「今天的天气」几个字和最后那个月亮按钮都被切掉。弹层是 flex 居中， 溢出会**两头一起切**，所以不是"右边多出来一点"那么好认。 六个按钮 + 标签在窄屏上就是排不下，只能让它自己换行； ⛔ 别改成横滑：这一排是六选一，看不见的选项等于不存在。 */ .weather-row{display:flex; gap:10px; margin:14px 0 4px; align-items:center; flex-wrap:wrap; justify-content:center; max-width:100%} .weather-row span{white-space:nowrap} .weather-row .wbtn{border:1px solid var(--line); background:none; border-radius:var(--r3); cursor:pointer; padding:6px 8px 3px} .weather-row .wbtn.sel{border-color:var(--accent); background:rgba(201,75,60,.07)} /* ============ V1.2 手账翻书 + 印泥盒 ============ */ /* 手账页：像书页（纸色实底 + 左侧书脊阴影），外层给透视 */ .book{perspective:1300px; position:relative} .canvas.bookpage{ /* 点点格（14px）画在纸色实底上 —— 让它一眼是「一页纸」而不是一个输入框 */ background: radial-gradient(circle at 1.2px 1.2px, var(--paper-dot) 1.1px, transparent 1.6px) 6px 6px/14px 14px, var(--paper-page); border:1px solid var(--line); box-shadow:inset 14px 0 20px -16px rgba(37,36,33,.22); } /* 装订孔：贴左侧书脊，跟着纸一起被翻页快照带走 */ .canvas.bookpage::before{ content:""; position:absolute; left:14px; top:0; bottom:0; width:8px; pointer-events:none; z-index:1; background:radial-gradient(circle at 4px 4px, var(--paper-hole) 3px, transparent 3.7px) 0 46px/8px 64px; } .canvas .chip{z-index:2} /* 日付印：盖在纸左上角的红印，替掉原来的大号 header 数字 */ .datestamp{ position:absolute; left:26px; top:11px; z-index:2; pointer-events:none; color:var(--datestamp); border:1.8px solid var(--datestamp); border-radius:2px; padding:2px 7px 3px; opacity:.84; line-height:1; display:flex; align-items:baseline; gap:5px; } /* 🔴 8-27 用户：「左上角日期太大」。章从 72 降到 56 之后它显得更大了—— 日付印是每页都有的记号，不该抢主角。字号 17→13.5，手绘框的内边距一起收。 */ .datestamp .d{font-size:13.5px; letter-spacing:.05em; font-weight:400} .datestamp .w{font-size:8.5px; letter-spacing:.1em} /* 右上角枚数：纸上的小胶囊，不是 UI 计数器 */ .paper-count{ position:absolute; right:14px; top:15px; z-index:2; pointer-events:none; font-size:11px; color:var(--sub); letter-spacing:.08em; background:rgba(255,255,255,.55); border-radius:var(--r-pill,999px); padding:2px 9px; } /* 翻页中的那张"页"：绕左侧书脊转，正面=页面快照，背面=纸背 */ .turn,.turn-base{position:absolute; left:0; right:0; z-index:6; pointer-events:none} .turn{ transform-style:preserve-3d; transform-origin:left center; will-change:transform; filter:drop-shadow(-10px 6px 12px rgba(37,36,33,.28)); } .turn-face{position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--r3); overflow:hidden; background:var(--paper-page)} .turn-face .canvas{margin-top:0; height:100%; min-height:0} .turn-face.back{ transform:rotateY(180deg); border:1px solid var(--line); background:var(--turn-back) linear-gradient(105deg, rgba(37,36,33,.08), transparent 34%); } .turn-base .canvas{margin-top:0; height:100%; min-height:0} /* 2.5D 章体按压（盖章瞬间的视觉层） */ .press-ghost{position:fixed; z-index:85; pointer-events:none} /* 页头翻页导航 */ .pg-today-btn{ border:1px solid var(--line); background:none; border-radius:3px; cursor:pointer; font-family:inherit; font-size:10px; color:var(--sub); padding:1px 7px; letter-spacing:.08em; margin-left:6px; vertical-align:1px; } /* 印泥色块：盒余量细条（非选中时灰色）/ 见底变灰 */ .dk-ink .chg i.pad{background:var(--sub); opacity:.35} .dk-ink.dry svg{opacity:.32; filter:grayscale(.6)} /* 印泥盒弹层 */ .supply-note{text-align:center; font-size:12px; color:var(--sub); letter-spacing:.06em; padding:4px 20px 2px} .supply-list{overflow-y:auto; padding:8px 20px 6px; scrollbar-width:none} .supply-list::-webkit-scrollbar{display:none} .sup-row{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-soft)} .sup-row .sup-can{ width:38px; height:38px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--tin-edge); box-sizing:border-box; background:radial-gradient(circle at 32% 26%, var(--tin-hi), var(--tin) 62%, var(--tin-lo)); } .sup-row .sup-can .ink{border-radius:50%; box-shadow:inset 0 1px 2px rgba(37,36,33,.3)} .sup-row.dry .sup-can{background:radial-gradient(circle at 32% 26%,var(--tin-dry-hi),var(--tin-dry) 70%,var(--tin-dry-lo))} .sup-row .st{font-size:11px; color:var(--sub); letter-spacing:.02em} .sup-mid{flex:1; min-width:0} .sup-mid .nm{font-size:13px; letter-spacing:.04em} .sup-mid .bar{margin-top:5px} .sup-row .n{font-size:11px; color:var(--sub); flex:none; letter-spacing:.02em} .sup-row button{ flex:none; border:1px solid rgba(201,75,60,.4); background:none; border-radius:var(--r2); font-family:inherit; font-size:12px; color:var(--accent); padding:5px 12px; cursor:pointer; letter-spacing:.1em; } .sup-row button:disabled{color:var(--faint); border-color:var(--line); cursor:default} .supply-foot{text-align:center; font-size:10.5px; color:var(--faint); letter-spacing:.18em; padding:10px 0 16px} /* 2.5D 按压动画：CSS 关键帧（落下→触纸(44%)→抬起，一条连续曲线，抬离才淡出） */ .press-ghost{animation:press-cycle 680ms both} @keyframes press-cycle{ 0% {transform:translateY(-54px); opacity:0; animation-timing-function:linear} 12% {transform:translateY(-42px); opacity:1; animation-timing-function:cubic-bezier(.5,0,.8,.4)} 44% {transform:translateY(0); opacity:1; animation-timing-function:cubic-bezier(.2,.55,.35,1)} 78% {transform:translateY(-44px); opacity:1; animation-timing-function:ease-out} 100%{transform:translateY(-60px); opacity:0} } /* 材质被系列锁死时：不是按钮，是一块说明牌 */ .mat-chip.locked{cursor:default; opacity:.9} /* ---------- 合订本：一页对折的「这个月」 ---------- */ #ov-booklet{background:rgba(37,36,33,.34); padding:24px 18px; justify-content:center} .bl-page{ width:100%; max-width:340px; max-height:100%; overflow-y:auto; scrollbar-width:none; background:linear-gradient(105deg, var(--paper-page) 47%, var(--booklet-page) 48%, var(--paper-page) 52%); border:1px solid var(--line); border-radius:3px; padding:22px 20px 20px; text-align:center; box-shadow:0 8px 24px rgba(37,36,33,.18); } .bl-page::-webkit-scrollbar{display:none} .bl-t{font-family:var(--f-title); font-size:26px; letter-spacing:.1em; color:var(--datestamp)} .bl-s{font-size:11.5px; color:var(--sub); letter-spacing:.18em; margin:18px 0 2px} .bl-blank{font-family:var(--f-hand); font-size:14px; color:var(--sub); margin-top:18px; letter-spacing:.03em} .bl-close{ display:block; margin:16px auto 0; border:none; background:none; cursor:pointer; font-family:var(--f-title); font-size:12px; color:var(--sub); letter-spacing:.2em; padding:6px 14px; } /* 印痕的一句话 */ .chip .note{ font-family:var(--f-hand); font-size:12.5px; line-height:1.35; margin-top:1px; max-width:96px; text-align:center; word-break:break-all; } .chip.has-note .tm{opacity:.5} .note-pop{ position:absolute; z-index:6; transform:translate(-50%,14px); background:var(--card,var(--card)); border:1px solid var(--line); border-radius:8px; padding:5px 8px 6px; box-shadow:0 3px 10px rgba(37,36,33,.14); display:flex; align-items:center; gap:7px; } .note-pop .np-t{font-family:var(--f-num); font-size:10px; color:var(--faint)} .note-pop .np-in{ width:132px; border:none; background:none; outline:none; font-family:var(--f-hand); font-size:13.5px; color:var(--ink); } .note-pop .np-in::placeholder{color:var(--faint)} /* 撤销：只撤最近一枚，10 秒后自己消失 */ .undo-btn{ position:absolute; right:12px; bottom:12px; z-index:5; width:34px; height:34px; border-radius:50%; cursor:pointer; border:1px solid var(--line); background:rgba(255,255,255,.8); color:var(--sub); font-size:16px; line-height:1; font-family:inherit; box-shadow:0 2px 0 rgba(63,53,48,.08); animation:undoin .22s cubic-bezier(.34,1.56,.64,1); } @keyframes undoin{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}} /* ---------- 我的 ---------- */ /* 🔴 8-27 用户：那句「盖了 3 枚章，解开了 0 枚隐藏章，有 2 天留下了痕迹。」是**陈述句**， 要扫一遍才知道说了什么。改成三个数并排——数字大、标签小，一眼就完了。 ⚠️ 卡片是一张纸不是一个 UI 面板：点点格 + 发丝边，跟本子里的纸同族。 */ .me-stat{ display:flex; margin:12px 0 24px; background:var(--paper-page); background-image:radial-gradient(circle at 3px 3px, var(--paper-dot) 1.1px, transparent 1.4px); background-size:16px 16px; border:.5px solid var(--line); border-radius:var(--r3); box-shadow:0 1px 0 rgba(63,53,48,.05); } .me-stat .st{ flex:1; padding:14px 4px 12px; text-align:center; border-left:.5px solid var(--line); } .me-stat .st:first-child{border-left:none} .me-stat .v{ display:block; font-family:var(--f-num); font-size:26px; line-height:1.1; color:var(--ink); letter-spacing:.02em; } .me-stat .v i{font-style:normal; font-size:13px; color:var(--sub-soft); margin-left:1px} .me-stat .k{display:block; font-size:11px; color:var(--sub); margin-top:6px; letter-spacing:.08em} .ttl-k{font-size:11px; color:var(--sub); letter-spacing:.24em; margin-bottom:8px} /* 称号卡：原来是「白卡片 + 直角方框」，读起来像一张证书。这是个盖章 App—— 称号就该像**一枚盖在纸上的章**：手绘框（跟日付印同一条路径）+ 朱红 + 微微歪。 */ .ttl-card{ background:var(--paper-page); background-image:radial-gradient(circle at 3px 3px, var(--paper-dot) 1.1px, transparent 1.4px); background-size:16px 16px; border:.5px solid var(--line); border-radius:var(--r3); padding:22px 16px 18px; text-align:center; margin-bottom:26px; box-shadow:0 2px 0 rgba(63,53,48,.05); } .ttl-card .ttl-n{ display:inline-block; font-family:var(--f-hand); font-size:18px; color:var(--datestamp); padding:7px 16px 8px; opacity:.92; transform:rotate(-1.6deg); background:url("data:image/svg+xml;utf8,") no-repeat center/100% 100%; } .ttl-card .ttl-l{font-family:var(--f-hand); font-size:12.5px; color:var(--sub); margin-top:14px} .ttl-strip{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin-bottom:24px} .ttl-strip::-webkit-scrollbar{display:none} .ttl-old{ flex:none; min-width:104px; max-width:132px; background:var(--card,var(--card)); border:.5px solid var(--line); border-radius:3px; padding:9px 10px 10px; text-align:center; } .ttl-old .ttl-m{font-family:var(--f-num); font-size:10px; color:var(--faint); letter-spacing:.1em} .ttl-old .ttl-n{font-family:var(--f-hand); font-size:12.5px; color:var(--sub); margin-top:3px; line-height:1.4} /* ============================================================ V1.4 今日页场景化（规格 §7.1a）：桌面 / 时段光照 / 昨日页边 / 开场 图层自下而上：桌面(0) → 光照(1) → 昨日页边(2) → 今日纸(3) → 托盘(4) —— 光照层压在纸「下面」，所以纸和托盘天然不被压暗，这就是「台灯只照桌子中间」。 ============================================================ */ #page-today{ position:relative; background-color:var(--desk); /* 木纹：92° 让纹路带一点点斜，正交会像格子布 */ background-image:repeating-linear-gradient(92deg, rgba(0,0,0,0.035) 0 2px, transparent 2px 9px); transition:background-color 2s linear; } /* 光照层。⚠️ 两层叠着交叉淡入，不是一层改 background—— 浏览器不给 radial-gradient 做插值（8-26 实测：过渡到一半时渐变已经跳到终点， 而同页的 opacity / background-color 还在路上），单层写 transition:background 会硬切。 */ .lamp{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 2s linear; } .lamp.dusk{background:radial-gradient(ellipse 78% 42% at 50% 34%, transparent 0%, var(--lamp-dusk) 100%)} .lamp.night{background:radial-gradient(ellipse 82% 46% at 50% 34%, transparent 0%, var(--lamp-night) 100%)} [data-time-band="dusk"] .lamp.dusk{opacity:1} [data-time-band="night"] .lamp.night{opacity:1} /* 启动时直接就位，不播 2s 过渡（规格：启动取当前 band，不过渡） */ .no-band-anim #page-today,.no-band-anim .lamp{transition:none} [data-time-band="dawn"] #page-today{background-color:var(--desk-dawn)} [data-time-band="day"] #page-today{background-color:var(--desk-day)} [data-time-band="dusk"] #page-today{background-color:var(--desk-dusk)} [data-time-band="night"] #page-today{background-color:var(--desk-night)} /* 夜里：纸偏暖一点点，像台灯照着。桌面不压黑了，所以不用再提亮字。 */ [data-time-band="night"] #page-today .canvas.bookpage{ background: radial-gradient(circle at 1.2px 1.2px, var(--paper-dot) 1.1px, transparent 1.6px) 6px 6px/14px 14px, var(--paper-night); } /* 时段小图标：今日页左上角，20px，安静地待着 */ .band-icon{display:inline-flex; width:20px; height:20px; opacity:.75; margin-right:2px} .band-icon svg{width:20px; height:20px} #page-today .book,#page-today #deck,#page-today .card{position:relative; z-index:1} /* ---- 昨日页边：今日纸底下垫着昨天那一页，露出左边和下边一条 ---- */ .pageedge{ position:absolute; inset:0; z-index:0; cursor:pointer; /* 🔴 往右下露，不往左露：左边是装订线，纸不可能从装订那侧参差出来。 🔴 也不转：装订成册的纸是齐的。带 -1.5° 的时候，当前页一空白， 底下那页的斜边就跟本页混成一张，整本书看着是歪的（8-26 用户实测打回）。 */ transform:translate(9px,11px); } .pageedge .canvas{margin-top:0; height:100%; min-height:0; pointer-events:none} /* 页边只是「露出来的一角」，不该抢戏：整体压淡，且不描虚线边 */ .pageedge .canvas{border-style:solid; border-color:rgba(63,53,48,.12); opacity:.92} .pageedge .datestamp{opacity:.5} .book>.canvas{position:relative; z-index:1} /* ---- 开场（冷启动 ≤1200ms，规格 §7.1a）---- */ /* ⚠️ 全部走 CSS @keyframes：8-25 用户真机实锤 el.animate 的 transform 分量不生效， 开场里章体/封面一旦用 WAAPI 就会「凭空出现」，这条是铁律不是偏好。 */ #opening{position:absolute; inset:0; z-index:60; pointer-events:auto} /* 外层只管「本子弹到原大」，内层只管「封面翻开」—— ⚠️ 两条动画别写在同一个元素上：它们都改 transform，谁赢要看 fill 和书写顺序， 一旦哪天调了 delay 就会变成封面还没弹完就已经翻开。分层之后各管各的，没得抢。 */ .op-book{ position:absolute; perspective:1200px; animation:op-pop 250ms var(--ease-pop) both; } .op-cover{ position:absolute; inset:0; border-radius:var(--r3); background:var(--cover); border:2px solid var(--cover-edge); transform-origin:left center; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; cursor:pointer; } /* 封面合着的时候不动——翻开这一下由人触发（.opening 才播），不是片头动画 */ /* 翻开这一下的曲线是自己写的，不用 --ease-out：那条曲线半程就转完 96%， 读起来是「啪一下没了」。真实的封面是抬起来慢、倒下去快、落到桌面收住。 */ #page-today.opening .op-cover{animation:op-open 520ms cubic-bezier(.45,.05,.3,1) both} /* 布纹：两道 ±45° 的细斜纹叠出织物感 */ .op-cover{ background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px); } .op-spine{ /* 书脊：装订那侧的一条深色带 */ position:absolute; left:0; top:0; bottom:0; width:10px; background:var(--cover-edge); border-right:1px solid rgba(255,255,255,.18); border-radius:var(--r3) 0 0 var(--r3); } .op-band{ /* 松紧带 */ position:absolute; top:-2px; bottom:-2px; left:78%; width:10px; background:rgba(201,75,60,.85); box-shadow:inset -1px 0 0 rgba(0,0,0,.12); } .op-edges{ /* 内页厚度：右侧和下侧各露几层纸边 */ position:absolute; inset:0; z-index:-2; border-radius:var(--r3); box-shadow: 2px 2px 0 0 var(--paper-page), 3.5px 3.5px 0 0 var(--edge-1), 5px 5px 0 0 var(--edge-2), 6.5px 6.5px 0 0 var(--edge-3); } .op-label{ /* 封面上 1/3 的标签贴 */ position:absolute; left:50%; top:22%; transform:translateX(-50%) rotate(-1.5deg); width:56%; min-height:44px; background:var(--paper-page); border-radius:4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; box-shadow:0 2px 0 rgba(63,53,48,.08); } /* 🔴 封面标题不能用快乐体（8-27 改名后暴露）：「戳」是 17 画，而快乐体是笔画很粗的展示体， 20px 下笔画之间直接粘死成一坨黑，32px 也一样糊（四档对比实测）。换文楷——细笔画撑得开， 而且手写体本来就更像手账封面。⚠️ 以后往标题类元素里放笔画密的字，先看一眼再说。 */ .op-cover .op-t{font-family:var(--f-hand); font-size:26px; color:var(--cover-text); letter-spacing:.14em} .op-mon{font-family:var(--f-ui); font-size:13px; color:var(--sub); letter-spacing:.1em} /* 标签贴两角的和纸胶带 */ .op-tape.l,.op-tape.r{ position:absolute; top:-6px; width:34px; height:12px; background:rgba(124,198,176,.6); border-left:1px dashed rgba(63,53,48,.16); border-right:1px dashed rgba(63,53,48,.16); } .op-tape.l{left:-10px; transform:rotate(-8deg)} .op-tape.r{right:-10px; transform:rotate(8deg)} /* 贴纸：当月盖得最多的那几枚章，白边模拟贴纸底纸 */ .op-sticker{ position:absolute; line-height:0; padding:4px; border-radius:5px; background:var(--sticker); box-shadow:0 1px 2px rgba(63,53,48,.18); } /* 今天刚发现的那几枚才给记号——"当月发现的"在月初等于全部，红点一多就没有意思了 */ .op-sticker.new{background:var(--note); box-shadow:0 1px 2px rgba(133,79,11,.26)} .op-sticker.new::after{ content:""; position:absolute; right:-2px; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--accent); } /* 「碰一下，翻开今天」——挪到本子下方，不跟着封面转走 */ #opening .op-hint{ /* top 由 JS 按本子下沿 +20px 给，别用百分比——本子多高是算出来的 */ position:absolute; left:0; right:0; text-align:center; font-family:var(--f-ui); font-size:13px; letter-spacing:.14em; color:var(--tray-text); animation:op-breathe 2.6s ease-in-out infinite; opacity:.75; } /* 桌上随手搁着的一个印泥铁盒 */ .op-desk-tin{ /* 位置由 JS 按本子的矩形算，贴着本子左下角、压在本子底下 */ position:absolute; width:42px; height:42px; border-radius:50%; background:linear-gradient(180deg,var(--tin-desk),var(--tin)); border:1.5px solid var(--tin-edge); display:flex; align-items:center; justify-content:center; } .op-desk-tin .can{width:22px; height:22px; border-radius:50%; background:var(--accent); opacity:.85} .op-desk-tin::after{ /* 盒盖那圈边 */ content:""; position:absolute; inset:4px; border-radius:50%; border:1px solid rgba(138,135,128,.5); } @keyframes op-breathe{0%,100%{opacity:.55} 50%{opacity:1}} /* 右下角一小段和纸胶带 */ .op-cover .op-tape{ position:absolute; right:12px; bottom:14px; width:46px; height:15px; background:rgba(250,238,218,.72); border-left:1px dashed rgba(158,122,79,.35); border-right:1px dashed rgba(158,122,79,.35); transform:rotate(-8deg); } @keyframes op-pop{from{transform:scale(.92)} to{transform:scale(1)}} @keyframes op-open{from{transform:rotateY(0deg)} to{transform:rotateY(-180deg)}} /* 翻到背面时露出纸色，别让人看见封面的背是块木色板 */ .op-cover.back-face{background:var(--paper-page); border-color:var(--line)} /* 本子还合着的时候：纸上的东西全按住不动，等封面翻开再依次登场。 ⚠️ 用静态规则按住，不是用「延迟很久的动画」按住——封面要等人碰， 等多久不知道，用 animation-delay 押着会在人还没碰的时候就自己演完。 */ #page-today.op-wait #today-canvas .datestamp{opacity:0} /* 本子合着时托盘只露上沿一条（8-26 用户拍板：首页不能太空，一打开就得看到东西）。 顶栏和卡片仍然不在场——露一条沿是"桌上有东西"，四行工具全摊开是"已经在干活了"。 */ /* ⚠️ 位移要把页面底部那 40px 内边距也算上：托盘的下沿本来就停在 Tab 栏上方 40px， 只写 translateY(100% - 24px) 实测露出来 64px，半个章格子被 Tab 栏切着，很难看。 */ #page-today.op-wait #deck{transform:translateY(calc(100% + 16px)); pointer-events:none} #page-today.op-wait .t-bar, #page-today.op-wait .paper-count, #page-today.op-wait .card{opacity:0} /* 翻开之后的时间线（零点 = 碰封面那一刻）：封面 0–520，日付印 520–770，托盘 770–970，卡片 970–1070 */ /* 只给今日纸上的日付印落章——昨日页边上也有一枚，别让它跟着一起落 */ #page-today.opening #today-canvas .datestamp{animation:op-stamp 250ms 520ms both var(--ease-out)} #page-today.opening #deck{animation:op-deck 200ms 770ms both var(--ease-pop)} #page-today.opening .t-bar, #page-today.opening .paper-count, #page-today.opening .card{animation:op-fade 100ms 970ms both} @keyframes op-stamp{ 0%{transform:translateY(-20px) scale(1.05) rotate(var(--ds-rot,0deg)); opacity:0} 55%{transform:translateY(0) scale(.95) rotate(var(--ds-rot,0deg)); opacity:1} 100%{transform:translateY(0) scale(1) rotate(var(--ds-rot,0deg)); opacity:.84} } @keyframes op-deck{from{transform:translateY(calc(100% + 16px))} to{transform:translateY(0)}} @keyframes op-fade{from{opacity:0} to{opacity:1}} /* 系统「减少动态效果」：开场只剩一次淡入，日付印直接在位 */ @media (prefers-reduced-motion: reduce){ .op-book{animation:op-fade 200ms both} #page-today.opening .op-cover{animation:op-fade 200ms reverse both} .op-cover .op-hint{animation:none; opacity:.8} /* ⚠️ 选择器必须跟上面那条一样带 #today-canvas：媒体查询不加特异性， 写成 .opening .datestamp 会被 650ms 延迟那条压住，「减少动画」等于没开。 */ #page-today.opening #today-canvas .datestamp, #page-today.opening #deck, #page-today.opening .t-bar, #page-today.opening .paper-count, #page-today.opening .card{animation:op-fade 200ms both} .lamp,#page-today{transition:none} } /* ---- 纸和书的盒子：让页边和翻页层能严丝合缝地对齐纸 ---- */ /* 原来 8px 留白挂在 .canvas 的 margin 上，昨日页边 inset:0 会比纸高出 8px； 把留白移到 .book 上，页边和 .turn 才能跟纸同一个盒子。 */ .book{margin-top:8px} #page-today .book>.canvas,#page-memories .book>.canvas{margin-top:0} /* ---- 翻页动画（规格 §8.3）：350ms 绕左侧书脊 ---- */ /* ⚠️ CSS @keyframes，不用 el.animate（同上：用户真机 WAAPI 的 transform 不生效） */ .turn.fwd{animation:turn-fwd 350ms var(--ease-out) forwards} .turn.back{animation:turn-back 350ms var(--ease-out) forwards} @keyframes turn-fwd{from{transform:rotateY(0deg)} to{transform:rotateY(-178deg)}} @keyframes turn-back{from{transform:rotateY(-178deg)} to{transform:rotateY(0deg)}} /* ---- 本子 · 翻页视图（规格 §7.2）---- */ .flip-bar{display:flex; align-items:center; gap:8px; margin-bottom:2px} .flip-back{ border:none; background:none; cursor:pointer; font-family:var(--f-title); font-size:13px; color:var(--sub); padding:2px 2px 2px 0; } .flip-date{ flex:1; font-family:var(--f-title); font-size:15px; color:var(--ink); letter-spacing:.06em; display:flex; align-items:center; gap:6px; } .canvas.readonly{cursor:default} .canvas.readonly .chip{cursor:default} /* 天级的一句话：写在纸的下缘，文楷，跟印记自己的一句话区分开 */ .day-note{ position:absolute; left:22px; right:18px; bottom:14px; z-index:2; pointer-events:none; font-family:var(--f-hand); font-size:13px; color:var(--sub); line-height:1.7; } .flip-foot{display:flex; align-items:center; gap:8px; margin-top:12px} .flip-foot button{ border:1px solid var(--line); background:rgba(255,253,248,.72); border-radius:var(--r3); font-family:inherit; font-size:12.5px; color:var(--sub); padding:6px 10px; cursor:pointer; } .flip-foot button.mid{flex:1; font-family:var(--f-hand); color:var(--ink)} .flip-foot button:disabled{opacity:.3; cursor:default} /* 补一句的输入层 */ .daynote-pop{ position:absolute; left:22px; right:22px; bottom:24px; z-index:40; background:var(--card,var(--card)); border:1px solid var(--line); border-radius:var(--r3); padding:12px; box-shadow:0 2px 0 rgba(63,53,48,.08); } .daynote-pop textarea{ width:100%; height:66px; border:none; outline:none; resize:none; background:none; font-family:var(--f-hand); font-size:14px; color:var(--ink); line-height:1.7; } .daynote-pop .dn-act{display:flex; justify-content:flex-end} .daynote-pop .ok{ border:1px solid var(--line); background:none; border-radius:var(--r3); cursor:pointer; font-family:var(--f-title); font-size:12px; color:var(--sub); padding:4px 12px; } /* ============ 掀角卷起（js/curl.js）============ */ /* 三层都绝对定位在纸的原位上；.curl-flap 靠 JS 写 transform(matrix) 和 clip-path。 ⚠️ transform-origin 必须是 0 0：curl.js 里的镜像矩阵是按纸的左上角为原点算的。 */ .curl-under,.curl-static,.curl-flap{position:absolute; z-index:5; pointer-events:none} .curl-under{z-index:4} .curl-flap{z-index:6; transform-origin:0 0; will-change:transform,clip-path} .curl-static{will-change:clip-path; filter:drop-shadow(2px 3px 6px rgba(63,53,48,.16))} .curl-under>*,.curl-static>*,.curl-flap .curl-flap-inner>*{margin:0!important; width:100%; height:100%} /* 翻起来那片看到的是纸背：内容左右反过来，再压一层纸背色 */ /* 纸背透出来的内容：镜像已经由 curl.js 的矩阵做掉了，这里不能再 scaleX(-1) （那等于把内容翻回正的，纸背就不成其为纸背了）。只需要压淡、去色。 */ .curl-flap .curl-flap-inner{ position:absolute; inset:0; overflow:hidden; opacity:.13; filter:grayscale(.75); } .curl-flap::before{ /* 纸背本体：不透明的纸色，别让桌面透上来 */ content:""; position:absolute; inset:0; z-index:-1; background:var(--curl-back); } /* 折线附近的暗部——"卷"的观感全靠它，角度由 JS 跟着折线转 */ .curl-shade{position:absolute; inset:0; pointer-events:none} /* 🔴 8-27 用户实测打回："翻页和屏幕滚动混在一起，非常容易导致屏幕滚动而不是翻页"。 病根是 pan-y：把纵向让给浏览器 = 起手带一点垂直分量就被判成"要滚页面"， 手势当场被抢走并 pointercancel，我们连 pointermove 都收不到（电脑用鼠标没有原生滚动手势，所以只有手机复现）。 ✅ 实测过"到底什么时候真需要滚"（390/375/430/360 四个尺寸）： 今日页 · 托盘收起 → scrollH == clientH，**从来不滚** 今日页 · 托盘展开 → 溢出 155~188px，要滚 本子页 · 月历 → 要滚，但那一屏没有 .book，翻不了页 本子页 · 某一天 → 不滚（这才是能翻页的那个视图） 所以：**能翻页的那两个视图本来就不需要滚** → 整张纸交给我们独占，只有托盘展开时才把纵向还回去。 */ #page-today .book,#page-memories .book{touch-action:none} #page-today.deck-open .book{touch-action:pan-y} /* ============ 纸上的三样（不是用户亲手盖的东西）============ */ /* 天气小章：没设过时在日付印下面摆一排待选；设过了只剩落下的那一枚。 ⚠️ 待选那排放在日付印「下面」而不是规格写的「右侧」——右侧那条线上还有 「今天 N 枚」的胶囊，5 枚 22px 排过去必撞。 */ .wx{position:absolute; z-index:2} .wx.pick{left:30px; top:52px; display:flex; flex-direction:column; gap:2px} .wx-ask{font-size:10.5px; color:var(--faint); letter-spacing:.12em; font-family:var(--f-ui)} .wx-row{display:flex; gap:2px} .wx-row button{ border:none; background:none; padding:2px; cursor:pointer; line-height:0; border-radius:4px; opacity:.75; } .wx-row button:hover{opacity:1; background:rgba(63,53,48,.05)} .wx.set{left:158px; top:12px; cursor:pointer; line-height:0; animation:stampin .32s cubic-bezier(.2,1.4,.4,1)} /* 谜面便签：贴在纸左下角。⛔ 翻面那一态已删（8-27）——背面就是三个问号， 而"藏起来"这件事收成折角之后已经由折叠完成，留着就是点三下绕一圈回原地。 */ .riddle-note{ position:absolute; left:14px; bottom:14px; z-index:3; cursor:pointer; max-width:62%; min-height:44px; transform:rotate(-3deg); } .riddle-note .rn-face{ display:block; padding:9px 13px 10px; border-radius:3px; /* ⚠️ 不能只填 var(--note)：#FAEEDA 跟纸色 #FBF8F1 几乎同色， 贴上去读起来是「纸上的一行字」而不是「一张便签」。压一层浅渐变 + 一根发丝边。 */ background:linear-gradient(180deg,var(--riddle-2),var(--riddle-1)); border:.5px solid rgba(133,79,11,.16); color:var(--note-text); font-family:var(--f-hand); font-size:13px; line-height:1.55; box-shadow:0 2px 0 rgba(63,53,48,.08); } /* 压住便签的一段和纸胶带 */ .riddle-note .rn-tape{ position:absolute; left:-6px; top:-7px; width:28px; height:10px; z-index:1; background:rgba(226,138,160,.45); transform:rotate(-12deg); border-left:1px dashed rgba(63,53,48,.18); border-right:1px dashed rgba(63,53,48,.18); } /* 🔴 本子的厚度是「本子」的属性，不是「某一页」的属性。 之前把它画在"下一页"上，一翻页就被翻页图层顶掉，看着突然只剩上下两页（用户实测）。 挂在 .book 上就永远在，翻页过程中也在。 */ #page-today .book::after,#page-memories .book::after{ content:""; position:absolute; left:0; right:0; top:8px; bottom:0; z-index:0; border-radius:var(--r3); pointer-events:none; box-shadow: 4px 4px 0 -1px var(--stack-1), 4.5px 4.5px 0 -1px rgba(63,53,48,.11), 8px 8px 0 -2px var(--stack-2), 8.5px 8.5px 0 -2px rgba(63,53,48,.10), 12px 12px 0 -3px var(--stack-3), 12.5px 12.5px 0 -3px rgba(63,53,48,.09), 16px 16px 0 -4px var(--stack-4), 16.5px 16.5px 0 -4px rgba(63,53,48,.08); } /* 昨天空白时：底下不是一张空白纸，是一叠翻过去的纸边 */ .pagestack{ position:absolute; inset:0; z-index:0; cursor:pointer; border-radius:var(--r3); /* 同样往右下叠：装订在左，参差只会出现在自由边。 每层配一条 .5px 的暗线，不然三层叠一起是一块糊的浅色。 */ box-shadow: 5px 5px 0 -1px var(--pstack-1), 5.5px 5.5px 0 -1px rgba(63,53,48,.12), 9px 9px 0 -2px var(--linen), 9.5px 9.5px 0 -2px rgba(63,53,48,.10), 13px 13px 0 -3px var(--pstack-3), 13.5px 13.5px 0 -3px rgba(63,53,48,.09); } /* ============ V1.5 纸竖版 + 托盘两态 ============ */ /* 纸改竖版：1.02 的近正方形读起来像便条不像本子。高度按宽度 1:1.3 推。 托盘收起之后腾出的 160px 正好装得下（实测 259 → 约 100）。 */ #page-today .book>.canvas,#page-memories .book>.canvas{ aspect-ratio:100/130; min-height:0; height:auto; } /* ---- 托盘：收起态一行，展开态到 60% 视口 ---- */ /* 托盘靠着桌沿放，别浮在半空：纸变竖版之后页面下半截空出来一大片， 托盘悬在中间就不像"摊在桌上的东西"了。 */ /* ⚠️ 必须带 .active：`#page-today{display:flex}` 的权重(100) 压过 `.page{display:none}`(10)， 那一页就永远不隐藏——点别的 Tab 时它照样盖在上面，看着就是「Tab 点了没反应」。 */ #page-today.active{display:flex; flex-direction:column; min-height:100%} /* ⚠️ 翻页时那片掀起来的纸有 550px 宽、会伸到页面左边界外，把 main 的可滚动区域 横向撑大 113px（实测）——手指一拖，整个界面就横着错位。页面自己把溢出裁掉。 */ #page-today,#page-memories{overflow:hidden} #page-today .deck{margin-top:auto} .deck{ position:relative; overflow:hidden; transition:max-height 260ms var(--ease-pop); /* 🔴 8-27 起收起态是两行：整排印泥 + 一行常用章。 印泥从「展开才看得见」挪到常驻，因为换印泥是高频动作（一次蘸墨只盖 3 下）。 拉手 16 + 印泥 42 + 章 62 + 材质/状态那行 24 ≈ 184，留一点余量。 */ max-height:190px; } .deck.open{max-height:60vh; padding-top:26px} /* 顶部让出一行，别让「收起」压住分类 */ .deck-grab{ display:block; width:36px; height:4px; margin:6px auto 4px; padding:0; border:none; border-radius:2px; background:rgba(107,74,30,.28); cursor:pointer; } .deck-full{ max-height:0; opacity:0; overflow:hidden; transition:max-height 260ms var(--ease-out), opacity 160ms linear; } /* ⚠️ 展开态的三块加起来不能超过 .deck 的 60vh：.deck 是 overflow:hidden， 超出的部分不是能滚，是直接被切掉（材质三选一和状态那行就在最后面）。 */ /* ⚠️ 8-27 起 .deck-full 里只剩分类行（印泥挪出去常驻了），所以这条上限基本用不满 */ .deck.open .deck-full{max-height:24vh; opacity:1; overflow-y:auto} /* 章那一行：[章条带][更多]。⛔「当前印泥」那个单独的铁盒已作废——整排印泥常驻了。 ⚠️「更多」这个键要留着，它在展开态变成「收起」。之前把它藏过一版， 展开后就只剩 36×4 那根小拉手能收，等于合不上（用户实测）。 */ .deck-row{display:flex; align-items:center; gap:6px} /* 印泥排现在两态都在，位置不变——"换颜色"这个动作不该因为托盘开着还是关着而变。 ⚠️ 手势不动：这一排是纯点击的，原生 pan-x 横滑没有拖拽可抢； 章格子那排仍然是 touch-action:none 自判手势（8-25 铁律），这次一个字没改。 */ .deck-inks{flex:none} .deck-more{ flex:none; border:1px solid rgba(107,74,30,.25); background:rgba(255,253,248,.5); border-radius:var(--r3); font-family:var(--f-title); font-size:11px; color:var(--tray-text); padding:14px 6px; cursor:pointer; line-height:1.2; writing-mode:vertical-rl; letter-spacing:.1em; } /* ⚠️ 展开态它不能再待在 flex 行里——那样会被垂直居中，浮在章格子中间。 钉到托盘右上角，跟拉手在一起，找得到。 */ .deck.open .deck-more{ /* 靠左放：右上角是「擦」那个键的位置，摞一起会重叠 */ position:absolute; left:9px; top:5px; z-index:2; writing-mode:horizontal-tb; padding:3px 9px; background:rgba(255,253,248,.85); } /* 章条带：收起态单行横滑；展开态 4 列网格纵向滚 */ /* ⚠️ 收起态只是「一行」，不能再压高度——格子含木柄+章面+章名约 78px， 之前写 max-height:62px 把章名和半个章面切掉了。 */ .deck:not(.open) #deck-strip{grid-template-rows:1fr} /* ⚠️ 展开态必须让条带脱离 .deck-row 那个 flex 行：flex 子项的宽度按内容算， 实测条带只有 179px（托盘 410），一排四个挤在左半边（8-26 用户截图）。 */ .deck.open .deck-row{display:block} .deck.open #deck-strip{ /* 钉死一排六个，格子跟着屏宽伸缩（8-26 用户指定）。 用 minmax 自动排的话，390 的屏上只排得下 5 个，宽屏又会变 7 个，不可预期。 */ grid-auto-flow:row; grid-template-columns:repeat(6,1fr); grid-template-rows:none; max-height:32vh; overflow-y:auto; overflow-x:hidden; /* ⚠️ 基础样式是 pan-x（收起态横滑条带用的），展开成网格后必须换成 pan-y， 否则手机上纵向划不动这片网格。 */ touch-action:pan-y; } /* ⚠️ .dk-stamp 的 width:58px 是给横滑条带写死的；进了 1fr 的网格列就会靠左留空， 一排四个排不满（8-26 用户实测撞到）。 */ .deck.open .dk-stamp{ width:100%; /* 🔴 展开态把纵向交给浏览器滚网格。基础样式是 touch-action:none（横滑条带的手势自判）， 展开态照搬的话，上滑找章 = 每次都拎起一枚章，网格滚不动（8-26 用户手机实测）。 ⚠️ 8-27 起展开态也能拖了，但走的是**长按**（bindStampCell 的 LP_MS）： 按住 450ms 不动才拎起来，之后由 JS 的 touchmove preventDefault 拦住原生滚动。 这条 pan-y 不能改成 none——改了网格就又滚不动了。 */ touch-action:pan-y; } /* 收起态不显示材质三选一，只留两句小字 */ .deck:not(.open) .mat-chip{display:none} .tray-foot{display:flex; align-items:center; gap:8px} .tray-supply{ margin-left:auto; border:none; background:none; cursor:pointer; font-family:inherit; font-size:11px; color:var(--tray-text); opacity:.7; letter-spacing:.04em; } .tray-supply.due::before{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--accent); margin-right:5px; vertical-align:1px; } /* ============================================================ V1.7 视觉整改（8-26 用户拍板「甲」案） 规矩：纸和章保持实物感；容器和控件安静到近乎消失，不假装是别的材料。 ⛔ 不再有木纹桌面、假铁盒、白底图标方块——那些是"假装成木头/金属/图标"的东西。 ============================================================ */ /* ---- 桌布：碎花回来，四个时段只换底色，花跟着底色一起变暖变冷 ---- */ /* ============================================================ 颜色 token（规格 §11 Phase 1：grep 不到裸 hex） 🔴 这是一次**纯重构**：每个 token 的值就是它替换掉的那个字面量，一个像素都不该变。 所以下面会出现两个很像的棕色（--tray-text 是木托盘时期的、--linen-text 是 V1.7 亚麻的） —— 合不合并是**设计决定**，不在这一轮里做。 ⛔ 例外，故意不收的： · `:root` 里那些 token 自己的定义值（它们就是源头） · `.deck-cats` 遮罩里的 #000 —— 那是透明度模板不是颜色，换肤时不该跟着变 · `--floral` 那条 data URI 里的 %23xxxxxx —— 花色靠整组 opacity 往纸色里退， 换季时会跟着纸一起变暖变冷，抽出来反而破坏这个机制（见 --floral 上面那段注释） ⚠️ JS 里那 56 处**不能**搬到这儿：分享卡是把 SVG 塞进 光栅化的， 那是个隔离文档，读不到页面的 CSS 自定义属性（跟"卡上字形章会换字体"同一个坑）。 ============================================================ */ :root{ /* 亚麻托盘（V1.7 视觉整改） */ --linen:#EDE7DA; --linen-text:#8A7F70; /* 纸面上的小卡 / 贴纸 / 便签 / 谜面 */ --sticker:#FDFBF6; --card:#FFFDF8; --booklet-page:#F1E9D9; --riddle-1:#F5E4C4; --riddle-2:#FCF0DA; /* 比 --sub 再淡一档的小字 */ --sub-soft:#A79E92; --sub-faint:#C6BEB2; --sub-dry:#B5ADA1; /* 印泥铁盒：常态 / 干了 / 「默」 */ --tin-hi:#E4E1DA; --tin-lo:#A9A69E; --tin-dry-hi:#DEDBD4; --tin-dry:#BFBCB4; --tin-dry-lo:#9E9B94; --tin-base-hi:#FFFDF7; --tin-base:#F2EADA; --tin-base-lo:#DCD2BE; --tin-base-flat:#FBF7EE; --tin-desk:#D3D0C7; /* 章：木柄（已发现 / 未发现）与橡皮章面 */ --handle-hi:#E0B075; --handle:#C9924E; --handle-raw-hi:#DBC8B4; --handle-raw:#C6B29C; --handle-raw-lo:#AD9A85; --carve-hi:#F3D6C6; --carve-mid:#EBC7B5; --carve-lo:#D6AC98; /* 封面两款 */ --cover-rose:#D6AEAD; --cover-rose-edge:#BC8E8C; --cover-rose-text:#7A4E4C; --cover-rose-sub:#9C7270; --cover-rose-band:#A87D7B; --cover-cream:#E2D3B8; --cover-cream-edge:#C3AE8B; --cover-cream-text:#7A6647; --cover-cream-sub:#96805F; --cover-text:#6F5232; /* 本子厚度：叠出去的纸边 / 翻过去的纸叠 / 开场书口 */ --stack-1:#F5F0E6; --stack-2:#EFE9DC; --stack-3:#E7DFCE; --stack-4:#DFD6C2; --pstack-1:#F3EEE3; --pstack-3:#E4DCCB; --edge-1:#F1EADD; --edge-2:#EAE2D2; --edge-3:#E1D8C6; /* 翻页 / 卷角 / 折角 */ --turn-back:#F2EDE1; --curl-back:#F4EFE4; --fold-hi:#EFE7D6; --fold-lo:#E6DCC7; /* 书架四季书脊 */ --season-spring:#B7CDA6; --season-summer:#9DC6C4; --season-autumn:#D8AE7E; --season-winter:#B3B6C9; /* 按钮 / 木托盘时期残留 / 其它 */ --btn-face:#F8F4EC; --chip-on:#FBF3E4; --chip-on-text:#5C5348; --tray-hi:#F3DEB6; --tray-lo:#E8CA95; --box-w:#EBD09C; --box-p:#EDEBE6; --title-num:#8C6A4F; --app-bg:#EAE5DA; } :root{ --cloth:#F6F2EA; } [data-time-band="dawn"] { --cloth:#EFEADF; } [data-time-band="day"] { --cloth:#F6F2EA; } [data-time-band="dusk"] { --cloth:#F3E7D3; } [data-time-band="night"] { --cloth:#E6E4E4; } /* 夜里也是浅的：压黑过一版，用户实测打回 */ #page-today,#page-memories,#page-collection,#page-me{ background-color:var(--cloth); background-image:var(--floral); transition:background-color 2s linear; } /* ⛔ 木纹桌面作废（8-26 用户：「不要那个所谓的桌面设计了，还不如原来的小花桌布」） */ #page-today{background-image:var(--floral)} [data-time-band="dawn"] #page-today,[data-time-band="day"] #page-today, [data-time-band="dusk"] #page-today,[data-time-band="night"] #page-today{ background-color:var(--cloth); } /* ---- 托盘：一块亚麻布垫，不是木头 ---- */ .deck{ border:1px solid rgba(120,105,85,.16); border-radius:10px; background: repeating-linear-gradient(0deg, rgba(120,105,85,.045) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(120,105,85,.045) 0 1px, transparent 1px 4px), var(--linen); box-shadow:0 1px 0 rgba(63,53,48,.06); } .deck-grab{width:44px; height:5px; background:rgba(120,105,85,.22); margin:5px auto 6px} .tray-foot{border-top:1px solid rgba(120,105,85,.14)} .tray-note,.tray-supply{color:var(--linen-text)} /* ---- 章：脱掉图标外壳，露出章本身 ---- */ /* 之前是「白底圆角方块 + 棕色小帽子」——那是 App 图标的形。同一枚章画在纸上很好看， 进了托盘却被套上一层壳，两种语言打架（8-26 用户：「一做出来真是无语」）。 */ .dk-stamp .handle{display:none} .dk-stamp .face{ width:auto; height:auto; margin:0; padding:0; background:none; border:none; box-shadow:none; border-radius:0; } .dk-stamp .face svg{width:38px; height:38px} .dk-stamp{ /* ⚠️ 8-27：A5 给格子加了 1px 边框，收起态今日页当场溢出 2px（断言抓到 651 vs 649）。 2px 肉眼看不出来，但**页面一旦可滚，原生壳抢手势那个 bug 就回来了**。上下各收 1px 抵掉。 */ padding:3px 0 2px; border-radius:8px; transition:transform 140ms var(--ease-out); } .dk-stamp .nm{font-size:9.5px; color:var(--linen-text); opacity:.7; margin-top:1px; letter-spacing:.02em} /* 选中 = 把它拿起来。不描边、不加高亮底——"拿在手上"是物理事实，不是选中状态 */ .dk-stamp.sel{transform:translateY(-5px) scale(1.06)} .dk-stamp.sel .face svg{filter:drop-shadow(0 3px 3px rgba(63,53,48,.22))} .dk-stamp.sel .nm{opacity:1; color:var(--ink)} /* ---- 印泥：一排颜色点，不是一排铁盒 ---- */ /* 印泥本来就是颜色。灰圈、盒盖、金属高光全删；余量还是用点的直径表示，不出现次数。 */ .deck-inks{gap:10px} .dk-ink{transition:transform 140ms var(--ease-out)} .dk-ink .can{ width:30px; height:30px; border:none; box-shadow:none; background:none; } .dk-ink .ink{box-shadow:none} .dk-ink.base .can{ background:var(--tin-base-flat); border:1px solid rgba(120,105,85,.28); border-radius:50%; width:26px; height:26px; } .dk-ink.base .bs{color:var(--linen-text); font-size:11px; opacity:.9} .dk-ink.dry .can{opacity:.3} .dk-ink.sel{transform:scale(1.22)} .dk-ink.sel .can{box-shadow:0 0 0 1.5px rgba(63,53,48,.28)} .dk-ink.sel.base .can{border-color:rgba(63,53,48,.45)} /* ---- 「更多 / 收起」：交给拉手，文字退成一行小字 ---- */ .deck-more{ border:none; background:none; padding:2px 4px; writing-mode:horizontal-tb; font-family:var(--f-ui); font-size:11px; color:var(--linen-text); letter-spacing:.06em; line-height:1.4; } .deck.open .deck-more{background:none; padding:2px 4px} /* ---- 材质：安静的小字，不做成填色标签 ---- */ .mat-chip{ border:1px solid rgba(120,105,85,.22); background:none; color:var(--linen-text); border-radius:4px; padding:2px 8px; } .mat-chip.on{background:rgba(120,105,85,.14); border-color:rgba(120,105,85,.4); color:var(--chip-on-text)} /* ---- 封皮两版皮肤（8-26 用户拍板：甲乙都做，让用户自己选）---- ⛔ 那条塑料感的红杠松紧带、桌上那个假铁盒都删了。 */ /* 贴纸只能待在封面上，越界就掉到桌布上了 */ .op-cover{background-image:none; overflow:hidden} .op-band{display:none} /* 甲 · 布面藕粉（比稿版压淡了半档：原色在浅碎花上太跳） */ .op-cover.cover-rose{ background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 3px), var(--cover-rose); border-color:var(--cover-rose-edge); } .op-cover.cover-rose .op-spine{background:var(--cover-rose-edge)} .op-cover.cover-rose .op-t{color:var(--cover-rose-text)} .op-cover.cover-rose .op-mon{color:var(--cover-rose-sub)} /* 乙 · 布面奶油 */ .op-cover.cover-cream{ background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.028) 0 1px, transparent 1px 3px), var(--cover-cream); border-color:var(--cover-cream-edge); } .op-cover.cover-cream .op-spine{background:var(--cover-cream-edge)} .op-cover.cover-cream .op-t{color:var(--cover-cream-text)} .op-cover.cover-cream .op-mon{color:var(--cover-cream-sub)} /* 织带：跟布同族的哑光细带，只有藕粉那版有 */ .op-cover.cover-rose::after{ content:""; position:absolute; top:-2px; bottom:-2px; left:81%; width:6px; background:var(--cover-rose-band); opacity:.85; } /* ---- 合上本子（8-26 用户加）：托盘顶栏先退场，封面再转回来盖上 ---- */ #page-today.op-closing #deck{animation:op-deck 200ms both reverse} #page-today.op-closing .t-bar, #page-today.op-closing .paper-count{animation:op-fade 140ms both reverse} .op-cover.closing{animation:op-open 520ms cubic-bezier(.45,.05,.3,1) both reverse} .t-close{margin-left:4px} /* ---- 桌上还没贴的贴纸：自定义贴纸的入口（现在是装饰，将来可拖到封面上）---- */ .loose-sticker{ position:absolute; line-height:0; padding:4px; border-radius:5px; background:var(--sticker); box-shadow:0 1px 2px rgba(63,53,48,.16); opacity:.92; } /* ---- 我的页：本子封面选色 ---- */ .cover-pick{display:flex; gap:8px; margin-left:auto} .cover-pick .cv{ width:24px; height:30px; border-radius:3px; cursor:pointer; padding:0; border:1px solid rgba(63,53,48,.18); } .cover-pick .cv.rose{background:var(--cover-rose)} .cover-pick .cv.cream{background:var(--cover-cream)} .cover-pick .cv.on{box-shadow:0 0 0 2px rgba(63,53,48,.42)} /* ---- 贴纸：模切和手裁两种混着（8-26 用户拍板）---- ⛔ 白底圆角方块作废——那跟托盘里刚拆掉的图标外壳是同一个形。 两种真贴纸的样子：模切 = 白边贴着图案自己的笔画走，没有底纸； 手裁 = 剪刀剪下来的小纸片，四条边都不齐。 */ .op-sticker,.loose-sticker{ position:absolute; line-height:0; background:none; border-radius:0; box-shadow:none; padding:0; } /* 模切：八个方向各描一次白边，够厚时相邻笔画的白边连成一片剪影 */ .op-sticker.die svg,.loose-sticker.die svg{ filter: drop-shadow(2.4px 0 0 var(--sticker)) drop-shadow(-2.4px 0 0 var(--sticker)) drop-shadow(0 2.4px 0 var(--sticker)) drop-shadow(0 -2.4px 0 var(--sticker)) drop-shadow(1.7px 1.7px 0 var(--sticker)) drop-shadow(-1.7px -1.7px 0 var(--sticker)) drop-shadow(1.7px -1.7px 0 var(--sticker)) drop-shadow(-1.7px 1.7px 0 var(--sticker)) drop-shadow(0 1.5px 1.5px rgba(63,53,48,.32)); } /* 手裁：不规则四边形，两个版型交替，别看出是同一个模子 */ .op-sticker.cut,.loose-sticker.cut{ background:var(--sticker); padding:6px; box-shadow:0 1.5px 2px rgba(63,53,48,.2); clip-path:polygon(3% 6%, 46% 1%, 92% 5%, 99% 44%, 95% 93%, 52% 99%, 7% 95%, 1% 48%); } .op-sticker.cut:nth-child(3n),.loose-sticker.cut:nth-child(3n){ clip-path:polygon(6% 2%, 55% 6%, 97% 3%, 94% 50%, 98% 96%, 44% 92%, 4% 97%, 7% 52%); } /* 今天刚发现的那几枚才给记号 */ .op-sticker.new::after{ content:""; position:absolute; right:-3px; top:-3px; width:5px; height:5px; border-radius:50%; background:var(--accent); z-index:2; } .op-sticker.cut.new{background:var(--note)} /* ---- 书架：12 本平分宽度，颜色按季节，高矮按那个月盖了多少（8-26 用户）---- */ .shelf{display:flex; align-items:flex-end; gap:2px} .shelf .bk{ flex:1; min-width:0; width:auto!important; border:none; cursor:pointer; padding:0; border-radius:2px 2px 0 0; position:relative; display:flex; align-items:center; justify-content:center; box-shadow:inset -1px 0 0 rgba(0,0,0,.06), inset 1px 0 0 rgba(255,255,255,.25); } /* 书脊上的字是竖排的——横排 3 个字塞不进 26px 宽的书脊 */ .shelf .bk .bm{ writing-mode:vertical-rl; font-family:var(--f-title); font-size:10px; color:rgba(63,53,48,.62); letter-spacing:.04em; } .shelf .bk.s-spring{background:var(--season-spring)} .shelf .bk.s-summer{background:var(--season-summer)} .shelf .bk.s-autumn{background:var(--season-autumn)} .shelf .bk.s-winter{background:var(--season-winter)} .shelf .bk.future{background:none; border:1px dashed rgba(63,53,48,.2); box-shadow:none} .shelf .bk.future .bm{color:rgba(63,53,48,.28)} .shelf .bk.sel{outline:1.5px solid rgba(63,53,48,.5); outline-offset:1px} .shelf .bk.cur .bm{color:var(--ink)} /* ---- 抽屉：一格一格的凹槽，有的放着章，空的就空着（8-26 用户「摆放」）---- */ /* ⛔ 白底方块 + 棕帽子作废——跟托盘里刚拆掉的图标外壳是同一个形。 */ .dk-cell .handle{display:none} .dk-cell .face{ width:auto; height:auto; background:none; border:none; box-shadow:none; border-radius:0; margin:0; } .dk-cell{ border-radius:8px; padding:8px 2px 6px; background:rgba(120,105,85,.05); box-shadow:inset 0 1px 2px rgba(63,53,48,.07), inset 0 -1px 0 rgba(255,255,255,.5); } .dk-cell .face svg{width:40px; height:40px} .dk-cell .nm{font-size:10px; color:var(--linen-text); margin-top:3px} .dk-cell .ct{font-size:9px; color:var(--sub-soft)} /* 空槽：只留一个很淡的刻痕，不写「？？？」也不写「还没盖过」—— 26 格重复同一句话，是这一页最吵的东西。空着本身就说明了一切。 */ .dk-cell.raw{background:rgba(120,105,85,.035)} .dk-cell.raw .face{opacity:.22} .dk-cell.raw .nm,.dk-cell.raw .ct{display:none} /* 隐藏章的谜面要留着——那是线索，不是噪音 */ .dk-cell.raw .hid-hint{display:block; font-size:9.5px; color:var(--sub-soft); margin-top:3px; line-height:1.4} /* ---- 书架：把旧的木片样式压掉（旧的 .bk.sel 有一圈黑环，跟新的 outline 叠成两圈）---- */ .shelf .bk{border:1px solid rgba(63,53,48,.10); color:inherit; padding-bottom:0} .shelf .bk.sel{box-shadow:inset -1px 0 0 rgba(0,0,0,.06), inset 1px 0 0 rgba(255,255,255,.25)} .shelf .bk.sel::after{ /* 选中：书顶上一个小书签，不是套一圈黑框 */ content:""; position:absolute; left:50%; top:-5px; transform:translateX(-50%); width:8px; height:9px; background:var(--accent); border-radius:1px 1px 0 0; } .shelf .bk.cur .bm{color:var(--ink); font-weight:400} /* ---- 印泥盒：一盘圆形凹槽，墨饼嵌在里面（不是一行一行的列表）---- */ .ink-tray{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px 6px; padding:14px 10px 10px; } .ink-well{display:flex; flex-direction:column; align-items:center; gap:5px} .ink-well .w{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(120,105,85,.07); box-shadow:inset 0 2px 3px rgba(63,53,48,.13), inset 0 -1px 0 rgba(255,255,255,.6); } .ink-well .ink{border-radius:50%; box-shadow:inset 0 1px 2px rgba(37,36,33,.18)} .ink-well .nm{font-size:10px; color:var(--linen-text); letter-spacing:.02em} .ink-well.base .w{background:var(--tin-base-flat); box-shadow:inset 0 0 0 1px rgba(120,105,85,.25)} .ink-well.base .bs{font-size:12px; color:var(--linen-text)} .ink-well.dry .w{background:rgba(120,105,85,.05)} .ink-well.dry .nm{color:var(--sub-dry)} /* 能补的那一槽：点一下补满，边上一个小红点提示 */ .ink-well.can{cursor:pointer; position:relative} .ink-well.can .w{box-shadow:inset 0 2px 3px rgba(63,53,48,.13), 0 0 0 1.5px rgba(201,75,60,.45)} .ink-well.can::after{ content:""; position:absolute; right:8px; top:0; width:6px; height:6px; border-radius:50%; background:var(--accent); } /* ---- 抽屉 · 我的章：分类切换 + 只摆你有的 + 6 列（8-26 用户：甲+乙+丙）---- */ .drawer-cats{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:2px 0 10px; touch-action:pan-x; } .drawer-cats::-webkit-scrollbar{display:none} .drawer-cats button{ flex:none; border:1px solid rgba(120,105,85,.2); background:rgba(255,253,248,.6); border-radius:var(--r-pill,999px); cursor:pointer; font-family:var(--f-title); font-size:11.5px; color:var(--linen-text); padding:4px 11px; } .drawer-cats button.sel{background:rgba(120,105,85,.16); border-color:rgba(120,105,85,.4); color:var(--ink)} /* 丙：6 列，跟托盘展开态一个密度 */ .dk-grid{grid-template-columns:repeat(6,1fr)!important; gap:6px 4px!important} .dk-cell .face svg{width:34px; height:34px} .dk-cell .nm{font-size:9px} .dk-cell .ct{font-size:8.5px} .fold-empty{padding:14px 4px 16px; text-align:center; font-size:12px; color:var(--faint)} /* 甲：没遇到的 / 隐藏章都折起来，默认收着 */ .fold{ margin-top:10px; border-radius:12px; overflow:hidden; background:rgba(255,253,248,.55); border:1px solid rgba(120,105,85,.14); } .fold-t{ width:100%; display:flex; align-items:center; gap:8px; cursor:pointer; border:none; background:none; padding:12px 14px; font-family:var(--f-title); font-size:13px; color:var(--ink); } .fold-n{margin-left:auto; font-size:11.5px; color:var(--linen-text); font-family:var(--f-ui)} .fold-a{color:var(--sub-dry); transition:transform 180ms var(--ease-out)} .fold.open .fold-a{transform:rotate(90deg)} .fold-b{padding:0 10px 12px} /* ---- 印泥盒：每盒印泥待在自己的小格子里（8-26 用户）---- 真的印泥盒就是一个个方格子，圆墨饼嵌在格子当中。 格子负责"分隔"，圆槽负责"凹陷"，两层分工，别让圆槽同时兼这两件事。 */ .ink-tray{ gap:8px; padding:10px; background:rgba(120,105,85,.045); border-radius:10px; box-shadow:inset 0 1px 2px rgba(63,53,48,.06); } .ink-well{ padding:9px 3px 7px; border-radius:7px; background:rgba(255,253,248,.72); border:1px solid rgba(120,105,85,.14); box-shadow:inset 0 -1px 0 rgba(255,255,255,.6); } /* 格子已经给了纵深，圆槽的内阴影就收一点，别叠成两层坑 */ .ink-well .w{ width:40px; height:40px; box-shadow:inset 0 1px 2px rgba(63,53,48,.10), inset 0 -1px 0 rgba(255,255,255,.5); } .ink-well.can{background:rgba(255,250,246,.92); border-color:rgba(201,75,60,.35)} .ink-well.dry{background:rgba(120,105,85,.05)} /* ---- 本子页底部「这一天」：紧凑网格 + 封顶（8-26 用户：盖得多的那天太长）---- */ .day-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px 4px; max-height:124px; /* 约两行；再多就在这块里滚，不把页面撑长 */ overflow-y:auto; scrollbar-width:none; padding:4px 0 2px; } .day-grid::-webkit-scrollbar{display:none} .day-cell{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; border-radius:7px; padding:4px 0 3px; background:rgba(120,105,85,.05); } .day-cell .face{line-height:0} .day-cell .tm{font-size:8px; color:var(--sub-soft); letter-spacing:.02em} .day-cell .del{ position:absolute; right:-2px; top:-4px; width:16px; height:16px; line-height:14px; border:none; background:none; color:var(--sub-faint); font-size:14px; cursor:pointer; padding:0; } .day-cell.arm{background:rgba(201,75,60,.12); box-shadow:inset 0 0 0 1px rgba(201,75,60,.45)} .day-cell.arm .del{color:var(--accent)} /* ---- 分享弹层：就地写这天的一句话（「盖了么」#8「自己输入当天的感受」）---- */ .share-note{margin:10px 0 2px; width:100%} .share-note input{ width:100%; box-sizing:border-box; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r3); background:rgba(255,253,248,.8); font-family:var(--f-hand); font-size:14px; color:var(--ink); outline:none; } .share-note input::placeholder{color:var(--faint); font-family:var(--f-ui); font-size:12.5px} /* ---- 刚盖下的那枚旁边的「写一句」提示（「盖了么」#1 是可发现性问题）---- */ .note-hint{ position:absolute; z-index:4; transform:translate(-50%,48px); /* 48 而不是 26：印记下面还有时间戳，26 会压住它 */ border:1px solid rgba(133,79,11,.22); background:var(--note); color:var(--note-text); border-radius:var(--r-pill,999px); padding:3px 10px; cursor:pointer; font-family:var(--f-ui); font-size:11px; letter-spacing:.04em; white-space:nowrap; box-shadow:0 1px 2px rgba(63,53,48,.14); animation:nh-in 220ms var(--ease-pop) both, nh-out 500ms 3700ms both; } @keyframes nh-in{from{opacity:0; transform:translate(-50%,40px) scale(.9)} to{opacity:1; transform:translate(-50%,48px) scale(1)}} @keyframes nh-out{to{opacity:0}} /* 「字」这一类跟生活章不是一回事，给一点点区分（虚线边），但别抢戏 */ .deck-cats .glyph-chip{border:1px dashed rgba(120,105,85,.45)} /* ---- 日付印的框改成手绘（「盖了么」#4：这个框的画风跟其他不一样）---- ⛔ 试过给整个日付印套章用的 feTurbulence 抖动滤镜（甲案）：1.8px 的细边被打断成一截截、 「星期四」也被啃掉，读起来像渲染出错不像手绘。细线 + 小字扛不住那个滤镜。 ✅ 改成把框画成一条手绘路径当背景，文字保持清晰。 */ .datestamp{ border:none; padding:3px 7px 4px; background:url("data:image/svg+xml;utf8,") no-repeat center/100% 100%; } /* ---- 贴纸拖放（3.1）---- */ .loose-sticker,.op-sticker{cursor:grab; touch-action:none} .sticker-dragging{ cursor:grabbing; z-index:99; pointer-events:none; transform:scale(1.12) rotate(-4deg)!important; filter:drop-shadow(0 4px 6px rgba(63,53,48,.3)); } /* ---- 纸的右下角：一块真正"可捏的角"（8-27 用户实测：手机上右下角翻不动）---- 🔴 病根跟 8-25「章格子拖不动」同一类：.book 用 touch-action:pan-y 时， 起手只要带一点纵向偏移，浏览器就可能判成"要滚页面"并 pointercancel，手势整个没了。 电脑用鼠标没有原生滚动手势，所以只有手机复现。 ✅ 只把这一小块交给我们独占（touch-action:none），纸的其他地方保持能滚页面。 */ .corner-grip{ position:absolute; right:0; bottom:0; width:64px; height:64px; z-index:3; touch-action:none; cursor:grab; } /* 一道很淡的折角暗示：告诉你这儿能捏，但别抢纸的戏 */ .corner-grip::after{ content:""; position:absolute; right:0; bottom:0; width:30px; height:30px; background:linear-gradient(315deg, rgba(63,53,48,.10) 0 42%, transparent 43%); border-bottom-right-radius:var(--r3); } /* ---- 短屏保护：托盘长高之后，纸必须让出位置（8-27）---- 🔴 实测 375×667（iPhone SE/8）：纸按 100/130 撑满宽度就是 429 高， 加上页头 + 190 的托盘 + Tab 栏直接溢出，#page-today 是 overflow:hidden， **溢出的部分不是能滚，是被切掉**——章那一行和材质那行整个看不见。 限的是 .book 的宽度而不是 .canvas 的高度：纸边、卷角那几层都是相对 .book 定位的， 只缩 canvas 会让它们对不上。0.769 = 100/130。 🔴 别用 margin:auto 居中：.book 是列向 flex 的子项，横向 auto 外边距会把 stretch 关掉， 而 .book 的内容全是绝对定位的层 + width:100% 的纸 → 宽度算成 2px，整张纸消失 （实测四个尺寸全 2×2）。要显式 width:100% + align-self:center。 */ /* 高度预算 348 = 头行+托盘收起+标签栏+页内边距（≈320）+ 纸和托盘之间的呼吸位。 🔴 8-31 用户指出 web 宽窗口纸底怼死托盘：手机上纸被「宽度」先卡住、 托盘 margin-top:auto 贴底自然有空隙；宽窗口纸被「高度」顶满预算，预算里 没留一像素间距就贴死。margin-bottom 在手机上被 auto margin 吸收=零变化。 */ /* 🔴 9-02 预算改读 --vh-fixed（main.js freezeViewport 启动量一次 innerHeight 写进来）： 安卓老内核弹键盘会把布局视口压掉键盘那截，直接读 100vh/100dvh 纸会缩到几十像素。 第一行 100vh 是无 JS 的回落；⛔ 别再加 @supports(100dvh) 覆盖——它会把冻结值盖掉。 */ #page-today .book{ width:100%; align-self:center; margin-bottom:14px; max-width:calc((100vh - 348px) * 0.769); max-width:calc((var(--vh-fixed, 100vh) - 348px) * 0.769); } /* 展开态右上角那句「按住一枚章能拎起来」（8-27 新手势的可发现性） ⚠️ 别写进 .tray-foot：展开态那一行要往下滚才看得见（实测截图），教不到人。 这儿跟「收起」同一排，是展开之后第一眼就在的位置。 */ /* 🔴 靠 CSS 藏，别靠"展开时才渲染"：setDeckOpen() 只切类名不重渲染（要留住高度过渡）， 写成条件渲染的话，点「更多」展开出来的托盘里根本没有这个节点（探针实测 FAIL）。 */ .deck:not(.open) .deck-tip{display:none} .deck-tip{ position:absolute; right:10px; top:7px; z-index:2; font-size:10.5px; letter-spacing:.02em; color:var(--linen-text); opacity:.72; pointer-events:none; } /* ============ 8-27 第一批优化（用户真机反馈）============ */ /* ---- A3：顶栏「分享」「合上」改成小图标 ---- */ /* ⚠️ 图标线条跟章一个语气（略歪、圆头）。用通用几何图标就又是「两种视觉语言硬拼」， 那是 8-26 被打回过的病（"一做出来真是无语"）。 */ .t-ico{ border:none; background:none; padding:5px 6px; margin:0; cursor:pointer; color:var(--sub); line-height:0; border-radius:8px; transition:color 140ms var(--ease-out), background 140ms var(--ease-out); } .t-ico:active{ color:var(--ink); background:rgba(120,105,85,.10) } .t-ico svg{ display:block } /* ---- A2：谜面便签默认收成纸左下的小折角，点开才展开 ---- */ /* 🔴 8-27 用户：「左下角便签遮挡位置很大」。原来 max-width:62% 占掉纸左下一大片。 */ .riddle-note{ transition:transform 260ms var(--ease-out), width 240ms var(--ease-out), height 240ms var(--ease-out), opacity 200ms linear } .riddle-note .rn-tab{ display:none } .riddle-note.folded{ width:30px; height:30px; min-height:0; max-width:none; overflow:hidden; transform:rotate(0deg); background:var(--sticker); border-radius:4px 10px 4px 4px; box-shadow:0 1px 0 rgba(63,53,48,.10), inset 0 0 0 1px rgba(120,105,85,.14); } /* 收起态把便签本体和胶带藏掉，只留一个小问号 */ .riddle-note.folded .rn-face,.riddle-note.folded .rn-tape{ opacity:0; pointer-events:none } .riddle-note.folded .rn-tab{ display:block; position:absolute; inset:0; z-index:1; font-family:var(--f-title); font-size:14px; color:var(--sub); opacity:.7; display:flex; align-items:center; justify-content:center; line-height:1; } /* ---- A5：托盘里的章立在凹槽里，看着整齐 ---- */ /* 🔴 用抽屉印泥页那套「凹槽」语言（inset 阴影），**不能用白底圆角方块**—— 那是 App 图标的形，8-26 用户亲手否掉过（"一做出来真是无语"那一轮）。 */ .deck-strip .dk-stamp{ background:rgba(255,253,248,.5); border-radius:7px; box-shadow:inset 0 1px 2px rgba(63,53,48,.07), inset 0 -1px 0 rgba(255,255,255,.55); border:1px solid rgba(120,105,85,.10); } .deck-strip .dk-stamp.sel{ background:rgba(255,253,248,.9); box-shadow:inset 0 1px 2px rgba(63,53,48,.10), 0 1px 0 rgba(63,53,48,.08); border-color:rgba(120,105,85,.26); } /* 收起态是横滑条带，格子之间要有缝才看得出"一格一格" */ .deck:not(.open) #deck-strip{ gap:3px 5px } .deck.open #deck-strip{ gap:6px 5px } /* ============ 字体 / 桌布 可配置（8-27 用户要求）============ */ /* 做法跟封皮那套一样：只往 挂 data 属性，具体长什么样全在 token 里。 ⚠️ 分享卡吃不到这两个设置——它是把 SVG 塞进 光栅化的隔离文档，读不到 CSS 变量。 这条是已知的、故意的（分享卡那块你说单独排）。 */ /* ---- 字体：常规。⚠️ 只用系统字体栈，**不引第三个 woff2** ---- 每多一款自托管中文字体就是几百 KB，包体和首屏都要付钱； 而"常规"这个需求要的正是"没有个性的那种"，系统字体正好。 */ :root[data-look-font="plain"]{ --f-title:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; --f-ui:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; --f-hand:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; } /* 快乐体没有粗体、靠字形本身立住；换成系统字体后标题会显得轻，补一点字重 */ :root[data-look-font="plain"] .col-title, :root[data-look-font="plain"] .op-cover .op-t, :root[data-look-font="plain"] .bl-t{font-weight:600} /* ---- 语言：字体与排版（跟 data-look-* 同一套做法，只往 挂 data-lang）---- ⛔ 中文不写在这里：不带 data-lang 或 data-lang="zh" 时走上面的默认 token， 所以中文界面一个字节都不变，这是这次重构唯一的验收标准。 🔴 日文：ZCOOL KuaiLe（快乐体）**一个假名都没有**（实测平假名 0/86、片假名 0/90， 连「気」「実」这种日本汉字也没有）。而 --f-title 的第一顺位正是它， Tab 栏、按钮、卡片标题全用这个 token。 CSS 是逐字回退的，所以日文**不会掉字**，会落到下一顺位「小赖」—— 结果是同一句话里汉字快乐体、假名小赖，两种笔形混排，不报错、极难发现。 解法就是把 --f-title 换成小赖打头（它本来就是第二顺位，风格不跳）。 小赖 44871 字、文楷 46490 字，假名都是 86/86 + 90/90 全覆盖。 */ :root[data-lang="ja"]{ --f-title:"Xiaolai","LXGW WenKai","Hiragino Sans","Yu Gothic",sans-serif; --f-ui:"Xiaolai","Hiragino Sans","Yu Gothic","Meiryo",sans-serif; --f-hand:"LXGW WenKai","Xiaolai","Hiragino Mincho ProN","Yu Mincho",serif; } /* 封面标签是按 3 个全角字排的：「ライフスタンプ」7 个字 26px 直接撑破换行， 收到 19px 一行放得下（正式日文名定了再回头看这一档）。 */ :root[data-lang="ja"] .op-cover .op-t{font-size:19px} /* 英文：走系统拉丁栈。中文字库里是带拉丁字形，但字重和间距都不对（别的项目上踩过）， 而英文这边用户要求不高——能用且全就行，不值得再引一款自托管拉丁字体。 */ :root[data-lang="en"]{ --f-title:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --f-ui:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --f-hand:"Bradley Hand","Segoe Script","Comic Sans MS",cursive; } /* 🔴 中文界面到处在用 letter-spacing（79 处），拉开字距在中日文里好看， 在拉丁文里会把单词拆散、严重影响可读性。英文一律压回去。 ⚠️ 这是整条声明的覆盖，新加的组件如果自己写了 letter-spacing 也会被这条盖住， 要单独放开就写得比它更具体。 */ :root[data-lang="en"] *{letter-spacing:normal !important} /* 竖排的月份标签：中日文竖着读没问题，英文竖排会变成一列字母 */ :root[data-lang="en"] .mem-y-tab, :root[data-lang="en"] [style*="writing-mode"]{writing-mode:horizontal-tb !important} /* ---- 桌布：素色 / 细格。碎花是默认，见 --floral ---- */ :root[data-look-desk="plain"]{ --floral:none; } :root[data-look-desk="grid"]{ /* 🔴 必须是 repeating-linear-gradient。普通 linear-gradient **不重复**—— 只会在元素最顶上画一条 1px 线，往下全透明，看起来跟"素色"一模一样（实测撞到）。 ⚠️ 顺带：.055 也太淡，提到 .10 才看得见。 */ --floral:repeating-linear-gradient(0deg, rgba(120,105,85,.10) 0 1px, transparent 1px 15px), repeating-linear-gradient(90deg, rgba(120,105,85,.10) 0 1px, transparent 1px 15px); } /* ---- 「我的」页里的小选择器 ---- */ .pick-row{display:flex; gap:6px; align-items:center} .pick-row .pk{ border:1px solid var(--line); background:var(--card); border-radius:var(--r3); font-family:inherit; font-size:12px; color:var(--sub); padding:4px 10px; cursor:pointer; } .pick-row .pk.on{border-color:var(--ink); color:var(--ink)} /* 桌布是三块小色卡，不是文字按钮——颜色/纹理本来就该拿眼睛选 */ .pick-row .dk-sw{ width:26px; height:26px; padding:0; border-radius:var(--r3); background-color:var(--paper); background-size:22px 22px; } .pick-row .dk-sw.floral{background-image:var(--floral-swatch)} :root{ --floral-swatch:url("data:image/svg+xml;utf8,"); } /* 色卡专用：不受 data-desk 覆盖 */ .pick-row .dk-sw.plain{background-image:none} .pick-row .dk-sw.grid{ background-image:linear-gradient(0deg, rgba(120,105,85,.16) 0 1px, transparent 1px 7px), linear-gradient(90deg, rgba(120,105,85,.16) 0 1px, transparent 1px 7px); background-size:7px 7px; } .pick-row .dk-sw.on{box-shadow:0 0 0 2px rgba(37,36,33,.35)} /* ---- 纸的样式：点点格（默认）/ 纯白（8-27 用户要求再加一种）---- 纸面上所有地方都是靠这两个 token 画的（今日页的纸、月视图的小纸、我的页那两张卡）， 所以改这两个就够，不用一处处去找。 */ :root[data-look-paper="plain"]{ --paper-page:#FFFFFF; --paper-dot:transparent; /* 点点格的圆点直接透明掉，网格的间距参数不用动 */ } /* 「我盖过的」的展开/收起：不是按钮长相，是一行可点的小字 */ .mine-more{ display:block; width:100%; margin:10px 0 0; padding:8px 0; border:none; background:none; cursor:pointer; font-family:var(--f-title); font-size:11.5px; color:var(--sub); letter-spacing:.1em; } .mine-more:active{color:var(--ink)} /* ---- 分享弹层里的「发个链接给朋友」---- */ /* 分享弹层里那句「发给朋友，他们能给你留一枚封蜡」。 ⚠️ 宽度跟着按钮走、不要顶满弹层，否则两行字比按钮还宽，读起来像报错提示。 */ .share-hint{ max-width:300px; margin:16px auto 0; font-family:var(--f-hand); font-size:12.5px; line-height:1.75; color:var(--sub); letter-spacing:.02em; } .sh-linkbox:empty{display:none} .sh-linkbox{margin-top:10px; width:100%; max-width:300px} .sh-linkbox .sh-url{ font-size:11.5px; letter-spacing:0; color:var(--sub); word-break:break-all; background:rgba(120,105,85,.09); border-radius:8px; padding:9px 11px; line-height:1.6; /* 复制失败时要能让用户自己长按选中，所以这里必须可选中 */ user-select:text; -webkit-user-select:text; } .sh-linkbox .sh-copy{margin-top:8px} .sh-linkbox .sh-tip{font-size:11px; color:var(--faint); line-height:1.8; margin-top:8px; letter-spacing:.04em} /* ---- 账号与同步（8-30，我的页）。只用既有 token，三语共用 ---- */ .acc-box{background:var(--paper-page,#FBF8F1); border-radius:12px; padding:14px 16px; margin:6px 0 18px; box-shadow:0 1px 0 rgba(63,53,48,.06)} .acc-hint{font-size:12.5px; color:var(--sub); line-height:1.8} .acc-btn{display:block; width:100%; margin-top:8px; padding:12px; border-radius:10px; border:1px solid var(--line,#D8D2C6); background:var(--paper,#F7F3EB); font-family:inherit; font-size:14.5px; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent} .acc-btn.dark{background:#252421; color:#F7F3EB; border-color:#252421} /* 删除账号：放在退出登录下面，故意做轻（无边框、小字、灰），两下确认后才真删 */ .acc-btn.quiet{border-color:transparent; background:transparent; color:var(--sub); font-size:13px; padding:8px} .acc-btn.quiet[data-arm]{color:var(--accent)} .acc-row{display:flex; justify-content:space-between; align-items:center; font-size:13.5px; padding:3px 0; gap:8px} .acc-row .v{color:var(--sub); font-size:12px} .acc-msg{font-size:12px; color:var(--sub); margin-top:8px; min-height:1em} /* 手机号登录（8-31，国内网页版）。输入框吃满一行剩余宽，按钮保持内容宽。 */ .acc-input{flex:1; min-width:0; padding:10px 12px; border-radius:10px; border:1px solid var(--line,#D8D2C6); background:var(--paper,#F7F3EB); font-family:inherit; font-size:14.5px; color:var(--ink); outline:none} .acc-input::placeholder{color:var(--faint)} .acc-row .pk{white-space:nowrap} .acc-row .pk.dark{background:#252421; color:#F7F3EB; border-color:#252421} .acc-row .pk:disabled{opacity:.45; cursor:default} /* ---- 8-30 重构：一年一本 · 月份便签（书架 .shelf 系退役，样式留着不碍事）---- */ .mt-year{display:flex; align-items:center; justify-content:center; gap:10px; margin:2px 0 6px} .mt-year .yr{font-family:var(--f-hand); font-size:14px; color:var(--sub); letter-spacing:.08em} .mt-year button{border:none; background:none; color:var(--faint); font-size:16px; padding:2px 10px; cursor:pointer} .mt-year button:disabled{opacity:.3} .month-tabs{display:flex; gap:3px; margin:0 0 10px; align-items:flex-end} .mtab{ flex:1; min-width:0; border:none; cursor:pointer; padding:5px 0 4px; border-radius:6px 6px 0 0; font-family:var(--f-ui); font-size:10.5px; letter-spacing:0; color:var(--ink); opacity:.55; line-height:1; border-bottom:2px solid transparent; -webkit-tap-highlight-color:transparent; } .mtab.s-spring{background:var(--season-spring)} .mtab.s-summer{background:var(--season-summer)} .mtab.s-autumn{background:var(--season-autumn)} .mtab.s-winter{background:var(--season-winter)} .mtab.inked{opacity:.8} .mtab.sel{opacity:1; padding-top:8px; border-bottom-color:rgba(63,53,48,.35); font-weight:600} .mtab.future{opacity:.25} /* ---- 8-30 重构：纸下缘那行字的三态 ---- */ /* mine = 用户自己写的：实墨。系统代笔（默认 .verdict-line 的 .8）比它淡一档，占位再淡 */ .verdict-line.mine{opacity:1} .verdict-line.ghost{opacity:.38; color:var(--sub); font-size:13px} /* 可点（只有今日纸上带 data-line 的那份；paperHTML 预览不带，保持 pointer-events:none） */ #today-canvas .day-line{pointer-events:auto; cursor:pointer}