From dbf4a580a86187b92f5f78b097ca5f88b1d9b591 Mon Sep 17 00:00:00 2001
From: AnasHost <41167157+Anashost@users.noreply.github.com>
Date: Tue, 2 Jun 2026 16:57:56 +0200
Subject: [PATCH] Update battery styles for light theme

Refactor styles for light theme and remove dark theme media queries.
---
 battery.md | 69 ++++++++++--------------------------------------------
 1 file changed, 13 insertions(+), 56 deletions(-)

diff --git a/battery.md b/battery.md
index e874eec..a3bd09a 100644
--- a/battery.md
+++ b/battery.md
@@ -169,23 +169,22 @@ card_mod:
         position: static !important;
       }
 
+      /* Light Theme (Default) */
       mushroom-state-item::after {
         content: '{{ level | round(0) }}%';
         position: absolute !important;
         top: 12px !important; 
         right: 12px !important;
         font-size: 1rem; font-weight: 700;
-        
-        background: rgba({{ color }}, 0.85);
-        border: 1px solid rgb({{ color }});
-        color: #ffffff;
         text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
         box-shadow: 0 2px 6px rgba(0,0,0,0.15);
         backdrop-filter: blur(4px);
-        
         padding: 2px 6px; border-radius: 4px;
         z-index: 4;
         pointer-events: none;
+        background: rgba(0, 0, 0, 0.5) !important;
+        border: 1px solid rgba(255, 255, 255, 0.1) !important;
+        color: rgb({{ color }}) !important;
       }
 
       mushroom-shape-icon {
@@ -199,14 +198,6 @@ card_mod:
         z-index: 3;
       }
 
-      @media (prefers-color-scheme: dark) {
-        mushroom-state-item::after {
-          background: rgb({{ color }}, 0.7) !important;
-          border: 1px solid rgba(255, 255, 255, 0.1) !important;
-          text-shadow: none !important;
-          box-shadow: none !important;
-        }
-      }
     mushroom-shape-icon$: |
       .shape {
         --liquid-level: var(--custom-level);
@@ -251,16 +242,6 @@ card_mod:
         color: white !important;
       }
 
-      @media (prefers-color-scheme: dark) {
-        .shape {
-          background: rgba(255, 255, 255, 0.05) !important;
-          border: 1px solid rgba(255, 255, 255, 0.1) !important;
-        }
-        ha-icon {
-          mix-blend-mode: overlay !important;
-        }
-      }
-
       @keyframes liquid-wave {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
@@ -294,11 +275,11 @@ card_mod:
         /* ====== USER SETTINGS ===== */
         {% set charging_entity = 'binary_sensor.anasbox_is_charging' %}
 
-        /* ========================== */
-
+        /* ======= FONT SETTINGS ======= */
         --card-primary-font-size: 15px !important;
         --card-secondary-font-size: 12px !important;
         --card-primary-font-weight: bold !important;
+        /* ========================== */
 
         {% set level_txt = states(config.entity) | lower %}
         {% set is_charging = is_state(charging_entity, 'on') %}
@@ -357,17 +338,15 @@ card_mod:
         top: 12px !important; 
         right: 12px !important;
         font-size: 1rem; font-weight: 700;
-        
-        background: rgba({{ color }}, 0.85);
-        border: 1px solid rgb({{ color }});
-        color: #ffffff;
         text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
         box-shadow: 0 2px 6px rgba(0,0,0,0.15);
         backdrop-filter: blur(4px);
-        
         padding: 2px 6px; border-radius: 4px;
         z-index: 4;
         pointer-events: none;
+        background: rgba(0, 0, 0, 0.5) !important;
+        border: 1px solid rgba(255, 255, 255, 0.1) !important;
+        color: rgb({{ color }}) !important;
       }
 
       mushroom-shape-icon {
@@ -376,20 +355,11 @@ card_mod:
         padding-right: 15px;
         padding-bottom: 5px;
       }
-      
+
       mushroom-state-info {
         position: relative;
         z-index: 3;
       }
-
-      @media (prefers-color-scheme: dark) {
-        mushroom-state-item::after {
-          background: rgb({{ color }}, 0.7) !important;
-          border: 1px solid rgba(255, 255, 255, 0.1) !important;
-          text-shadow: none !important;
-          box-shadow: none !important;
-        }
-      }
     mushroom-shape-icon$: |
       .shape {
         --liquid-level: var(--custom-level);
@@ -434,17 +404,6 @@ card_mod:
         z-index: 2;
         color: white !important;
       }
-
-      @media (prefers-color-scheme: dark) {
-        .shape {
-          background: rgba(255, 255, 255, 0.05) !important;
-          border: 1px solid rgba(255, 255, 255, 0.1) !important;
-        }
-        ha-icon {
-          mix-blend-mode: overlay !important;
-        }
-      }
-
       @keyframes liquid-wave {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
@@ -454,6 +413,7 @@ card_mod:
         50% { opacity: 1; }
         100% { transform: translateY(-20px); opacity: 0; }
       }
+
 ````
 </details>
 
@@ -473,14 +433,13 @@ card_mod:
   style: |
     ha-card {
       /* ====== USER SETTINGS ===== */
-      {% set charging = 
-      is_state('binary_sensor.anasbox_is_charging', 'on') %}
-      /* ========================= */
+      {% set charging = is_state('binary_sensor.anasbox_is_charging', 'on') %}
       
       /* ======= FONT SETTINGS ======= */
       --card-primary-font-size: 15px !important;
       --card-secondary-font-size: 12px !important;
       --card-primary-font-weight: bold !important;
+      /* ========================= */
 
       {% set level = states(config.entity) | float(0) %}
       
@@ -593,7 +552,6 @@ card_mod:
       --card-primary-font-size: 15px !important;
       --card-secondary-font-size: 12px !important;
       --card-primary-font-weight: bold !important;
-    
       /* ========================= */
     
       {% set level_txt = states(config.entity) | lower %}
@@ -833,7 +791,6 @@ card_mod:
       --card-primary-font-size: 15px !important;
       --card-secondary-font-size: 12px !important;
       --card-primary-font-weight: bold !important;
-
       /* ========================= */
 
       {% set level_txt = states(config.entity) | lower %}