tamakyi
8941744621
线上（box.shiroko.one/_/tamakyi）两个现象来自同一处：`--tb-navbar` 是实色，
顶栏那条带（y=20..80）把从右上角长出来的花枝齐刷刷切掉一段。
第一版顺手改成 transparent —— 花枝完整了，但顶栏"消失"：导航失去依托，
文字直接压在花纹上。用户当场否掉，要求半透明。
- 顶栏：`rgba(253,246,248,0.72)` / 深色 `rgba(34,26,30,0.72)`，配
`.uk-navbar-container{backdrop-filter:blur(12px)}`（令牌只能是颜色，模糊写在规则里）。
0.72 有依据：导航文字 #6d555d 纯底 6.34:1，最坏情况（深花瓣在顶栏后面）压平后 5.08:1。
- 花枝 top -16px → 26px：顶栏半透明后，700~760px 宽度下枝头正好压在「登录」上（截图确认）。
- 手机底栏 #tb-mobile-utils 在 base.css 写死 rgba(255,255,255,.92)，粉底上是一条白杠，
主题里改成同色系 0.92。
- 新增 TestNavbarNotFullyTransparent：拦 `transparent` / `rgba(...,0)` / `#rrggbb00`，
并说明"这不是审美偏好，是踩过之后立的规矩"。变异验证过（改回 transparent 立即 FAIL）。
约定同时写进 static/css/themes/_scaffold.css 的令牌说明。
- StaticVersion 20261022b → 20261022c：css 改了不提版本号，浏览器拿着旧样式，
现象就是"改了但线上没变"。
446 lines
20 KiB
Python
446 lines
20 KiB
Python
"""生成 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'<ellipse cx="50" cy="27" rx="14" ry="21" transform="rotate({a} 50 50)"/>'
|
||
for a in (0, 72, 144, 216, 288)
|
||
)
|
||
return (
|
||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">'
|
||
f'<g fill="{light}">{petals}</g>'
|
||
f'<circle cx="50" cy="50" r="7.5" fill="{deep}"/>'
|
||
f'<circle cx="50" cy="50" r="3" fill="{heart}"/>'
|
||
"</svg>"
|
||
)
|
||
|
||
|
||
# 单瓣：顶端留一个 V 形缺口（樱花花瓣的标志），比整朵花更适合当"飘落"的单位。
|
||
def petal(fill):
|
||
return (
|
||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 56">'
|
||
f'<path d="M20 1c9 0 15 8 15 18 0 5-2 9-4 12l-4-5-7 9-7-9-4 5c-2-3-4-7-4-12C5 9 11 1 20 1z" fill="{fill}"/>'
|
||
"</svg>"
|
||
)
|
||
|
||
|
||
# 枝条：一根主枝 + 两根小杈 + 五朵花 + 三片落瓣。
|
||
# 花是重复内联而不是 <use href="#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'<g transform="translate({x} {y}) rotate({rot}) scale({s}) translate(-50 -50)">'
|
||
'<g fill="%s">' % light
|
||
+ "".join(f'<ellipse cx="50" cy="27" rx="14" ry="21" transform="rotate({a} 50 50)"/>'
|
||
for a in (0, 72, 144, 216, 288))
|
||
+ f'</g><circle cx="50" cy="50" r="7" fill="{deep}"/>'
|
||
f'<circle cx="50" cy="50" r="2.8" fill="{heart}"/></g>'
|
||
)
|
||
for x, y, rot in petals:
|
||
body.append(
|
||
f'<g transform="translate({x} {y}) rotate({rot}) scale(0.42) translate(-20 -28)">'
|
||
f'<path d="M20 1c9 0 15 8 15 18 0 5-2 9-4 12l-4-5-7 9-7-9-4 5c-2-3-4-7-4-12C5 9 11 1 20 1z" fill="{light}"/></g>'
|
||
)
|
||
return (
|
||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 320">'
|
||
f'<g{fl}>'
|
||
f'<path d="M2 318C74 276 112 212 176 184c62-28 102-72 146-118 26-28 52-46 82-58" '
|
||
f'fill="none" stroke="{wood}" stroke-width="4.2" stroke-linecap="round" opacity=".62"/>'
|
||
f'<path d="M176 184c-4-30 4-56 16-78M262 126c16-28 32-48 46-58" '
|
||
f'fill="none" stroke="{wood}" stroke-width="2.8" stroke-linecap="round" opacity=".5"/>'
|
||
+ "".join(body) + "</g></svg>"
|
||
)
|
||
|
||
|
||
# 平铺底纹：极淡的小花 + 落瓣。
|
||
# 密度是刻意的：最早一版放了 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 = (
|
||
'<g fill="%s">' % light
|
||
+ "".join(f'<ellipse cx="50" cy="27" rx="14" ry="21" transform="rotate({a} 50 50)"/>'
|
||
for a in (0, 72, 144, 216, 288))
|
||
+ "</g>"
|
||
)
|
||
petal_path = ('<path d="M20 1c9 0 15 8 15 18 0 5-2 9-4 12l-4-5-7 9-7-9-4 5'
|
||
'c-2-3-4-7-4-12C5 9 11 1 20 1z" fill="%s"/>')
|
||
o = lambda v: min(0.92, round(v * k, 2))
|
||
return (
|
||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">'
|
||
f'<g transform="translate(96 84) scale(0.34) translate(-50 -50)" opacity="{o(0.34)}">{one}</g>'
|
||
f'<g transform="translate(236 208) rotate(28) scale(0.26)" opacity="{o(0.24)}">'
|
||
+ (petal_path % light) +
|
||
"</g>"
|
||
f'<g transform="translate(188 52) rotate(-34) scale(0.2)" opacity="{o(0.18)}">'
|
||
+ (petal_path % light) +
|
||
"</g>"
|
||
"</svg>"
|
||
)
|
||
|
||
|
||
# ---- 一套素材（浅色 / 深色各一组色） ---------------------------------------
|
||
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]"))
|