Fix some Bootstrap dark theme issues

MauricioFauth · MauricioFauth · commit 7c241faf7276 · 2023-05-09T12:44:37.000-03:00
Related to #18368 Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
diff --git a/public/themes/bootstrap/scss/_codemirror.scss b/public/themes/bootstrap/scss/_codemirror.scss
@@ -5,10 +5,17 @@ $textarea-rows: 15;
   height: 20rem;
   direction: ltr;
   border: $card-border-width solid $card-border-color;
+  background-color: var(--#{$prefix}body-bg);
+  color: var(--#{$prefix}body-color);
 
   @include border-radius($card-border-radius);
 }
 
+.CodeMirror-gutters {
+  border-right-color: var(--#{$prefix}border-color);;
+  background-color: rgba(var(--#{$prefix}body-color-rgb), .03);
+}
+
 // Code mirror default style (do not affect the console style)
 .CodeMirror.cm-s-default {
   // @see: issue #17705
diff --git a/public/themes/bootstrap/scss/_common.scss b/public/themes/bootstrap/scss/_common.scss
@@ -389,7 +389,7 @@ div.container.modal_form {
   margin: 0 auto;
   width: 30em;
   text-align: center;
-  background: $white;
+  background: var(--#{$prefix}body-bg);
   z-index: 999;
 }
 
@@ -399,7 +399,7 @@ div#modalOverlay {
   left: 0;
   height: 100%;
   width: 100%;
-  background: $white;
+  background: var(--#{$prefix}body-bg);
   z-index: 900;
 }
 
diff --git a/public/themes/bootstrap/scss/_navigation.scss b/public/themes/bootstrap/scss/_navigation.scss
@@ -387,10 +387,10 @@ li.fast_filter {
 }
 
 #pma_navigation_collapser {
-  width: 20px;
-  height: 22px;
-  line-height: 22px;
-  background: #eee;
+  width: 22px;
+  height: 40px;
+  line-height: 40px;
+  background-color: #eee;
   color: #555;
   font-weight: bold;
   position: fixed;
@@ -404,6 +404,14 @@ li.fast_filter {
   border: 1px solid rgba($black, 0.125);
 }
 
+@include color-mode(dark) {
+  #pma_navigation_collapser {
+    background-color: #343a40;
+    color: #eee;
+    text-shadow: 0 1px 0 $black;
+  }
+}
+
 // Quick warp links
 .pma_quick_warp {
   margin-top: 5px;
