diff --git a/conf/app.sample.ini b/conf/app.sample.ini index e0543c1..a668f1d 100644 --- a/conf/app.sample.ini +++ b/conf/app.sample.ini @@ -273,6 +273,6 @@ daily_message_limit_max = 999 ; 改选择器与令牌值，再把 加进 available —— 不需要改模板。 ; 需要图片素材的，放 static/images/themes//（static/fs.go 已嵌 images/themes 目录）。 default = default -available = default,sakura,shiroko +available = default,sakura,shiroko,new-sakura ; ⚠️ 没登记在 available 里的主题，即使 css 已随二进制发布也不会出现在设置页； ; 启动日志会打出「[theme] available 未登记以下主题」提醒。,shiroko diff --git a/dev/theme-tools/gen_new_sakura.py b/dev/theme-tools/gen_new_sakura.py new file mode 100644 index 0000000..cad5fc1 --- /dev/null +++ b/dev/theme-tools/gen_new_sakura.py @@ -0,0 +1,374 @@ +"""生成 new-sakura 主题的 CSS。 + +为什么用脚本生成而不用生成器的图层功能：生成器的装饰层只认「图片素材」（导出时 +打进 zip 或传对象存储），而这里的花瓣是**内联 SVG 的 data URI** —— 零外部请求、 +任意缩放不糊、改配色只改一个色值。代价是 CSS 里会出现一长串百分号编码的 URI， +所以源 SVG 保留在本文件里，改完重跑： + + python dev/theme-tools/gen_new_sakura.py + +输出：static/css/themes/new-sakura.css +""" +import os +import urllib.parse + +ROOT = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))) +OUT = os.path.join(ROOT, "static", "css", "themes", "new-sakura.css") + + +def uri(svg): + """转成 CSS url()。safe='' 是刻意的：连逗号、分号、括号都编码掉 —— + `--tb-deco` 是按顶层逗号切分的（internal/theme 的 TestDecoSlotCount）， + URI 里留一个裸逗号就会被当成多一层的装饰。""" + return 'url("data:image/svg+xml,' + urllib.parse.quote(svg, safe="") + '")' + + +# ---- 花与瓣 ---------------------------------------------------------------- +# 五瓣樱花：五个椭圆绕中心旋 72°，中心一团深一点的蕊。不做花瓣缺口—— +# 在 30~90px 的显示尺寸上缺口只剩 2px，反而像毛边；靠五瓣轮廓就够识别。 +def blossom(light, deep, heart): + petals = "".join( + f'' + for a in (0, 72, 144, 216, 288) + ) + return ( + '' + f'{petals}' + f'' + f'' + "" + ) + + +# 单瓣：顶端留一个 V 形缺口（樱花花瓣的标志），比整朵花更适合当"飘落"的单位。 +def petal(fill): + return ( + '' + f'' + "" + ) + + +# 枝条：一根主枝 + 两根小杈 + 五朵花 + 三片落瓣。 +# 花是重复内联而不是 ：data URI 里的片段引用在各浏览器上 +# 行为不一致（Safari 曾整朵不渲染），多几百字节换确定性。 +def branch(wood, light, deep, heart, flip=False): + fl = ' transform="translate(420,0) scale(-1,1)"' if flip else "" + # 花要比枝小得多、数量多几朵。早先 5 朵 scale≈1 的花配一根细枝，缩到 300px + # 显示时是一串糖葫芦；真实樱花枝是"小碎花沿枝密布"，所以花收到 0.42~0.62。 + blossoms = [ + (302, 74, 0.62), (256, 110, 0.55), (214, 138, 0.60), (172, 176, 0.58), + (352, 42, 0.50), (140, 214, 0.46), (116, 246, 0.40), (326, 128, 0.42), + ] + petals = [(272, 158, 22), (318, 150, -18), (196, 92, 40), (150, 196, -26)] + body = [] + for x, y, s in blossoms: + body.append( + f'' + '' % light + + "".join(f'' + for a in (0, 72, 144, 216, 288)) + + f'' + f'' + ) + for x, y, rot in petals: + body.append( + f'' + f'' + ) + return ( + '' + f'' + f'' + f'' + + "".join(body) + "" + ) + + +# 平铺底纹：极淡的小花 + 落瓣。 +# 密度是刻意的：最早一版放了 2 朵花 + 2 片瓣并且 260px 平铺，页面上读出来是 +# 「整齐的包装纸」——因为每个元素都在固定格点上重复。现在只留 1 朵 + 2 片， +# 尺寸放大到 300px 且各自错位，平铺时才看不出周期。 +def pattern(light): + one = ( + '' % light + + "".join(f'' + for a in (0, 72, 144, 216, 288)) + + "" + ) + petal_path = ('') + return ( + '' + f'{one}' + f'' + + (petal_path % light) + + "" + f'' + + (petal_path % light) + + "" + "" + ) + + +# ---- 一套素材（浅色 / 深色各一组色） --------------------------------------- +LIGHT = dict( + light="#f7bcd0", deep="#e989aa", heart="#fdf6f8", + wood="#9a7a70", pattern="#f2bfd0", +) +DARK = dict( + light="#f0a0b8", deep="#c96a8b", heart="#2c2227", + wood="#a8837a", pattern="#7a4e5f", +) + + +def uris(p): + return { + "blossom_l": uri(blossom(p["light"], p["deep"], p["heart"])), + "petal_l": uri(petal(p["light"])), + "branch_l": uri(branch(p["wood"], p["light"], p["deep"], p["heart"], flip=True)), + "branch_r": uri(branch(p["wood"], p["light"], p["deep"], p["heart"], flip=False)), + "pattern": uri(pattern(p["pattern"])), + } + + +NONE10 = "none, none, none, none, none, none, none, none, none, none" +AUTO10 = "auto, auto, auto, auto, auto, auto, auto, auto, auto, auto" +TOPLEFT10 = ("left top, left top, left top, left top, left top, left top, left top, " + "left top, left top, left top") + + +def deco(layers): + """layers: [(var, size, position)]，不足 10 槽补 none。""" + items, sizes, poss = [], [], [] + for var, size, pos in layers: + items.append(var) + sizes.append(size) + poss.append(pos) + pad = 10 - len(layers) + items += ["none"] * pad + sizes += ["auto"] * pad + poss += ["left top"] * pad + return (", ".join(items), ", ".join(sizes), ", ".join(poss)) + + +# ---- 每个页面一套位置 ------------------------------------------------------ +# 位置一律两值（`关键字 ± 偏移`）。百分比相对「容器 − 图片」，写 calc 更可控； +# 这里用 left/right + % 与 px 偏移，保证换视口时花还贴在角落而不是飘到内容上。 +SCOPES = { + "global": [ + ("var(--sk-branch-r)", "auto 280px", "right -16px bottom -22px"), + ("var(--sk-blossom)", "auto 88px", "left 6% top 12%"), + ("var(--sk-petal)", "32px", "left 14% top 24%"), + ("var(--sk-petal)", "26px", "right 16% top 8%"), + ], + "box": [ + # 枝的细端在右上、粗端朝左下：放在右上角时"从角上垂下来"， + # 尺寸收到 300px 才会有枝形 —— 390px 时可见部分只剩一团花（第一次就是这个问题） + ("var(--sk-branch-r)", "auto 300px", "right -24px top -16px"), + ("var(--sk-blossom)", "auto 80px", "left 5% bottom 16%"), + ("var(--sk-petal)", "34px", "left 14% bottom 32%"), + ("var(--sk-petal)", "24px", "right 22% bottom 8%"), + ("var(--sk-blossom)", "auto 52px", "right 6% bottom 6%"), + ], + "question": [ + ("var(--sk-branch-l)", "auto 300px", "left -34px bottom -24px"), + ("var(--sk-blossom)", "auto 86px", "right 7% top 11%"), + ("var(--sk-petal)", "30px", "right 17% top 24%"), + ("var(--sk-petal)", "24px", "left 11% top 7%"), + ], + "admin": [ + # 列表页卡片几乎占满宽度，右侧的花会整个被卡片盖住 —— 只往左侧留白放 + ("var(--sk-branch-l)", "auto 260px", "left -28px top -24px"), + ("var(--sk-blossom)", "auto 70px", "left 3% bottom 7%"), + ("var(--sk-petal)", "26px", "left 11% bottom 15%"), + ], + "profile": [ + ("var(--sk-branch-r)", "auto 280px", "right -28px bottom -24px"), + ("var(--sk-blossom)", "auto 66px", "left 6% top 9%"), + ("var(--sk-petal)", "28px", "left 15% top 19%"), + ("var(--sk-petal)", "22px", "left 5% top 28%"), + ], + "vote": [ + ("var(--sk-branch-l)", "auto 280px", "left -30px top -20px"), + ("var(--sk-blossom)", "auto 78px", "right 8% top 16%"), + ("var(--sk-petal)", "28px", "right 18% top 27%"), + ("var(--sk-blossom)", "auto 52px", "right 6% bottom 8%"), + ], + # 窄屏：卡片占满宽度，留白只剩顶栏上下那两条 —— 装饰层放什么都没有立足之地， + # 樱花改由底纹承担（@media 里把 pattern 缩小到 200px，密度上来才看得出来） + "narrow": [], +} + + +def scope_block(prefix, layers, indent=" "): + img, size, pos = deco(layers) + return ( + f"{prefix} {{\n" + f"{indent}--tb-deco: {img};\n" + f"{indent}--tb-deco-size: {size};\n" + f"{indent}--tb-deco-position: {pos};\n" + "}" + ) + + +def build(): + u = uris(LIGHT) + d = uris(DARK) + + vars_light = "\n".join([ + f" --sk-blossom: {u['blossom_l']};", + f" --sk-petal: {u['petal_l']};", + f" --sk-branch-l: {u['branch_l']};", + f" --sk-branch-r: {u['branch_r']};", + ]) + vars_dark = "\n".join([ + f" --sk-blossom: {d['blossom_l']};", + f" --sk-petal: {d['petal_l']};", + f" --sk-branch-l: {d['branch_l']};", + f" --sk-branch-r: {d['branch_r']};", + ]) + + light_block = f"""html[data-theme-style="new-sakura"] {{ + --tb-bg: #fdf6f8; + --tb-surface: #ffffff; + --tb-surface-2: #fdf0f4; + --tb-surface-hover: #fff7fa; + --tb-navbar: #fdf6f8; + --tb-border: #f3dde5; + + --tb-text: #3a2c31; + --tb-text-secondary: #6d555d; + /* 5.27:1（底色）/ 5.62:1（卡片），踩住 AA 下限 */ + --tb-text-muted: #77626a; + + /* #c14a72 在粉底上只有 4.39:1，同色相压深到 #b8436a = 4.87:1 */ + --tb-primary: #b8436a; + --tb-primary-weak: rgba(184, 67, 106, 0.12); + --tb-on-primary: #ffffff; + + --tb-shadow: 0 1px 2px rgba(150, 80, 105, 0.05), 0 12px 28px -18px rgba(150, 80, 105, 0.22); + --tb-shadow-hover: 0 1px 2px rgba(150, 80, 105, 0.07), 0 18px 40px -20px rgba(150, 80, 105, 0.30); + + /* 花与瓣都是内联 SVG（data URI），没有外部素材 —— 所以这个主题不需要对象存储。 + --sk-* 是花材的别名：同一个 URI 只在这里出现一次，下面各页面作用域引用变量， + 否则 6 套位置会把 4 个 data URI 重复 20 多次，文件直接翻倍。 */ +{vars_light} + + /* 整页底纹：极淡的花与落瓣，260px 平铺。压在白底上只是一层纸纹， + 不参与构图（真正的樱花由下面的装饰层负责）。 */ + --tb-page-image: none; + --tb-page-pattern: {u['pattern']}; + --tb-page-pattern-size: 300px 300px; +""" + + # 全局默认位置：写在同一个块里（未单独配置的页面沿用这套） + body = light_block + deco_block_inline(SCOPES["global"]) + "}\n" + + for key in ("box", "question", "admin", "profile", "vote"): + body += "\n" + scope_block( + f'html[data-theme-style="new-sakura"][data-page-scope="{key}"]', SCOPES[key]) + "\n" + + dark_block = f""" +html[data-theme="dark"][data-theme-style="new-sakura"] {{ + --tb-bg: #221a1e; + --tb-surface: #2c2227; + --tb-surface-2: #372a30; + --tb-surface-hover: rgba(255, 147, 180, 0.10); + --tb-navbar: #221a1e; + --tb-border: #47333b; + + --tb-text: #f3e6ea; + --tb-text-secondary: #c9aeb8; + /* 5.82:1（底色）/ 5.26:1（卡片） */ + --tb-text-muted: #ab9099; + + --tb-primary: #ff93b4; + --tb-primary-weak: rgba(255, 147, 180, 0.16); + --tb-on-primary: #1b1014; + + --tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.34), 0 12px 28px -18px rgba(0, 0, 0, 0.58); + --tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -20px rgba(0, 0, 0, 0.68); + +{vars_dark} + + /* 深色不铺底纹：浅粉花瓣压在深底上会变成一层噪点 */ + --tb-page-image: linear-gradient(180deg, #251c21 0%, #221a1e 62%, #1e171b 100%); + --tb-page-pattern: none; +""" + deco_block_inline(SCOPES["global"], indent=" ") + "}\n" + + for key in ("box", "question", "admin", "profile", "vote"): + dark_block += "\n" + scope_block( + f'html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope="{key}"]', + SCOPES[key]) + "\n" + + narrow = ( + "\n@media (max-width: 640px) {\n" + ' html[data-theme-style="new-sakura"] {\n' + + deco_block_inline(SCOPES["narrow"], indent=" ") + + " /* 手机上唯一的留白是顶栏上下两条，装饰层没有立足之地 —— 缩小底纹让樱花密起来 */\n" + " --tb-page-pattern-size: 200px 200px;\n" + " }\n}\n" + ) + + return HEADER + body + dark_block + narrow + FOOTER + + +def deco_block_inline(layers, indent=" "): + img, size, pos = deco(layers) + return ( + f"{indent}--tb-deco: {img};\n" + f"{indent}--tb-deco-size: {size};\n" + f"{indent}--tb-deco-position: {pos};\n" + ) + + +HEADER = """/* 新·樱花（new-sakura）：纯 CSS 樱花，不依赖任何图片素材。 + + 和已有的 sakura 主题的区别：sakura 是"粉底 + 网点"的静态配色；这里把樱花本身 + 做成了可摆放的装饰层 —— 整朵花、带缺口的花瓣、带枝的花朵树，全部是内联 SVG + 的 data URI，所以：换颜色只改一个色值、任意视口不糊、没有额外请求、不需要对象存储。 + + 每个页面一套位置（--tb-deco / -size / -position 三组各 10 槽，必须等长）： + global 未单独配置的页面 右下花枝 + 左上两瓣 + box 箱主页 右上花枝垂下 + 左下花与落瓣 + question 问题页 左下花枝 + 右上花与落瓣 + admin 题目列表 左上花枝（只压顶部边距，不抢列表） + profile 设置页 右下花枝 + 左侧竖排小瓣 + vote 投票页 左上花枝 + 右侧花与落瓣 + ≤640px 一律只留角落两朵小的 —— 卡片占满宽度后枝条会糊在字上 + + 位置一律「两值 + 关键字」，不用三值语法（三值里混用 left/bottom 关键字是非法组合， + 整条声明会作废，花瓣会静默回到左上角）。 + + 生成：python dev/theme-tools/gen_new_sakura.py（改花形/位置请改那个脚本，别手改这里） +*/ + +""" + +FOOTER = """ +/* 组件微调（仅外观）：顶栏与粉底融在一起后，UIkit 默认的 #999 链接色偏淡 */ +html[data-theme-style="new-sakura"] .uk-navbar-nav > li > a { + color: var(--tb-text-secondary); +} +html[data-theme-style="new-sakura"] .uk-navbar-nav > li > a:hover { + color: var(--tb-primary); +} +/* 信息提示条：UIkit 的浅蓝在樱粉底上是唯一的冷色块，换成主色的弱化底 */ +html[data-theme-style="new-sakura"] .uk-alert-primary { + background-color: var(--tb-primary-weak); + color: #9c3356; +} +html[data-theme="dark"][data-theme-style="new-sakura"] .uk-alert-primary { + color: #ffb3c8; +} +""" + + +if __name__ == "__main__": + css = build() + with open(OUT, "w", encoding="utf-8", newline="\n") as f: + f.write(css) + print("已生成 %s（%.1f KB）" % (OUT, len(css.encode()) / 1024)) diff --git a/docs/theme-new-sakura.md b/docs/theme-new-sakura.md new file mode 100644 index 0000000..dbd1a0e --- /dev/null +++ b/docs/theme-new-sakura.md @@ -0,0 +1,103 @@ +# new-sakura（新·樱花）：纯 CSS 樱花主题 + +和已有的 `sakura` 的区别：`sakura` 是「粉底 + 网点」的静态配色；`new-sakura` 把樱花本身 +做成了**可摆放的装饰层** —— 整朵花、带缺口的花瓣、带枝的花朵树，全部是内联 SVG 的 +`data:image/svg+xml` URI，写在主题 CSS 里。 + +因此这个主题： + +- **不需要任何图片素材**，也不依赖对象存储（`static/images/themes/new-sakura/` 是空的）； +- 任意视口缩放都不糊（矢量），DPI 无关； +- 换花色只改 `dev/theme-tools/gen_new_sakura.py` 里的一个色值，重跑即得； +- 没有额外 HTTP 请求 —— SVG 就在 CSS 里。 + +代价是 CSS 有 40~50KB（gzip 后约 12KB）。主题 CSS 走 `StaticVersion` 缓存，一次性开销。 + +## 结构 + +``` +static/css/themes/new-sakura.css ← 生成产物，别手改 +dev/theme-tools/gen_new_sakura.py ← 改这里，重跑 +``` + +```bash +python dev/theme-tools/gen_new_sakura.py +``` + +生成器脚本里有三样东西：花形（`blossom` / `petal` / `branch` / `pattern`）、 +每个页面作用域的位置表（`SCOPES`）、以及配色（`LIGHT` / `DARK`）。 + +## 每个页面的樱花位置 + +`--tb-deco` / `--tb-deco-size` / `--tb-deco-position` 三组各 10 槽，必须等长 +（`TestDecoSlotCount` 会逐文件逐声明检查）。 + +| 作用域 | 选择器 | 构图 | +| --- | --- | --- | +| global | `html[data-theme-style="new-sakura"]` | 右下花枝 + 左上大花 + 两片落瓣 | +| box | `…[data-page-scope="box"]` | 右上花枝垂下（细端在外、粗端朝内）+ 左下花与落瓣 | +| question | `…[data-page-scope="question"]` | 左下花枝斜穿 + 右上大花 + 落瓣 | +| admin | `…[data-page-scope="admin"]` | 左上花枝 + 左侧底部小花（卡片占满宽度，右侧会被盖住） | +| profile | `…[data-page-scope="profile"]` | 右下花枝 + 左侧竖排小花与落瓣 | +| vote | `…[data-page-scope="vote"]` | 左上花枝 + 右侧花与落瓣 | + +位置一律「关键字 + 偏移」两值写法（`right -24px top -16px`）。三值语法里混用 +`left` / `bottom` 关键字是非法的，整条声明会作废、花瓣静默回到左上角。 + +### 窄屏（≤640px） + +装饰层全部置 `none`：卡片占满宽度后，留白只剩顶栏上下两条，枝条会直接糊在文字上。 +樱花改由底纹承担 —— `@media` 里把 `--tb-page-pattern-size` 从 300px 收到 200px，密度上来才看得见。 + +### 深色 + +- 花瓣换成更亮一档的粉（`#f0a0b8`），枝条提亮到能看见； +- 底纹 `--tb-page-pattern: none`：浅粉花瓣压在深底上会变成一层噪点； +- 整页背景改深色渐变（不用纯色，避免大面积死黑）。 + +深色块必须写成 `html[data-theme="dark"][data-theme-style="new-sakura"]`（三重选择器）， +只写浅色块会被同特异性的作用域块盖掉。 + +## 配色与对比度 + +| 令牌 | 亮色 | 深色 | 说明 | +| --- | --- | --- | --- | +| `--tb-bg` | `#fdf6f8` | `#221a1e` | 纯色，不用渐变（整页色感一致） | +| `--tb-surface` | `#ffffff` | `#2c2227` | 卡片 | +| `--tb-text` | `#3a2c31` (12.4:1) | `#f3e6ea` (14.0:1) | | +| `--tb-text-secondary` | `#6d555d` (6.3:1) | `#c9aeb8` (8.3:1) | | +| `--tb-text-muted` | `#77626a` (5.3:1) | `#ab9099` (5.8:1) | 踩 AA 下限 | +| `--tb-primary` | `#b8436a` (4.9:1) | `#ff93b4` (8.2:1) | 原候选 `#c14a72` 只有 4.39:1，压深 | +| `--tb-on-primary` | `#ffffff` (5.2:1) | `#1b1014` (8.9:1) | 主色按钮上的字 | + +## 为什么不用主题生成器出图 + +生成器的装饰层只支持「图片素材」（导出时打进 zip 或传对象存储），没有内联 SVG 图层。 +要把樱花做成可摆放的图层，只能在设计上二选一： + +1. 生成图片素材（花瓣 PNG/WebP）→ 可以用生成器、可以放 S3，但会有位图缩放、额外请求； +2. 内联 SVG 写进 CSS → 零素材、任意缩放不糊，但生成器管不到。 + +`new-sakura` 选 2，因为「用 CSS 做樱花」本身就是这个主题的诉求。 +生成器仍然可以用来**预览**它：`?demo=1&fresh=1` 起画板，把 `new-sakura.css` 注入即可。 + +## 怎么验证 + +```bash +go test ./internal/theme # 10 槽等长、深浅块成对、必需令牌齐全 +``` + +视觉自检用项目真实页面快照： + +```bash +TEST_PREVIEW=1 go test ./templates -run TestGenPreview +python dev/theme-builder/serve.py +# 打开 outputs/preview-box-light.html，DevTools 里给 加 +# data-theme-style="new-sakura" data-page-scope="box" +``` + +## 上线 + +1. `conf/app.ini` 的 `[theme] available` 加上 `new-sakura`（不改就「设置页看不到」，现象和部署没生效一样）； +2. 重新 `go build` —— 主题 CSS 是编译期 embed，只重启不重编不会变； +3. 箱主设置页 → 账号 → 外观，选择「新·樱花」。 diff --git a/internal/i18n/dict_en.go b/internal/i18n/dict_en.go index 4f70a21..752a66b 100644 --- a/internal/i18n/dict_en.go +++ b/internal/i18n/dict_en.go @@ -941,4 +941,5 @@ var enDict = map[string]string{ "theme.name.default": "Default look", "theme.name.sakura": "Sakura", "theme.name.shiroko": "Shiroko", + "theme.name.new-sakura": "New Sakura", } diff --git a/internal/i18n/dict_ja.go b/internal/i18n/dict_ja.go index dadefa7..c03b7a8 100644 --- a/internal/i18n/dict_ja.go +++ b/internal/i18n/dict_ja.go @@ -941,4 +941,5 @@ var jaDict = map[string]string{ "theme.name.default": "標準の外観", "theme.name.sakura": "さくら", "theme.name.shiroko": "シロコ", + "theme.name.new-sakura": "新さくら", } diff --git a/internal/i18n/dict_zh_cn.go b/internal/i18n/dict_zh_cn.go index 86beb82..4d04363 100644 --- a/internal/i18n/dict_zh_cn.go +++ b/internal/i18n/dict_zh_cn.go @@ -882,6 +882,7 @@ var zhCNDict = map[string]string{ "theme.name.default": "基础外观", "theme.name.sakura": "樱花", "theme.name.shiroko": "砂狼白子", + "theme.name.new-sakura": "新·樱花", // 验证码 JSON 接口：前端消费（P2） "captcha.json.badRequest": "请求格式错误", diff --git a/internal/i18n/dict_zh_tw.go b/internal/i18n/dict_zh_tw.go index d312b18..1831b38 100644 --- a/internal/i18n/dict_zh_tw.go +++ b/internal/i18n/dict_zh_tw.go @@ -941,4 +941,5 @@ var zhTWDict = map[string]string{ "theme.name.default": "基礎外觀", "theme.name.sakura": "櫻花", "theme.name.shiroko": "砂狼白子", + "theme.name.new-sakura": "新·櫻花", } diff --git a/static/css/themes/new-sakura.css b/static/css/themes/new-sakura.css new file mode 100644 index 0000000..8e85912 --- /dev/null +++ b/static/css/themes/new-sakura.css @@ -0,0 +1,178 @@ +/* 新·樱花（new-sakura）：纯 CSS 樱花，不依赖任何图片素材。 + + 和已有的 sakura 主题的区别：sakura 是"粉底 + 网点"的静态配色；这里把樱花本身 + 做成了可摆放的装饰层 —— 整朵花、带缺口的花瓣、带枝的花朵树，全部是内联 SVG + 的 data URI，所以：换颜色只改一个色值、任意视口不糊、没有额外请求、不需要对象存储。 + + 每个页面一套位置（--tb-deco / -size / -position 三组各 10 槽，必须等长）： + global 未单独配置的页面 右下花枝 + 左上两瓣 + box 箱主页 右上花枝垂下 + 左下花与落瓣 + question 问题页 左下花枝 + 右上花与落瓣 + admin 题目列表 左上花枝（只压顶部边距，不抢列表） + profile 设置页 右下花枝 + 左侧竖排小瓣 + vote 投票页 左上花枝 + 右侧花与落瓣 + ≤640px 一律只留角落两朵小的 —— 卡片占满宽度后枝条会糊在字上 + + 位置一律「两值 + 关键字」，不用三值语法（三值里混用 left/bottom 关键字是非法组合， + 整条声明会作废，花瓣会静默回到左上角）。 + + 生成：python dev/theme-tools/gen_new_sakura.py（改花形/位置请改那个脚本，别手改这里） +*/ + +html[data-theme-style="new-sakura"] { + --tb-bg: #fdf6f8; + --tb-surface: #ffffff; + --tb-surface-2: #fdf0f4; + --tb-surface-hover: #fff7fa; + --tb-navbar: #fdf6f8; + --tb-border: #f3dde5; + + --tb-text: #3a2c31; + --tb-text-secondary: #6d555d; + /* 5.27:1（底色）/ 5.62:1（卡片），踩住 AA 下限 */ + --tb-text-muted: #77626a; + + /* #c14a72 在粉底上只有 4.39:1，同色相压深到 #b8436a = 4.87:1 */ + --tb-primary: #b8436a; + --tb-primary-weak: rgba(184, 67, 106, 0.12); + --tb-on-primary: #ffffff; + + --tb-shadow: 0 1px 2px rgba(150, 80, 105, 0.05), 0 12px 28px -18px rgba(150, 80, 105, 0.22); + --tb-shadow-hover: 0 1px 2px rgba(150, 80, 105, 0.07), 0 18px 40px -20px rgba(150, 80, 105, 0.30); + + /* 花与瓣都是内联 SVG（data URI），没有外部素材 —— 所以这个主题不需要对象存储。 + --sk-* 是花材的别名：同一个 URI 只在这里出现一次，下面各页面作用域引用变量， + 否则 6 套位置会把 4 个 data URI 重复 20 多次，文件直接翻倍。 */ + --sk-blossom: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227.5%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%223%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fsvg%3E"); + --sk-petal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2056%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f7bcd0%22%2F%3E%3C%2Fsvg%3E"); + --sk-branch-l: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20420%20320%22%3E%3Cg%20transform%3D%22translate%28420%2C0%29%20scale%28-1%2C1%29%22%3E%3Cpath%20d%3D%22M2%20318C74%20276%20112%20212%20176%20184c62-28%20102-72%20146-118%2026-28%2052-46%2082-58%22%20fill%3D%22none%22%20stroke%3D%22%239a7a70%22%20stroke-width%3D%224.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.62%22%2F%3E%3Cpath%20d%3D%22M176%20184c-12-34-20-60-16-94M262%20126c16-28%2032-48%2046-58%22%20fill%3D%22none%22%20stroke%3D%22%239a7a70%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.5%22%2F%3E%3Cg%20transform%3D%22translate%28302%2074%29%20scale%280.62%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28256%20110%29%20scale%280.55%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28214%20138%29%20scale%280.6%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28172%20176%29%20scale%280.58%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28352%2042%29%20scale%280.5%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28140%20214%29%20scale%280.46%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28116%20246%29%20scale%280.4%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28326%20128%29%20scale%280.42%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28272%20158%29%20rotate%2822%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f7bcd0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28318%20150%29%20rotate%28-18%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f7bcd0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28196%2092%29%20rotate%2840%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f7bcd0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28150%20196%29%20rotate%28-26%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f7bcd0%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + --sk-branch-r: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20420%20320%22%3E%3Cg%3E%3Cpath%20d%3D%22M2%20318C74%20276%20112%20212%20176%20184c62-28%20102-72%20146-118%2026-28%2052-46%2082-58%22%20fill%3D%22none%22%20stroke%3D%22%239a7a70%22%20stroke-width%3D%224.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.62%22%2F%3E%3Cpath%20d%3D%22M176%20184c-12-34-20-60-16-94M262%20126c16-28%2032-48%2046-58%22%20fill%3D%22none%22%20stroke%3D%22%239a7a70%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.5%22%2F%3E%3Cg%20transform%3D%22translate%28302%2074%29%20scale%280.62%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28256%20110%29%20scale%280.55%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28214%20138%29%20scale%280.6%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28172%20176%29%20scale%280.58%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28352%2042%29%20scale%280.5%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28140%20214%29%20scale%280.46%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28116%20246%29%20scale%280.4%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28326%20128%29%20scale%280.42%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f7bcd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23e989aa%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%23fdf6f8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28272%20158%29%20rotate%2822%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f7bcd0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28318%20150%29%20rotate%28-18%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f7bcd0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28196%2092%29%20rotate%2840%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f7bcd0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28150%20196%29%20rotate%28-26%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f7bcd0%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + + /* 整页底纹：极淡的花与落瓣，260px 平铺。压在白底上只是一层纸纹， + 不参与构图（真正的樱花由下面的装饰层负责）。 */ + --tb-page-image: none; + --tb-page-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%3E%3Cg%20transform%3D%22translate%2896%2084%29%20scale%280.34%29%20translate%28-50%20-50%29%22%20opacity%3D%220.34%22%3E%3Cg%20fill%3D%22%23f2bfd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28236%20208%29%20rotate%2828%29%20scale%280.26%29%22%20opacity%3D%220.24%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f2bfd0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28188%2052%29%20rotate%28-34%29%20scale%280.2%29%22%20opacity%3D%220.18%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f2bfd0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + --tb-page-pattern-size: 300px 300px; + --tb-deco: var(--sk-branch-r), var(--sk-blossom), var(--sk-petal), var(--sk-petal), none, none, none, none, none, none; + --tb-deco-size: auto 280px, auto 88px, 32px, 26px, auto, auto, auto, auto, auto, auto; + --tb-deco-position: right -16px bottom -22px, left 6% top 12%, left 14% top 24%, right 16% top 8%, left top, left top, left top, left top, left top, left top; +} + +html[data-theme-style="new-sakura"][data-page-scope="box"] { + --tb-deco: var(--sk-branch-r), var(--sk-blossom), var(--sk-petal), var(--sk-petal), var(--sk-blossom), none, none, none, none, none; + --tb-deco-size: auto 300px, auto 80px, 34px, 24px, auto 52px, auto, auto, auto, auto, auto; + --tb-deco-position: right -24px top -16px, left 5% bottom 16%, left 14% bottom 32%, right 22% bottom 8%, right 6% bottom 6%, left top, left top, left top, left top, left top; +} + +html[data-theme-style="new-sakura"][data-page-scope="question"] { + --tb-deco: var(--sk-branch-l), var(--sk-blossom), var(--sk-petal), var(--sk-petal), none, none, none, none, none, none; + --tb-deco-size: auto 300px, auto 86px, 30px, 24px, auto, auto, auto, auto, auto, auto; + --tb-deco-position: left -34px bottom -24px, right 7% top 11%, right 17% top 24%, left 11% top 7%, left top, left top, left top, left top, left top, left top; +} + +html[data-theme-style="new-sakura"][data-page-scope="admin"] { + --tb-deco: var(--sk-branch-l), var(--sk-blossom), var(--sk-petal), none, none, none, none, none, none, none; + --tb-deco-size: auto 260px, auto 70px, 26px, auto, auto, auto, auto, auto, auto, auto; + --tb-deco-position: left -28px top -24px, left 3% bottom 7%, left 11% bottom 15%, left top, left top, left top, left top, left top, left top, left top; +} + +html[data-theme-style="new-sakura"][data-page-scope="profile"] { + --tb-deco: var(--sk-branch-r), var(--sk-blossom), var(--sk-petal), var(--sk-petal), none, none, none, none, none, none; + --tb-deco-size: auto 280px, auto 66px, 28px, 22px, auto, auto, auto, auto, auto, auto; + --tb-deco-position: right -28px bottom -24px, left 6% top 9%, left 15% top 19%, left 5% top 28%, left top, left top, left top, left top, left top, left top; +} + +html[data-theme-style="new-sakura"][data-page-scope="vote"] { + --tb-deco: var(--sk-branch-l), var(--sk-blossom), var(--sk-petal), var(--sk-blossom), none, none, none, none, none, none; + --tb-deco-size: auto 280px, auto 78px, 28px, auto 52px, auto, auto, auto, auto, auto, auto; + --tb-deco-position: left -30px top -20px, right 8% top 16%, right 18% top 27%, right 6% bottom 8%, left top, left top, left top, left top, left top, left top; +} + +html[data-theme="dark"][data-theme-style="new-sakura"] { + --tb-bg: #221a1e; + --tb-surface: #2c2227; + --tb-surface-2: #372a30; + --tb-surface-hover: rgba(255, 147, 180, 0.10); + --tb-navbar: #221a1e; + --tb-border: #47333b; + + --tb-text: #f3e6ea; + --tb-text-secondary: #c9aeb8; + /* 5.82:1（底色）/ 5.26:1（卡片） */ + --tb-text-muted: #ab9099; + + --tb-primary: #ff93b4; + --tb-primary-weak: rgba(255, 147, 180, 0.16); + --tb-on-primary: #1b1014; + + --tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.34), 0 12px 28px -18px rgba(0, 0, 0, 0.58); + --tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -20px rgba(0, 0, 0, 0.68); + + --sk-blossom: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227.5%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%223%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fsvg%3E"); + --sk-petal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2056%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f0a0b8%22%2F%3E%3C%2Fsvg%3E"); + --sk-branch-l: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20420%20320%22%3E%3Cg%20transform%3D%22translate%28420%2C0%29%20scale%28-1%2C1%29%22%3E%3Cpath%20d%3D%22M2%20318C74%20276%20112%20212%20176%20184c62-28%20102-72%20146-118%2026-28%2052-46%2082-58%22%20fill%3D%22none%22%20stroke%3D%22%23a8837a%22%20stroke-width%3D%224.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.62%22%2F%3E%3Cpath%20d%3D%22M176%20184c-12-34-20-60-16-94M262%20126c16-28%2032-48%2046-58%22%20fill%3D%22none%22%20stroke%3D%22%23a8837a%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.5%22%2F%3E%3Cg%20transform%3D%22translate%28302%2074%29%20scale%280.62%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28256%20110%29%20scale%280.55%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28214%20138%29%20scale%280.6%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28172%20176%29%20scale%280.58%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28352%2042%29%20scale%280.5%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28140%20214%29%20scale%280.46%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28116%20246%29%20scale%280.4%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28326%20128%29%20scale%280.42%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28272%20158%29%20rotate%2822%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f0a0b8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28318%20150%29%20rotate%28-18%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f0a0b8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28196%2092%29%20rotate%2840%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f0a0b8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28150%20196%29%20rotate%28-26%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f0a0b8%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + --sk-branch-r: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20420%20320%22%3E%3Cg%3E%3Cpath%20d%3D%22M2%20318C74%20276%20112%20212%20176%20184c62-28%20102-72%20146-118%2026-28%2052-46%2082-58%22%20fill%3D%22none%22%20stroke%3D%22%23a8837a%22%20stroke-width%3D%224.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.62%22%2F%3E%3Cpath%20d%3D%22M176%20184c-12-34-20-60-16-94M262%20126c16-28%2032-48%2046-58%22%20fill%3D%22none%22%20stroke%3D%22%23a8837a%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.5%22%2F%3E%3Cg%20transform%3D%22translate%28302%2074%29%20scale%280.62%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28256%20110%29%20scale%280.55%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28214%20138%29%20scale%280.6%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28172%20176%29%20scale%280.58%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28352%2042%29%20scale%280.5%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28140%20214%29%20scale%280.46%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28116%20246%29%20scale%280.4%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28326%20128%29%20scale%280.42%29%20translate%28-50%20-50%29%22%3E%3Cg%20fill%3D%22%23f0a0b8%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%227%22%20fill%3D%22%23c96a8b%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222.8%22%20fill%3D%22%232c2227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28272%20158%29%20rotate%2822%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f0a0b8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28318%20150%29%20rotate%28-18%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f0a0b8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28196%2092%29%20rotate%2840%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f0a0b8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28150%20196%29%20rotate%28-26%29%20scale%280.42%29%20translate%28-20%20-28%29%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f0a0b8%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + + /* 深色不铺底纹：浅粉花瓣压在深底上会变成一层噪点 */ + --tb-page-image: linear-gradient(180deg, #251c21 0%, #221a1e 62%, #1e171b 100%); + --tb-page-pattern: none; + --tb-deco: var(--sk-branch-r), var(--sk-blossom), var(--sk-petal), var(--sk-petal), none, none, none, none, none, none; + --tb-deco-size: auto 280px, auto 88px, 32px, 26px, auto, auto, auto, auto, auto, auto; + --tb-deco-position: right -16px bottom -22px, left 6% top 12%, left 14% top 24%, right 16% top 8%, left top, left top, left top, left top, left top, left top; +} + +html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope="box"] { + --tb-deco: var(--sk-branch-r), var(--sk-blossom), var(--sk-petal), var(--sk-petal), var(--sk-blossom), none, none, none, none, none; + --tb-deco-size: auto 300px, auto 80px, 34px, 24px, auto 52px, auto, auto, auto, auto, auto; + --tb-deco-position: right -24px top -16px, left 5% bottom 16%, left 14% bottom 32%, right 22% bottom 8%, right 6% bottom 6%, left top, left top, left top, left top, left top; +} + +html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope="question"] { + --tb-deco: var(--sk-branch-l), var(--sk-blossom), var(--sk-petal), var(--sk-petal), none, none, none, none, none, none; + --tb-deco-size: auto 300px, auto 86px, 30px, 24px, auto, auto, auto, auto, auto, auto; + --tb-deco-position: left -34px bottom -24px, right 7% top 11%, right 17% top 24%, left 11% top 7%, left top, left top, left top, left top, left top, left top; +} + +html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope="admin"] { + --tb-deco: var(--sk-branch-l), var(--sk-blossom), var(--sk-petal), none, none, none, none, none, none, none; + --tb-deco-size: auto 260px, auto 70px, 26px, auto, auto, auto, auto, auto, auto, auto; + --tb-deco-position: left -28px top -24px, left 3% bottom 7%, left 11% bottom 15%, left top, left top, left top, left top, left top, left top, left top; +} + +html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope="profile"] { + --tb-deco: var(--sk-branch-r), var(--sk-blossom), var(--sk-petal), var(--sk-petal), none, none, none, none, none, none; + --tb-deco-size: auto 280px, auto 66px, 28px, 22px, auto, auto, auto, auto, auto, auto; + --tb-deco-position: right -28px bottom -24px, left 6% top 9%, left 15% top 19%, left 5% top 28%, left top, left top, left top, left top, left top, left top; +} + +html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope="vote"] { + --tb-deco: var(--sk-branch-l), var(--sk-blossom), var(--sk-petal), var(--sk-blossom), none, none, none, none, none, none; + --tb-deco-size: auto 280px, auto 78px, 28px, auto 52px, auto, auto, auto, auto, auto, auto; + --tb-deco-position: left -30px top -20px, right 8% top 16%, right 18% top 27%, right 6% bottom 8%, left top, left top, left top, left top, left top, left top; +} + +@media (max-width: 640px) { + html[data-theme-style="new-sakura"] { + --tb-deco: none, none, none, none, none, none, none, none, none, none; + --tb-deco-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto; + --tb-deco-position: left top, left top, left top, left top, left top, left top, left top, left top, left top, left top; + /* 手机上唯一的留白是顶栏上下两条，装饰层没有立足之地 —— 缩小底纹让樱花密起来 */ + --tb-page-pattern-size: 200px 200px; + } +} + +/* 组件微调（仅外观）：顶栏与粉底融在一起后，UIkit 默认的 #999 链接色偏淡 */ +html[data-theme-style="new-sakura"] .uk-navbar-nav > li > a { + color: var(--tb-text-secondary); +} +html[data-theme-style="new-sakura"] .uk-navbar-nav > li > a:hover { + color: var(--tb-primary); +} +/* 信息提示条：UIkit 的浅蓝在樱粉底上是唯一的冷色块，换成主色的弱化底 */ +html[data-theme-style="new-sakura"] .uk-alert-primary { + background-color: var(--tb-primary-weak); + color: #9c3356; +} +html[data-theme="dark"][data-theme-style="new-sakura"] .uk-alert-primary { + color: #ffb3c8; +}