tfaour
5f4f8f2ea7
Frame.theme (7 presets in app/theme_tokens.py) drives font family, corner radius, drop shadow, and an accent hue for every modern-style widget's header/accent region. Rich accent colors (not just the 6 flat panel inks) are approximated via denser Bayer stippling confined to just that region (html_render.ordered_dither_regions), so icon/text content elsewhere stays exactly as crisp as it is today -- verified directly against real Chromium renders, both in unit tests and via run-server. "classic" is a byte-identical no-visual-change default: weather's header keeps its original fixed blue gradient, tasks/calendar keep their flat THEME_* ink. Themes are purely stylistic -- battery's charge-level color, calendar/ tasks' per-owner event chips, and text's own per-widget font choice are never touched.
54 lines
1.8 KiB
Django/Jinja
54 lines
1.8 KiB
Django/Jinja
<!doctype html>
|
|
<html><head><style>
|
|
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_regular }}"); font-weight: 400; }
|
|
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_bold }}"); font-weight: 700; }
|
|
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "ThemeFont", sans-serif; }
|
|
body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
|
|
.card {
|
|
width: {{ w - gutter * 2 }}px;
|
|
height: {{ h - gutter * 2 }}px;
|
|
margin: {{ gutter }}px;
|
|
border-radius: {{ radius }}px;
|
|
overflow: hidden;
|
|
background: #ffffff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
.icon-wrap { display: flex; align-items: center; }
|
|
.icon-body {
|
|
width: {{ icon_w }}px;
|
|
height: {{ icon_h }}px;
|
|
border: {{ stroke }}px solid #000000;
|
|
border-radius: {{ icon_radius }}px;
|
|
padding: {{ stroke }}px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
|
}
|
|
.icon-fill {
|
|
width: {{ fill_pct }}%;
|
|
height: 100%;
|
|
border-radius: {{ fill_radius }}px;
|
|
background: linear-gradient(180deg, {{ fill_color }}, {{ fill_color_dark }});
|
|
}
|
|
.icon-nub {
|
|
width: {{ nub_w }}px;
|
|
height: {{ nub_h }}px;
|
|
background: #000000;
|
|
border-radius: 0 {{ nub_radius }}px {{ nub_radius }}px 0;
|
|
}
|
|
.pct { font-weight: 700; font-size: {{ pct_size }}px; line-height: 1; color: {{ fill_color }}; }
|
|
.line { font-weight: 400; font-size: {{ line_size }}px; line-height: 1; color: #5b6674; }
|
|
</style></head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="icon-wrap">
|
|
<div class="icon-body"><div class="icon-fill"></div></div>
|
|
<div class="icon-nub"></div>
|
|
</div>
|
|
<div class="pct">{{ percent }}%</div>
|
|
{% for line in lines %}<div class="line">{{ line }}</div>{% endfor %}
|
|
</div>
|
|
</body></html>
|