j3d1/webvirtcloud
1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-10 04:06:47 +00:00
Code Issues Projects Releases Wiki Activity

fix(templates): status colours keep their contrast on every theme

Browse source 
The pool, network and interface cards had a solid green or red header
with light text, and status words (Connected, ON, OFF, the DRBD state)
were in the theme's green or red text colour. axe found them below the
WCAG AA 4.5:1 contrast on the live theme (4.29:1, 3.52:1), on the
default zephyr theme, whose green is light (2.5:1), and on dark themes
(darkly 1.18:1).

The card headers, and the status words as badges, are now the theme's
pale status background with its dark status text (bg-*-subtle with
text-*-emphasis). Bootstrap derives the pair from each theme's palette,
and it does not depend on the page's background: the dark Bootswatch
themes keep light-mode emphasis colours, which on their own would be
dark text on a dark page. The card border keeps the status colour.
This commit is contained in:
catborise 2026-10-21 07:58:08 +03:00
parent 084f2e8b60
commit b45f673da7
7 changed files with 62 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
interfaces/templates/interfaces.html
View file

@ -54,9 +54,9 @@
{% for iface in ifaces_all %}
<div class="col-12 col-sm-4">
<div class="mb-3 card {% if iface.state == 1 %}border-success{% else %}border-danger{% endif %} shadow-sm">
<div class="card-header {% if iface.state == 1 %}bg-success{% else %}bg-danger{% endif %}">
<div class="card-header {% if iface.state == 1 %}bg-success-subtle{% else %}bg-danger-subtle{% endif %}">
<h6 class="my-0 card-title">
<a class="card-link text-light" href="{% url 'interface' compute.id iface.name %}">{{ iface.name }}</a>
<a class="card-link {% if iface.state == 1 %}text-success-emphasis{% else %}text-danger-emphasis{% endif %}" href="{% url 'interface' compute.id iface.name %}">{{ iface.name }}</a>
</h6>
</div>
<div class="ps-0 pe-0 card-body">