From 1c02d1ff877460674601a872cbe7b561dcb163b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C4=93teris=20Caune?= Date: Mon, 21 Jun 2021 15:57:50 +0300 Subject: [PATCH] Fix dark mode bugs --- static/css/base.css | 1 - static/css/bootstrap-colors.css | 4 ---- static/css/bootstrap.css | 4 ++-- static/css/selectize.dark.css | 3 --- static/css/selectize.hc.css | 21 ++++++++------------- static/css/variables.css | 2 ++ stuff/bootstrap/forms.less | 2 +- stuff/bootstrap/variables.less | 2 +- stuff/selectize/selectize.hc.less | 3 ++- stuff/selectize/selectize.less | 16 ++++++++-------- templates/base.html | 1 - 11 files changed, 24 insertions(+), 35 deletions(-) delete mode 100644 static/css/selectize.dark.css diff --git a/static/css/base.css b/static/css/base.css index 2f521e5a..ced7f5a8 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -4,7 +4,6 @@ html { } body { - color: var(--text-color); /* Margin bottom by footer height */ margin-bottom: 84px; } diff --git a/static/css/bootstrap-colors.css b/static/css/bootstrap-colors.css index 76022105..833f2b58 100644 --- a/static/css/bootstrap-colors.css +++ b/static/css/bootstrap-colors.css @@ -38,7 +38,3 @@ .panel-success { border-color: var(--alert-success-border); } - -.help-block { - color: var(--text-muted); -} diff --git a/static/css/bootstrap.css b/static/css/bootstrap.css index ed1ff071..f14a2576 100644 --- a/static/css/bootstrap.css +++ b/static/css/bootstrap.css @@ -271,7 +271,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; - color: #333333; + color: var(--text-color); background-color: var(--body-bg); } input, @@ -2180,7 +2180,7 @@ select[multiple].input-lg { display: block; margin-top: 5px; margin-bottom: 10px; - color: #737373; + color: var(--text-muted); } @media (min-width: 768px) { .form-inline .form-group { diff --git a/static/css/selectize.dark.css b/static/css/selectize.dark.css deleted file mode 100644 index 94306d02..00000000 --- a/static/css/selectize.dark.css +++ /dev/null @@ -1,3 +0,0 @@ -.selectize-input input { - color: var(--input-color); -} diff --git a/static/css/selectize.hc.css b/static/css/selectize.hc.css index 7ab5ccce..0f532fe5 100644 --- a/static/css/selectize.hc.css +++ b/static/css/selectize.hc.css @@ -19,7 +19,7 @@ .selectize-dropdown, .selectize-input, .selectize-input input { - color: #333333; + color: var(--text-color); font-family: inherit; font-size: inherit; line-height: 20px; @@ -77,8 +77,8 @@ cursor: pointer; margin: 0 3px 3px 0; padding: 2px 6px; - background: #efefef; - color: #333333; + background: var(--selectize-tag-bg); + color: var(--text-color); border: 0 solid rgba(0, 0, 0, 0); } .selectize-control.multi .selectize-input > div.active { @@ -86,12 +86,6 @@ color: #fff; border: 0 solid rgba(0, 0, 0, 0); } -.selectize-control.multi .selectize-input.disabled > div, -.selectize-control.multi .selectize-input.disabled > div.active { - color: #808080; - background: #ffffff; - border: 0 solid rgba(77, 77, 77, 0); -} .selectize-input > input { display: inline-block !important; padding: 0 !important; @@ -155,7 +149,8 @@ border-radius: 1px; } .selectize-dropdown .option, -.selectize-dropdown .optgroup-header { +.selectize-dropdown .optgroup-header, +.selectize-dropdown .create { padding: 3px 12px; } .selectize-dropdown .option, @@ -183,7 +178,7 @@ color: var(--text-color); } .selectize-dropdown .create { - color: rgba(51, 51, 51, 0.5); + color: var(--text-color); } .selectize-dropdown-content { overflow-y: auto; @@ -210,12 +205,12 @@ height: 0; border-style: solid; border-width: 5px 5px 0 5px; - border-color: #333333 transparent transparent transparent; + border-color: var(--text-color) transparent transparent transparent; } .selectize-control.single .selectize-input.dropdown-active:after { margin-top: -4px; border-width: 0 5px 5px 5px; - border-color: transparent transparent #333333 transparent; + border-color: transparent transparent var(--text-color) transparent; } .selectize-control.rtl.single .selectize-input:after { left: 17px; diff --git a/static/css/variables.css b/static/css/variables.css index 08f68061..438c86ce 100644 --- a/static/css/variables.css +++ b/static/css/variables.css @@ -50,6 +50,7 @@ --plan-supporter-border: #FFE082; --plan-supporter-color: #1d190f; --pre-bg: #f5f5f5; + --selectize-tag-bg: #efefef; --small-text-color: #111; --state-info-bg: #d9edf7; --state-info-border: #bce8f1; @@ -122,6 +123,7 @@ body.dark { --plan-supporter-border: #FFE082; --plan-supporter-color: #fff0c4; --pre-bg: #29292c; + --selectize-tag-bg: #6f6f7f; --small-text-color: #f0f0f2; --state-info-bg: #123051; --state-info-border: #163c64; diff --git a/stuff/bootstrap/forms.less b/stuff/bootstrap/forms.less index 906e63af..c2862d5a 100644 --- a/stuff/bootstrap/forms.less +++ b/stuff/bootstrap/forms.less @@ -455,7 +455,7 @@ input[type="checkbox"] { display: block; // account for any element using help-block margin-top: 5px; margin-bottom: 10px; - color: lighten(@text-color, 25%); // lighten the text some for contrast + color: var(--text-muted); } diff --git a/stuff/bootstrap/variables.less b/stuff/bootstrap/variables.less index 4dad1335..34f38fce 100755 --- a/stuff/bootstrap/variables.less +++ b/stuff/bootstrap/variables.less @@ -28,7 +28,7 @@ //** Background color for ``. @body-bg: var(--body-bg); //** Global text color on ``. -@text-color: @gray-dark; +@text-color: var(--text-color); //** Global textual link color. @link-color: var(--link-color); diff --git a/stuff/selectize/selectize.hc.less b/stuff/selectize/selectize.hc.less index c550caf0..5039dc02 100644 --- a/stuff/selectize/selectize.hc.less +++ b/stuff/selectize/selectize.hc.less @@ -29,7 +29,8 @@ @selectize-color-input-error: @state-danger-text; @selectize-color-input-error-focus: darken(@selectize-color-input-error, 10%); @selectize-color-disabled: @input-bg; -@selectize-color-item: #efefef; +@selectize-color-dropdown-item-create-text: @text-color; +@selectize-color-item: var(--selectize-tag-bg); @selectize-color-item-border: rgba(0,0,0,0); @selectize-color-item-active: @component-active-bg; @selectize-color-item-active-text: #fff; diff --git a/stuff/selectize/selectize.less b/stuff/selectize/selectize.less index ad1b10a2..b9b32e0c 100644 --- a/stuff/selectize/selectize.less +++ b/stuff/selectize/selectize.less @@ -22,7 +22,7 @@ @selectize-color-dropdown-border-top: #f0f0f0; @selectize-color-dropdown-item-active: #f5fafd; @selectize-color-dropdown-item-active-text: #495c68; -@selectize-color-dropdown-item-create-text: rgba(red(@selectize-color-text), green(@selectize-color-text), blue(@selectize-color-text), 0.5); +@selectize-color-dropdown-item-create-text: @selectize-color-text; @selectize-color-dropdown-item-create-active-text: @selectize-color-dropdown-item-active-text; @selectize-color-optgroup: @selectize-color-dropdown; @selectize-color-optgroup-text: @selectize-color-text; @@ -157,13 +157,13 @@ border: @selectize-width-item-border solid @selectize-color-item-active-border; } } - .selectize-control.multi &.disabled > div { - &, &.active { - color: lighten(desaturate(@selectize-color-item-text, 100%), @selectize-lighten-disabled-item-text); - background: lighten(desaturate(@selectize-color-item, 100%), @selectize-lighten-disabled-item); - border: @selectize-width-item-border solid lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border); - } - } + // .selectize-control.multi &.disabled > div { + // &, &.active { + // color: lighten(desaturate(@selectize-color-item-text, 100%), @selectize-lighten-disabled-item-text); + // background: lighten(desaturate(@selectize-color-item, 100%), @selectize-lighten-disabled-item); + // border: @selectize-width-item-border solid lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border); + // } + // } > input { &::-ms-clear { display: none; diff --git a/templates/base.html b/templates/base.html index d667cd3b..e9afb8b3 100644 --- a/templates/base.html +++ b/templates/base.html @@ -22,7 +22,6 @@ -