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

Standardize z-index hierarchy for VideoJS overlays

Browse Source 
Introduced a Z-INDEX-HIERARCHY.md documentation file and updated z-index values across overlay and control CSS files to enforce a consistent stacking order. Ensures tooltips are always on top, menus and chapters overlays are above informational overlays, and end screen overlays remain at the base of the overlay stack. This improves UI layering logic and user interaction reliability.
This commit is contained in:
Yiannis Christodoulou 2025-10-16 14:47:23 +03:00
parent 6b68e6537f
commit 276bf6a875
6 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend-tools/video-js/src/components/controls/ButtonTooltips.css
View File

@ -26,7 +26,7 @@
opacity 0.2s ease, opacity 0.2s ease,
visibility 0.2s ease, visibility 0.2s ease,
transform 0.2s ease; transform 0.2s ease;
z-index: 1000; z-index: 20000;
margin-bottom: 10px; margin-bottom: 10px;
font-family: font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",

1
frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.css
View File

@ -14,6 +14,7 @@
overflow: hidden; overflow: hidden;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
right: 10px; right: 10px;
z-index: 10000;
} }
.chapter-head { .chapter-head {

2
frontend-tools/video-js/src/components/controls/CustomSettingsMenu.css
View File

@ -37,7 +37,7 @@
border-radius: 7px; border-radius: 7px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
display: none; display: none;
z-index: 9999; z-index: 10000;
font-size: 14px; font-size: 14px;
overflow: auto; overflow: auto;
} }

4
frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css
View File

@ -10,7 +10,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 4; z-index: 200;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
opacity: 0; opacity: 0;
@ -154,7 +154,7 @@
.autoplay-close-button { .autoplay-close-button {
display: flex !important; display: flex !important;
} }
.autoplay-cancel-button { .autoplay-cancel-button {
display: inline-block !important; display: inline-block !important;
} }

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

@ -4,7 +4,7 @@
position: absolute !important; position: absolute !important;
top: 10px !important; top: 10px !important;
left: 10px !important; left: 10px !important;
z-index: 1000 !important; z-index: 5000 !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
gap: 10px !important; gap: 10px !important;

10
frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css
View File

@ -5,11 +5,11 @@
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 60px; /* Leave space for control bar */ bottom: 60px;
background: #000000; /* Solid black background */ background: #000000;
display: none; display: none;
z-index: 100; z-index: 100;
overflow: hidden; /* Prevent content from overflowing */ overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
} }
@ -353,9 +353,9 @@
visibility: hidden !important; visibility: hidden !important;
} }
/* Ensure end screen overlay covers everything with solid background */ /* Ensure end screen overlay covers everything with solid background but stays below menus */
.video-js.vjs-ended .vjs-end-screen-overlay { .video-js.vjs-ended .vjs-end-screen-overlay {
background: #000000 !important; background: #000000 !important;
z-index: 99999 !important; z-index: 100 !important;
display: flex !important; display: flex !important;
} }