cosmo/dh-improved-countdowns
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions

feat: Introduce customizable visual progress indicators for countdowns, update module metadata, and enhance control button tooltips.

Browse source
This commit is contained in:
CPTN Cosmo 2025-12-22 00:01:05 +01:00
parent 988f2c3011
commit 02a3855ea1
5 changed files with 216 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

66
styles/countdown.css
View file

@ -141,10 +141,18 @@
position: relative;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
transition: border-radius 0.3s ease;
}
.icon-container.shape-circle {
border-radius: 50%;
}
.icon-container.shape-rounded {
border-radius: 8px;
}
.countdown-icon {
@ -156,14 +164,64 @@
.value-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.value-overlay.number {
font-size: 22px;
font-weight: 800;
color: #fff;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.9);
}
.value-overlay.visual {
background: rgba(0, 0, 0, 0.2);
}
/* Clock Visual */
.clock-visual {
width: 100%;
height: 100%;
border-radius: 50%;
/* Opacity and Color handled inline via template */
}
/* Bar Visual */
.bar-visual {
position: absolute;
bottom: 0;
left: 0;
/* Box shadow removed as it might interfere with custom colors/transparency */
transition: all 0.3s ease;
/* Color handled inline via template */
}
/* SVG Border Visual */
.progress-border-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* Rotation handled inline to start at top */
}
.bar-visual.vertical {
width: 100%;
/* height is set inline */
}
.bar-visual.horizontal {
height: 100%;
/* width is set inline */
}
/* +/- Controls */