styles tweaks and fixes

Author: Simek

website/src/css/customTheme.scss

@@ -23,9 +23,13 @@
   --docs-rating-background: #64d7ff33;
 
   --doc-sidebar-width: 266px !important;
-  --docsearch-container-background: rgba(32, 35, 42, 0.6);
   --rn-note-background: rgba(255, 229, 100, 0.25);
 
+  --docsearch-container-background: rgba(32, 35, 42, 0.6);
+  --docsearch-key-shadow:
+    inset 0 -2px 0 0 var(--ifm-hr-border-color), inset 0 0 1px 1px #fff,
+    0 1px 2px 1px rgba(30, 35, 90, 0.3);
+
   --ifm-font-family-base:
     "Optimistic Display", system-ui, -apple-system, sans-serif;
   --ifm-font-family-monospace:
@@ -132,8 +136,8 @@ html[data-theme="dark"] {
   --docsearch-footer-background: var(--dark);
   --docsearch-key-gradient: var(--deepdark);
   --docsearch-key-shadow:
-    inset 0 -2px 0 0 var(--light), inset 0 0 1px 1px var(--light),
-    0 1px 2px 1px var(--ifm-table-border-color);
+    inset 0 -2px 0 0 var(--dark), inset 0 0 1px 1px var(--light),
+    0 2px 2px 0 rgba(3, 4, 9, 0.3);
   --docsearch-container-background: rgba(0, 0, 0, 0.6);
 
   --logo: #58c4dc;
@@ -289,6 +293,19 @@ hr {
     vertical-align: initial;
   }
 
+  kbd {
+    border: 0;
+    top: -1px;
+    margin: 0 2px;
+    position: relative;
+    padding: 0.2rem 0.3rem;
+    background: none;
+    box-shadow: var(--docsearch-key-shadow);
+    display: inline-block;
+    text-align: center;
+    min-width: 24px;
+  }
+
   blockquote {
     > :last-child {
       margin-bottom: 0;
@@ -511,7 +528,7 @@ html[data-theme="dark"] .hash-link {
 article .badge {
   font-weight: 500;
   border-radius: 16px;
-  margin-bottom: 4px;
+  margin-bottom: 6px;
 }
 
 html[data-theme="dark"] article .badge {
@@ -527,7 +544,7 @@ html[data-theme="dark"] article .badge {
   font-size: var(--ifm-blockquote-font-size);
   margin-bottom: var(--ifm-paragraph-margin-bottom);
   padding: 28px;
-  border-radius: 20px;
+  border-radius: var(--ifm-alert-border-radius);
   border: 1px solid var(--ifm-alert-background-color-highlight);
   box-shadow: none;
 
@@ -611,7 +628,7 @@ html[data-theme="dark"] .homepage {
   font-size: 15px;
   line-height: var(--ifm-pre-line-height);
   text-align: center;
-  border-radius: 20px;
+  border-radius: var(--ifm-alert-border-radius);
 
   a {
     color: var(--ifm-font-color-base) !important;
@@ -845,6 +862,7 @@ a[class*="tagRegular"] {
   .DocSearch-Button-Key {
     font-size: 12px;
     font-weight: 600;
+    background: none;
   }
 
   .DocSearch-Button-Keys {
@@ -1192,6 +1210,7 @@ html[data-theme="dark"] .menu {
 div[class^="tableOfContents"] {
   min-width: 100%;
   width: 100%;
+  top: calc(var(--ifm-navbar-height) + 34px);
 }
 
 .table-of-contents__left-border {
@@ -1222,7 +1241,7 @@ div[class^="tableOfContents"] {
     height: 6px;
     border-radius: 100%;
     left: -2px;
-    top: 11px;
+    top: 10px;
     white-space: nowrap;
     overflow: hidden;
     color: transparent;
@@ -1231,7 +1250,7 @@ div[class^="tableOfContents"] {
     &.required {
       position: absolute;
       left: -2px;
-      top: 11px;
+      top: 10px;
       background: #fa5035;
     }
 
@@ -1536,7 +1555,7 @@ div[class*="announcementBarContent"] {
   margin-bottom: 2em;
   position: relative;
   overflow: hidden;
-  width: calc(100%);
+  width: 100%;
   color: var(--dark);
   border-radius: var(--ifm-alert-border-radius);
 }
@@ -1694,6 +1713,7 @@ td .color-box {
     color: #fa5035;
     border-color: #fa5035;
     border-radius: 32px;
+    font-weight: 600;
   }
 }
 
@@ -1747,7 +1767,6 @@ td .label {
 
   &.required {
     margin-left: 6px;
-    letter-spacing: 0.02rem;
     padding: 0 6px;
     border-width: 1px;
     margin-right: 0;
@@ -1891,7 +1910,7 @@ html[data-theme="dark"] .component {
   color: var(--ifm-link-color);
   line-height: 32px;
   font-weight: 500;
-  border-radius: 20px;
+  border-radius: var(--ifm-alert-border-radius);
 
   svg {
     height: 1.5em;