From 276bf6a875e7be9204fe382f31a129fcb3410171 Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Thu, 16 Oct 2025 14:47:23 +0300 Subject: [PATCH] Standardize z-index hierarchy for VideoJS overlays 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. --- .../src/components/controls/ButtonTooltips.css | 2 +- .../src/components/controls/CustomChaptersOverlay.css | 1 + .../src/components/controls/CustomSettingsMenu.css | 2 +- .../components/overlays/AutoplayCountdownOverlay.css | 4 ++-- .../src/components/overlays/EmbedInfoOverlay.css | 2 +- .../src/components/overlays/EndScreenOverlay.css | 10 +++++----- 6 files changed, 11 insertions(+), 10 deletions(-) diff --git a/frontend-tools/video-js/src/components/controls/ButtonTooltips.css b/frontend-tools/video-js/src/components/controls/ButtonTooltips.css index 0e3df0be..dfb62140 100644 --- a/frontend-tools/video-js/src/components/controls/ButtonTooltips.css +++ b/frontend-tools/video-js/src/components/controls/ButtonTooltips.css @@ -26,7 +26,7 @@ opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; - z-index: 1000; + z-index: 20000; margin-bottom: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", diff --git a/frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.css b/frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.css index c459c6f6..8d5f3357 100644 --- a/frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.css +++ b/frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.css @@ -14,6 +14,7 @@ overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); right: 10px; + z-index: 10000; } .chapter-head { diff --git a/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.css b/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.css index ad06e7de..a62a7c58 100644 --- a/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.css +++ b/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.css @@ -37,7 +37,7 @@ border-radius: 7px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); display: none; - z-index: 9999; + z-index: 10000; font-size: 14px; overflow: auto; } diff --git a/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css b/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css index 350f1ccd..63440a1f 100644 --- a/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css +++ b/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css @@ -10,7 +10,7 @@ flex-direction: column; justify-content: center; align-items: center; - z-index: 4; + z-index: 200; padding: 20px; box-sizing: border-box; opacity: 0; @@ -154,7 +154,7 @@ .autoplay-close-button { display: flex !important; } - + .autoplay-cancel-button { display: inline-block !important; } diff --git a/frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.css b/frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.css index 12499b56..c0e2c00d 100644 --- a/frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.css +++ b/frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.css @@ -4,7 +4,7 @@ position: absolute !important; top: 10px !important; left: 10px !important; - z-index: 1000 !important; + z-index: 5000 !important; display: flex !important; align-items: center !important; gap: 10px !important; diff --git a/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css b/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css index 11db5013..165f6df2 100644 --- a/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css +++ b/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css @@ -5,11 +5,11 @@ top: 0; left: 0; right: 0; - bottom: 60px; /* Leave space for control bar */ - background: #000000; /* Solid black background */ + bottom: 60px; + background: #000000; display: none; z-index: 100; - overflow: hidden; /* Prevent content from overflowing */ + overflow: hidden; box-sizing: border-box; } @@ -353,9 +353,9 @@ 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 { background: #000000 !important; - z-index: 99999 !important; + z-index: 100 !important; display: flex !important; }