"""生成 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, 14), (256, 110, 0.55, -22), (214, 138, 0.60, 34), (172, 176, 0.58, -6), (352, 42, 0.50, 48), (140, 214, 0.46, 20), (116, 246, 0.40, -32), (326, 128, 0.42, 28), ] petals = [(272, 158, 22), (318, 150, -18), (196, 92, 40), (150, 196, -26)] body = [] for x, y, s, rot 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, strong=False): """平铺底纹。strong 给窄屏用：那里装饰层全关，底纹是屏幕上唯一的樱花， 照桌面那套 0.18~0.34 的透明度在 390px 上基本看不出来（实测截图接近纯粉底）。""" k = 1.9 if strong else 1.0 one = ( '' % light + "".join(f'' for a in (0, 72, 144, 216, 288)) + "" ) petal_path = ('') o = lambda v: min(0.92, round(v * k, 2)) 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, asset_base=""): """asset_base 非空 -> 引用对象存储上的位图（键名与 export_assets.py 的产物一致）。 内联 SVG 是默认：gzip 后约 3.9KB、零额外请求。位图版 CSS 只有 10.6KB，但要多个 5 个请求共 ~49KB，总传输反而更大 —— 它存在的理由是素材能被非 CSS 场景复用。 换之前先确认桶已对公网可读（自定义域或 r2.dev），否则主题会整片 403。 """ if asset_base: b = asset_base.rstrip("/") return { "blossom_l": 'url("%s/blossom.webp")' % b, "petal_l": 'url("%s/petal.webp")' % b, "branch_l": 'url("%s/branch-left.webp")' % b, "branch_r": 'url("%s/branch-right.webp")' % b, "pattern": 'url("%s/pattern.webp")' % b, "pattern_narrow": 'url("%s/pattern.webp")' % b, } 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"])), "pattern_narrow": uri(pattern(p["pattern"], strong=True)), } 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 时可见部分只剩一团花（第一次就是这个问题） # top 从 -16px 收到 26px：顶栏改透明后，700~760px 宽度下枝头会正好压在"登录"上。 # 顶栏高 60px、外边距 20px，26px 起笔即落在顶栏下沿之上，宽屏仍保留"从右上角长出"。 ("var(--sk-branch-r)", "auto 300px", "right -24px top 26px"), ("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%"), ], # 窄屏：卡片占满宽度，左右只剩 ~16px 边距，花枝放哪儿都糊在字上。 # 实测底纹铺在 16px 边距里根本落不到花 —— 花朵在格子里的位置固定在 x≈58， # 所以只在「顶栏与卡片之间」那条 30px 的横带里放几朵小的，其余交给加强底纹。 # 试过在「顶栏与卡片之间」那条 ~35px 的带子里放小樱花：box 页卡片从 y=122 起还行， # question/admin 页卡片从 y=110 起就把它切掉半个，结果是贴在卡片边上的粉色碎块。 # 手机上没有可靠的留白，干脆不放装饰层 —— 观感交给配色与底纹（加强版 pattern）。 "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(asset_base=""): u = uris(LIGHT, asset_base) d = uris(DARK, asset_base) 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; /* 顶栏做磨砂玻璃：樱花从角落长出来，实色顶栏会把它齐刷刷切一段；但也不能给 transparent —— 顶栏会"消失"，导航失去依托，文字直接压在花纹上。留 28% 的透光。 模糊由下面「组件微调」里的 backdrop-filter 加（令牌只能给颜色）。 */ --tb-navbar: rgba(253, 246, 248, 0.72); --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: rgba(34, 26, 30, 0.72); --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" # 作用域块的选择器是 html[data-theme-style][data-page-scope="box"]（特异性 0,2,1）， # 比 html[data-theme-style] （0,1,1）高 —— 光写一条压不住，窄屏照样是桌面版装饰。 # 所以用同等特异性的通配属性选择器再写一遍，靠「在文件里更晚」取胜； # 深色作用域块是 0,3,1，还得再补一条。 narrow_rules = "" for sel in ( 'html[data-theme-style="new-sakura"][data-page-scope]', 'html[data-theme="dark"][data-theme-style="new-sakura"]', 'html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope]', ): narrow_rules += " %s {\n%s }\n" % ( sel, deco_block_inline(SCOPES["narrow"], indent=" ")) narrow = ( "\n@media (max-width: 640px) {\n" ' html[data-theme-style="new-sakura"] {\n' + deco_block_inline(SCOPES["narrow"], indent=" ") + " /* 手机上装饰层整个收掉（卡片占满宽度），樱花只能由底纹承担：\n" " 换成加强版 + 缩小格子，否则 390px 上看就是一片纯粉 */\n" " --tb-page-pattern: %s;\n" % u["pattern_narrow"] + " --tb-page-pattern-size: 180px 180px;\n" " }\n" + narrow_rules + "}\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; } /* 顶栏磨砂：半透明底由 --tb-navbar 给，模糊必须在这里加（令牌只能是颜色值）。 和手机底栏一样是「半透明 + 模糊」，不是全透明 —— 顶栏得看得见，只是后面透得出花。 */ html[data-theme-style="new-sakura"] .uk-navbar-container:not(.uk-navbar-transparent) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* 手机底栏：base.css 写死 rgba(255,255,255,.92)，压在粉底上是一条白杠，跟背景脱开 */ html[data-theme-style="new-sakura"] #tb-mobile-utils { background: rgba(253, 246, 248, 0.92); } html[data-theme="dark"][data-theme-style="new-sakura"] #tb-mobile-utils { background: rgba(34, 26, 30, 0.92); } """ if __name__ == "__main__": import argparse ap = argparse.ArgumentParser(description="生成 new-sakura 主题 CSS") ap.add_argument("--asset-base", default="", help="引用对象存储位图的前缀，如 https://r2.example.com/themes/new-sakura；" "留空 = 内联 SVG（默认）") ap.add_argument("--out", default=OUT, help="输出路径") args = ap.parse_args() css = build(args.asset_base) with open(args.out, "w", encoding="utf-8", newline="\n") as f: f.write(css) print("已生成 %s（%.1f KB）%s" % (args.out, len(css.encode()) / 1024, " [位图版]" if args.asset_base else " [内联 SVG]"))