From 38163210d6369cf5070ad4e3f1521f725d08fd57 Mon Sep 17 00:00:00 2001 From: Nikolay Tatarinov Date: Fri, 6 Feb 2026 18:54:29 +0300 Subject: [PATCH] Enhance UI with new font integration, improved accessibility focus styles, and refined card shadows for light theme. Update main content area background and adjust layout spacing in index template. --- static/css/main.css | 25 ++++++++++- templates/base.html | 7 +-- templates/index.html | 105 +++++++++++++++++++++++-------------------- 3 files changed, 84 insertions(+), 53 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index 258779c..648b5d3 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,6 +1,10 @@ @import "tailwindcss"; @plugin "daisyui"; +@theme { + --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + @plugin "daisyui/theme" { name: "light"; default: true; @@ -71,9 +75,28 @@ --noise: 0; } -/* Dark theme: main content area uses base-200 so navbar and cards (base-100) stand out */ +/* Main content area: distinct background so cards (base-100) stand out */ +[data-theme=light] main { + background-color: var(--color-base-200); +} [data-theme=dark] main { background-color: var(--color-base-200); } +/* Accessibility: ensure focus ring is visible on key controls */ +.btn:focus-visible, +.select:focus-within, +label.swap:focus-within { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +/* Light theme: slightly stronger card shadow for depth */ +[data-theme=light] .card.shadow-sm { + box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06); +} +[data-theme=light] .card.shadow-sm:hover { + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06); +} + @source "../../templates"; \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index 26a7ccb..90164fe 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,6 +5,9 @@ {% block title %}SWatcher{% endblock %} + + + {% block imports %} {% endblock %} @@ -13,12 +16,10 @@ -
+
SWatcher
-
{{ region.name }} diff --git a/templates/index.html b/templates/index.html index adc1eb1..d3aec89 100644 --- a/templates/index.html +++ b/templates/index.html @@ -10,19 +10,19 @@ {% block content %} -
+
-
+
-
+
{% if skeleton %}

CPU Utilization

-
— / — CPU
+
— / — CPU
-
—%
+
—%
@@ -39,9 +39,9 @@

CPU Utilization

-
{{ pcpu.usage|floatformat:1 }} / {{ pcpu.total }} CPU
+
{{ pcpu.usage|floatformat:1 }} / {{ pcpu.total }} CPU
-
{{ pcpu.used_percentage|floatformat:1 }}%
+
{{ pcpu.used_percentage|floatformat:1 }}%
@@ -60,14 +60,14 @@
-
+
{% if skeleton %}

RAM Utilization

-
— / — GB
+
— / — GB
-
—%
+
—%
@@ -84,9 +84,9 @@

RAM Utilization

-
{{ pram.usage|convert_bytes }} / {{ pram.total|convert_bytes }} GB
+
{{ pram.usage|convert_bytes }} / {{ pram.total|convert_bytes }} GB
-
{{ pram.used_percentage|floatformat:1 }}%
+
{{ pram.used_percentage|floatformat:1 }}%
@@ -105,14 +105,14 @@
-
+
{% if skeleton %}

Instances

-
— active / — stopped
+
— active / — stopped
-
—
+
—
@@ -141,9 +141,9 @@

Instances

-
{{ vm.active }} active / {{ vm.stopped }} stopped
+
{{ vm.active }} active / {{ vm.stopped }} stopped
-
{{ vm.count }}
+
{{ vm.count }}
@@ -171,19 +171,19 @@ {% endif %}
-
+
-
+
-
-
-

+
+
+

Resource Allocation -

+

{% if skeleton %}
@@ -219,8 +219,8 @@ {{ vcpu.allocated_percentage|floatformat:1 }}%
- overcommit: {{ vcpu.overcommit_ratio|floatformat:1 }} / {{ vcpu.overcommit_max|floatformat:1 }} - {{ vcpu.allocated_percentage|floatformat:1 }}% allocated + overcommit: {{ vcpu.overcommit_ratio|floatformat:1 }} / {{ vcpu.overcommit_max|floatformat:1 }} + {{ vcpu.allocated_percentage|floatformat:1 }}% allocated
@@ -235,8 +235,8 @@ {{ vram.allocated_percentage|floatformat:1 }}%
- overcommit: {{ vram.overcommit_ratio|floatformat:1 }} / {{ vram.overcommit_max|floatformat:1 }} - {{ vram.allocated_percentage|floatformat:1 }}% allocated + overcommit: {{ vram.overcommit_ratio|floatformat:1 }} / {{ vram.overcommit_max|floatformat:1 }} + {{ vram.allocated_percentage|floatformat:1 }}% allocated
{% endif %} @@ -244,15 +244,15 @@
-
-
-

+
+
+

Top Flavors -

+

{% if skeleton %}
@@ -310,18 +310,19 @@ {% endif %}
-
+ +
-
+
-

Audit Analysis

-
Select an audit to analyze resource distribution
+

Audit Analysis

+
Select an audit to analyze resource distribution
- {% if skeleton %}Loading…{% else %}{{ audits|length }} available{% endif %} + {% if skeleton %}Loading…{% else %}{{ audits|length }} available{% endif %}
+
-
+
-
-

Current CPU Distribution

+
+

Current CPU Distribution

@@ -403,8 +408,8 @@
-
-

Projected CPU Distribution

+
+

Projected CPU Distribution

@@ -420,13 +425,14 @@
-
+
+
-
+
-

Migration Actions

+

Migration Actions

Select audit
@@ -442,7 +448,7 @@ - + No audit selected. Load an audit to view migration recommendations. @@ -451,6 +457,7 @@
+
{% endblock %} @@ -607,7 +614,7 @@ if (!data || !data.migrations || data.migrations.length === 0) { tbody.innerHTML = ` - + No migration actions recommended @@ -871,10 +878,10 @@ {% block css %}