diff --git a/CHANGELOG.md b/CHANGELOG.md index 477743c9..52afaab7 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/static/css/bootstrap.css b/static/css/bootstrap.css index f14a2576..420771db 100644 --- a/static/css/bootstrap.css +++ b/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); diff --git a/static/css/docs_cron.css b/static/css/docs_cron.css index b318da8e..16d10933 100644 --- a/static/css/docs_cron.css +++ b/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); } \ No newline at end of file diff --git a/static/css/selectize.hc.css b/static/css/selectize.hc.css index 0f532fe5..b3c688a8 100644 --- a/static/css/selectize.hc.css +++ b/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, diff --git a/static/css/variables.css b/static/css/variables.css index 64d0ac2c..aafa3ed1 100644 --- a/static/css/variables.css +++ b/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; diff --git a/stuff/bootstrap/variables.less b/stuff/bootstrap/variables.less index 34f38fce..813022ac 100755 --- a/stuff/bootstrap/variables.less +++ b/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;