fix(docs): css improvements

Author: hawkeye64

docs/src/css/app.sass

@@ -6,16 +6,25 @@
 
 \:root
   --background-color                       : transparent
+  --background-color-dark                  : transparent
   --text-color                             : rgb(33,118,210)
+  --text-color-dark                        : rgb(204,231,255)
   --border-color                           : transparent
+  --border-color-dark                      : transparent
 
   --text-color-hover                       : rgb(33,118,210)
+  --text-color-hover-dark                  : rgb(204,231,255)
   --background-color-hover                 : transparent
+  --background-color-hover-dark            : transparent
   --border-color-hover                     : transparent
+  --border-color-hover-dark                : transparent
 
   --text-color-active                      : rgb(33,118,210)
+  --text-color-active-dark                 : rgb(255,255,255)
   --background-color-active                : rgba(33,118,210, .08)
+  --background-color-active-dark           : rgba(204,231,255, .4)
   --border-color-active                    : transparent
+  --border-color-active-dark               : transparent
 
   // scrollbars
   --markdown-scrollbar-width-height        : 10px
@@ -279,6 +288,47 @@ kbd
   .q-item.q-router-link--active .q-item__label--caption
     color: rgba(0,140,200,.8)
 
+  .button
+    border: 1px solid var(--border-color-dark)
+    color: var(--text-color-dark)
+    background: var(--background-color-dark)
+
+  .select, input[type="radio"]
+    border: 1px solid var(--border-color-dark)
+    color: var(--text-color-dark)
+    background: var(--background-color-dark)
+
+    &:hover,
+    &:active,
+    &:focus
+      color: var(--text-color-hover-dark)
+      background: var(--background-color-hover-dark)
+
+  .toc .q-item,
+  .menu .q-item
+    border: 1px solid var(--border-color-dark)
+    color: var(--text-color-dark)
+    background: var(--background-color-dark)
+
+  .toc .q-item.q-item--active,
+  .toc .q-item.q-router-link--active,
+  .menu .q-item.q-item--active,
+  .menu .q-item.q-router-link--active
+    border: 1px solid var(--border-color-active-dark)
+    color: var(--text-color-active-dark)
+    background: var(--background-color-active-dark)
+
+    &:hover,
+    &:focus
+      border: 1px solid var(--border-color-hover-dark)
+      color: var(--text-color-hover-dark)
+      background: var(--background-color-hover-dark)
+
+    &:active
+      border: 1px solid var(--border-color-active-dark)
+      color: var(--text-color-active-dark)
+      background: var(--background-color-active-dark)
+
 .toc .q-item
   border-radius: 10px 0 0 10px
   margin-top: 1px

docs/src/css/markdown.sass

@@ -6,33 +6,32 @@
   code, pre
     font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace
 
-  pre
-    border-radius: $generic-border-radius
-    padding: 5px
-    margin: 0
-    background-size: 1.5em 1.5em
-    background-origin: content-box
-    background-attachment: local
-    max-height: inherit
-    height: inherit
-    display: block
-    overflow: auto
-    position: relative
-    font-size: 12px
-    background: $blue-grey-1
-    color: $grey-10
-    text-align: left
-    white-space: pre
-    word-spacing: normal
-    word-break: normal
-    word-wrap: normal
-    line-height: 1.5em
-    tab-size: 4
-    hyphens: none
+  // pre
+  //   border-radius: $generic-border-radius
+  //   padding: 5px
+  //   margin: 0
+  //   background-size: 1.5em 1.5em
+  //   background-origin: content-box
+  //   background-attachment: local
+  //   max-height: inherit
+  //   height: inherit
+  //   display: block
+  //   overflow: auto
+  //   position: relative
+  //   font-size: 12px
+  //   background: $blue-grey-1
+  //   color: $grey-10
+  //   text-align: left
+  //   white-space: pre
+  //   word-spacing: normal
+  //   word-break: normal
+  //   word-wrap: normal
+  //   line-height: 1.5em
+  //   tab-size: 4
+  //   hyphens: none
 
   pre code
-    border-radius: 0
-    width: max-content
+    width: 100%
 
   &--heading
     cursor: pointer
@@ -257,7 +256,7 @@
     width: 100%
     min-width: 0
 
-  &--code,
+  // &--code,
   &--code__inner
     margin: 0
     position: relative