Merge pull request #1077 from ROCm/alexxu12/flyoutZIndex

fix: scale down z-axis of multiple elements to prevent covering flyout
ROCm · Jan 2, 2025 · a67b29b · a67b29b
2 parents 2f4742b + ffae33b
commit a67b29b
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/src/rocm_docs/data/_doxygen/extra_stylesheet.css b/src/rocm_docs/data/_doxygen/extra_stylesheet.css
@@ -597,7 +597,7 @@ html[data-theme=dark] {
 }
 
 .doxygen-content #MSearchSelectWindow, .doxygen-content #MSearchResultsWindow {
-    z-index: 9999;
+    z-index: 1999;
 }
 
 .doxygen-content #MSearchBox.MSearchBoxActive {

diff --git a/src/rocm_docs/rocm_docs_theme/static/custom.css b/src/rocm_docs/rocm_docs_theme/static/custom.css
@@ -99,7 +99,7 @@ div#rdc-watermark-container {
   width: 100vw;
   top: 0;
   left: 0;
-  z-index: 10000;
+  z-index: 2000;
 }
 
 img#rdc-watermark {
@@ -110,7 +110,7 @@ img#rdc-watermark {
   transform-origin: center;
   transform: translate(-50%, -50%) rotate(-45deg);
   opacity: 10%;
-  z-index: 10000;
+  z-index: 2000;
   max-width: 100%;
   max-height: calc(100% - 200px);
   object-fit: contain;
@@ -221,7 +221,9 @@ a#ot-sdk-btn {
 }
 
 .bd-sidebar-secondary {
-  z-index: 10001;
+  /* Header z-index is 2000, flyout z-index is 3000.
+   * Setting sidebar's z-index to be between 2000 and 3000 to hover over the header without covering the flyout. */
+  z-index: 2001;
 }
 
 .sd-card-body.rocm-card-banner {

diff --git a/src/rocm_docs/rocm_docs_theme/static/rocm_footer.css b/src/rocm_docs/rocm_docs_theme/static/rocm_footer.css
@@ -2,7 +2,7 @@ footer.rocm-footer {
   background-color: #000;
   color: #fff;
   padding: 1rem;
-  z-index: 9999;
+  z-index: 1999;
   padding-top: 0px;
   padding-bottom: 0px;
 }

diff --git a/src/rocm_docs/rocm_docs_theme/static/rocm_header.css b/src/rocm_docs/rocm_docs_theme/static/rocm_header.css
@@ -4,7 +4,8 @@ header.common-header {
     font-size: 1rem;
     line-height: 1.5rem;
     margin-bottom: 0;
-    z-index: 10000;
+/* readthedocs flyout z-index is 3000, setting header z-index to be below 3000 to avoid covering the flyout. */
+    z-index: 2000;
 }
 
 header.common-header a {
@@ -751,7 +752,7 @@ header.common-header .icon-nav .icon-item ul.dropdown-menu {
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
   padding-bottom: 0;
   transform: translateX(40%);
-  z-index: 9999;
+  z-index: 1999;
 }
 
 header.common-header