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.
66 lines
3.1 KiB
Django/Jinja
66 lines
3.1 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;
|
|
{% if shadow %}box-shadow: 0 4px 14px rgba(0, 20, 60, 0.2);{% endif %}
|
|
background: #ffffff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.weekday-row { display: flex; flex: 0 0 auto; background: {{ accent_start }}; }
|
|
.weekday-cell { flex: 1 1 0; color: #ffffff; font-weight: 700; font-size: {{ header_size }}px; text-align: center; padding: 4px 0; }
|
|
.weeks { flex: 1 1 auto; display: flex; flex-direction: column; }
|
|
.week-row { flex: 1 1 0; display: flex; }
|
|
.day-cell { flex: 1 1 0; border: 1px solid #e2e6ec; padding: 4px; min-width: 0; overflow: hidden; }
|
|
{#- Bold everywhere, including out-of-month -- de-emphasis is via
|
|
smaller size only, not weight or a gray color. Regular-weight and
|
|
gray text are both individually fragile under Bayer ordered
|
|
dithering at small sizes (thin/low-contrast anti-aliased edges
|
|
have little "mass" to survive the bias+threshold step), and this
|
|
cell combined both, which degraded out-of-month day numbers into
|
|
unrecognizable speckle -- classic PIL's own de-emphasis trick
|
|
(weight instead of gray, see calendar_render._build_month's
|
|
docstring) doesn't transfer safely to this render path. #}
|
|
.day-num { font-size: {{ day_size }}px; font-weight: 700; color: #17233b; }
|
|
.day-num.out-of-month { font-size: {{ day_size * 0.8 }}px; }
|
|
.day-num.today {
|
|
display: inline-block; background: {{ accent_start }}; color: #ffffff;
|
|
border-radius: 4px; padding: 0 4px;
|
|
}
|
|
.dots { display: flex; gap: 3px; margin-top: 3px; align-items: center; flex-wrap: wrap; }
|
|
.dot { width: {{ dot_size }}px; height: {{ dot_size }}px; border-radius: 50%; flex: 0 0 auto; }
|
|
.dot-more { font-size: {{ day_size * 0.8 }}px; color: #5b6674; }
|
|
</style></head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="weekday-row">
|
|
{% for name in day_names %}<div class="weekday-cell">{{ name }}</div>{% endfor %}
|
|
</div>
|
|
<div class="weeks">
|
|
{% for week in weeks %}
|
|
<div class="week-row">
|
|
{% for day in week %}
|
|
<div class="day-cell">
|
|
<span class="day-num {% if day.is_today %}today{% elif not day.in_month %}out-of-month{% endif %}">{{ day.day_num }}</span>
|
|
{% if day.dots %}
|
|
<div class="dots">
|
|
{% for c in day.dots %}<div class="dot" style="background:{{ c }};"></div>{% endfor %}
|
|
{% if day.more_count %}<span class="dot-more">+{{ day.more_count }}</span>{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</body></html>
|