Merge pull request #3219 from Blargian/fix_menu_styling

Improve menu styling

Author: gingerwizard

src/components/DocsCategoryDropdown/styles.module.css

@@ -134,10 +134,6 @@
   color: var(--ifm-toc-link-color);
 }
 
-[data-theme="dark"] .docsNavMenuDescription {
-  color: #C0C0C0;
-}
-
 .docsNavMenuDivider {
   border-top: 1px solid var(--click-color-stroke);
   width: 100%;
@@ -156,22 +152,32 @@
 }
 
 .docsNavMenuItem {
-  padding: 8px;
+  margin: 3px;
+  padding: 5px;
   max-width: 100%;
   word-wrap: break-word;
   word-break: break-word;
   white-space: normal;
   overflow-wrap: break-word;
-  border-radius: 4px;
+  border-radius: 10px;
+}
+
+[data-theme="dark"] .docsNavMenuItem:hover {
+  background-color: #272725;
 }
 
 .docsNavHovered {
-  background-color: rgb(245, 245, 245);
   cursor: pointer;
 }
 
 [data-theme="dark"] .docsNavHovered {
   background-color: #1F1F1C;
+  color: yellow;
+}
+
+[data-theme="light"] .docsNavHovered {
+  background-color: #f5f5f5;
+  color: yellow;
 }
 
 .docsNavItemTitle {
@@ -182,22 +188,19 @@
 
 [data-theme="dark"] .docsNavItemTitle {
   font-size: 0.875rem;
-  color: #FCFF74;
+  color: white;
+}
+
+[data-theme="dark"] .docsNavItemTitle:hover {
+  font-size: 0.875rem;
+  color: yellow;
 }
 
 .docsNavItemDescription {
   color: var(--ifm-toc-link-color);
   font-size: 0.75rem;
 }
 
-[data-theme="dark"] .docsNavItemDescription {
-  color: #C0C0C0;
-}
-
-[data-theme="dark"] .docsNavMenuItem:hover .docsNavItemDescription {
-  color: white;
-}
-
 @media screen and (max-width: 1100px) {
   .docsNavDropdownContainer {
     padding: 0px;