/* ============================================================ 打卡有数 · 萌猫数据榜单 自托管版设计语言。奶油白底、阳光黄主色，大圆角卡片 + 极轻阴影， 胶囊按钮，数字用黑色粗体压住版面，排行用奖牌，空状态配猫咪和鼓励语。 说明：这一版不再是小程序 wxss 的机器转换。类名保持不变（页面结构不动）， 但取值整套重写，所以自托管版和小程序现在是两套外观，这是有意为之。 ============================================================ */ :root{ /* 圆头字体。西文/数字走 Baloo 2（有真字重），汉字自动落到阿里健康体。 两套字体文件都在 public/fonts/ 里随包发布，断网也能用。 */ --font: 'Baloo 2','AlibabaHealthFont',-apple-system,BlinkMacSystemFont, "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; /* ---- 底色 ---- */ --cream: #fffaf0; /* 页面奶油白 */ --cream-deep: #fff3d9; /* 稍深一档，用于分区 */ --card: #ffffff; /* ---- 主色：阳光黄 ---- */ --sun: #ffc22e; --sun-deep: #ffab00; --sun-soft: #fff4d1; --sun-line: #ffe4a0; /* ---- 辅助色 ---- */ --sky: #4d9df7; --sky-soft: #e6f1ff; --coral: #ff7a45; --coral-soft: #ffece2; --green: #34c07a; --green-soft: #e3f8ee; --pink: #ff8fab; --pink-soft: #ffeef3; /* ---- 文字 ---- */ --ink: #2b2b2b; /* 标题与数字 */ --ink-2: #5a5a5a; /* 正文 */ --ink-3: #9b9b9b; /* 次要说明 */ --ink-4: #c2c2c2; /* 占位 */ /* ---- 形状 ---- */ --r-card: 18px; --r-inner: 14px; --r-pill: 999px; --shadow: 0 4px 16px rgba(255,178,54,.10); --shadow-up: 0 -3px 14px rgba(255,178,54,.10); --hairline: 1px solid #f4ece0; --tabbar-h: 58px; --tabbar-safe: calc(58px + env(safe-area-inset-bottom)); } [hidden]{display:none!important} *{scrollbar-width:none;-ms-overflow-style:none;box-sizing:border-box} *::-webkit-scrollbar{width:0;height:0;display:none} html{ background:var(--cream-deep); touch-action:pan-x pan-y; -webkit-text-size-adjust:100%;text-size-adjust:100%; -webkit-tap-highlight-color:transparent; } html,body{height:100%;overflow:hidden} body{ margin:0;padding:0;line-height:1.6; background:var(--cream); font-size:14px;color:var(--ink-2); font-family:var(--font); -webkit-font-smoothing:antialiased; touch-action:pan-x pan-y; /* 阿里健康体这一份是单字重，让浏览器合成粗体会糊成一团。 关掉合成：汉字始终用它本来的圆头粗度，层级靠字号和颜色拉开； 数字和西文走 Baloo 2，那套有真的 700/800，加粗是真加粗。 */ font-synthesis-weight:none; -webkit-font-synthesis:none; } /* 表单控件默认不继承字体，要单独指一次，否则输入框里会变回系统黑体 */ input,textarea,select,button{font-family:var(--font)} /* ============ 外壳：顶栏 + 可滚内容 + 标签栏 ============ */ #shell{ max-width:480px;margin:0 auto; height:100vh;height:100dvh; display:flex;flex-direction:column; background:var(--cream);position:relative;overflow:hidden; box-shadow:0 0 40px rgba(255,178,54,.13); } #app{ flex:1 1 auto;min-height:0; overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch;overscroll-behavior:contain; } .navbar{ flex:0 0 auto;z-index:40;height:50px; background:var(--cream); display:flex;align-items:center;padding:0 6px; border-bottom:var(--hairline); } .navbar .back{ width:38px;height:38px;border:none;background:none;cursor:pointer; font-size:24px;color:var(--ink);line-height:1;padding:0;font-family:inherit; } .navbar .title{ position:absolute;left:0;right:0;text-align:center; font-size:16.5px;font-weight:800;color:var(--ink);pointer-events:none; } .navbar .act{ margin-left:auto;z-index:1;border:none;background:var(--sun-soft);cursor:pointer; font-size:12.5px;color:var(--sun-deep);font-weight:700; padding:6px 12px;border-radius:var(--r-pill);font-family:inherit; } /* 底部标签栏：图标 + 文字，图标取自品牌素材 */ .tabbar{ flex:0 0 auto;z-index:40; background:var(--card);border-top:var(--hairline); display:flex;padding-bottom:env(safe-area-inset-bottom); } .tabbar a{ flex:1;text-align:center;height:var(--tabbar-h);position:relative;z-index:0; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; font-size:11.5px;color:var(--ink-3);text-decoration:none;font-weight:600; } /* 选中态用图标后面的柔和黄色胶囊来表示。 不要给未选中的图标加 grayscale —— 这套素材是彩色 3D 渲染，灰度化之后发脏。 */ .tabbar a::after{ content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);z-index:-1; width:44px;height:30px;border-radius:var(--r-pill);background:transparent; } .tabbar a::before{ content:"";width:25px;height:25px; background-size:contain;background-repeat:no-repeat;background-position:center; opacity:.55;transition:none; } /* 图标由 app.js 通过 --ic 变量注入，标签栏是按身份动态生成的 */ .tabbar a::before{background-image:var(--ic)} /* 五项的时候一格只有 20% 宽，字号和胶囊都要收一点 */ .tabbar.t5 a{font-size:10.5px} .tabbar.t5 a::before{width:23px;height:23px} .tabbar.t5 a::after{width:38px;height:28px} .tabbar a.on{color:var(--sun-deep);font-weight:800} .tabbar a.on::after{background:var(--sun-soft)} .tabbar a.on::before{opacity:1} /* ============ 容器与卡片 ============ */ .container{padding:12px;box-sizing:border-box} .card{ background:var(--card); border-radius:var(--r-card); padding:15px;margin-bottom:12px; box-shadow:var(--shadow); } .card-title{ font-size:15.5px;font-weight:800;color:var(--ink); margin-bottom:11px;display:flex;align-items:center;justify-content:space-between;gap:8px; } /* 标题右边那句附注：**标题优先**。 附注长了就让它自己换行、自己缩，绝不能把左边的标题挤成两行 —— 「3. 打卡凭证」被挤成「3. 打卡凭 / 证」是这条规则没写时的真实样子。 */ .card-title .muted{font-weight:500;text-align:right;font-size:11.5px;min-width:0} .card-title > span:first-child{flex:none} .row{display:flex;align-items:center} .row-between{display:flex;align-items:center;justify-content:space-between} .column{display:flex;flex-direction:column} .divider{height:1px;background:#f4ece0;margin:11px 0;border:none} .muted{color:var(--ink-3);font-size:12px} .hint,.hint-line{font-size:11.5px;color:var(--ink-3);line-height:1.7;margin:-2px 0 10px} .notice{color:var(--ink-3);font-size:12px} /* 空状态：猫咪 + 鼓励语 */ .empty{ text-align:center;color:var(--ink-3);font-size:13px; padding:26px 20px 30px;line-height:1.8; } .empty::before{ content:"";display:block;width:96px;height:96px;margin:0 auto 6px; background:url(/art/cat-wink.png) center/contain no-repeat; } /* ============ 文字与数字 ============ */ .title{font-size:19px;font-weight:800;color:var(--ink)} .desc{font-size:13px;color:var(--ink-3);line-height:1.8} .version{text-align:center;color:var(--ink-4);font-size:11px;padding:6px 0 4px} /* 数据格子：数字是主角，黑色粗体 */ .grid{display:flex;flex-wrap:wrap;margin:-4px} .grid-item{width:25%;padding:4px;box-sizing:border-box} .stat-tile{ background:var(--sun-soft);border-radius:var(--r-inner); padding:11px 6px;text-align:center; } .stat-num{font-size:20px;font-weight:900;color:var(--ink);letter-spacing:-.5px} .stat-label{font-size:11px;color:var(--ink-3);margin-top:3px;font-weight:600} .grid-item:nth-child(4n+2) .stat-tile{background:var(--sky-soft)} .grid-item:nth-child(4n+3) .stat-tile{background:var(--green-soft)} .grid-item:nth-child(4n+4) .stat-tile{background:var(--pink-soft)} /* ============ 按钮：胶囊 ============ */ button{padding:0;margin:0;border:none;line-height:normal;background:none;font-family:inherit} button::after{border:none;border-radius:0;content:none} .btn{ display:flex;align-items:center;justify-content:center;gap:6px; height:46px;min-height:46px;line-height:1;padding:0 16px;margin:0; border-radius:var(--r-pill);text-align:center; font-size:15px;font-weight:800;box-sizing:border-box;white-space:nowrap; font-family:inherit;cursor:pointer; } .btn-primary{ background:linear-gradient(180deg,var(--sun) 0%,var(--sun-deep) 100%); color:#4a3200;box-shadow:0 4px 12px rgba(255,171,0,.32); } .btn-plain{background:var(--card);color:var(--sun-deep);border:1.5px solid var(--sun-line)} .btn-gray{background:#f3efe6;color:var(--ink-2)} /* 「限制账号 / 停用账号 / 暂停这个号」这一类。 这些动作会让一个人当场登不进来，或者让一个号从所有人的列表里消失 —— 在一排米白按钮里长得跟「编辑资料」一模一样，是迟早要点错的。 所以给它自己一档颜色：珊瑚红实心，跟主按钮的黄一样醒目，但一眼就知道不是一路的。 **不配图标**：小锁、暂停这些符号在 46px 的按钮里只有十几像素， 既认不出来又把字挤窄，颜色本身已经把话说完了。 */ .btn-danger{ background:linear-gradient(180deg,#ff8a5c 0%,var(--coral) 100%); color:#fff;box-shadow:0 4px 12px rgba(255,122,69,.34); } .btn-danger:active{transform:scale(.98)} .btn[disabled]{opacity:.5} .btn-sm{height:32px;min-height:32px;padding:0 14px;font-size:13px;display:inline-flex} button.btn{width:100%} .full{width:100%} .mt20{margin-top:14px} .mt24{margin-top:16px} .quick-row{display:flex;gap:10px;margin-top:10px} .quick-btn{ flex:1;background:var(--sun-soft);border-radius:var(--r-inner); padding:10px 8px;text-align:center;font-size:13px;font-weight:700;color:var(--ink); } /* 按键（或一整行按键）与紧随其后的说明文字、内容之间统一留出 10px。 说明文字自带的 margin-top 为 6px（.mt8）或 -2px（.hint），贴在按键下方显得拥挤。 */ :is(.btn, .btn-row, .quick-row, .blogger-picks, .dialog-btns) + :is(.muted, .hint, .hint-line, .bdl-g, .bdl-acc){margin-top:10px} /* ============ 标签 ============ */ /* ---- 药丸里的文字和图标怎么摆到视觉中线上 ---- 这套字体（Baloo 2 + 阿里健康体）的行盒下方给西文的降部（g p y 那一截） 留了空间，而中文字形根本没有降部 —— 于是「行盒居中」和「看得见的字居中」 差了一截。实测：11px 的标签在 23.6px 的药丸里，墨迹偏上 **1.9px**。 光把 padding 写成上下对称是修不好的：对称的是行盒，不是字。 两件事一起做才行： line-height:1 把行盒收到跟字号一样高 上下 padding 差 D 把剩下的那点压回视觉中线（内容盒整体下移 D/2） **D 补多少必须一个字号一个字号地量，不能按比例推。** 浏览器把字体的 ascent/descent 按像素取整之后再用，取整余数每个字号都不一样， 所以「墨迹中心离行盒中心多远」（记作 k）是锯齿状的，不是一条直线。 拿「国」字（墨迹正好是表意字框，上下对称）在 DPR 2/3/8 各量一遍，三档一致： 字号 10.5 11 11.5 12 12.5 13 13.5 14 15 k -0.89 -0.79 -1.26 -0.16 -0.51 +0.48 +0.22 +0.16 -0.72 要墨迹落在几何中线上，就要 D/2 = −k，即 **D = −2k**： 11px → D=2 11.5px → D=3 12.5px → D=1 13px → D=−1（下边反而要多留） 13px 那档 k 是正的，字本来就偏下，再往下压就成了 ev-close 以前偏 1.6px 的样子。 改字体、改字号之后这张表全部作废，要用 scratchpad 里那套 8 倍图重新量。 **图标分两种，行为不一样：** · background-image 画的（tag-* 那几枚符号）：background-position 的 center 认的是 padding box 的中心，上下 padding 不等也不影响，不用补。 · ::before 画的（ic-f 那几枚）：它是 flex 子项，align-items:center 认的是 **内容盒**的中心，而内容盒已经被不对称的 padding 往下推了 D/2 —— 于是文字居中了、图却低了 D/2。所以这一类要 margin-top:−D 原样补回来。 */ .tag{ display:inline-flex;align-items:center;line-height:1; padding:7px 9px 5px;border-radius:var(--r-pill); font-size:11px;font-weight:700;margin-right:6px;white-space:nowrap; vertical-align:middle; } /* 各类状态各缀一个 13px 的符号：不用读完那几个字就知道是好是坏。 位置用 background-position 定，认的是 padding box 的中心， 所以上面那套「上下 padding 差 D」的居中修法不会把符号带歪。 */ .tag-draft,.tag-pending,.tag-submitted,.tag-approved,.tag-rejected, .tag-off,.tag-warn,.tag-link,.tag-count,.tag-who{ padding-left:23px; background-repeat:no-repeat;background-position:5px center;background-size:13px 13px; } /* 「草稿」和「待审核」共用沙漏和黄底 —— 它们从来不会出现在同一张列表里 （一个说的是打卡记录、一个说的是账号），但**必须是两个类名**： 待审核以前跟「已拒绝」共用红叉，改回来之后要有个地方钉住 「待审核不是被拒绝」这件事，自测查的就是这个类名。 **沙漏用 st-wait，不是 s-pending。** 这两张都是正式素材，分工不同： st-* 是一套简笔符号，专给 13px 的徽章用 —— 那个尺寸上，立体、带高光、 有三四种颜色的图会糊成一团，认不出是什么；s-* 是一套立体图标， 给几十像素的大位置用（色卡、标题、状态页）。 v2.28.0 把徽章换成了 s-pending，是把两套的分工弄混了，这一版改回来。 */ .tag-pending {background-color:var(--sun-soft); color:#b07800; background-image:url(/art/st-wait.png)} /* v2.32.1：「草稿」改用铅笔 st-draft —— 草稿是本人尚未写完、尚未提交， 不是在等待他人处理；沙漏只留给「待审核」「抽检待复核」这类等待中的状态。 */ .tag-draft {background-color:var(--sun-soft); color:#b07800; background-image:url(/art/st-draft.png)} /* 「已提交」是这条打卡已经交上去了 —— 事情办完了，不是还在等。 沙漏留给真正还没落定的「草稿」。 */ .tag-submitted{background-color:var(--sky-soft); color:#2273cf; background-image:url(/art/st-ok.png)} .tag-approved {background-color:var(--green-soft);color:#1d8f58; background-image:url(/art/st-ok.png)} .tag-rejected {background-color:var(--coral-soft);color:#e0552a; background-image:url(/art/st-no.png)} /* 「未签约」「没人可见」「凭证已清理」这类以前一律套 tag-rejected， 于是屏幕上到处是红叉 —— 可它们没有一个是「被拒绝」： 都是「还差一步，去补上」。单开一档黄色警示，红叉留给真的被否掉的事。 */ .tag-warn {background-color:var(--sun-soft); color:#b07800; background-image:url(/art/st-warn.png)} /* 「免登录」是一条打卡的来路，不是状态好坏，所以用中性的链条 */ .tag-link {background-color:var(--sky-soft); color:#2273cf; background-image:url(/art/st-link.png)} /* 两档**中性信息**，都是蓝的（蓝在这套里专指「只是告诉你一件事，没有好坏」）： · 计数 —— 「3 个凭证」。以前缀红叉，0 个的时候读起来像凭证被否了。 · 谁 —— 「XX 建的」「申请小助理」。以前一个缀沙漏、一个缀黄三角， 可它们说的是**人**，跟等待、警告都没关系。 */ .tag-count {background-color:var(--sky-soft); color:#2273cf; background-image:url(/art/st-image.png)} .tag-who {background-color:var(--sky-soft); color:#2273cf; background-image:url(/art/st-user.png)} .tag-right{margin-left:auto;display:flex;align-items:center;flex-shrink:0} .tag-right .tag{margin-right:0;margin-left:6px} .tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px} .role-tag{ display:inline-flex;align-items:center;line-height:1; padding:7px 10px 5px;border-radius:var(--r-pill); background:var(--sun);color:#4a3200;font-size:11px;font-weight:800; vertical-align:middle; } /* ============ 表单 ============ */ /* 这条 reset 必须保持「一个元素选择器」的权重（0,0,1）。 上一版为了排除勾选框写成 input:not([type=checkbox]):not([type=radio])， 权重涨到 (0,2,1)，反而压过了 .search-input / .dialog-input / .textarea 这些 只有一个类名（0,1,0）的规则 —— 它们的 border 和 background 被这里的 none 覆盖掉， 搜索框直接变成透明的，界面上就「不见了」。 勾选框改在下面用 input[type="checkbox"]（0,1,1）单独盖回来，天然赢过这一条。 */ input,select,textarea{ font:inherit;color:inherit;border:none;background:none;outline:none; border-radius:0;-webkit-appearance:none;appearance:none; } /* 多行输入框一律**不给拖拽手柄**。 右下角那个小三角是浏览器默认送的，拖一下就能把框拉成整屏那么高、 或者拉出卡片边界盖住下面的按钮 —— 这套界面每个框的高度都是按版式定好的， 让人能随手拉坏它没有任何好处。高度不够的地方我们自己把 min-height 调大。 */ textarea{resize:none} /* ---- 勾选框 ---- 不用系统默认那个，各个浏览器长得都不一样，跟这套圆头圆脑的界面也不搭。 自己画一个圆角方块，勾用两条边框转 45° 拼出来，不需要额外的图片素材。 */ input[type="checkbox"]{ -webkit-appearance:none;appearance:none; position:relative;flex-shrink:0;box-sizing:border-box; width:22px;height:22px;margin:0;cursor:pointer; border:2px solid #ddd4c4;border-radius:7px;background:#fff; transition:background .14s,border-color .14s; } /* 勾的位置用**百分比**定，不用像素。 以前写死的是 left:6px/top:2px/5×10px，在 22px 的框里勉强对得上； 可是 .chk-line 里的勾选框只有 17px（内框 13×13）， 那个勾从 left:6 一直画到 13.5、从 top:2 画到 14.5 —— 右边和下边直接戳出框外，看着就是「勾没打在框里」。 改成百分比 + translate 居中之后，框做多大勾都跟着缩放，不会再出这种事。 位移里那两个数不是 50%：勾是个旋转过的 L 形， 几何中心和看上去的中心差一点，-50%/-58% 是照着渲染结果调的。 */ input[type="checkbox"]::after{ content:"";position:absolute;left:50%;top:50%; width:26%;height:52%; border:solid #fff;border-width:0 2.5px 2.5px 0; transform:translate(-50%,-58%) rotate(42deg) scale(.5); opacity:0; transition:transform .14s,opacity .14s; } input[type="checkbox"]:checked{background:var(--sun);border-color:var(--sun)} input[type="checkbox"]:checked::after{ transform:translate(-50%,-58%) rotate(42deg) scale(1);opacity:1; } input[type="checkbox"]:disabled{opacity:.45;cursor:default} input[type="checkbox"]:focus-visible{outline:2px solid var(--sun-deep);outline-offset:2px} /* 数字框右边那对上下小箭头。新版 Chrome 里光给 input 设 appearance:none 已经关不掉了， 得单独关这个伪元素 —— 它会占掉十几像素，把窄行里的「名」「元」挤出去。 */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} input[type="number"]{-moz-appearance:textfield;appearance:textfield} .form-item{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:12px 0;border-bottom:var(--hairline); } .form-item:last-child{border-bottom:none} /* 上下排列的一项（标签在上、多行输入框在下）：标签与其他项一样左对齐，输入框占满整行 */ .form-item.column{flex-direction:column;align-items:stretch;gap:8px} .form-label{color:var(--ink-2);flex-shrink:0;font-weight:600} .form-value{flex:1;text-align:right;color:var(--ink)} .input{flex:1;text-align:right;font-size:14px;color:var(--ink);min-width:0} .input::placeholder{color:var(--ink-4)} select.input,select.pick-sel{text-align:right;direction:rtl} select.input option{direction:ltr} .textarea{ width:100%;min-height:76px;background:var(--cream); border-radius:var(--r-inner);padding:11px;box-sizing:border-box; font-size:14px;margin-top:6px;display:block;color:var(--ink); border:1px solid #f2e8d8; } .picker-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px} .pick-sel{flex:1;text-align:right;font-size:14px;color:var(--ink)} .req{color:var(--coral);font-style:normal;font-size:11px;font-weight:700;margin:0 3px 0 5px;vertical-align:1px;letter-spacing:0;white-space:nowrap} .req-legend{font-size:11.5px;color:var(--ink-3);margin:-2px 0 10px 2px;line-height:1.6} /* ============ 提示条 ============ */ .tips,.notice-card,.setup-tip,.review-tip,.rank-intro{ border-radius:var(--r-card);padding:12px 14px; font-size:12.5px;line-height:1.8; } .tips{background:var(--sun-soft);color:#8a6412;box-shadow:none;margin-bottom:12px} .tips b{color:#7a5400} .notice-card{background:var(--sky-soft);color:#2f6ea8;margin-bottom:12px} .notice-card b{color:#215a8d} .setup-tip{background:var(--coral-soft);color:#c2532a;margin-bottom:12px;font-weight:600} .review-tip{background:var(--sun-soft);color:#8a6412;margin-top:12px} /* ---- 注册页的「归属」小节 ---- 这一段是选填的，跟上面那几行必填的不是一回事，所以拿一条浅槽单独框起来。 不框的话它会跟「申请备注」黏成一片，让人以为编号也是必须填的。 */ .reg-codes{ margin-top:14px;padding:4px 12px 10px; border-radius:var(--r-inner);background:#faf7f1; } .reg-codes-h{ font-size:12px;font-weight:800;color:var(--ink-3); padding:10px 0 2px; } .reg-codes .form-item:last-of-type{border-bottom:none} .reg-codes-tip{ font-size:11.5px;color:var(--ink-3);line-height:1.8;font-weight:600;margin-top:8px; } .reg-codes-tip b{color:var(--sun-deep)} .rank-intro{background:var(--pink-soft);color:#c2537a;margin-bottom:12px} .rank-intro b{color:#a83f63} /* 排行榜说明条右下角放个领奖台，点一下题就够了，不抢文字 */ .rank-intro{position:relative;padding-right:74px;overflow:hidden} /* t-podium 是横的（约 2:1），框也跟着改成横的 —— 还用 62×62 的方框的话， contain 会把它缩成一根 28px 高的细条。 */ .rank-intro::after{ content:"";position:absolute;right:8px;bottom:8px;width:60px;height:32px; opacity:.9;pointer-events:none; background:url(/art/t-podium.png) center/contain no-repeat; } /* 博主的打卡说明：左边挂个小铃铛，一眼看出是「这个博主对你说的话」 */ .blogger-notice{ background:linear-gradient(135deg,var(--sun-soft),#fff8e6); border-radius:var(--r-card);padding:13px 15px 13px 14px;margin-bottom:12px; border-left:4px solid var(--sun); } .bn-title{ font-size:13.5px;font-weight:800;color:#8a6412;margin-bottom:5px; /* 打卡说明是一则说明，用公告图 t-notice；铃铛留给「消息提醒」（v2.37.16） */ padding-left:26px;background:url(/art/t-notice.png) left center/20px 20px no-repeat; } .bn-body{font-size:12.5px;color:#8a6412;line-height:1.8;white-space:pre-wrap;word-break:break-word} /* ============ 列表与菜单 ============ */ .list-item{ background:var(--card);border-radius:var(--r-card); padding:13px;margin-bottom:10px;box-shadow:var(--shadow); } .list-head{display:flex;align-items:center;gap:6px} .list-name{font-size:15px;font-weight:800;color:var(--ink)} .list-ops{ display:flex;flex-wrap:wrap;gap:16px; margin-top:10px;padding-top:9px;border-top:var(--hairline); } .list-ops .op-link{margin-right:0} .op-link{font-size:12.5px;color:var(--sky);font-weight:700;cursor:pointer} .op-link.danger{color:var(--coral)} .op-link.gray{color:var(--ink-3)} .menu-item,.menu-line{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:13px 0;border-bottom:var(--hairline);font-weight:600;color:var(--ink); } .menu-item:last-child,.menu-line:last-child{border-bottom:none} /* 列表行里「名字 + 一两个标签」的那种写法：名字是一段纯文本，标签是 inline-flex， 两者之间没有任何间隙 —— 名字最后一个字直接顶在药丸的左边缘上，挤成一团。 .tag 自带的 margin-right 只管右边，管不到这一侧，所以这里补左边距。 （.list-head / .tag-row / .record-actions 那几处是 flex + gap，本来就有间隙。） */ .menu-line > span > .tag,.menu-line > span > .ucode{margin-left:6px} .menu-item .muted,.menu-line .muted{font-weight:500} .acc-list{display:flex;flex-direction:column} .acc-line{ display:flex;align-items:center;justify-content:space-between; padding:9px 0;border-bottom:var(--hairline);font-size:13px; } .bacc{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:9px 0;border-bottom:var(--hairline); } .bacc:last-child{border-bottom:none} .bacc-name{font-size:13.5px;color:var(--ink);font-weight:600} .bacc-num{font-size:16px;font-weight:900;color:var(--sun-deep)} /* ============ 筛选条 / 分段 / 页签 ============ */ .filter-bar,.range-bar{display:flex;overflow-x:auto;margin-bottom:10px;gap:7px;padding-bottom:2px} .filter-chip,.range-chip{ flex-shrink:0;padding:6px 14px;background:var(--card); border-radius:var(--r-pill);font-size:12.5px;color:var(--ink-2); font-weight:700;box-shadow:0 1px 5px rgba(255,178,54,.08);cursor:pointer; } .filter-chip.active,.range-chip.active{ background:var(--sun);color:#4a3200;box-shadow:0 3px 9px rgba(255,171,0,.3); } /* ---- 打卡项目那五个药丸前面的小图 ---- 点赞 / 收藏 / 点好 / 评论 / 转发，哪个是哪个，扫一眼图比读两个字快。 由 app.js 按项目的 key 发下来（不是按名字 —— 名字超管可以改）。 新增的项目没有对应素材，拿不到 --ic，这里的 ::before 就不画， 药丸退回纯文字，不会出现一个空方块。 */ .filter-chip.ic-f,.qact.ic-f,.action-pill.ic-f{ display:inline-flex;align-items:center;gap:5px; } .filter-chip.ic-f::before,.qact.ic-f::before,.action-pill.ic-f::before{ content:"";width:15px;height:15px;flex-shrink:0; background:var(--ic) center/contain no-repeat; } /* 这枚图没有不对称 padding 要补（.qact 上下 padding 相等）， 但 13.5px 那档的字本身比行盒中心高半像素，图不跟着走就跟字错开半像素 —— 所以这里补的是**字的位置**，不是 padding。 */ .qact.ic-f::before{width:17px;height:17px;margin-top:-1px} .segs{ display:flex;background:var(--card);border-radius:var(--r-pill); padding:4px;margin-bottom:12px;box-shadow:var(--shadow);gap:2px; } .seg{ flex:1;text-align:center;padding:8px 4px;border-radius:var(--r-pill); font-size:13px;color:var(--ink-3);font-weight:700;cursor:pointer;white-space:nowrap; } .seg.on{background:var(--sun-soft);color:var(--sun-deep);font-weight:800} .tabs{ display:flex;background:var(--card);border-radius:var(--r-pill); padding:4px;margin-bottom:12px;box-shadow:var(--shadow); } .tab{ flex:1;text-align:center;padding:9px 4px;border-radius:var(--r-pill); font-size:14px;color:var(--ink-3);font-weight:700;cursor:pointer; } .tab.active{background:var(--sun-soft);color:var(--sun-deep);font-weight:800} /* 统计筛选面板 */ .flt{background:var(--card);border-radius:var(--r-card);padding:3px 15px;margin-bottom:12px;box-shadow:var(--shadow)} /* ============ 排行榜：奖牌 + 皇冠 ============ */ .rank{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:var(--hairline)} .rank:last-child{border-bottom:none} .rk{ width:34px;height:34px;flex-shrink:0;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:14px;font-weight:900; background:#f3efe6;color:var(--ink-3); } /* 第四名起用底盘素材，数字写在盘心。盘子本身是正圆且居中， 所以 flex 居中出来的数字就正落在中央，不用另外微调。 */ .rk-normal{ background:url(/art/rank-plate.png) center/contain no-repeat; color:var(--ink-2);width:40px;height:40px;border-radius:0; } /* 前三名换成奖牌图，数字本身隐掉 */ .rk-1,.rk-2,.rk-3{ background:center/contain no-repeat;color:transparent; width:40px;height:40px;border-radius:0; } .rk-1{background-image:url(/art/medal-1.png)} .rk-2{background-image:url(/art/medal-2.png)} .rk-3{background-image:url(/art/medal-3.png)} .rank .info{flex:1;display:flex;flex-direction:column;min-width:0} .rank-account{font-size:14px;font-weight:700;color:var(--ink)} .rank .muted{font-size:11.5px;line-height:1.55} .n2{font-size:19px;font-weight:900;color:var(--sun-deep);flex-shrink:0} .bar-row{position:relative;height:38px;border-radius:var(--r-inner);background:var(--cream);margin-bottom:7px;overflow:hidden} .bar-fill{position:absolute;left:0;top:0;bottom:0;background:var(--sun-soft)} .bar-content{position:relative;height:38px;padding:0 13px;display:flex;align-items:center;justify-content:space-between} .bar-name{font-size:12.5px;color:var(--ink-2);font-weight:600} .bar-value{font-size:15px;font-weight:900;color:var(--sun-deep)} .my-rank{background:var(--sun-soft)!important;border-radius:var(--r-inner)} .my-rank-title{font-size:12px;color:#8a6412;font-weight:800;margin-bottom:6px} .my-rank-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0} .my-rank-name{font-size:13px;color:var(--ink);font-weight:600} .my-rank-num{font-size:16px;font-weight:900;color:var(--sun-deep)} .merged{background:var(--cream);border-radius:var(--r-inner);padding:9px 11px} .merged-title{font-size:11.5px;color:var(--ink-3);font-weight:700;margin-bottom:4px} .merged-item{font-size:12.5px;color:var(--ink-2);padding:2px 0} .group-name{font-size:14px;font-weight:800;color:var(--ink)} /* ============ 打卡记录卡片 ============ */ .record{background:var(--card);border-radius:var(--r-card);padding:14px;margin-bottom:11px;box-shadow:var(--shadow)} .record-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .record-blogger{display:flex;align-items:center;gap:7px;min-width:0} /* 平台改用图标，不再拿一个色块写平台名 —— 每个平台自己的标志一眼就认出来， 也不会因为平台多了几个而挤成一排颜色一样的小方块。 图认不出来的时候，title / aria-label 里还写着平台名。 */ /* 平台名小标签（v2.31 起代替平台 logo，原因见 app.js 里 PLATFORM_STYLE 那段）。 字色是各家 logo 的主色压深一档，底色是同色 9% 的淡底 —— 在浅底上对比度都过 3。 上下 padding 3/2：11px 这一档字的墨迹偏上，照徽章那套量法补 1px。 */ .pf-tag{ display:inline-block;flex-shrink:0;vertical-align:middle; font-size:11px;font-weight:800;line-height:1.35;letter-spacing:.2px; padding:3px 6px 2px;border-radius:6px;margin-right:6px; max-width:5.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:#5a6b80;background:#eef0f2; } .pf-xhs {color:#e8192f;background:#fde8ea} .pf-douyin{color:#161823;background:#ececed;text-shadow:-.6px 0 #25f4ee,.6px 0 #fe2c55} .pf-weibo {color:#d35f00;background:#fdf0e3} .pf-bili {color:#d93d6e;background:#fbecf0} .list-head .pf-tag{margin-left:auto;margin-right:0} /* v2.37.17：凡是标识平台的地方都用这枚徽章。 .pf-in 跟在一行说明里（后面紧接文字，不再写「 · 」）；.pf-end 放在行尾或单独一格，不留外边距。 徽章带 overflow:hidden（名字过长时省略），这种行内块的基线落在底边，必须用 middle 对齐，否则会整体上浮。 */ .pf-tag.pf-in{margin:0 6px 0 0;vertical-align:middle} .pf-tag.pf-end{margin:0;vertical-align:middle} /* v2.37.18：原在名字下方的徽章挪到名字右侧（.pf-nm）。在带 gap 的横排里不另加左边距 */ .pf-tag.pf-nm{margin:0 0 0 6px;vertical-align:middle;flex-shrink:0} .list-head .pf-tag.pf-nm,.arow-t .pf-tag.pf-nm,.sheet-row .sr-t .pf-tag.pf-nm,.bpick-name .pf-tag.pf-nm{margin-left:0} .bpick-name{display:flex;align-items:center;gap:6px;min-width:0} .bpick-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bpick-name .pf-tag,.pick-sub .pf-tag,.lk-name .pf-tag,.arow-t .pf-tag{font-size:10.5px;padding:2px 5px 1px} .lk-name .pf-tag + .pf-tag{margin-left:4px} .menu-line > span > .pf-tag.pf-nm + .pf-tag.pf-nm{margin-left:4px} .profile-name:has(.pf-nm){display:flex;align-items:center;gap:6px;min-width:0} .profile-name .pf-tag.pf-nm{margin-left:0} .fan-name .fan-pf{align-self:center} .fd-chip.fd-pf{padding:4px 6px 3px} .fd-chip.fd-pf .pf-tag{display:block} .fd-chip.fd-pf.on{border-color:var(--sun-deep)} /* 下拉框：收起时在选中文字右侧显示平台徽章（系统弹出的选项列表里画不了徽章，按平台分组） */ .pf-sel-w{position:relative;flex:1;min-width:0;display:flex;align-items:center} .pf-sel-w > select{flex:1;min-width:0;width:100%} .pf-sel-b{position:absolute;right:0;top:50%;transform:translateY(-50%);pointer-events:none;display:flex;align-items:center} .pf-sel-b:empty{display:none} select[data-pfonly].has-pf{color:transparent} select[data-pfonly] option,select[data-pfonly] optgroup{color:var(--ink)} .pf-sel-dlg{display:flex;margin-bottom:11px} .pf-sel-dlg > .dialog-input{margin-bottom:0} .pf-sel-dlg .pf-sel-b{left:13px;right:auto} .blogger-name{font-size:15px;font-weight:800;color:var(--ink)} /* 「用账号 XXX」这一行。原来跟 .acc-line 共用一条规则，于是白白继承了 justify-content:space-between —— 那时候挂在这儿的「免登录」标签被推到了 卡片最右边。现在那枚标签已经挪到第一行跟状态标签并排了， 但这条规则仍旧要跟 .acc-line 分开写：这一行是卡片里的一句说明， 不是「左边一项右边一项」的设置行，两端对齐对它没有意义。 */ .account-line{ display:flex;align-items:center;flex-wrap:wrap;gap:6px; font-size:12px;color:var(--ink-3);margin-top:5px;border:none;padding:0; } .record-title{font-size:13.5px;color:var(--ink);margin-top:5px;font-weight:600} .record-url{font-size:11.5px;color:var(--ink-3);margin-top:3px;word-break:break-all} .record-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} /* 这一行里站着三种药丸：带小图的打卡项目、不带图的打卡项目（超管新加的项目 没有对应素材）、还有末尾那枚「x 个凭证」标签。高度要是各自由内容撑出来， 带图的被 15px 的图撑到 29px、不带图的只有 25.5px、标签又只有 23px。 挤在同一行时上下居中看不出来，**一旦标签被挤到第二行单独站着， 比上一行矮一截就很扎眼**。所以这一行里的药丸统一钉死一个高度，谁都不靠内容撑。 */ .record-actions .action-pill,.record-actions .tag{height:26px;box-sizing:border-box} .record-actions .tag{margin-right:0} .action-pill{ display:inline-flex;align-items:center;line-height:1; background:var(--pink-soft);color:#c2537a;font-size:11.5px;font-weight:700; padding:4px 10px 1px;border-radius:var(--r-pill); /* D=3：11.5px 那档要补 3 */ } /* ::before 画的图标要把不对称 padding 带来的 D/2 补回来，见本文件开头那段说明 */ .action-pill.ic-f::before{margin-top:-3px} .record-foot{ display:flex;align-items:center;justify-content:space-between;gap:8px; margin-top:10px;padding-top:9px;border-top:var(--hairline); } .record-ops{display:flex;gap:14px} /* ============ 凭证 ============ */ .evidence-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px} .evidence-item,.evidence-add{ width:82px;height:82px;border-radius:var(--r-inner); position:relative;overflow:hidden;display:block;flex-shrink:0; } /* 能点开看的缩略图才给手型；上传预览那几个（没有 data-evk）不点开 */ .evidence-item[data-evk]{cursor:pointer} .evidence-item[data-evk]:focus-visible{outline:2px solid var(--sun-deep);outline-offset:2px} .evidence-img,.evidence-item img,.evidence-item video{ width:100%;height:100%;object-fit:cover;display:block; } .evidence-video{ width:100%;height:100%;background:#3a3a3a;color:#fff; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; } .video-icon{font-size:20px} .video-text{font-size:11px} .evidence-del{ position:absolute;top:0;right:0;width:22px;height:22px; background:rgba(0,0,0,.55);color:#fff;font-size:14px;line-height:22px; text-align:center;border-bottom-left-radius:10px;cursor:pointer; } .evidence-add{ background:var(--cream);border:1.5px dashed var(--sun-line); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; color:var(--sun-deep);cursor:pointer; } .add-plus{font-size:22px;font-weight:700;line-height:1} .add-text{font-size:11px;font-weight:600} /* ---- 凭证查看器 ---- 为什么不开新标签页：见 app.js 里 openEvidence 上面那段注释 （PWA standalone 模式下没有地址栏，点开凭证就退不出来了）。 高度用 dvh 不用 vh：Safari 的 100vh 算的是地址栏收起之后的高度， 写 vh 的话底下那行提示会被工具条压住。dvh 不认的旧机器退回 vh。 */ body.no-scroll{overflow:hidden} .ev-view{ position:fixed;left:0;right:0;top:0;bottom:0;z-index:200; height:100vh;height:100dvh; /* 背景压到几乎不透明：留一点点底色是为了让人知道自己还在原来那一页上， 但底下的字必须糊掉 —— 半透明遮罩下面还能读出「我的打卡记录」， 眼睛会一直去对焦后面那层，凭证本身反而看不进去。 */ background:rgba(18,13,3,.97); display:flex;flex-direction:column; animation:ev-in .16s ease-out; } @keyframes ev-in{from{opacity:0}to{opacity:1}} .ev-bar{ flex-shrink:0;display:flex;align-items:center;justify-content:space-between; padding:calc(11px + env(safe-area-inset-top)) 14px 11px; } .ev-n{font-size:13px;font-weight:700;color:#fff;opacity:.8} /* 关闭做成药丸而不是一个光秃秃的 ×： 手机上 × 的点击区域小得可怜，指头一盖上去就不知道有没有点中。 它是 13px 那一档 —— 字本来就落在中线上（见本文件开头那张 k 表），D=0， 上下 padding 不用差。以前照抄了 .tag 那档的 9/7，量出来偏低 1.6px。 */ .ev-close{ display:inline-flex;align-items:center;line-height:1; padding:8px 15px;border:none;border-radius:var(--r-pill); background:rgba(255,255,255,.18);color:#fff; font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer; } .ev-close:active{background:rgba(255,255,255,.32)} /* min-height:0 是给 flex 子项解开默认的最小高度， 不写的话图片再高也压不下来，底部提示会被顶出屏幕。 */ .ev-stage{ flex:1;min-height:0;display:flex;align-items:center;justify-content:center; padding:0 12px; overflow:auto;-webkit-overflow-scrolling:touch; } .ev-media{ max-width:100%;max-height:100%; display:block;object-fit:contain;border-radius:8px; } /* 放大态：图按舞台宽度的 2.6 倍铺开，超出的部分交给舞台自己滚。 flex 的居中要改成靠边对齐 —— 居中的 flex 子项一旦比容器宽， 左边溢出的那一截是滚不到的（overflow 只往右边滚）。 */ .ev-stage.zoom{align-items:flex-start;justify-content:flex-start;padding:0} .ev-stage.zoom .ev-media{ max-width:none;max-height:none;width:260%;height:auto; border-radius:0;flex-shrink:0; } .ev-nav{ position:absolute;top:50%;transform:translateY(-50%); width:38px;height:56px;border:none;border-radius:var(--r-pill); background:rgba(255,255,255,.16);color:#fff; font-size:26px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center; } .ev-nav:active{background:rgba(255,255,255,.3)} .ev-prev{left:6px} .ev-next{right:6px} /* 放大之后把翻页键收起来：这时候整屏都是拖着看的区域， 两侧再压两个按钮，拖到边上就容易误触到下一张。 ~ 选得到它们，是因为这两个按钮在 DOM 里排在舞台后面。 */ .ev-stage.zoom ~ .ev-nav{display:none} .ev-tip{ flex-shrink:0;text-align:center;color:#fff;opacity:.55; font-size:11.5px; padding:12px 16px calc(14px + env(safe-area-inset-bottom)); } /* ============ 弹窗 ============ */ .mask{ position:fixed;left:0;right:0;top:0;bottom:0; background:rgba(60,45,20,.42); display:flex;align-items:center;justify-content:center;z-index:100;padding:20px; } .dialog{ width:100%;max-width:320px;max-height:82vh;overflow-y:auto; background:var(--card);border-radius:22px;padding:22px 18px; box-shadow:0 12px 40px rgba(80,60,20,.25); } .dialog-title{font-size:17px;font-weight:900;text-align:center;margin-bottom:14px;color:var(--ink)} .dialog-label{font-size:12px;color:var(--ink-3);margin-bottom:5px;font-weight:600} .dialog-input{ background:var(--cream);border-radius:var(--r-inner);padding:11px 13px; margin-bottom:11px;font-size:13.5px;width:100%;display:block;box-sizing:border-box; color:var(--ink);border:1px solid #f2e8d8; } .dialog-btns{display:flex;gap:10px;margin-top:12px} .dialog-btns .btn{flex:1} .dialog-check{ display:flex;align-items:center;gap:8px;padding:9px 2px; font-size:14px;color:var(--ink);border-bottom:var(--hairline); } .dialog-check:last-of-type{border-bottom:none} .dialog-check input{margin:0} /* ============ 固定条 ============ */ .footer-bar{ position:fixed;left:0;right:0;bottom:0;z-index:20; max-width:480px;margin:0 auto; background:var(--card); padding:9px 12px calc(9px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-up);display:flex;gap:10px; } .footer-bar .btn{flex:1} .page-with-footer{padding-bottom:92px} .has-tabbar{padding-bottom:10px} .with-tab .footer-bar{bottom:var(--tabbar-safe);padding-bottom:9px} .with-tab .page-with-footer{padding-bottom:80px} .fab{ position:fixed;right:20px;bottom:calc(30px + env(safe-area-inset-bottom)); width:56px;height:56px;border-radius:50%; background:linear-gradient(180deg,var(--sun),var(--sun-deep)); color:#4a3200;font-size:28px;line-height:54px;text-align:center; box-shadow:0 6px 18px rgba(255,171,0,.4);z-index:30; } .with-tab .fab{bottom:calc(var(--tabbar-safe) + 20px)} @media (min-width:520px){ .fab{right:calc(50vw - 240px + 20px)} } /* ============ 登录 / 注册 ============ */ .login-page{padding:26px 18px 30px;min-height:100%} .brand{text-align:center;margin-bottom:26px} /* 品牌猫代替原来的文字方块 */ .logo{ width:96px;height:96px;margin:6px auto 12px; background:url(/art/brand-cat.png) center/contain no-repeat; font-size:0;color:transparent; } .app-name{font-size:21px;font-weight:900;color:var(--ink)} .app-desc{font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.7} .agreement{margin-top:22px;font-size:11px;color:var(--ink-4);text-align:center;line-height:1.7} .identity{padding-bottom:2px} .identity-title{font-size:13px;color:var(--ink-2);margin-bottom:9px;font-weight:700} .identity-opts{display:flex;gap:10px} /* 三个身份并排时每格更窄，说明文字要能换行，不然会被挤出格子 */ .identity-opts.identity-3{gap:7px} .identity-opts.identity-3 .identity-opt{padding:11px 7px} .identity-opts.identity-3 .identity-name{font-size:13.5px} .identity-opts.identity-3 .identity-desc{font-size:10.5px;line-height:1.5} /* 用户编号：等宽数字，跟在用户名后面。 人互相指认用的就是这串数字 —— 昵称会重名也会改，编号不会。 以前它是一枚黄底药丸，跟旁边「待审核」「已停用」那些标签长得一模一样， 可它根本不是状态，只是一串认人的数字 —— 一眼扫过去，读的人得先判断 「这个黄块是在说他有问题吗」，判断完才发现不是。所以改成普通文字， 前面缀一个「编号」自报家门，别再占用标签那套视觉语言。 */ .ucode{ margin-left:7px;color:var(--ink-3); font-size:11.5px;font-weight:700; font-variant-numeric:tabular-nums;letter-spacing:.5px; } .ucode::before{content:"编号 ";letter-spacing:0;font-weight:600;opacity:.85} .identity-opt{ flex:1;background:var(--cream);border-radius:var(--r-inner); padding:12px 11px;border:1.5px solid transparent;cursor:pointer; } .identity-opt.on{border-color:var(--sun);background:var(--sun-soft)} .identity-name{display:block;font-size:14px;font-weight:800;color:var(--ink)} .identity-opt.on .identity-name{color:var(--sun-deep)} .identity-desc{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.6} .identity-hint{font-size:11.5px;color:var(--ink-3);margin-top:9px;line-height:1.7} /* ============ 待审核 / 状态页 ============ */ .page{padding:40px 22px;text-align:center} /* 「等待审核中 / 审核未通过 / 账号已停用」那三张状态页顶上的大圆。 里头原来是一个 emoji（⏳ ✕ 🔒）—— emoji 长什么样由系统决定， 同一个页面在安卓和 iPhone 上是两幅画，跟平台自己那套素材也接不上。 换成素材图：这个位置有 46px，放得下 s-* 那套立体图标。 （13px 的徽章放不下，那边用的是 st-* 那套简笔符号，两套别混。） */ .icon{ width:92px;height:92px;margin:0 auto 16px;border-radius:50%; background:var(--sun-soft);display:flex;align-items:center;justify-content:center; font-size:40px; } .icon::before{ content:"";width:46px;height:46px; background:var(--ic) center/contain no-repeat; } .icon-pending {--ic:url(/art/s-pending.png)} .icon-rejected{--ic:url(/art/s-fail.png)} .icon-disabled{--ic:url(/art/st-ban.png)} .icon-pending {background:var(--sun-soft)} .icon-rejected{background:var(--coral-soft)} .icon-disabled{background:#f0ece4} .icon-mustpass{--ic:url(/art/t-key.png);background:var(--sun-soft)} .info{text-align:left;margin-top:18px} .info-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:var(--hairline)} .info-row:last-child{border-bottom:none} .info-row .k{color:var(--ink-3);font-size:13px;flex-shrink:0} .info-row .v{color:var(--ink);font-size:13px;text-align:right;word-break:break-all} .actions{display:flex;flex-direction:column;gap:10px;margin-top:20px} /* ============ 我的 ============ */ .profile-card{display:flex;align-items:center;gap:13px} .avatar{ width:56px;height:56px;border-radius:50%;flex-shrink:0; background:var(--sun-soft) url(/art/avatar.png) center/contain no-repeat; } .avatar-text{ display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,var(--sun),var(--sun-deep)); color:#4a3200;font-size:22px;font-weight:900; } .profile-info{flex:1;min-width:0} .profile-name{font-size:17px;font-weight:900;color:var(--ink)} /* ============ 可见范围 / 多选 ============ */ .bulk{ display:flex;align-items:center;justify-content:space-between;gap:10px; background:var(--sun-soft);border-radius:var(--r-inner); padding:9px 13px;margin-bottom:10px; } .bulk-count{font-size:12.5px;color:#8a6412;font-weight:700} .bulk-count b{font-size:15px;color:var(--sun-deep)} .bulk-ops{display:flex;gap:14px} .pick{ display:flex;align-items:center;gap:11px;background:var(--card); border-radius:var(--r-inner);padding:11px 13px;margin-bottom:8px; box-shadow:0 1px 5px rgba(255,178,54,.07);cursor:pointer; } .box{ width:22px;height:22px;border-radius:7px;flex-shrink:0; border:1.5px solid #e4dcce;background:var(--card); display:flex;align-items:center;justify-content:center; font-size:13px;color:#fff;font-weight:800; } .box.on{background:var(--sun);border-color:var(--sun);color:#4a3200} .pick-main{flex:1;display:flex;flex-direction:column;min-width:0} .pick-name{font-size:14px;color:var(--ink);font-weight:600} .pick-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px} /* ============ 签约 / 结算 ============ */ .type-opts{display:flex;gap:10px;margin-bottom:12px} .type-opt{ flex:1;background:var(--cream);border-radius:var(--r-inner); padding:12px;border:1.5px solid transparent;cursor:pointer; } .type-opt.on{border-color:var(--sun);background:var(--sun-soft)} .type-name{display:block;font-size:14px;font-weight:800;color:var(--ink)} .type-desc{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.6} /* 「按哪个口径排名」的单选列表。 跟上面那两格并排的 .type-opt 不同：口径有几条是超管配出来的， 并排排五六条会把每条压成一列一个字的竖条，只能竖着一条一条来。 */ .fopts{display:flex;flex-direction:column;gap:8px;margin-bottom:10px} .fopt{ display:flex;align-items:flex-start;gap:10px; background:var(--cream);border-radius:var(--r-inner); padding:11px 12px;border:1.5px solid transparent;cursor:pointer; } .fopt.on{border-color:var(--sun);background:var(--sun-soft)} /* 选中标记用一个实心圆点，不用对勾图 —— 这是单选，一次只有一个亮着 */ .fopt-dot{ flex:0 0 auto;width:16px;height:16px;margin-top:2px;border-radius:50%; border:1.5px solid #e2d5bd;background:#fff; } .fopt.on .fopt-dot{border-color:var(--sun-deep);background:var(--sun-deep);box-shadow:inset 0 0 0 3px #fff} .fopt-body{min-width:0} .fopt-name{display:block;font-size:13.5px;font-weight:800;color:var(--ink)} .fopt-desc{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.6} /* 一档报酬是一个竖着排的小块：「第 X 到第 Y 名」一行、「每人 N 元」一行、下面一句预览。 原来 .rule 自己也是 flex 行，于是这三样被并排挤在一行里， 在窄屏上会互相叠住 —— 外层要竖排，只有里面的每一行才是 flex。 */ .rule{padding:10px 0;border-bottom:var(--hairline)} .rule:last-child{border-bottom:none} .rule-line{display:flex;align-items:center;gap:8px;padding:4px 0} .rule-input,.rate-input{ background:var(--cream);border-radius:10px;padding:8px 10px; font-size:13.5px;text-align:center;width:64px;flex-shrink:0;color:var(--ink); border:1px solid #f2e8d8; } .rule-txt{font-size:13px;color:var(--ink-2);flex-shrink:0} /* 金额那一格占掉这一行剩下的空间，但不能是 100% —— 那会把后面的「元」和「删除」挤出行外，窄屏上直接看不见。 */ .rule-input.wide{width:auto;flex:1;min-width:0} .rule-del{color:var(--coral);font-size:13px;margin-left:auto;flex-shrink:0;cursor:pointer} /* 「改为及以后 / 改为区间」：切换该档的写法，靠右放在名次那一行 */ .rule-mode{color:var(--sky);font-size:12.5px;font-weight:700;margin-left:auto;flex-shrink:0;cursor:pointer} .rule-preview{font-size:11.5px;color:var(--ink-3);margin-top:8px;line-height:1.7} .rate{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:var(--hairline)} .rate:last-child{border-bottom:none} .rate-name{flex:1;font-size:13.5px;color:var(--ink);font-weight:600} .rate-unit{font-size:12px;color:var(--ink-3);flex-shrink:0} .total-card{ background:linear-gradient(135deg,#ffd75e,var(--sun) 60%,#ffb01f); border-radius:22px;padding:20px;text-align:center;margin-bottom:12px; box-shadow:0 6px 20px rgba(255,171,0,.28);position:relative;overflow:hidden; } .total-card::after{ content:"";position:absolute;right:-10px;bottom:-14px;width:96px;height:96px;opacity:.9; background:url(/art/cat-cheer.png) center/contain no-repeat; } .total-label{font-size:12.5px;color:#7a5400;font-weight:700;position:relative;z-index:1} .total-num{font-size:34px;font-weight:900;color:#4a3200;line-height:1.25;position:relative;z-index:1} .total-sub{font-size:11.5px;color:#7a5400;position:relative;z-index:1} .g-total{font-size:16px;font-weight:900;color:var(--sun-deep)} .srow{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-bottom:var(--hairline)} .srow:last-child{border-bottom:none} .s-rank{ width:28px;height:28px;border-radius:50%;background:var(--sun-soft); color:var(--sun-deep);font-size:13px;font-weight:900;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .s-main{flex:1;display:flex;flex-direction:column;min-width:0} .s-acc{font-size:14px;font-weight:700;color:var(--ink)} .s-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px} .s-formula{font-size:11px;color:var(--ink-4);margin-top:3px;line-height:1.6} .s-amt{font-size:15px;font-weight:900;color:var(--coral);flex-shrink:0} .user-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px} .user-name{font-size:15px;font-weight:800;color:var(--ink)} .user-amt{font-size:17px;font-weight:900;color:var(--coral)} .user-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:12.5px} .ui-left{color:var(--ink-2);flex:1;min-width:0} .ui-right{color:var(--ink-3);flex-shrink:0} .reward-card{ background:linear-gradient(135deg,#ffe3ec,var(--pink-soft)); border-radius:22px;padding:17px;margin-bottom:12px;position:relative;overflow:hidden; box-shadow:0 4px 16px rgba(255,143,171,.22); } .reward-title{font-size:12.5px;color:#c2537a;font-weight:700} .reward-total{font-size:30px;font-weight:900;color:#a83f63;line-height:1.3;margin-bottom:6px} .reward-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;font-size:12px} .reward-left{color:#b4536f;flex:1;min-width:0} .reward-right{color:#a83f63;font-weight:800;flex-shrink:0} .reward-note{font-size:10.5px;color:#c47a92;margin-top:8px;line-height:1.7} /* ============ 审核页 ============ */ .rv-ops{display:flex;align-items:center;gap:16px;margin-top:10px;padding-top:9px;border-top:var(--hairline)} .rv-pick{margin-right:auto;display:flex;align-items:center;font-size:12px;color:var(--ink-3);cursor:pointer} .rv-pick input{margin-right:7px} .rv-meta{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.7} /* ============ Toast / 加载 ============ */ .toast{ position:fixed;left:50%;top:42%;transform:translate(-50%,-50%); background:rgba(43,43,43,.9);color:#fff;padding:13px 22px;border-radius:16px; font-size:13.5px;z-index:200;max-width:74vw;text-align:center;line-height:1.6; box-shadow:0 8px 24px rgba(0,0,0,.2); } .boot{padding:70px 20px;text-align:center;color:var(--ink-4);font-size:13px} .boot::before{ content:"";display:block;width:72px;height:72px;margin:0 auto 10px;opacity:.65; background:url(/art/cat-cheer.png) center/contain no-repeat; } /* ============ 加到主屏幕引导 ============ */ .a2hs{ background:var(--sky-soft);color:#2f6ea8;border-radius:var(--r-card); padding:12px 14px;margin-bottom:12px;line-height:1.8;font-size:12px; } .a2hs b{color:#215a8d;font-size:13.5px} .a2hs .a2hs-x{float:right;color:#8bb4d8;font-size:15px;line-height:1;padding:0 0 6px 8px;cursor:pointer} /* v2.36：提示卡带「一键添加」按钮 */ .a2hs{position:relative;display:flex;align-items:center;gap:12px;padding-right:32px} .a2hs .a2hs-x{position:absolute;right:12px;top:10px;float:none;padding:2px 2px 6px 8px} .a2hs .a2hs-body{flex:1;min-width:0} .a2hs .a2hs-go{flex-shrink:0;width:auto;height:34px;padding:0 14px;font-size:13px;border-radius:var(--r-pill)} .a2hs-steps{margin:4px 0 0;padding-left:20px;line-height:1.9;font-size:14px;color:var(--ink-2);text-align:left} /* ============ 杂项 ============ */ .wide{width:100%} .k{color:var(--ink-3)} .v{color:var(--ink)} .gray{color:var(--ink-3)} .danger{color:var(--coral)} /* 可点元素不要出现长按菜单和双击缩放 */ a,button,.btn,.op-link,.tab,.seg,.filter-chip,.range-chip, .pick,.bpick,.mod,.todo,.type-opt,.fopt,.identity-opt,.menu-item,.menu-line,.quick-btn, .period-chip,.board-chip,.me-go,.today-btn,.search-go, .rule-del,.rule-mode,.tabbar a,.evidence-add,.evidence-del,.dialog-check, .evidence-item[data-evk],.ev-close,.ev-nav{ touch-action:manipulation;-webkit-user-select:none;user-select:none; } .record-url,.v,.s-formula,.info-row .v,.bn-body,input,textarea{ -webkit-user-select:text;user-select:text; } body{overscroll-behavior-y:none} /* 独立启动（加到主屏幕后）：顶栏自己让开状态栏 */ @media (display-mode: standalone){ .navbar{height:calc(50px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)} .navbar .title{top:env(safe-area-inset-top);height:50px;line-height:50px} } html.pwa .navbar{height:calc(50px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)} html.pwa .navbar .title{top:env(safe-area-inset-top);height:50px;line-height:50px} /* 月份选择行（结算页）：跟 picker-row 同一套外观 */ .month-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px} /* 开关：平台设置里那几个「开 / 关」。用真的 checkbox 撑着， 键盘和读屏都能用，外面那层 只负责画成一个滑块。 */ /* 全站公告：登录页和首页顶部那条。橙底比灰底更像「请看一眼」， 但不用红 —— 红是出错，公告大多数时候只是通知。 */ .site-notice{ background:var(--sun-soft);color:#8a6412;border-radius:var(--r-inner); padding:11px 13px;font-size:13px;line-height:1.7;font-weight:600; margin-bottom:12px;white-space:pre-wrap;word-break:break-word; border-left:4px solid var(--sun);box-sizing:border-box; } /* 下载类的按钮是 ，得把默认下划线和行高压回来，跟