feat: Add interactive hover effects to the session tracker UI and update module version.

This commit is contained in:
CPTN Cosmo 2025-12-21 20:07:14 +01:00
parent 05184e929f
commit abb8780f41
2 changed files with 26 additions and 12 deletions

View file

@ -2,7 +2,7 @@
"id": "fvtt-session-tracker", "id": "fvtt-session-tracker",
"title": "Session Tracker", "title": "Session Tracker",
"description": "A lightweight session tracker for Foundry VTT V13.", "description": "A lightweight session tracker for Foundry VTT V13.",
"version": "1.0.0", "version": "1.0.1",
"authors": [ "authors": [
{ {
"name": "CPTN Cosmo", "name": "CPTN Cosmo",
@ -23,6 +23,6 @@
], ],
"url": "https://github.com/cptn-cosmo/fvtt-session-tracker", "url": "https://github.com/cptn-cosmo/fvtt-session-tracker",
"manifest": "https://github.com/cptn-cosmo/fvtt-session-tracker/releases/latest/download/module.json", "manifest": "https://github.com/cptn-cosmo/fvtt-session-tracker/releases/latest/download/module.json",
"download": "https://github.com/cptn-cosmo/fvtt-session-tracker/releases/download/1.0.0/fvtt-session-tracker.zip", "download": "https://github.com/cptn-cosmo/fvtt-session-tracker/releases/download/1.0.1/fvtt-session-tracker.zip",
"license": "MIT" "license": "MIT"
} }

View file

@ -10,40 +10,54 @@
} }
.session-tracker-content { .session-tracker-content {
background: rgba(0, 0, 0, 0.45); background: rgba(0, 0, 0, 0);
backdrop-filter: blur(12px); backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(0px);
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0);
border-radius: 12px; border-radius: 12px;
padding: 10px 16px; padding: 10px 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0);
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease; transition: all 0.3s ease;
transform: scale(var(--scale, 1)); transform: scale(var(--scale, 1));
transform-origin: center center; transform-origin: center center;
} }
.session-tracker-content:hover { .session-tracker-content:hover {
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.45);
background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
} }
.session-label { .session-label {
text-transform: uppercase; text-transform: uppercase;
font-size: 10px; font-size: 10px;
letter-spacing: 2px; letter-spacing: 2px;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.3);
font-weight: 700; font-weight: 700;
transition: color 0.3s ease;
}
.session-tracker-content:hover .session-label {
color: rgba(255, 255, 255, 0.6);
} }
.session-number { .session-number {
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
margin-top: -4px;
transition: all 0.3s ease;
}
.session-tracker-content:hover .session-number {
color: #fff; color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
margin-top: -4px;
} }
.session-controls { .session-controls {