jafreli/HabitTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auf Transparenz effect gewechselt

Browse Source
This commit is contained in:
jafreli
2025-07-19 00:07:04 +02:00
parent ff4c0825e8
commit 84c026ca9b
2 changed files with 42 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
static/css/style.css
View File

@@ -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 */

14
static/js/script.js
View File

@@ -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 {