CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-06 15:38:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: Remove the dark background from avatar/title in embed

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-25 12:47:04 +03:00
parent 71b9935d2c
commit 51b52c38a3
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend-tools/video-js/src/VideoJS.css
View File

@ -1767,11 +1767,7 @@ button.vjs-button > .vjs-icon-placeholder:before {
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
gap: 10px !important; gap: 10px !important;
background: rgba(0, 0, 0, 0.7) !important;
padding: 8px 12px !important; padding: 8px 12px !important;
border-radius: 8px !important;
backdrop-filter: blur(4px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
max-width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important;
box-sizing: border-box !important; box-sizing: border-box !important;
transition: opacity 0.3s ease-in-out !important; transition: opacity 0.3s ease-in-out !important;
@ -1822,7 +1818,7 @@ button.vjs-button > .vjs-icon-placeholder:before {
} }
.vjs-embed-info-overlay .embed-title-container a:hover { .vjs-embed-info-overlay .embed-title-container a:hover {
color: #009931 !important; color: #ccc !important;
} }
/* Responsive styles for smaller screens */ /* Responsive styles for smaller screens */

20
frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js
View File

@ -39,11 +39,7 @@ class EmbedInfoOverlay extends Component {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
background: rgba(0, 0, 0, 0.7);
padding: 8px 12px; padding: 8px 12px;
border-radius: 8px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
max-width: calc(100% - 40px); max-width: calc(100% - 40px);
box-sizing: border-box; box-sizing: border-box;
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
@ -148,7 +144,7 @@ class EmbedInfoOverlay extends Component {
// Add hover effect // Add hover effect
titleLink.addEventListener('mouseenter', () => { titleLink.addEventListener('mouseenter', () => {
titleLink.style.color = '#009931'; titleLink.style.color = '#ccc';
}); });
titleLink.addEventListener('mouseleave', () => { titleLink.addEventListener('mouseleave', () => {
@ -190,24 +186,34 @@ class EmbedInfoOverlay extends Component {
// Show/hide with controls // Show/hide with controls
player.on('useractive', () => { player.on('useractive', () => {
overlay.style.opacity = '1'; overlay.style.opacity = '1';
overlay.style.visibility = 'visible';
}); });
player.on('userinactive', () => { player.on('userinactive', () => {
overlay.style.opacity = '0.7'; overlay.style.opacity = '0';
overlay.style.visibility = 'hidden';
}); });
// Always show when paused // Always show when paused
player.on('pause', () => { player.on('pause', () => {
overlay.style.opacity = '1'; overlay.style.opacity = '1';
overlay.style.visibility = 'visible';
}); });
// Hide during fullscreen controls fade // Hide during fullscreen controls fade
player.on('fullscreenchange', () => { player.on('fullscreenchange', () => {
setTimeout(() => { setTimeout(() => {
if (player.isFullscreen()) { if (player.isFullscreen()) {
overlay.style.opacity = player.userActive() ? '1' : '0.7'; if (player.userActive()) {
overlay.style.opacity = '1';
overlay.style.visibility = 'visible';
} else {
overlay.style.opacity = '0';
overlay.style.visibility = 'hidden';
}
} else { } else {
overlay.style.opacity = '1'; overlay.style.opacity = '1';
overlay.style.visibility = 'visible';
} }
}, 100); }, 100);
}); });