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:
parent
78182559ce
commit
92adb37725
|
|
@ -345,6 +345,20 @@ class BaseVideoPlayer {
|
||||||
progressFilled: !!this.controls.progressFilled,
|
progressFilled: !!this.controls.progressFilled,
|
||||||
hasStyle: this.controls.progressFilled ? 'width: ' + this.controls.progressFilled.style.width : 'N/A'
|
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);
|
this.lastLoggedTime = Math.floor(this.videoElement.currentTime);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1115,29 +1115,34 @@ body.cinema-mode {
|
||||||
|
|
||||||
.progress-container {
|
.progress-container {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
background: lime !important; /* BRIGHT GREEN - should be unmissable */
|
||||||
|
padding: 10px !important;
|
||||||
|
border: 5px solid red !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 12px;
|
height: 20px !important; /* Even bigger */
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: blue !important; /* BRIGHT BLUE background */
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
transition: height 0.2s ease;
|
transition: height 0.2s ease;
|
||||||
|
border: 2px solid orange !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar:hover {
|
.progress-bar:hover {
|
||||||
height: 16px;
|
height: 24px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-filled {
|
.progress-filled {
|
||||||
height: 100%;
|
height: 100% !important;
|
||||||
background: linear-gradient(90deg, #ff6b9d, #c471ed);
|
background: magenta !important; /* BRIGHT MAGENTA fill */
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
width: 0%;
|
width: 0%;
|
||||||
transition: width 0.1s ease;
|
transition: width 0.1s ease;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
border: 1px solid yellow !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-thumb {
|
.progress-thumb {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue