Progress bar found but too small - User identified thin line at bottom of green container - Should be 80% filled at 12s/15s but barely visible - Need to investigate element height/sizing

This commit is contained in:
dilgenfritz 2025-10-31 20:47:29 -05:00
parent 78182559ce
commit 92adb37725
2 changed files with 24 additions and 5 deletions

View File

@ -345,6 +345,20 @@ class BaseVideoPlayer {
progressFilled: !!this.controls.progressFilled,
hasStyle: this.controls.progressFilled ? 'width: ' + this.controls.progressFilled.style.width : 'N/A'
});
// DEBUG: Check actual rendered styles
if (this.controls.progressFilled) {
const computed = window.getComputedStyle(this.controls.progressFilled);
console.log('🎬 Computed styles:', {
width: computed.width,
height: computed.height,
background: computed.background,
display: computed.display,
visibility: computed.visibility,
opacity: computed.opacity
});
}
this.lastLoggedTime = Math.floor(this.videoElement.currentTime);
}

View File

@ -1115,29 +1115,34 @@ body.cinema-mode {
.progress-container {
margin-bottom: 15px;
background: lime !important; /* BRIGHT GREEN - should be unmissable */
padding: 10px !important;
border: 5px solid red !important;
}
.progress-bar {
position: relative;
height: 12px;
background: rgba(255, 255, 255, 0.3);
height: 20px !important; /* Even bigger */
background: blue !important; /* BRIGHT BLUE background */
border-radius: 6px;
cursor: pointer;
margin-bottom: 8px;
transition: height 0.2s ease;
border: 2px solid orange !important;
}
.progress-bar:hover {
height: 16px;
height: 24px !important;
}
.progress-filled {
height: 100%;
background: linear-gradient(90deg, #ff6b9d, #c471ed);
height: 100% !important;
background: magenta !important; /* BRIGHT MAGENTA fill */
border-radius: 6px;
width: 0%;
transition: width 0.1s ease;
position: relative;
border: 1px solid yellow !important;
}
.progress-thumb {