Refactor video player CSS for improved subtitles and layout
Major CSS refactor for video player components: improves subtitle styling and cross-browser positioning, restructures ControlsLayer and VideoElement styles for clarity and responsiveness, and updates custom properties for better subtitle/controls separation. Adds a local settings file for permissions.
This commit is contained in:
hibna
+316
-66
@@ -1,18 +1,33 @@
|
||||
/* ============================================
|
||||
VIDEO CONTAINER
|
||||
============================================ */
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: var(--player-z-video);
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
VIDEO ELEMENT
|
||||
============================================ */
|
||||
|
||||
.video-element {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Hide native controls */
|
||||
/* ============================================
|
||||
HIDE NATIVE MEDIA CONTROLS
|
||||
============================================ */
|
||||
|
||||
/* Chrome/Safari/Edge */
|
||||
.video-element::-webkit-media-controls {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -25,93 +40,328 @@
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Subtitle Styling */
|
||||
/* Firefox */
|
||||
.video-element::-moz-media-controls {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SUBTITLE STYLING - Modern & Cross-Browser
|
||||
Optimized for Chromium and Firefox
|
||||
============================================ */
|
||||
|
||||
/* ==================== BASE CUE STYLES ==================== */
|
||||
|
||||
/* All browsers - Base subtitle appearance */
|
||||
::cue {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
|
||||
font-size: 1.5rem !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.5 !important;
|
||||
color: #ffffff !important;
|
||||
background-color: rgba(0, 0, 0, 0.9) !important;
|
||||
padding: 0.4em 0.8em !important;
|
||||
border-radius: 6px !important;
|
||||
text-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 1),
|
||||
0 2px 8px rgba(0, 0, 0, 0.8) !important;
|
||||
white-space: pre-line !important;
|
||||
}
|
||||
|
||||
/* Chromium specific */
|
||||
.video-element::cue {
|
||||
font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
font-size: clamp(1.05rem, 2vw, 1.9rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.45;
|
||||
letter-spacing: 0.015em;
|
||||
text-align: center;
|
||||
color: var(--player-subtitle-color);
|
||||
background-color: var(--player-subtitle-bg);
|
||||
padding: 0.45em 0.9em;
|
||||
border-radius: 14px;
|
||||
box-shadow: var(--player-subtitle-shadow), 0 0 0 1px rgba(255, 255, 255, 0.08);
|
||||
text-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
|
||||
white-space: pre-line;
|
||||
word-break: break-word;
|
||||
text-wrap: balance;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
|
||||
font-size: 1.5rem !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.5 !important;
|
||||
color: #ffffff !important;
|
||||
background-color: rgba(0, 0, 0, 0.9) !important;
|
||||
padding: 0.4em 0.8em !important;
|
||||
border-radius: 6px !important;
|
||||
text-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 1),
|
||||
0 2px 8px rgba(0, 0, 0, 0.8) !important;
|
||||
white-space: pre-line !important;
|
||||
}
|
||||
|
||||
/* Fullscreen subtitle adjustments */
|
||||
:fullscreen .video-element::cue,
|
||||
.video-element:fullscreen::cue {
|
||||
font-size: clamp(1.35rem, 2.4vw, 2.35rem);
|
||||
padding: 0.55em 1.1em;
|
||||
/* Firefox specific - Base styles */
|
||||
::-moz-cue {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
|
||||
font-size: 1.5rem !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.5 !important;
|
||||
color: #ffffff !important;
|
||||
background-color: rgba(0, 0, 0, 0.9) !important;
|
||||
padding: 0.4em 0.8em !important;
|
||||
border-radius: 6px !important;
|
||||
text-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 1),
|
||||
0 2px 8px rgba(0, 0, 0, 0.8) !important;
|
||||
white-space: pre-line !important;
|
||||
}
|
||||
|
||||
/* Ensure text tracks are properly positioned - above controls */
|
||||
.video-element::-webkit-media-text-track-container {
|
||||
overflow: visible !important;
|
||||
position: absolute !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
z-index: var(--player-z-subtitle) !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-end !important;
|
||||
align-items: center !important;
|
||||
padding-bottom: var(--player-subtitle-bottom-offset) !important;
|
||||
padding-bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom)) !important;
|
||||
pointer-events: none !important;
|
||||
gap: 12px !important;
|
||||
video::-moz-cue {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
|
||||
font-size: 1.5rem !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.5 !important;
|
||||
color: #ffffff !important;
|
||||
background-color: rgba(0, 0, 0, 0.9) !important;
|
||||
padding: 0.4em 0.8em !important;
|
||||
border-radius: 6px !important;
|
||||
text-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 1),
|
||||
0 2px 8px rgba(0, 0, 0, 0.8) !important;
|
||||
white-space: pre-line !important;
|
||||
}
|
||||
|
||||
.video-element::-webkit-media-text-track-display {
|
||||
overflow: visible !important;
|
||||
width: 100% !important;
|
||||
max-width: var(--player-subtitle-max-width, 88%) !important;
|
||||
text-align: center !important;
|
||||
.video-element::-moz-cue {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
|
||||
font-size: 1.5rem !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.5 !important;
|
||||
color: #ffffff !important;
|
||||
background-color: rgba(0, 0, 0, 0.9) !important;
|
||||
padding: 0.4em 0.8em !important;
|
||||
border-radius: 6px !important;
|
||||
text-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 1),
|
||||
0 2px 8px rgba(0, 0, 0, 0.8) !important;
|
||||
white-space: pre-line !important;
|
||||
}
|
||||
|
||||
/* Multi-line subtitle support */
|
||||
.video-element::cue-region {
|
||||
width: min(var(--player-subtitle-max-width, 88%), 60ch);
|
||||
margin: 0 auto;
|
||||
/* ==================== TEXT FORMATTING ==================== */
|
||||
|
||||
::cue(b), ::cue(strong) {
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
|
||||
/* Better contrast for different cue types */
|
||||
.video-element::cue(b) {
|
||||
font-weight: 900;
|
||||
::cue(i), ::cue(em) {
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
.video-element::cue(i) {
|
||||
font-style: italic;
|
||||
::cue(u) {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.video-element::cue(b),
|
||||
.video-element::cue(strong) {
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
|
||||
.video-element::cue(i),
|
||||
.video-element::cue(em) {
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
.video-element::cue(u) {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 640px) {
|
||||
/* Firefox text formatting */
|
||||
::-moz-cue(b), ::-moz-cue(strong) {
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
|
||||
::-moz-cue(i), ::-moz-cue(em) {
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
::-moz-cue(u) {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
/* ==================== CHROMIUM POSITIONING ==================== */
|
||||
|
||||
/* Container - Chromium */
|
||||
.video-element::-webkit-media-text-track-container {
|
||||
position: absolute !important;
|
||||
bottom: 40px !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
||||
overflow: visible !important;
|
||||
z-index: 10 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* Display wrapper - Chromium */
|
||||
.video-element::-webkit-media-text-track-display {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
|
||||
margin: 0 !important;
|
||||
padding: 0 20px !important;
|
||||
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/* ==================== FIREFOX POSITIONING ==================== */
|
||||
|
||||
/* Firefox - Position subtitles using video wrapper approach */
|
||||
@-moz-document url-prefix() {
|
||||
.video-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-element {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Firefox subtitle container positioning */
|
||||
.video-element::cue {
|
||||
font-size: clamp(1rem, 3.4vw, 1.35rem);
|
||||
padding: 0.35em 0.75em;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
/* Firefox - Use text track display positioning */
|
||||
video::-moz-text-track-display {
|
||||
position: absolute !important;
|
||||
bottom: 40px !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100% !important;
|
||||
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
|
||||
padding: 0 20px !important;
|
||||
margin: 0 !important;
|
||||
|
||||
text-align: center !important;
|
||||
z-index: 10 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.video-element::-moz-text-track-display {
|
||||
position: absolute !important;
|
||||
bottom: 40px !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100% !important;
|
||||
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
|
||||
padding: 0 20px !important;
|
||||
margin: 0 !important;
|
||||
|
||||
text-align: center !important;
|
||||
z-index: 10 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* ==================== FULLSCREEN ==================== */
|
||||
|
||||
.video-element:fullscreen::cue,
|
||||
:fullscreen .video-element::cue {
|
||||
font-size: 2rem !important;
|
||||
padding: 0.5em 1em !important;
|
||||
}
|
||||
|
||||
::-moz-cue:fullscreen,
|
||||
video:fullscreen::-moz-cue,
|
||||
.video-element:fullscreen::-moz-cue,
|
||||
:fullscreen ::-moz-cue,
|
||||
:fullscreen video::-moz-cue,
|
||||
:fullscreen .video-element::-moz-cue {
|
||||
font-size: 2rem !important;
|
||||
padding: 0.5em 1em !important;
|
||||
}
|
||||
|
||||
.video-element:fullscreen::-webkit-media-text-track-container,
|
||||
:fullscreen .video-element::-webkit-media-text-track-container {
|
||||
bottom: 120px !important;
|
||||
}
|
||||
|
||||
video:fullscreen::-moz-text-track-display,
|
||||
.video-element:fullscreen::-moz-text-track-display,
|
||||
:fullscreen video::-moz-text-track-display,
|
||||
:fullscreen .video-element::-moz-text-track-display {
|
||||
bottom: 120px !important;
|
||||
}
|
||||
|
||||
/* ==================== RESPONSIVE ==================== */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
::cue,
|
||||
.video-element::cue,
|
||||
::-moz-cue,
|
||||
video::-moz-cue,
|
||||
.video-element::-moz-cue {
|
||||
font-size: 1.35rem !important;
|
||||
}
|
||||
|
||||
.video-element::-webkit-media-text-track-container {
|
||||
padding-bottom: 72px !important;
|
||||
padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
|
||||
bottom: 80px !important;
|
||||
}
|
||||
|
||||
:fullscreen .video-element::cue,
|
||||
.video-element:fullscreen::cue {
|
||||
font-size: clamp(1.2rem, 3.6vw, 1.8rem);
|
||||
video::-moz-text-track-display,
|
||||
.video-element::-moz-text-track-display {
|
||||
bottom: 80px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
::cue,
|
||||
.video-element::cue,
|
||||
::-moz-cue,
|
||||
video::-moz-cue,
|
||||
.video-element::-moz-cue {
|
||||
font-size: 1.15rem !important;
|
||||
padding: 0.35em 0.7em !important;
|
||||
}
|
||||
|
||||
.video-element::-webkit-media-text-track-container {
|
||||
bottom: 80px !important;
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
|
||||
.video-element::-webkit-media-text-track-display {
|
||||
max-width: 92% !important;
|
||||
}
|
||||
|
||||
video::-moz-text-track-display,
|
||||
.video-element::-moz-text-track-display {
|
||||
bottom: 80px !important;
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
::cue,
|
||||
.video-element::cue,
|
||||
::-moz-cue,
|
||||
video::-moz-cue,
|
||||
.video-element::-moz-cue {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.video-element::-webkit-media-text-track-container {
|
||||
bottom: 60px !important;
|
||||
}
|
||||
|
||||
video::-moz-text-track-display,
|
||||
.video-element::-moz-text-track-display {
|
||||
bottom: 60px !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user