diff --git a/src/systems/rendering/infoBox.js b/src/systems/rendering/infoBox.js index 1c95d6a..48a633e 100644 --- a/src/systems/rendering/infoBox.js +++ b/src/systems/rendering/infoBox.js @@ -436,14 +436,12 @@ export function renderInfoBox() { // Time widget - show if enabled if (config?.widgets?.time?.enabled) { - // Determine which time value to display and edit - const hasTimeEnd = Boolean(data.timeEnd); - const hasTimeStart = Boolean(data.timeStart); - const timeDisplay = data.timeEnd || data.timeStart || '12:00'; - const timeField = hasTimeEnd ? 'timeEnd' : 'timeStart'; + // Get both start and end times + const timeStartDisplay = data.timeStart || '12:00'; + const timeEndDisplay = data.timeEnd || data.timeStart || '12:00'; - // Parse time for clock hands - const timeMatch = timeDisplay.match(/(\d+):(\d+)/); + // Parse end time for clock hands (use end time for visual display) + const timeMatch = timeEndDisplay.match(/(\d+):(\d+)/); let hourAngle = 0; let minuteAngle = 0; if (timeMatch) { @@ -465,7 +463,11 @@ export function renderInfoBox() {
-
${timeDisplay}
+
+
${timeStartDisplay}
+ +
${timeEndDisplay}
+
`); } diff --git a/style.css b/style.css index 44fbc86..0d0b9c3 100644 --- a/style.css +++ b/style.css @@ -1582,6 +1582,25 @@ body:has(.rpg-panel.rpg-position-left) #sheld { margin-top: 0.25em; } +.rpg-time-range { + display: flex; + align-items: center; + justify-content: center; + gap: 0.25em; + margin-top: 0.25em; +} + +.rpg-time-range .rpg-time-value { + margin-top: 0; + min-width: 2.5em; +} + +.rpg-time-separator { + font-size: clamp(0.5rem, 0.5vw, 0.625rem); + color: var(--rpg-text-muted, var(--rpg-text)); + opacity: 0.7; +} + /* Location Widget - Map */ .rpg-map-bg { width: 100%; @@ -5721,6 +5740,14 @@ body:has(.rpg-panel.rpg-mobile-open) .rpg-fab-widget-container { font-size: min(2.5vw, 0.8125rem) !important; } + .rpg-time-range { + gap: 0.15em; + } + + .rpg-time-separator { + font-size: min(2vw, 0.625rem) !important; + } + .rpg-location-text { font-size: min(2.8vw, 0.875rem) !important; }