From e03e51c450445060272c2d5eb82f494fe2e842e7 Mon Sep 17 00:00:00 2001 From: j433866 Date: Wed, 20 Mar 2019 10:01:19 +0000 Subject: [PATCH] Add styling of checkboxes. Change fonts in solarized themes to match classic. Add styling of input fields to modals --- src/web/stylesheets/components/_operation.css | 42 +++++++++++++++++-- src/web/stylesheets/layout/_modals.css | 31 ++++++++++++++ src/web/stylesheets/themes/_classic.css | 1 + src/web/stylesheets/themes/_dark.css | 1 + src/web/stylesheets/themes/_geocities.css | 1 + src/web/stylesheets/themes/_solarizedDark.css | 7 +++- .../stylesheets/themes/_solarizedLight.css | 7 +++- 7 files changed, 83 insertions(+), 7 deletions(-) diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css index 80fa9658..0669f94f 100755 --- a/src/web/stylesheets/components/_operation.css +++ b/src/web/stylesheets/components/_operation.css @@ -82,7 +82,43 @@ div.toggle-string { .operation .is-focused [class*=' bmd-label'], .operation .is-focused label, .operation .checkbox label:hover { - color: #1976d2; + color: var(--input-highlight-colour); +} + +.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check, +.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before { + border-color: var(--input-border-colour); + color: var(--input-highlight-colour); +} + +.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, +.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before { + border-color: var(--input-highlight-colour); + color: var(--input-highlight-colour); +} + +.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check, +.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before, +.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, +.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before { + border-color: var(--disabled-font-colour); + color: var(--disabled-font-colour); +} + +.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check, +.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before, +.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, +.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before { + border-color: var(--breakpoint-font-colour); + color: var(--breakpoint-font-colour); +} + +.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check, +.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before, +.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, +.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before { + border-color: var(--fc-breakpoint-operation-font-colour); + color: var(--fc-breakpoint-operation-font-colour); } .operation .form-control { @@ -97,7 +133,7 @@ div.toggle-string { .operation .form-control:hover { background-image: - linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px), + linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px), linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px); filter: brightness(97%); } @@ -105,7 +141,7 @@ div.toggle-string { .operation .form-control:focus { background-color: var(--arg-background); background-image: - linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px), + linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px), linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px); filter: brightness(100%); } diff --git a/src/web/stylesheets/layout/_modals.css b/src/web/stylesheets/layout/_modals.css index a49c579d..c1745eeb 100755 --- a/src/web/stylesheets/layout/_modals.css +++ b/src/web/stylesheets/layout/_modals.css @@ -77,3 +77,34 @@ padding: 20px; border-left: 2px solid var(--primary-border-colour); } + +.checkbox label input[type=checkbox]+.checkbox-decorator .check, +.checkbox label input[type=checkbox]+.checkbox-decorator .check::before { + border-color: var(--input-border-colour); + color: var(--input-highlight-colour); +} + +.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, +.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before { + border-color: var(--input-highlight-colour); + color: var(--input-highlight-colour); +} + +.bmd-form-group.is-focused .option-item label { + color: var(--input-highlight-colour); +} + +.bmd-form-group.is-focused [class^='bmd-label'], +.bmd-form-group.is-focused [class*=' bmd-label'], +.bmd-form-group.is-focused [class^='bmd-label'], +.bmd-form-group.is-focused [class*=' bmd-label'], +.bmd-form-group.is-focused label, +.checkbox label:hover { + color: var(--input-highlight-colour); +} + +.bmd-form-group.option-item label+.form-control{ + background-image: + linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px), + linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px); +} \ No newline at end of file diff --git a/src/web/stylesheets/themes/_classic.css b/src/web/stylesheets/themes/_classic.css index d2cdfd7d..08c5ef75 100755 --- a/src/web/stylesheets/themes/_classic.css +++ b/src/web/stylesheets/themes/_classic.css @@ -129,4 +129,5 @@ --code-background: #f9f2f4; --code-font-colour: #c7254e; --input-highlight-colour: #1976d2; + --input-border-colour: #424242; } diff --git a/src/web/stylesheets/themes/_dark.css b/src/web/stylesheets/themes/_dark.css index e2b30a34..0ee7e112 100755 --- a/src/web/stylesheets/themes/_dark.css +++ b/src/web/stylesheets/themes/_dark.css @@ -125,4 +125,5 @@ --code-background: #0e639c; --code-font-colour: #fff; --input-highlight-colour: #1976d2; + --input-border-colour: #424242; } diff --git a/src/web/stylesheets/themes/_geocities.css b/src/web/stylesheets/themes/_geocities.css index bc6ecb1d..d0ede2d7 100755 --- a/src/web/stylesheets/themes/_geocities.css +++ b/src/web/stylesheets/themes/_geocities.css @@ -125,4 +125,5 @@ --code-background: black; --code-font-colour: limegreen; --input-highlight-colour: limegreen; + --input-border-colour: limegreen; } diff --git a/src/web/stylesheets/themes/_solarizedDark.css b/src/web/stylesheets/themes/_solarizedDark.css index 20c25a68..a10cf44e 100755 --- a/src/web/stylesheets/themes/_solarizedDark.css +++ b/src/web/stylesheets/themes/_solarizedDark.css @@ -24,12 +24,14 @@ --sol-cyan: #2aa198; --sol-green: #859900; - --primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + --primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, "Helvetica Neue", Arial, sans-serif; --primary-font-colour: var(--base0); --primary-font-size: 14px; --primary-line-height: 20px; - --fixed-width-font-family: "Monaco", "Droid Sans Mono", "Consolas", monospace; + --fixed-width-font-family: SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; --fixed-width-font-colour: inherit; --fixed-width-font-size: inherit; @@ -140,4 +142,5 @@ --code-background: var(--base03); --code-font-colour: var(--base1); --input-highlight-colour: var(--base1); + --input-border-colour: var(--base0); } diff --git a/src/web/stylesheets/themes/_solarizedLight.css b/src/web/stylesheets/themes/_solarizedLight.css index 15667bd6..cc0ba43e 100755 --- a/src/web/stylesheets/themes/_solarizedLight.css +++ b/src/web/stylesheets/themes/_solarizedLight.css @@ -24,12 +24,14 @@ --sol-cyan: #2aa198; --sol-green: #859900; - --primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + --primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, "Helvetica Neue", Arial, sans-serif; --primary-font-colour: var(--base00); --primary-font-size: 14px; --primary-line-height: 20px; - --fixed-width-font-family: "Monaco", "Droid Sans Mono", "Consolas", monospace; + --fixed-width-font-family: SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; --fixed-width-font-colour: inherit; --fixed-width-font-size: inherit; @@ -142,4 +144,5 @@ --code-background: var(--base3); --code-font-colour: var(--base01); --input-highlight-colour: var(--base01); + --input-border-colour: var(--base00); }