Fix styles in legacy browser w/o CSS var support

Author: jhildenbiddle

src/themes/basic/_coverpage.styl

@@ -63,11 +63,13 @@ section.cover
     padding 0
 
   .cover-main > p:last-child a
+    border-color $color-primary
     border-color var(--theme-color, $color-primary)
     border-radius 2rem
     border-style solid
     border-width 1px
     box-sizing border-box
+    color $color-primary
     color var(--theme-color, $color-primary)
     display inline-block
     font-size 1.05rem
@@ -78,6 +80,7 @@ section.cover
     transition all 0.15s ease
 
     &:last-child
+      background-color $color-primary
       background-color var(--theme-color, $color-primary)
       color #fff
 
@@ -89,8 +92,10 @@ section.cover
       color inherit
 
   blockquote > p > a
+    border-bottom 2px solid $color-primary
     border-bottom 2px solid var(--theme-color, $color-primary)
     transition color 0.3s
 
     &:hover
+      color $color-primary
       color var(--theme-color, $color-primary)

src/themes/basic/_layout.styl

@@ -26,6 +26,7 @@ div#app
   vertical-align middle
 
 .progress
+  background-color $color-primary
   background-color var(--theme-color, $color-primary)
   height 2px
   left 0px
@@ -37,9 +38,11 @@ div#app
   z-index 999999
 
 .search a:hover
+  color $color-primary
   color var(--theme-color, $color-primary)
 
 .search .search-keyword
+  color $color-primary
   color var(--theme-color, $color-primary)
   font-style normal
   font-weight bold
@@ -108,10 +111,13 @@ li input[type='checkbox']
     transition color 0.3s
 
     &:hover
+      color $color-primary
       color var(--theme-color, $color-primary)
 
     &.active
+      border-bottom 2px solid $color-primary
       border-bottom 2px solid var(--theme-color, $color-primary)
+      color $color-primary
       color var(--theme-color, $color-primary)
 
   /* navbar dropdown */
@@ -172,6 +178,7 @@ li input[type='checkbox']
 
   svg
     color $color-bg
+    fill $color-primary
     fill var(--theme-color, $color-primary)
     height 80px
     width 80px
@@ -284,6 +291,7 @@ main.hidden
     opacity 0.4
 
   span
+    background-color $color-primary
     background-color var(--theme-color, $color-primary)
     display block
     margin-bottom 4px

src/themes/buble.styl

@@ -40,6 +40,7 @@ $sidebar-width = 16rem
   font-weight 600
 
 .markdown-section a
+  color $color-primary
   color var(--theme-color, $color-primary)
 
 .markdown-section p, .markdown-section ul, .markdown-section ol
@@ -83,6 +84,7 @@ $sidebar-width = 16rem
   margin 0
 
 .markdown-section blockquote
+  border-left 4px solid $color-primary
   border-left 4px solid var(--theme-color, $color-primary)
   color #858585
   margin 2em 0

src/themes/dark.styl

@@ -34,6 +34,7 @@ body
     padding 0
 
   ul li.active > a
+    color $color-primary
     color var(--theme-color, $color-primary)
     font-weight 600
 
@@ -43,6 +44,7 @@ body
   font-weight 600
 
 .markdown-section a
+  color $color-primary
   color var(--theme-color, $color-primary)
   font-weight 600
 
@@ -79,6 +81,7 @@ body
   padding-left 1.5rem
 
 .markdown-section blockquote
+  border-left 4px solid $color-primary
   border-left 4px solid var(--theme-color, $color-primary)
   color #858585
   margin 2em 0
@@ -138,6 +141,7 @@ body
   color #2973b7
 
 .token.string
+  color $color-primary
   color var(--theme-color, $color-primary)
 
 .token.selector
@@ -150,6 +154,7 @@ body
   color #22a2c9
 
 .token.attr-value, .token.control, .token.directive, .token.unit
+  color $color-primary
   color var(--theme-color, $color-primary)
 
 .token.keyword

src/themes/dolphin.styl

@@ -36,6 +36,7 @@ body
 
   ul li.active > a
     border-right 2px solid
+    color $color-primary
     color var(--theme-color, $color-primary)
     font-weight 600
 
@@ -52,9 +53,10 @@ body
   font-weight 600
 
 .markdown-section a
+  color $color-primary
   color var(--theme-color, $color-primary)
   font-weight 600
-  
+
   &:hover
       text-decoration underline
 
@@ -91,6 +93,7 @@ body
   padding-left 1.5rem
 
 .markdown-section blockquote
+  border-left 4px solid $color-primary
   border-left 4px solid var(--theme-color, $color-primary)
   color #858585
   margin 2em 0
@@ -150,6 +153,7 @@ body
   color #2973b7
 
 .token.string
+  color $color-primary
   color var(--theme-color, $color-primary)
 
 .token.selector
@@ -162,6 +166,7 @@ body
   color #22a2c9
 
 .token.attr-value, .token.control, .token.directive, .token.unit
+  color $color-primary
   color var(--theme-color, $color-primary)
 
 .token.keyword, .token.function

src/themes/vue.styl

@@ -36,6 +36,7 @@ body
 
   ul li.active > a
     border-right 2px solid
+    color $color-primary
     color var(--theme-color, $color-primary)
     font-weight 600
 
@@ -52,6 +53,7 @@ body
   font-weight 600
 
 .markdown-section a
+  color $color-primary
   color var(--theme-color, $color-primary)
   font-weight 600
 
@@ -88,6 +90,7 @@ body
   padding-left 1.5rem
 
 .markdown-section blockquote
+  border-left 4px solid $color-primary
   border-left 4px solid var(--theme-color, $color-primary)
   color #858585
   margin 2em 0
@@ -204,6 +207,7 @@ body
   color #2973b7
 
 .token.string
+  color $color-primary
   color var(--theme-color, $color-primary)
 
 .token.selector
@@ -216,6 +220,7 @@ body
   color #22a2c9
 
 .token.attr-value, .token.control, .token.directive, .token.unit
+  color $color-primary
   color var(--theme-color, $color-primary)
 
 .token.keyword, .token.function