From: Jérôme Benoit Date: Sat, 21 Mar 2026 15:46:55 +0000 (+0100) Subject: refactor(webui): css quality overhaul with scoped styles, class selectors, design... X-Git-Tag: v3.2~20 X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=45c47c1cf861c7d2d0a82d23e5c5186ba348cb68;p=e-mobility-charging-stations-simulator.git refactor(webui): css quality overhaul with scoped styles, class selectors, design tokens - add scoped to all 12 Vue component style blocks - move body/app global styles to index.html - replace all 33 ID CSS selectors with class selectors - add :deep() for parent-child table style propagation - add spacing scale and typography tokens to all themes - replace magic number percentages with spacing variables - add :focus-visible styles for buttons and select - replace hardcoded form widths with max-width constraints - use gap for flex toolbar spacing - remove dead CSS --- diff --git a/ui/web/index.html b/ui/web/index.html index 877bf445..034b547a 100644 --- a/ui/web/index.html +++ b/ui/web/index.html @@ -5,6 +5,24 @@ Simulator Web UI + diff --git a/ui/web/src/App.vue b/ui/web/src/App.vue index 8bf915f2..7883d52b 100644 --- a/ui/web/src/App.vue +++ b/ui/web/src/App.vue @@ -3,6 +3,7 @@ @@ -12,37 +13,19 @@ import Container from '@/components/Container.vue' - diff --git a/ui/web/src/assets/themes/catppuccin-latte.css b/ui/web/src/assets/themes/catppuccin-latte.css index c8da8ff7..44b06b80 100644 --- a/ui/web/src/assets/themes/catppuccin-latte.css +++ b/ui/web/src/assets/themes/catppuccin-latte.css @@ -32,6 +32,17 @@ --color-border-row: var(--ctp-surface0); --color-accent: var(--ctp-lavender); --color-shadow-inset: rgba(0, 0, 0, 0.1); + + /* Spacing */ + --spacing-xs: 0.125rem; + --spacing-sm: 0.25rem; + --spacing-md: 0.5rem; + --spacing-lg: 1rem; + --spacing-xl: 1.5rem; + + /* Typography */ + --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif; + --font-size-sm: 0.875rem; } body { diff --git a/ui/web/src/assets/themes/sap-horizon.css b/ui/web/src/assets/themes/sap-horizon.css index fd0c824d..4365d68a 100644 --- a/ui/web/src/assets/themes/sap-horizon.css +++ b/ui/web/src/assets/themes/sap-horizon.css @@ -37,6 +37,17 @@ --color-border-row: var(--sap-border); --color-accent: var(--sap-brand); --color-shadow-inset: rgba(34, 53, 72, 0.15); + + /* Spacing */ + --spacing-xs: 0.125rem; + --spacing-sm: 0.25rem; + --spacing-md: 0.5rem; + --spacing-lg: 1rem; + --spacing-xl: 1.5rem; + + /* Typography */ + --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif; + --font-size-sm: 0.875rem; } body { diff --git a/ui/web/src/assets/themes/tokyo-night-storm.css b/ui/web/src/assets/themes/tokyo-night-storm.css index 6095f9e3..0b223b54 100644 --- a/ui/web/src/assets/themes/tokyo-night-storm.css +++ b/ui/web/src/assets/themes/tokyo-night-storm.css @@ -33,6 +33,17 @@ --color-border-row: var(--tn-bg-hover); --color-accent: var(--tn-accent); --color-shadow-inset: rgba(0, 0, 0, 0.4); + + /* Spacing */ + --spacing-xs: 0.125rem; + --spacing-sm: 0.25rem; + --spacing-md: 0.5rem; + --spacing-lg: 1rem; + --spacing-xl: 1.5rem; + + /* Typography */ + --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif; + --font-size-sm: 0.875rem; } body { diff --git a/ui/web/src/components/Container.vue b/ui/web/src/components/Container.vue index 0bc72b01..bd6ebf46 100644 --- a/ui/web/src/components/Container.vue +++ b/ui/web/src/components/Container.vue @@ -4,7 +4,7 @@ - diff --git a/ui/web/src/components/actions/StartTransaction.vue b/ui/web/src/components/actions/StartTransaction.vue index c16401d2..ac7f9230 100644 --- a/ui/web/src/components/actions/StartTransaction.vue +++ b/ui/web/src/components/actions/StartTransaction.vue @@ -1,5 +1,5 @@ - diff --git a/ui/web/src/components/buttons/ReloadButton.vue b/ui/web/src/components/buttons/ReloadButton.vue index 385e1454..7126ffbf 100644 --- a/ui/web/src/components/buttons/ReloadButton.vue +++ b/ui/web/src/components/buttons/ReloadButton.vue @@ -12,8 +12,8 @@ defineProps<{ }>() - diff --git a/ui/web/src/components/buttons/ToggleButton.vue b/ui/web/src/components/buttons/ToggleButton.vue index 7fe7d641..694d7502 100644 --- a/ui/web/src/components/buttons/ToggleButton.vue +++ b/ui/web/src/components/buttons/ToggleButton.vue @@ -49,7 +49,7 @@ const click = (): void => { } - diff --git a/ui/web/src/views/NotFoundView.vue b/ui/web/src/views/NotFoundView.vue index 7f800e80..8880d06a 100644 --- a/ui/web/src/views/NotFoundView.vue +++ b/ui/web/src/views/NotFoundView.vue @@ -1,5 +1,5 @@ @@ -8,8 +8,8 @@ import Container from '@/components/Container.vue' -