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.
63 lines
2.6 KiB
Django/Jinja
63 lines
2.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; }
|
|
.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;
|
|
}
|
|
.header {
|
|
height: {{ header_h }}px;
|
|
flex: 0 0 auto;
|
|
background: linear-gradient(135deg, {{ accent_start }} 0%, {{ accent_end }} 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
}
|
|
.header .title { color: #ffffff; font-weight: 700; font-size: {{ title_size }}px; line-height: 1; }
|
|
.rows { flex: 1 1 auto; padding: 8px 14px; overflow: hidden; }
|
|
.row { display: flex; align-items: center; gap: 8px; height: {{ row_h }}px; }
|
|
.chip { display: flex; height: 12px; width: 10px; border-radius: 3px; overflow: hidden; flex: 0 0 auto; }
|
|
.chip span { flex: 1 1 0; }
|
|
.box {
|
|
width: {{ box_size }}px; height: {{ box_size }}px; border-radius: 3px; flex: 0 0 auto;
|
|
border: 2px solid #17233b;
|
|
}
|
|
.box.done { border-color: {{ accent_start }}; background: {{ accent_start }}; }
|
|
.due { font-size: {{ body_size }}px; color: #5b6674; flex: 0 0 auto; white-space: nowrap; }
|
|
.summary {
|
|
font-size: {{ body_size }}px; color: #17233b; line-height: 1.2;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
.empty { font-size: {{ body_size }}px; color: #5b6674; padding-top: 4px; }
|
|
.more { font-size: {{ body_size }}px; color: #5b6674; padding-top: 2px; }
|
|
</style></head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="header"><div class="title">{{ title }}</div></div>
|
|
<div class="rows">
|
|
{% if not rows %}
|
|
<div class="empty">Nothing outstanding</div>
|
|
{% endif %}
|
|
{% for row in rows %}
|
|
<div class="row">
|
|
<div class="chip">{% for c in row.colors %}<span style="background:{{ c }};"></span>{% endfor %}</div>
|
|
<div class="box {% if row.done %}done{% endif %}"></div>
|
|
{% if row.due %}<div class="due">{{ row.due }}</div>{% endif %}
|
|
<div class="summary">{{ row.summary }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% if more_count %}<div class="more">+{{ more_count }} more</div>{% endif %}
|
|
</div>
|
|
</div>
|
|
</body></html>
|