mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-11 09:58:53 -05:00
105 lines
2.8 KiB
CSS
105 lines
2.8 KiB
CSS
/* ===== EMBED INFO OVERLAY STYLES ===== */
|
|
|
|
.vjs-embed-info-overlay {
|
|
position: absolute !important;
|
|
top: 10px !important;
|
|
left: 10px !important;
|
|
z-index: 1000 !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 10px !important;
|
|
padding: 8px 12px !important;
|
|
max-width: calc(100% - 40px) !important;
|
|
box-sizing: border-box !important;
|
|
transition: opacity 0.3s ease-in-out !important;
|
|
font-family: Arial, sans-serif !important;
|
|
}
|
|
|
|
.vjs-embed-info-overlay .embed-avatar-container {
|
|
flex-shrink: 0 !important;
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
border-radius: 50% !important;
|
|
overflow: hidden !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
|
}
|
|
|
|
.vjs-embed-info-overlay .embed-avatar-container a {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.vjs-embed-info-overlay .embed-avatar-container img {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
object-fit: cover !important;
|
|
display: block !important;
|
|
}
|
|
|
|
.vjs-embed-info-overlay .embed-title-container {
|
|
flex: 1 !important;
|
|
min-width: 0 !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.vjs-embed-info-overlay .embed-title-container a,
|
|
.vjs-embed-info-overlay .embed-title-container span {
|
|
color: #fff !important;
|
|
text-decoration: none !important;
|
|
font-size: 14px !important;
|
|
font-weight: 500 !important;
|
|
line-height: 1.3 !important;
|
|
display: block !important;
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
transition: color 0.2s ease !important;
|
|
}
|
|
|
|
.vjs-embed-info-overlay .embed-title-container a:hover {
|
|
color: #ccc !important;
|
|
}
|
|
|
|
/* Responsive styles for smaller screens */
|
|
@media (max-width: 768px) {
|
|
.vjs-embed-info-overlay {
|
|
top: 8px !important;
|
|
left: 8px !important;
|
|
padding: 6px 10px !important;
|
|
gap: 8px !important;
|
|
max-width: calc(100% - 32px) !important;
|
|
}
|
|
|
|
.vjs-embed-info-overlay .embed-avatar-container {
|
|
width: 28px !important;
|
|
height: 28px !important;
|
|
}
|
|
|
|
.vjs-embed-info-overlay .embed-title-container a,
|
|
.vjs-embed-info-overlay .embed-title-container span {
|
|
font-size: 13px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.vjs-embed-info-overlay {
|
|
top: 6px !important;
|
|
left: 6px !important;
|
|
padding: 5px 8px !important;
|
|
gap: 6px !important;
|
|
max-width: calc(100% - 24px) !important;
|
|
}
|
|
|
|
.vjs-embed-info-overlay .embed-avatar-container {
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
}
|
|
|
|
.vjs-embed-info-overlay .embed-title-container a,
|
|
.vjs-embed-info-overlay .embed-title-container span {
|
|
font-size: 12px !important;
|
|
}
|
|
}
|