tfaour
455020cb1f
The first modern-style rollout translated each widget's existing classic layout into HTML/CSS -- same gradient headers, same rounded-shadowed card, prettier chrome around an unchanged composition. This actually redesigns weather (current/daily), calendar (all four views), tasks, and battery: no card/shadow anywhere, a slim accent-colored rule instead of a full gradient banner (and only that rule dithers at the richer accent amplitude now, not the header text sitting on it), and a dominant hero value (temperature/percent) instead of a centered icon+number of equal weight. Padding and type sizes scale as a clamped proportion of widget size instead of fixed pixel values. Text and static/whiteboard are left alone -- text already had zero chrome and its styling is user content, not this system's to redesign; framed_image's card was already minimal. Direction was picked from three divergent mockups reviewed with the maintainer, then verified against the real render pipeline (actual Chromium render, actual ordered dithering, actual theme system) rather than just eyeballed -- that caught a day-section/month-grid divider color (#e2e6ec) that's nowhere near this panel's 6-color palette and was dithering to invisible white; fixed with a real black hairline in the one place (month view) that still needed one.
72 lines
3.6 KiB
Django/Jinja
72 lines
3.6 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; }
|
|
.wrap {
|
|
width: {{ w - gutter * 2 }}px;
|
|
height: {{ h - gutter * 2 }}px;
|
|
margin: {{ gutter }}px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.accent-rule { flex: 0 0 auto; width: 100%; height: {{ accent_h }}px; border-radius: 100px; background: {{ accent_start }}; }
|
|
.weekday-row { display: flex; flex: 0 0 auto; margin-top: 6px; }
|
|
.weekday-cell { flex: 1 1 0; color: #17233b; font-weight: 700; font-size: {{ header_size }}px; text-align: center; padding: 4px 0; }
|
|
.weeks { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 2px; }
|
|
.week-row { flex: 1 1 0; display: flex; }
|
|
{#- A real palette color (pure black), not a pale gray -- this panel's
|
|
6-color palette has no gray to dither toward, so #e2e6ec-style
|
|
"hairlines" don't survive at all (confirmed by sampling actual
|
|
rendered pixels: every one came back pure white). Horizontal
|
|
rules only, between week rows -- enough for the grid to scan
|
|
top-to-bottom without boxing every single day cell, which read
|
|
more like the old structured-dashboard mockup than bold-minimal. #}
|
|
.week-row + .week-row { border-top: 1px solid #000000; }
|
|
.day-cell { flex: 1 1 0; 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="wrap">
|
|
<div class="accent-rule"></div>
|
|
<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>
|