improve styling

ClickHouse · Feb 4, 2025 · d9d80ae · d9d80ae
1 parent b43e738
commit d9d80ae
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/src/components/DocsCategoryDropdown/styles.module.css b/src/components/DocsCategoryDropdown/styles.module.css
@@ -11,11 +11,22 @@
   &:hover,
   &.hover {
     background-color: var(--ch-nav-v2-link-hover-bg);
-    color: var(--ch-nav-v2-link-hover-color) !important;
-    text-decoration: none
+    text-decoration: none;
+    color: #FAFF69;
   }
 }
 
+.docsNavDropdownContainer::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -30px; /* Adjust this for the hover area extension */
+  width: 100%;
+  height: 30px; /* Must match the bottom value */
+  pointer-events: auto;
+}
+
+
 .docsNavDropdownToolbarLink, .docsNavDropdownToolbarTopLevelLink {
   font-weight: bold;
   font-size: 0.875rem;
@@ -42,7 +53,7 @@
 }
 
 [data-theme="dark"] .docsNavDropdownToolbarLink:hover, [data-theme="dark"] .docsNavDropdownToolbarTopLevelLink:hover {
-  color: white;
+  color: #FAFF69;
 }
 
 .docsNavSelected {
@@ -52,14 +63,14 @@
 }
 
 [data-theme="dark"] .docsNavSelected {
-  color: white; 
+  color: #FAFF69;
   text-decoration: underline;
   text-underline-offset: 4px;
 }
 
 .docsNavDropdownMenu {
   position: absolute;
-  top: 100%;
+  top: calc(100% + 30px);
   left: 0;
   z-index: 9999 !important;
   min-width: 300px;
@@ -71,6 +82,7 @@
   border-radius: 10px;
   opacity: 1;
   transition: opacity 0.3s ease-in-out;
+  transform: translateY(30px);
 }
 
 @media (max-width: 768px) {

diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -1266,7 +1266,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
 }
 
 /* Fixes for the long menu bar */
-@media (max-width: 1103px) {
+@media (max-width: 1180px) {
 
   .docsNavDropdownContainer_cADf a[href="/docs/knowledgebase"]::before {
     content: "KB";