Fix dark mode styling issues in Cron Syntax Cheatsheet

CHANGELOG.md

@@ -6,6 +6,9 @@ All notable changes to this project will be documented in this file.
 ### Improvements
 - Use multicolor channel icons for better appearance in the dark mode
 
+### Bug Fixes
+- Fix dark mode styling issues in Cron Syntax Cheatsheet
+
 ## v1.21.0 - 2020-07-02
 
 ### Improvements

static/css/bootstrap.css

@@ -4647,16 +4647,16 @@ button.list-group-item-danger.active:focus {
   border-color: var(--border-color);
 }
 .panel-default > .panel-heading {
-  color: #333333;
-  background-color: #f5f5f5;
+  color: var(--text-color);
+  background-color: var(--panel-default-heading-bg);
   border-color: var(--border-color);
 }
 .panel-default > .panel-heading + .panel-collapse > .panel-body {
   border-top-color: var(--border-color);
 }
 .panel-default > .panel-heading .badge {
-  color: #f5f5f5;
-  background-color: #333333;
+  color: var(--panel-default-heading-bg);
+  background-color: var(--text-color);
 }
 .panel-default > .panel-footer + .panel-collapse > .panel-body {
   border-bottom-color: var(--border-color);

static/css/docs_cron.css

@@ -1,7 +1,7 @@
 
 
 .cron-example th {
-    background: #f5f5f5;
+    background: var(--cheatsheet-example-bg);
 }
 
 .cron-example th div {
@@ -24,8 +24,8 @@
     bottom: 15px;
     width: 40%;
 
-    border-left: 2px dotted #ddd;
-    border-bottom: 2px dotted #ddd;
+    border-left: 2px dotted var(--cheatsheet-dotted-color);
+    border-bottom: 2px dotted var(--cheatsheet-dotted-color);
 }
 
 .desc {
@@ -33,7 +33,7 @@
     font-weight: bold;
     font-style: italic;
     font-size: 20px;
-    color: #333;
+    color: var(--text-color);
     padding: 8px;
     margin-bottom: 8px;
 }
@@ -50,5 +50,5 @@
 }
 
 .cron-example td.minor {
-    color: #999;
+    color: var(--text-muted);
 }

static/css/selectize.hc.css

@@ -149,8 +149,7 @@
   border-radius: 1px;
 }
 .selectize-dropdown .option,
-.selectize-dropdown .optgroup-header,
-.selectize-dropdown .create {
+.selectize-dropdown .optgroup-header {
   padding: 3px 12px;
 }
 .selectize-dropdown .option,

static/css/variables.css

@@ -22,6 +22,8 @@
     --btn-remove-hover: #ffebea;
     --channel-off-color: #ddd;
     --channel-off-inside-color: #FFF;
+    --cheatsheet-example-bg: #f5f5f5;
+    --cheatsheet-dotted-color: #ccc;
     --close-color: #000;
     --debug-warning-bg:  #eee;
     --dropdown-bg: #fff;
@@ -41,6 +43,7 @@
     --modal-content-bg: #fff;
     --nav-link-hover-bg: #eee;
     --panel-bg: #fff;
+    --panel-default-heading-bg: #f5f5f5;
     --panel-success-bg: #dff0d8;
     --plan-business-border:  #90CAF9;
     --plan-business-color: #141c22;
@@ -96,6 +99,8 @@ body.dark {
     --btn-remove-hover: #3f1a22;
     --channel-off-color: hsl(240, 6.7%, 23.5%);
     --channel-off-inside-color: hsl(240, 3.7%, 43.5%);
+    --cheatsheet-example-bg: #383840;
+    --cheatsheet-dotted-color: #6f6f7f;
     --close-color: #fff;
     --debug-warning-bg: #60002d;
     --dropdown-bg: hsl(240, 6%, 16%);
@@ -115,6 +120,7 @@ body.dark {
     --modal-content-bg: #1f1f22;
     --nav-link-hover-bg: #383840;
     --panel-bg: hsl(240, 6%, 16%);
+    --panel-default-heading-bg: #383840;
     --panel-success-bg: #165b35;
     --plan-business-border:  #90CAF9;
     --plan-business-color: #e8f2f9;

stuff/bootstrap/variables.less

@@ -713,9 +713,9 @@
 @panel-inner-border:          #ddd;
 @panel-footer-bg:             #f5f5f5;
 
-@panel-default-text:          @gray-dark;
+@panel-default-text:          var(--text-color);
 @panel-default-border:        var(--border-color);
-@panel-default-heading-bg:    #f5f5f5;
+@panel-default-heading-bg:    var(--panel-default-heading-bg);
 
 @panel-primary-text:          #fff;
 @panel-primary-border:        @brand-primary;