mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-05 23:18:53 -05:00
690 lines
18 KiB
CSS
690 lines
18 KiB
CSS
/* ===== END SCREEN OVERLAY STYLES ===== */
|
|
|
|
.vjs-end-screen-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: calc(100% - 80px); /* Reduce reserved space for seekbar */
|
|
background: #000000;
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: center; /* Center the grid vertically */
|
|
align-items: center;
|
|
padding: 40px 40px 40px 40px; /* Equal visual margins on all sides */
|
|
box-sizing: border-box;
|
|
z-index: 9999;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Hide poster image when video ends and end screen is shown */
|
|
.video-js.vjs-ended .vjs-poster {
|
|
display: none !important;
|
|
opacity: 0 !important;
|
|
visibility: hidden !important;
|
|
z-index: -1 !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
/* Hide video element completely when ended */
|
|
.video-js.vjs-ended video {
|
|
display: none !important;
|
|
opacity: 0 !important;
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
/* Ensure the overlay covers everything with maximum z-index */
|
|
.video-js.vjs-ended .vjs-end-screen-overlay {
|
|
z-index: 99999 !important;
|
|
display: flex !important;
|
|
}
|
|
|
|
/* Embed-specific full page overlay */
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100vw !important;
|
|
height: calc(100vh - 80px) !important; /* Reduce reserved space for controls */
|
|
z-index: 9998 !important; /* Below controls but above video */
|
|
display: flex !important;
|
|
padding: 120px 40px 40px 40px !important; /* Top padding for embed info + equal visual margins */
|
|
justify-content: center !important; /* Center the grid vertically */
|
|
}
|
|
|
|
/* Small player size optimization - 2 items horizontally for better title readability */
|
|
/* This applies to both embed and regular players when they're small */
|
|
.vjs-end-screen-overlay.vjs-small-player .vjs-related-videos-grid {
|
|
grid-template-columns: repeat(2, 1fr) !important;
|
|
grid-template-rows: 1fr !important;
|
|
gap: 20px !important;
|
|
max-width: 600px; /* Limit width for better proportions */
|
|
}
|
|
|
|
.vjs-end-screen-overlay.vjs-small-player {
|
|
height: calc(100% - 60px) !important;
|
|
padding: 30px !important;
|
|
}
|
|
|
|
/* Hide items beyond the first 2 for small players */
|
|
.vjs-end-screen-overlay.vjs-small-player .vjs-related-video-item:nth-child(n + 3) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Embed-specific adjustments for small sizes */
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay.vjs-small-player {
|
|
height: calc(100vh - 60px) !important;
|
|
padding: 80px 30px 30px 30px !important;
|
|
}
|
|
|
|
/* Fallback media query for cases where class detection might not work */
|
|
@media (max-height: 500px), (max-width: 600px) {
|
|
.vjs-related-videos-grid {
|
|
grid-template-columns: repeat(2, 1fr) !important;
|
|
grid-template-rows: 1fr !important;
|
|
gap: 20px !important;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.vjs-end-screen-overlay {
|
|
height: calc(100% - 60px) !important;
|
|
padding: 30px !important;
|
|
}
|
|
|
|
.vjs-related-video-item:nth-child(n + 3) {
|
|
display: none !important;
|
|
}
|
|
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
|
height: calc(100vh - 60px) !important;
|
|
padding: 80px 30px 30px 30px !important;
|
|
}
|
|
}
|
|
|
|
/* Very small player size - further optimize spacing (class-based detection) */
|
|
.vjs-end-screen-overlay.vjs-very-small-player .vjs-related-videos-grid {
|
|
gap: 15px !important;
|
|
max-width: 500px !important;
|
|
}
|
|
|
|
.vjs-end-screen-overlay.vjs-very-small-player {
|
|
height: calc(100% - 50px) !important;
|
|
padding: 25px !important;
|
|
}
|
|
|
|
.vjs-end-screen-overlay.vjs-very-small-player .vjs-related-video-item {
|
|
min-height: 80px !important;
|
|
}
|
|
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay.vjs-very-small-player {
|
|
height: calc(100vh - 50px) !important;
|
|
padding: 60px 25px 25px 25px !important;
|
|
}
|
|
|
|
/* Fallback media query for very small sizes */
|
|
@media (max-height: 400px), (max-width: 400px) {
|
|
.vjs-related-videos-grid {
|
|
gap: 15px !important;
|
|
max-width: 500px !important;
|
|
}
|
|
|
|
.vjs-end-screen-overlay {
|
|
height: calc(100% - 50px) !important;
|
|
padding: 25px !important;
|
|
}
|
|
|
|
.vjs-related-video-item {
|
|
min-height: 80px !important;
|
|
}
|
|
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
|
height: calc(100vh - 50px) !important;
|
|
padding: 60px 25px 25px 25px !important;
|
|
}
|
|
}
|
|
|
|
/* Ensure controls stay visible over the black background */
|
|
.video-js.vjs-ended .vjs-control-bar {
|
|
z-index: 10000 !important;
|
|
position: absolute !important;
|
|
bottom: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
width: 100% !important;
|
|
display: flex !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.video-js.vjs-ended .vjs-progress-control {
|
|
z-index: 10001 !important;
|
|
position: absolute !important;
|
|
bottom: 48px !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
width: 100% !important;
|
|
display: block !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
/* Embed-specific controls handling when ended */
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-control-bar {
|
|
position: fixed !important;
|
|
bottom: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
width: 100vw !important;
|
|
z-index: 10000 !important;
|
|
display: flex !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-progress-control {
|
|
position: fixed !important;
|
|
bottom: 48px !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
width: 100vw !important;
|
|
z-index: 10001 !important;
|
|
display: block !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
/* Ensure embed info overlay (title/avatar) stays visible when ended */
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-embed-info-overlay {
|
|
z-index: 10002 !important;
|
|
display: flex !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
/* Hide big play button when end screen is active */
|
|
.video-js.vjs-ended .vjs-big-play-button {
|
|
display: none !important;
|
|
opacity: 0 !important;
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
/* Hide seek indicator (play icon) when end screen is active */
|
|
.video-js.vjs-ended .vjs-seek-indicator {
|
|
display: none !important;
|
|
opacity: 0 !important;
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
/* Make control bar and seekbar background black when video ends */
|
|
.video-js.vjs-ended .vjs-control-bar {
|
|
background: #000000 !important;
|
|
background-color: #000000 !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
.video-js.vjs-ended .vjs-progress-control {
|
|
background: #000000 !important;
|
|
background-color: #000000 !important;
|
|
}
|
|
|
|
/* Also ensure the gradient overlay is black when ended */
|
|
.video-js.vjs-ended::after {
|
|
background: #000000 !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
/* Remove any white elements or gradients */
|
|
.video-js.vjs-ended::before {
|
|
background: #000000 !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
/* Ensure all VideoJS overlays are black but preserve seekbar colors */
|
|
.video-js.vjs-ended .vjs-loading-spinner,
|
|
.video-js.vjs-ended .vjs-mouse-display {
|
|
background: #000000 !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
/* Only change the background holder, preserve progress colors */
|
|
.video-js.vjs-ended .vjs-progress-holder {
|
|
background: rgba(255, 255, 255, 0.3) !important; /* Keep original transparent background */
|
|
}
|
|
|
|
/* Hide any remaining VideoJS elements that might show white */
|
|
.video-js.vjs-ended .vjs-tech,
|
|
.video-js.vjs-ended .vjs-poster-overlay {
|
|
display: none !important;
|
|
opacity: 0 !important;
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
.vjs-related-videos-title {
|
|
color: white;
|
|
font-size: 24px;
|
|
line-height: 24px;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.vjs-related-videos-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 0; /* Remove margin since parent handles centering */
|
|
box-sizing: border-box;
|
|
justify-items: stretch;
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
align-content: center; /* Center grid content */
|
|
overflow: hidden;
|
|
grid-auto-rows: 1fr;
|
|
}
|
|
|
|
.vjs-related-video-item {
|
|
position: relative;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
transition:
|
|
transform 0.2s ease,
|
|
box-shadow 0.2s ease;
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
aspect-ratio: 16/9;
|
|
width: 100%;
|
|
min-height: 100px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Apply rounded corners only when useRoundedCorners is true */
|
|
.video-js.video-js-rounded-corners .vjs-related-video-item {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.vjs-related-video-item:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.vjs-related-video-thumbnail {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
/* border-radius: 8px; */
|
|
background: #1a1a1a; /* Fallback background */
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.vjs-related-video-item:hover .vjs-related-video-thumbnail {
|
|
transform: scale(1.02); /* Subtle zoom like YouTube */
|
|
}
|
|
|
|
.vjs-related-video-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
|
|
color: white;
|
|
padding: 12px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
height: 100%;
|
|
}
|
|
|
|
.vjs-related-video-item:hover .vjs-related-video-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Show overlay by default on touch devices - match default hover behavior exactly */
|
|
.vjs-related-video-item.vjs-touch-device .vjs-related-video-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.vjs-related-video-title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 1.3;
|
|
color: white;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.vjs-related-video-meta {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.vjs-related-video-author {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
|
|
.vjs-related-video-views {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
|
|
.vjs-related-video-author::after {
|
|
content: "•";
|
|
margin-left: 8px;
|
|
color: #fff;
|
|
}
|
|
|
|
.vjs-related-video-duration {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
right: 8px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
padding: 2px 6px;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
/* Apply rounded corners to duration badge only when useRoundedCorners is true */
|
|
.video-js.video-js-rounded-corners .vjs-related-video-duration {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.vjs-related-video-item:hover .vjs-related-video-duration {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Show duration by default on touch devices */
|
|
.vjs-related-video-item.vjs-touch-device .vjs-related-video-duration {
|
|
opacity: 1;
|
|
}
|
|
|
|
.video-js.vjs-ended .vjs-control-bar {
|
|
opacity: 1 !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
.video-js.vjs-ended .vjs-control-bar .vjs-control {
|
|
opacity: 1 !important;
|
|
pointer-events: auto !important;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.video-js.vjs-ended .vjs-control-bar button {
|
|
opacity: 1 !important;
|
|
pointer-events: auto !important;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.video-js.vjs-ended .vjs-control-bar .vjs-control.vjs-volume-control {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
.video-js.vjs-ended .vjs-control-bar .vjs-volume-panel.vjs-hover .vjs-volume-control {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Responsive grid adjustments for different screen sizes */
|
|
@media (max-width: 1200px) {
|
|
.vjs-related-videos-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.vjs-end-screen-overlay {
|
|
height: calc(100% - 70px);
|
|
padding: 35px;
|
|
}
|
|
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
|
height: calc(100vh - 70px) !important;
|
|
padding: 115px 35px 35px 35px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.vjs-related-videos-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.vjs-end-screen-overlay {
|
|
height: calc(100% - 60px);
|
|
padding: 30px;
|
|
}
|
|
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
|
height: calc(100vh - 60px) !important;
|
|
padding: 110px 30px 30px 30px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.vjs-related-videos-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.vjs-end-screen-overlay {
|
|
height: calc(100% - 50px);
|
|
padding: 25px;
|
|
justify-content: center;
|
|
}
|
|
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
|
height: calc(100vh - 50px) !important;
|
|
padding: 105px 25px 25px 25px !important;
|
|
}
|
|
|
|
.vjs-related-video-item {
|
|
min-height: 80px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.vjs-related-videos-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.vjs-end-screen-overlay {
|
|
height: calc(100% - 40px);
|
|
padding: 20px;
|
|
justify-content: center;
|
|
}
|
|
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
|
height: calc(100vh - 40px) !important;
|
|
padding: 100px 20px 20px 20px !important;
|
|
}
|
|
|
|
.vjs-related-video-item {
|
|
min-height: 70px;
|
|
}
|
|
}
|
|
|
|
.video-js.vjs-ended .vjs-play-control {
|
|
opacity: 1 !important;
|
|
pointer-events: auto !important;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.video-js.vjs-ended .vjs-progress-control {
|
|
opacity: 1 !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
.video-js.vjs-ended .vjs-volume-panel {
|
|
opacity: 1 !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
/* Responsive grid layouts */
|
|
@media (min-width: 1200px) {
|
|
.vjs-related-videos-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.vjs-end-screen-overlay {
|
|
height: calc(100% - 80px);
|
|
padding: 40px;
|
|
}
|
|
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
|
height: calc(100vh - 80px) !important;
|
|
padding: 120px 40px 40px 40px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1199px) {
|
|
.vjs-related-video-item:nth-child(n + 10) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.vjs-related-videos-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
}
|
|
}
|
|
|
|
/* iPad Pro and larger tablets */
|
|
@media (min-width: 1024px) and (max-width: 1199px) {
|
|
.vjs-related-videos-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Allow up to 9 videos on larger tablets */
|
|
.vjs-related-video-item:nth-child(n + 10) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Large tablets like iPad Pro */
|
|
@media (min-width: 900px) and (max-width: 1024px) {
|
|
.vjs-related-videos-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Allow up to 9 videos on large tablets */
|
|
.vjs-related-video-item:nth-child(n + 10) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) and (max-width: 899px) {
|
|
.vjs-related-videos-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 14px;
|
|
}
|
|
|
|
.vjs-end-screen-overlay {
|
|
height: calc(100% - 60px);
|
|
padding: 30px;
|
|
justify-content: center;
|
|
}
|
|
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
|
height: calc(100vh - 60px) !important;
|
|
padding: 110px 30px 30px 30px !important;
|
|
}
|
|
|
|
/* Allow up to 9 videos on regular tablets */
|
|
.vjs-related-video-item:nth-child(n + 10) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.vjs-related-video-item:nth-child(n + 5) {
|
|
display: none;
|
|
}
|
|
|
|
.vjs-related-videos-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.vjs-end-screen-overlay {
|
|
padding: 12px;
|
|
justify-content: center;
|
|
height: calc(100% - 105px);
|
|
}
|
|
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
|
height: calc(100vh - 105px) !important;
|
|
padding: 80px 12px 12px 12px !important;
|
|
}
|
|
|
|
.vjs-related-video-thumbnail {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 574px) {
|
|
.vjs-related-video-item:nth-child(n + 5) {
|
|
display: none;
|
|
}
|
|
|
|
.vjs-related-videos-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.vjs-end-screen-overlay {
|
|
padding: 10px;
|
|
justify-content: center;
|
|
height: calc(100% - 100px);
|
|
}
|
|
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
|
height: calc(100vh - 100px) !important;
|
|
padding: 80px 10px 10px 10px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 439px) {
|
|
.vjs-related-video-item:nth-child(n + 5) {
|
|
display: none;
|
|
}
|
|
.vjs-related-videos-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.vjs-end-screen-overlay {
|
|
padding: 8px;
|
|
justify-content: center;
|
|
height: calc(100% - 98px);
|
|
}
|
|
|
|
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
|
height: calc(100vh - 98px) !important;
|
|
padding: 80px 8px 8px 8px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.vjs-related-video-thumbnail {
|
|
height: 100%;
|
|
}
|
|
}
|