- Added changes made by @Hafiidz on the ui-improvements branch to the css for the streamli-on-hover-tabs component.

frontend/css/streamlit.main.css

@@ -1,7 +1,95 @@
+/***********************************************************
+* Additional CSS for streamlit builtin components          *
+************************************************************/
+
+/* Tab name (e.g. Text-to-Image) */
 button[data-baseweb="tab"] {
-  font-size: 25px;
+  font-size: 25px; //improve legibility
-}
-.css-du1fp8 {
-    justify-content: center;
 }
 
+/* Image Container (only appear after run finished) */
+.css-du1fp8 {
+  justify-content: center; //center the image, especially better looks in wide screen
+}
+
+/* Streamlit header */
+.css-1avcm0n {
+  background-color: transparent;
+}
+
+/* Main streamlit container (below header) */
+.css-18e3th9 {
+  padding-top: 2rem; //reduce the empty spaces
+}
+
+/* @media only for widescreen, to ensure enough space to see all */
+@media (min-width: 1024px) {
+  /* Main streamlit container (below header) */
+  .css-18e3th9 {
+    padding-top: 0px; //reduce the empty spaces, can go fully to the top on widescreen devices
+  }
+}
+
+/***********************************************************
+* Additional CSS for streamlit custom/3rd party components *
+************************************************************/
+/* For stream_on_hover */
+section[data-testid="stSidebar"] > div:nth-of-type(1) {
+  background-color: #111;
+}
+
+button[kind="header"] {
+  background-color: transparent;
+  color: rgb(180, 167, 141);
+}
+
+@media (hover) {
+  /* header element */
+  header[data-testid="stHeader"] {
+    /* display: none;*/ /*suggested behavior by streamlit hover components*/
+    pointer-events: none; /* disable interaction of the transparent background */
+  }
+
+  /* The button on the streamlit navigation menu  */
+  button[kind="header"] {
+    /* display: none;*/ /*suggested behavior by streamlit hover components*/
+    pointer-events: auto; /* enable interaction of the button even if parents intereaction disabled */
+  }
+
+  /* The navigation menu specs and size */
+  section[data-testid="stSidebar"] > div {
+    height: 100%;
+    width: 95px !important;
+    min-width: 95px !important;
+    position: relative;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s ease;
+    padding-top: 60px;
+    white-space: nowrap;
+  }
+
+  /* The navigation menu open and close on hover and size */
+  section[data-testid="stSidebar"] > div:hover {
+    width: 300px !important;
+  }
+
+  /* added to avoid main sectors (all element to the right of sidebar from) moving */
+  section[data-testid="stSidebar"] {
+    width: 95px !important;
+    min-width: 95px !important;
+  }
+}
+
+@media (max-width: 272px) {
+  section[data-testid="stSidebar"] > div {
+    width: 15rem;
+  }
+}
+
+/***********************************************************
+*  Additional CSS for other elements                    
+************************************************************/