204 lines
3.7 KiB
CSS
204 lines
3.7 KiB
CSS
/**
|
|
* Video Player Styles for MkDocs
|
|
*
|
|
* Ensures video players from landing pages render properly in documentation
|
|
*/
|
|
|
|
/* Video block container */
|
|
.video-block {
|
|
margin: 2rem auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Advanced video container */
|
|
.advanced-video-container {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Video element styling */
|
|
.video-block video,
|
|
.advanced-video-container video {
|
|
width: 100%;
|
|
height: auto;
|
|
max-width: 100%;
|
|
border-radius: 8px;
|
|
display: block;
|
|
background: #000;
|
|
}
|
|
|
|
/* Video metadata */
|
|
.video-meta {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.875rem;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .video-meta {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* Video reactions bar */
|
|
.video-reactions {
|
|
margin-top: 0.75rem;
|
|
padding: 0.75rem;
|
|
background: rgba(0, 0, 0, 0.03);
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .video-reactions {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.video-reactions a {
|
|
color: var(--md-primary-fg-color);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.video-reactions a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Loading state */
|
|
.video-loading {
|
|
padding: 2.5rem;
|
|
text-align: center;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .video-loading {
|
|
color: rgba(255, 255, 255, 0.45);
|
|
}
|
|
|
|
/* Error state */
|
|
.video-error {
|
|
padding: 2.5rem;
|
|
text-align: center;
|
|
background: #fff3f3;
|
|
border: 1px solid #ffccc7;
|
|
border-radius: 8px;
|
|
color: #cf1322;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .video-error {
|
|
background: rgba(207, 19, 34, 0.1);
|
|
border-color: rgba(207, 19, 34, 0.3);
|
|
}
|
|
|
|
.video-error svg {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.video-error p {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Responsive video containers */
|
|
@media (max-width: 768px) {
|
|
.video-block,
|
|
.advanced-video-container,
|
|
.video-card-block {
|
|
margin: 1.5rem auto;
|
|
}
|
|
|
|
.video-block video,
|
|
.advanced-video-container video,
|
|
.video-card-player video {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.video-card-block {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Video placeholder (shown during GrapesJS export before hydration) */
|
|
.video-placeholder {
|
|
aspect-ratio: 16/9;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: #fff;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.video-placeholder svg {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.video-placeholder p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Video card block (YouTube-style preview card) */
|
|
.video-card-block {
|
|
margin: 2rem auto;
|
|
max-width: 480px;
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.video-card-block:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.video-card-block a {
|
|
text-decoration: none !important;
|
|
color: inherit !important;
|
|
}
|
|
|
|
/* Video card gallery button */
|
|
.video-card-gallery-btn:active {
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
/* Video card inline player (after clicking thumbnail) */
|
|
.video-card-player video {
|
|
width: 100%;
|
|
display: block;
|
|
background: #000;
|
|
}
|
|
|
|
.video-card-player video:focus {
|
|
outline: 2px solid var(--md-primary-fg-color);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
|
|
/* Ensure videos respect content width in Material theme */
|
|
.md-content .video-block,
|
|
.md-content .advanced-video-container,
|
|
.md-content .video-card-block {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Video controls customization */
|
|
video::-webkit-media-controls-panel {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
video::-webkit-media-controls-play-button {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Accessibility: Focus styles */
|
|
.video-block video:focus,
|
|
.advanced-video-container video:focus {
|
|
outline: 2px solid var(--md-primary-fg-color);
|
|
outline-offset: 2px;
|
|
}
|