Adding font size multiplier

Author: pacemaker82

README.md

@@ -68,6 +68,7 @@ This card is designed for the new [Home Assistant Sections UI](https://www.home-
 | Subtract devices from home | `subtract_devices_from_home` | If true, subtract summed devices from the home value. Default: `false`. |
 | Power Unit Override | `power_unit`| Set to W, kW or mW |
 | Curved Line Radius | `curve_factor`| Adjusts the curve radius. `0` to `5`, `1` is default. Set to `0` for straight lines. |
+| Font Size Multiplier | `font_size_multiplier`| Multiplies text sizes on top of the automatic `--cpc-scale`. Default `1.0`. |
 | Device Power Lines | `show_device_power_lines`| Set to `true` to light up devices when power is flowing beyond a threshold. Default `false` |
 | Home Icon Gradient | `disable_home_gradient`| Set to `true` if you want the home icon to be a single colour. |
 | Remove Glow Effects | `remove_glow_effects`| Set to `true` to disable drop shadow/glow effects. Default `false` (dark mode only). |

compact-power-card.js

@@ -52,6 +52,10 @@ class CompactPowerCard extends (window.LitElement ||
                 name: "curve_factor",
                 selector: { number: { min: 0, max: 5, step: 0.5, mode: "slider" } },
               }, 
+              {
+                name: "font_size_multiplier",
+                selector: { number: { min: 0.5, max: 2.0, step: 0.05, mode: "slider" } },
+              },
               {
                 name: "enable_device_power_lines",
                 selector: { boolean: { } },
@@ -546,6 +550,11 @@ class CompactPowerCard extends (window.LitElement ||
       );
     }
     this._config = config;
+    const fontScaleRaw = this._parseNumberStrict(this._config?.font_size_multiplier);
+    const fontScale = Number.isFinite(fontScaleRaw)
+      ? Math.min(2.0, Math.max(0.5, fontScaleRaw))
+      : 1;
+    this.style.setProperty("--cpc-text-scale", String(fontScale));
     this._trackedEntityIds = this._collectEntityIds();
     this._lastEntityStates.clear();
     this._lastThemeMode = null;
@@ -558,6 +567,7 @@ class CompactPowerCard extends (window.LitElement ||
     return css`
       :host {
         --cpc-scale: 1;
+        --cpc-text-scale: 1;
         display: block;
         height: 100%;
       }
@@ -688,7 +698,7 @@ class CompactPowerCard extends (window.LitElement ||
       }
 
       .pv-label {
-        font-size: calc(16px * var(--cpc-scale, 1));
+        font-size: calc(16px * var(--cpc-scale, 1) * var(--cpc-text-scale, 1));
       }
 
       .node-marker {
@@ -821,7 +831,7 @@ class CompactPowerCard extends (window.LitElement ||
       }
 
       .node-label {
-        font-size: calc(16px * var(--cpc-scale, 1));
+        font-size: calc(16px * var(--cpc-scale, 1) * var(--cpc-text-scale, 1));
         display: flex;
         align-items: center;
         gap: 2px;
@@ -896,7 +906,7 @@ class CompactPowerCard extends (window.LitElement ||
       }
 
       .home-label {
-        font-size: calc(16px * var(--cpc-scale, 0.8));
+        font-size: calc(16px * var(--cpc-scale, 0.8) * var(--cpc-text-scale, 1));
         font-weight: 700;
         margin-top: calc(-16px * var(--cpc-scale, 0.8));
       }
@@ -940,7 +950,7 @@ class CompactPowerCard extends (window.LitElement ||
         display: flex;
         align-items: center;
         gap: 1px;
-        font-size: calc(10px * var(--cpc-scale, 1));
+        font-size: calc(10px * var(--cpc-scale, 1) * var(--cpc-text-scale, 1));
       }
 
       .aux-marker {
@@ -958,11 +968,11 @@ class CompactPowerCard extends (window.LitElement ||
       }
 
       .aux-label {
-        font-size: calc(12px * var(--cpc-scale, 1));
+        font-size: calc(12px * var(--cpc-scale, 1) * var(--cpc-text-scale, 1));
       }
 
       .aux-sub-label {
-        font-size: calc(11px * var(--cpc-scale, 1));
+        font-size: calc(11px * var(--cpc-scale, 1) * var(--cpc-text-scale, 1));
         font-weight: 500;
         opacity: 0.85;
         line-height: 1;
@@ -978,7 +988,7 @@ class CompactPowerCard extends (window.LitElement ||
       }
 
       .device-name {
-        font-size: calc(11px * var(--cpc-scale, 1));
+        font-size: calc(11px * var(--cpc-scale, 1) * var(--cpc-text-scale, 1));
         opacity: 0.85;
         font-weight: 500;
         display: inline-block;