From 84c026ca9b36e7475bd78903da16e87477464fb0 Mon Sep 17 00:00:00 2001
From: jafreli <jakdreh@gmail.com>
Date: Sat, 19 Jul 2025 00:07:04 +0200
Subject: [PATCH] Auf Transparenz effect gewechselt

---
 static/css/style.css | 37 +++++++++++++++++++++++++++++++++++--
 static/js/script.js  | 14 +++++++-------
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 2206713..9c5dca1 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -138,7 +138,20 @@ h1 {
 }
 
 .date-square.partial {
-    background: linear-gradient(to right, var(--habit-color, #4CAF50) var(--completion-percentage, 50%), #555 var(--completion-percentage, 50%));
+    background-color: #555;
+    position: relative;
+}
+
+.date-square.partial::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--habit-color, #4CAF50);
+    opacity: var(--completion-opacity, 0.5);
+    border-radius: inherit;
 }
 
 /* Modal Styles */
@@ -263,10 +276,30 @@ h1 {
 }
 
 .date-cell.partial {
-    background: linear-gradient(to right, var(--current-habit-color, #4CAF50) var(--completion-percentage, 50%), #444 var(--completion-percentage, 50%));
+    background-color: #444;
+    position: relative;
     color: #e0e0e0;
 }
 
+.date-cell.partial::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--current-habit-color, #4CAF50);
+    opacity: var(--completion-opacity, 0.5);
+    border-radius: inherit;
+    z-index: 1;
+}
+
+.date-cell.partial .date-day,
+.date-cell.partial .date-counter {
+    position: relative;
+    z-index: 2;
+}
+
 .date-cell.today {
     border: 2px solid #007bff;
     /* Highlight today */
diff --git a/static/js/script.js b/static/js/script.js
index eb2fb5d..e7a6fe7 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -585,10 +585,10 @@ function applyCompletionStyling(element, currentCount, targetCount, color) {
         // Fully completed - solid color
         element.classList.add('completed');
     } else {
-        // Partially completed - gradient
+        // Partially completed - transparency overlay
         element.classList.add('partial');
-        const percentage = Math.round((currentCount / targetCount) * 100);
-        element.style.setProperty('--completion-percentage', `${percentage}%`);
+        const opacity = currentCount / targetCount; // 0.0 to 1.0
+        element.style.setProperty('--completion-opacity', opacity);
         element.style.setProperty('--habit-color', color);
     }
 }
@@ -607,14 +607,14 @@ function applyModalCompletionStyling(element, currentCount, targetCount, color)
         const contrastColor = getContrastColor(color);
         element.style.setProperty('color', contrastColor);
     } else {
-        // Partially completed - gradient with smart text color
+        // Partially completed - transparency overlay with smart text color
         element.classList.add('partial');
-        const percentage = Math.round((currentCount / targetCount) * 100);
-        element.style.setProperty('--completion-percentage', `${percentage}%`);
+        const opacity = currentCount / targetCount; // 0.0 to 1.0
+        element.style.setProperty('--completion-opacity', opacity);
         element.style.setProperty('--current-habit-color', color);
 
         // For partial completion, use contrast color if more than 50% completed
-        if (percentage > 50) {
+        if (opacity > 0.5) {
             const contrastColor = getContrastColor(color);
             element.style.setProperty('color', contrastColor);
         } else {