[DOCS] changes for port to master (#26776)

Port for 

![image](https://github.com/user-attachments/assets/12acd130-f737-4536-83e9-5d707e9f68e0)

to master

Author: akopytko

docs/sphinx_setup/_static/css/banner.css

@@ -55,7 +55,7 @@
     background-color: transparent;
     border: 0;
     float: right;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     font-weight: 700;
     line-height: 1;
     text-shadow: 0 1px 0 #fff;

docs/sphinx_setup/_static/css/custom.css

@@ -49,12 +49,19 @@ a#wap_dns {
 }
 
 /* Sphinx replace a default github icon*/
-.fa-square-github {
+.bd-header .fa-square-github {
     margin-top: 6px;
     background-repeat: no-repeat;
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='openvino github' aria-describedby='openvino github' role='img' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EGithub%3C/title%3E%3Cdesc%3EA solid styled icon from Orion Icon Library.%3C/desc%3E%3Cpath d='M32 0a32.021 32.021 0 0 0-10.1 62.4c1.6.3 2.2-.7 2.2-1.5v-6c-8.9 1.9-10.8-3.8-10.8-3.8-1.5-3.7-3.6-4.7-3.6-4.7-2.9-2 .2-1.9.2-1.9 3.2.2 4.9 3.3 4.9 3.3 2.9 4.9 7.5 3.5 9.3 2.7a6.93 6.93 0 0 1 2-4.3c-7.1-.8-14.6-3.6-14.6-15.8a12.27 12.27 0 0 1 3.3-8.6 11.965 11.965 0 0 1 .3-8.5s2.7-.9 8.8 3.3a30.873 30.873 0 0 1 8-1.1 30.292 30.292 0 0 1 8 1.1c6.1-4.1 8.8-3.3 8.8-3.3a11.965 11.965 0 0 1 .3 8.5 12.1 12.1 0 0 1 3.3 8.6c0 12.3-7.5 15-14.6 15.8a7.746 7.746 0 0 1 2.2 5.9v8.8c0 .9.6 1.8 2.2 1.5A32.021 32.021 0 0 0 32 0z' fill='rgb(255, 255, 255)'%3E%3C/path%3E%3Cpath %3E%3C/path%3E%3C/svg%3E ");
 }
 
+.bd-sidebar .fa-square-github {
+    margin-top: 0;
+    background-repeat: no-repeat;
+    width: 64px;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='openvino github' aria-describedby='openvino github' role='img' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EGithub%3C/title%3E%3Cdesc%3EA solid styled icon from Orion Icon Library.%3C/desc%3E%3Cpath d='M32 0a32.021 32.021 0 0 0-10.1 62.4c1.6.3 2.2-.7 2.2-1.5v-6c-8.9 1.9-10.8-3.8-10.8-3.8-1.5-3.7-3.6-4.7-3.6-4.7-2.9-2 .2-1.9.2-1.9 3.2.2 4.9 3.3 4.9 3.3 2.9 4.9 7.5 3.5 9.3 2.7a6.93 6.93 0 0 1 2-4.3c-7.1-.8-14.6-3.6-14.6-15.8a12.27 12.27 0 0 1 3.3-8.6 11.965 11.965 0 0 1 .3-8.5s2.7-.9 8.8 3.3a30.873 30.873 0 0 1 8-1.1 30.292 30.292 0 0 1 8 1.1c6.1-4.1 8.8-3.3 8.8-3.3a11.965 11.965 0 0 1 .3 8.5 12.1 12.1 0 0 1 3.3 8.6c0 12.3-7.5 15-14.6 15.8a7.746 7.746 0 0 1 2.2 5.9v8.8c0 .9.6 1.8 2.2 1.5A32.021 32.021 0 0 0 32 0z' fill='rgb(0, 0, 0)'%3E%3C/path%3E%3Cpath %3E%3C/path%3E%3C/svg%3E ");
+}
+
 .fa-square-github path {
     fill: none;
 }
@@ -138,13 +145,6 @@ a#wap_dns {
     font-weight: 700;
 }
 
-/* Underline width */
-a:hover,
-.toc-entry a.nav-link:hover,
-nav.bd-links li>a:hover {
-    text-decoration-thickness: 1px;
-}
-
 
 #bd-docs-nav div ul a:hover {
     color: white;
@@ -177,6 +177,16 @@ a.current {
     padding: 0 0.8rem;
 }
 
+.bd-sidebar .navbar-nav li a.nav-link:hover {
+    color: black;
+    font-size: 1rem !important;
+    text-decoration: underline !important;
+}
+.bd-sidebar .navbar-nav li a.nav-link {
+    color: black;
+    font-size: 1rem !important;
+}
+
 ul.bd-breadcrumbs li.breadcrumb-item:not(.breadcrumb-home):before {
     padding: .2rem .5rem 0 !important;
 }
@@ -188,13 +198,21 @@ li.breadcrumb-item {
 div.bd-page-width .bd-sidebar-primary {
     display: block !important;
     border-right: 0 !important;
-    /* top: 0 !important; */
 }
 
 a.nav-link:hover {
     text-decoration: none !important;
 }
 
+li>a:hover {
+    text-decoration-thickness: 1px;
+}
+
+/* Underline width */
+a:hover, .toc-entry a.nav-link:hover, nav.bd-links li>a:hover {
+    text-decoration-thickness: 1px;
+}
+
 /* Github icon size */
 .nav-link[data-bs-original-title="GitHub"] {
     font-size: 2rem !important;
@@ -307,22 +325,45 @@ details.sd-dropdown .sd-summary-title {
     transform: rotate(0deg);
 }
 
-/* Doc version dropdown formatting override */
+/* Doc version dropdown formatting override in header*/
 /* =================================================== */
 [aria-labelledby="version-selector"] {
     min-width: 125px !important;
     overflow-x: hidden !important;
 }
 
-.sst-dropdown #version-selector {
+.bd-header .sst-dropdown #version-selector {
     min-width: 125px !important;
+    color: white !important;
 }
 
 [aria-labelledby="version-selector"] .dropdown-item {
     padding: 0.25rem 0.5rem !important;
 }
 
+/* Doc version dropdown formatting override in sidebar*/
+/* =================================================== */
+.bd-sidebar [aria-labelledby="version-selector"] {
+    min-width: 125px !important;
+    overflow-x: hidden !important;
+}
+
+.bd-sidebar .sst-dropdown #version-selector {
+    min-width: 125px !important;
+    color: white !important;
+}
+
+.bd-sidebar [aria-labelledby="version-selector"] .dropdown-item {
+    padding: 0.25rem 0.5rem !important;
+}
 
+.bd-sidebar-primary .sidebar-header-items .sidebar-header-items__end {
+    align-items: righ !important;
+    display: flex;
+    gap: .5rem;
+    margin-bottom: 15px;
+    margin-top: 20px
+}
 /* Content in two columns */
 /* =================================================== */
 .row-two-col-content {
@@ -453,52 +494,6 @@ div.highlight {
     color: #fff;
 }
 
-
-/* Transition banner */
-/* =================================================== */
-.transition-banner {
-    top: 60px;
-    background: #76CEFF;
-    position: fixed;
-    text-align: center;
-    color: white;
-    z-index: 1001;
-    display: block;
-    padding: 0 2rem;
-    font-size: var(--pst-sidebar-font-size);
-    border: none;
-    border-radius: 0;
-    font-weight: bold;
-    width: 100%;
-    margin-right: auto;
-    margin-left: auto;
-}
-
-.transition-banner>p {
-    margin-bottom: 0;
-}
-
-
-.transition-banner .close-banner {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0 1.25rem;
-    color: #000;
-    background-color: transparent;
-    border: 0;
-    float: right;
-    font-size: 1.5rem;
-    font-weight: 700;
-    line-height: 1;
-    text-shadow: 0 1px 0 #fff;
-    opacity: .5;
-}
-
-.hidden-banner {
-    display: none !important;
-}
-
 /* Header */
 
 .bd-header label.primary-toggle {

docs/sphinx_setup/_static/html/banner_data.json

@@ -1,5 +1,6 @@
 {
     "p": "",
     "version": "1",
-    "style": "warning"
+    "style": "warning",
+    "styles": "warning info critical"
 }

docs/sphinx_setup/_static/js/custom.js

@@ -90,6 +90,7 @@ function addLegalNotice() {
 $(document).ready(function () {
     initSidebar();
     handleSidebar();
+    addFooter();
     createVersions();
     updateTitleTag();
     updateLanguageSelector();
@@ -103,7 +104,6 @@ $(document).ready(function () {
     initCollapsibleHeaders(); // included with the new benchmarks page
     createSphinxTabSets();
     initSplide();
-    addFooter();
 });
 
 function handleSidebar() {
@@ -346,6 +346,7 @@ function addFooter() {
     const footerAnchor = $('.footer');
 
     fetch('/footer.html').then((response) => response.text()).then((text) => {
+        console.log(text)
         const footerContent = $(text);
         footerAnchor.append(footerContent);
     });

docs/sphinx_setup/_static/js/hide_banner.js

@@ -1,45 +1,49 @@
 var cookieVersion = 0;
 
-var dataUrl = document.getElementById("hidebanner").getAttribute( "data-url" );
-window.onload = (e) => {
-  fetch(dataUrl).then((data) => {
-    data.json().then((item) => {
-      if(item != null && item.p != "" && item.version != "" && item.style != "" ) {
-        cookieVersion = item.version;
-        var transitionBanner = document.getElementById("info-banner");
-        if (document.cookie.split(';').filter(function (find_cookie_name) {
-          return find_cookie_name.trim().indexOf('TransitionBannerIsHiddenX' + cookieVersion + '=') === 0;
-        }
-        ).length) {
-          transitionBanner.classList.add("hidden-banner");
-        }
-        transitionBanner.classList.add(item.style);
-  
-        const p = document.createElement("p");
-        p.innerHTML = item.p;
-        transitionBanner.append(p);
-  
-        const button = document.createElement("button");
-        button.className = "close-banner";
-        button.type = "button";
-  
-        const span = document.createElement("span");
-        span.setAttribute('aria-hidden', 'true');
-        span.innerHTML = '×';
-        button.appendChild(span);
-        button.addEventListener("click", function () {
-          var cookieContent = 'TransitionBannerIsHiddenX' + cookieVersion + '=true;';
-          var expiry = 'expires=';
-          var date = new Date();
-          var expirationDate = date.getTime() + (365 * 24 * 60 * 60 * 1000);
-          date.setTime(expirationDate);
-          expiry += date.toUTCString();
-          document.cookie = cookieContent + expiry;
+var hiddenBanner = document.getElementById("hidebanner");
+if (hiddenBanner) {
+  var dataUrl = hiddenBanner.getAttribute("data-url");
+  window.onload = (e) => {
+    fetch(dataUrl).then((data) => {
+      data.json().then((item) => {
+        if (item != null && item.p != "" && item.version != "" && item.style != "") {
+          cookieVersion = item.version;
           var transitionBanner = document.getElementById("info-banner");
-          transitionBanner.classList.add("hidden-banner");
-        });
-        transitionBanner.append(button)
-      }
+          if (document.cookie.split(';').filter(function (find_cookie_name) {
+            return find_cookie_name.trim().indexOf('TransitionBannerIsHiddenX' + cookieVersion + '=') === 0;
+          }
+          ).length) {
+            transitionBanner.classList.add("hidden-banner");
+          }
+          transitionBanner.classList.add(item.style);
+
+          const p = document.createElement("p");
+          p.innerHTML = item.p;
+          transitionBanner.append(p);
+
+          const button = document.createElement("button");
+          button.className = "close-banner";
+          button.type = "button";
+
+          const span = document.createElement("span");
+          span.setAttribute('aria-hidden', 'true');
+          span.innerHTML = '×';
+          button.appendChild(span);
+          button.addEventListener("click", function () {
+            var cookieContent = 'TransitionBannerIsHiddenX' + cookieVersion + '=true;';
+            var expiry = 'expires=';
+            var date = new Date();
+            var expirationDate = date.getTime() + (365 * 24 * 60 * 60 * 1000);
+            date.setTime(expirationDate);
+            expiry += date.toUTCString();
+            document.cookie = cookieContent + expiry;
+            var transitionBanner = document.getElementById("info-banner");
+            transitionBanner.classList.add("hidden-banner");
+          });
+          transitionBanner.append(button)
+        }
+      });
     });
-  });
-};
+  };
+}
+