From 5c5be9142057b4ecead4d6699bdb352e16c7ef0f Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Sat, 22 May 2021 22:29:50 +0200 Subject: [PATCH 01/14] Remove hard-coded values from .button so that dynamic border-radius gets used instead. --- ts/sass/buttons.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/ts/sass/buttons.scss b/ts/sass/buttons.scss index bddc3baff..1afa2385c 100644 --- a/ts/sass/buttons.scss +++ b/ts/sass/buttons.scss @@ -36,11 +36,6 @@ ); box-shadow: 0 0 3px fusion_vars.$button-outline; border: 1px solid fusion_vars.$button-border; - - border-radius: 2px; - padding: 10px; - padding-top: 3px; - padding-bottom: 3px; } button:hover { From 68040fcd241bbcb9bb197fe18a189239d96c4955 Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Sat, 22 May 2021 22:33:24 +0200 Subject: [PATCH 02/14] Remove unnecessary Linux .button styling --- ts/sass/buttons.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/ts/sass/buttons.scss b/ts/sass/buttons.scss index 1afa2385c..3e2a66697 100644 --- a/ts/sass/buttons.scss +++ b/ts/sass/buttons.scss @@ -15,11 +15,6 @@ .isLin { button { font-size: 14px; - - -webkit-appearance: none; - border-radius: 3px; - padding: 5px; - border: 1px solid var(--border); } } From 9a9f5f8dd852c6b7575bb0fac511f13c6d560d7d Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Sat, 22 May 2021 22:40:21 +0200 Subject: [PATCH 03/14] Invert legacy button content in night mode for better visibility. --- ts/editor/legacy.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss index 4fcbdb3f1..ef8c137cb 100644 --- a/ts/editor/legacy.scss +++ b/ts/editor/legacy.scss @@ -17,3 +17,6 @@ width: calc(var(--toolbar-size) - 12px); height: calc(var(--toolbar-size) - 12px); } +.night-mode .topbut { + filter: invert(1); +} From aee1a836d13735fcc7d14799409f074dbf462dca Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Sun, 23 May 2021 00:50:02 +0200 Subject: [PATCH 04/14] Make legacy buttons look like Svelte buttons with extra night mode handling. --- ts/editor/legacy.scss | 49 ++++++++++++++++++++++++++++++++++++++----- 1 file changed, 44 insertions(+), 5 deletions(-) diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss index ef8c137cb..07f9af6da 100644 --- a/ts/editor/legacy.scss +++ b/ts/editor/legacy.scss @@ -2,13 +2,30 @@ .linkb { display: inline-block; - @include button.btn-border-radius; background-color: white; border: 1px solid var(--medium-border); + @include button.btn-border-radius; + min-width: 28px; + margin-left: -1px; + padding: 3.5px; + transition: all 0.2s; } -.night-mode .linkb { - background-color: #666; +.linkb:hover { + background-color: #ebebeb; +} + +.linkb:active, +.linkb:active:hover { + background-color: #ebebeb; + box-shadow: inset 0 + calc(var(--toolbar-size) / 15) + calc(var(--toolbar-size) / 5) + rgba(0, 0, 0, 0.25); +} + +.linkb:active:hover .topbut { + filter: invert(1) grayscale(1) brightness(100); } .topbut { @@ -17,6 +34,28 @@ width: calc(var(--toolbar-size) - 12px); height: calc(var(--toolbar-size) - 12px); } -.night-mode .topbut { - filter: invert(1); + +.nightMode { + .linkb { + background-color: #666; + margin-left: 1px; + } + + .linkb:hover { + background-color: #7a7a7a; + border-color: #7a7a7a; + } + + .linkb:active:hover { + box-shadow: inset 0 + calc(var(--toolbar-size) / 15) + calc(var(--toolbar-size) / 5) + rgba(0, 0, 0, 0.35); + border-color: #525252; + } + + .topbut, + .linkb:active:hover .topbut { + filter: invert(1); + } } From a66f7798f9421b317878bd8363fbd7ddc1fa790a Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Sun, 23 May 2021 01:18:00 +0200 Subject: [PATCH 05/14] Add CSS variable --button-bg might be useful for add-on developers. --- ts/editor/legacy.scss | 3 +-- ts/sass/_vars.scss | 2 ++ 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss index 07f9af6da..b0bc84cde 100644 --- a/ts/editor/legacy.scss +++ b/ts/editor/legacy.scss @@ -2,7 +2,7 @@ .linkb { display: inline-block; - background-color: white; + background-color: var(--button-bg); border: 1px solid var(--medium-border); @include button.btn-border-radius; min-width: 28px; @@ -37,7 +37,6 @@ .nightMode { .linkb { - background-color: #666; margin-left: 1px; } diff --git a/ts/sass/_vars.scss b/ts/sass/_vars.scss index 949307835..d8633e0b3 100644 --- a/ts/sass/_vars.scss +++ b/ts/sass/_vars.scss @@ -5,6 +5,7 @@ --text-fg: black; --window-bg: #ececec; --frame-bg: white; + --button-bg: white; --border: #aaa; --medium-border: #b6b6b6; --faint-border: #e7e7e7; @@ -36,6 +37,7 @@ --text-fg: white; --window-bg: #2f2f31; --frame-bg: #3a3a3a; + --button-bg: #666; --border: #777; --medium-border: #444; --faint-border: #29292b; From fcb6d2a2284b26ca5b287c42504775f9a209e4a1 Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Sun, 23 May 2021 01:52:29 +0200 Subject: [PATCH 06/14] Add myself to contributors --- CONTRIBUTORS | 1 + 1 file changed, 1 insertion(+) diff --git a/CONTRIBUTORS b/CONTRIBUTORS index 5546ac893..350e8fd36 100644 --- a/CONTRIBUTORS +++ b/CONTRIBUTORS @@ -78,6 +78,7 @@ Maksim Abramchuk Benjamin Kulnik Shaun Ren Ryan Greenblatt +Matthias Metelka ******************** From 7cb20b3a9fb4c2c872684bf905b427bdfd6a4f85 Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Sun, 23 May 2021 15:55:22 +0200 Subject: [PATCH 07/14] Remove transition from .linkb to fix blinking --- ts/editor/legacy.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss index b0bc84cde..ce3200bfc 100644 --- a/ts/editor/legacy.scss +++ b/ts/editor/legacy.scss @@ -8,7 +8,6 @@ min-width: 28px; margin-left: -1px; padding: 3.5px; - transition: all 0.2s; } .linkb:hover { @@ -45,6 +44,7 @@ border-color: #7a7a7a; } + .linkb:active, .linkb:active:hover { box-shadow: inset 0 calc(var(--toolbar-size) / 15) From ef476b8fe3fbe2e3f55575654fdedd11d6037aed Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Sun, 23 May 2021 15:58:22 +0200 Subject: [PATCH 08/14] Exclude dropdown items from night mode style Makes dropdown menu look cleaner. :not() selector did not work because the color selector button would be affected for some reason. --- ts/sass/buttons.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/ts/sass/buttons.scss b/ts/sass/buttons.scss index 3e2a66697..05d3b54ba 100644 --- a/ts/sass/buttons.scss +++ b/ts/sass/buttons.scss @@ -53,3 +53,9 @@ padding-right: 15px; color: #e5e5e5; } + +button.dropdown-item { + background: none; + box-shadow: none; + border: none; +} From 2e1066fb351ef75cd15cc80e24686b1f8bbaa47c Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Sun, 23 May 2021 19:39:57 +0200 Subject: [PATCH 09/14] Remove CSS variable button-bg again The variable is not as useful as I thought, since night mode uses a gradient anyway (and day mode is simply white). --- ts/editor/legacy.scss | 2 +- ts/sass/_vars.scss | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss index ce3200bfc..bb2ca9b98 100644 --- a/ts/editor/legacy.scss +++ b/ts/editor/legacy.scss @@ -2,7 +2,7 @@ .linkb { display: inline-block; - background-color: var(--button-bg); + background-color: white; border: 1px solid var(--medium-border); @include button.btn-border-radius; min-width: 28px; diff --git a/ts/sass/_vars.scss b/ts/sass/_vars.scss index d8633e0b3..949307835 100644 --- a/ts/sass/_vars.scss +++ b/ts/sass/_vars.scss @@ -5,7 +5,6 @@ --text-fg: black; --window-bg: #ececec; --frame-bg: white; - --button-bg: white; --border: #aaa; --medium-border: #b6b6b6; --faint-border: #e7e7e7; @@ -37,7 +36,6 @@ --text-fg: white; --window-bg: #2f2f31; --frame-bg: #3a3a3a; - --button-bg: #666; --border: #777; --medium-border: #444; --faint-border: #29292b; From 3813f51627a592b5ae47761ceac67b80f2184480 Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Sun, 23 May 2021 19:41:45 +0200 Subject: [PATCH 10/14] Remove background-color transition from .button but keep color, border-color and box-shadow transition as it is. --- ts/sass/buttons.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/ts/sass/buttons.scss b/ts/sass/buttons.scss index 05d3b54ba..a6624f1b8 100644 --- a/ts/sass/buttons.scss +++ b/ts/sass/buttons.scss @@ -18,6 +18,15 @@ } } +/* override .btn transition +in favor of instant background change */ +button { + transition: + color .15s ease-in-out, + border-color .15s ease-in-out, + box-shadow .15s ease-in-out !important; +} + .nightMode { button { -webkit-appearance: none; From d74135e481419fc9d7755a213166b8a71b6adcaa Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Mon, 24 May 2021 10:37:43 +0200 Subject: [PATCH 11/14] Revert changes, add exceptions to keep the PR changes as contained as possible without the use of !important. --- ts/sass/buttons.scss | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/ts/sass/buttons.scss b/ts/sass/buttons.scss index a6624f1b8..31d3b062d 100644 --- a/ts/sass/buttons.scss +++ b/ts/sass/buttons.scss @@ -15,16 +15,14 @@ .isLin { button { font-size: 14px; + -webkit-appearance: none; + } + + button:not(.btn-group button) { + border-radius: 3px; + padding: 5px; + border: 1px solid var(--border); } -} - -/* override .btn transition -in favor of instant background change */ -button { - transition: - color .15s ease-in-out, - border-color .15s ease-in-out, - box-shadow .15s ease-in-out !important; } .nightMode { @@ -41,7 +39,14 @@ button { box-shadow: 0 0 3px fusion_vars.$button-outline; border: 1px solid fusion_vars.$button-border; } - + + button:not(.btn-group button) { + border-radius: 2px; + padding: 10px; + padding-top: 3px; + padding-bottom: 3px; + } + button:hover { background: fusion_vars.$button-hover-bg; } @@ -62,9 +67,3 @@ button { padding-right: 15px; color: #e5e5e5; } - -button.dropdown-item { - background: none; - box-shadow: none; - border: none; -} From eedc8274da571145f41a7a7041b85b602954e021 Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Mon, 24 May 2021 11:21:42 +0200 Subject: [PATCH 12/14] Use !important instead of :not() selector !important cannot be used with the radius mixin, so I had to state them explicitly. --- ts/editor/legacy.scss | 10 ++++++++-- ts/sass/buttons.scss | 10 +++------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss index bb2ca9b98..45da78103 100644 --- a/ts/editor/legacy.scss +++ b/ts/editor/legacy.scss @@ -4,10 +4,16 @@ display: inline-block; background-color: white; border: 1px solid var(--medium-border); - @include button.btn-border-radius; + + /* !important cannot be used with @include */ + border-top-left-radius: var(--border-left-radius) !important; + border-bottom-left-radius: var(--border-left-radius) !important; + border-top-right-radius: var(--border-right-radius) !important; + border-bottom-right-radius: var(--border-right-radius) !important; + min-width: 28px; margin-left: -1px; - padding: 3.5px; + padding: 3.5px !important; } .linkb:hover { diff --git a/ts/sass/buttons.scss b/ts/sass/buttons.scss index 31d3b062d..bddc3baff 100644 --- a/ts/sass/buttons.scss +++ b/ts/sass/buttons.scss @@ -15,10 +15,8 @@ .isLin { button { font-size: 14px; + -webkit-appearance: none; - } - - button:not(.btn-group button) { border-radius: 3px; padding: 5px; border: 1px solid var(--border); @@ -38,15 +36,13 @@ ); box-shadow: 0 0 3px fusion_vars.$button-outline; border: 1px solid fusion_vars.$button-border; - } - - button:not(.btn-group button) { + border-radius: 2px; padding: 10px; padding-top: 3px; padding-bottom: 3px; } - + button:hover { background: fusion_vars.$button-hover-bg; } From c28954439056362d8f3d678f1fa6127afb595ccd Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Mon, 24 May 2021 13:11:50 +0200 Subject: [PATCH 13/14] Adjust active:hover behaviour so it behaves like Svelte buttons, when clicking and dragging the mouse away from the button. --- ts/editor/legacy.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss index 45da78103..141c76cd5 100644 --- a/ts/editor/legacy.scss +++ b/ts/editor/legacy.scss @@ -16,13 +16,14 @@ padding: 3.5px !important; } -.linkb:hover { +.linkb:hover, +.linkb:active:hover { background-color: #ebebeb; } .linkb:active, .linkb:active:hover { - background-color: #ebebeb; + background-color: white; box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5) From ee23d3781d1e0efc70ed5ceeb7742ac3db447816 Mon Sep 17 00:00:00 2001 From: Matthias M <62722460+kleinerpirat@users.noreply.github.com> Date: Mon, 24 May 2021 19:46:51 +0200 Subject: [PATCH 14/14] Restrict inversion to images --- ts/editor/legacy.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss index 141c76cd5..57627914d 100644 --- a/ts/editor/legacy.scss +++ b/ts/editor/legacy.scss @@ -60,8 +60,8 @@ border-color: #525252; } - .topbut, - .linkb:active:hover .topbut { + img.topbut, + .linkb:active:hover img.topbut { filter: invert(1); } }