From 7f763e64b53d2625aec5f5f87c0620b136c9c1c6 Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Fri, 15 Sep 2023 22:06:47 +0800 Subject: [PATCH 1/8] Fixes #41 --- core/src/components/Resizable.scss | 23 +++++++++++-------- src/App.scss | 37 ++++++++++++++---------------- 2 files changed, 31 insertions(+), 29 deletions(-) diff --git a/core/src/components/Resizable.scss b/core/src/components/Resizable.scss index 3f36f591..201284fd 100644 --- a/core/src/components/Resizable.scss +++ b/core/src/components/Resizable.scss @@ -21,8 +21,8 @@ z-index: 100; position: absolute; background-color: #cacdd1; - transition: .1s; - html[theme-mode=dark] & { + transition: 0.1s; + html[theme-mode="dark"] & { background-color: #494c50; &:hover { background-color: #fff5; @@ -40,7 +40,7 @@ transform: translate(-50%, -50%); opacity: 0; - transition: .1s; + transition: 0.1s; > button { display: flex; align-items: center; @@ -55,13 +55,15 @@ background-color: color-mix(in srgb, var(--primary), var(--bg-cr) 50%); border: 1px solid color-mix(in srgb, var(--primary), var(--bg-cr) 80%); - cursor: pointer; - transition: .1s; + cursor: e-resize; + transition: 0.1s; &:hover { box-shadow: 0 0 2px gray; background-color: color-mix(in srgb, var(--primary), var(--bg-cr) 30%); } - > span.cldr { font-size: 12px } + > span.cldr { + font-size: 12px; + } } } &:hover &__btns { @@ -71,14 +73,16 @@ z-index: 10; background-color: #0008; } - &__top > &__btns, &__bottom > &__btns { + &__top > &__btns, + &__bottom > &__btns { flex-direction: row; > button { width: 30px; height: 16px; } } - &__left, &__right { + &__left, + &__right { top: 0; width: var(--inner-border-width); height: 100%; @@ -87,7 +91,8 @@ width: calc(var(--inner-border-width) * var(--inner-border-scale)); } } - &__top, &__bottom { + &__top, + &__bottom { left: 0; width: 100%; height: var(--inner-border-width); diff --git a/src/App.scss b/src/App.scss index 0e2f6776..1e8e3800 100644 --- a/src/App.scss +++ b/src/App.scss @@ -10,12 +10,12 @@ display: flex; align-items: center; justify-content: space-between; - padding: .6em; + padding: 0.6em; background: var(--primary); box-shadow: 0 0 16px #00000047; color: #fff; overflow: hidden; - transition: .1s; + transition: 0.1s; a { display: flex; align-items: center; @@ -31,12 +31,12 @@ display: flex; align-items: center; gap: 10px; - .svg-icon { + .svg-icon { display: flex; align-items: center; cursor: pointer; filter: drop-shadow(0 0 0 #0000); - transition: .3s; + transition: 0.3s; &:hover { filter: drop-shadow(0 0 4px #000); } @@ -60,8 +60,13 @@ } &.left { flex-direction: row-reverse; + cursor: e-resize; } &:not(.eval-logs-visible) { + .ppd-resizable-border__right .ppd-resizable-border__btns button { + cursor: w-resize; + } + .ppd-resizable-border__left .cldr.codicon.codicon-debug-continue-small { transform: rotate(0deg) !important; } @@ -89,20 +94,12 @@ height: 100%; background-size: 150% 150%; - background-image: linear-gradient(120deg, - #a1c4fd, - #c2e9fb, - #fefdfc - ); - html[theme-mode=dark] & { - background-image: linear-gradient(120deg, - #8999D1, - #6E8DCA, - #4264BC - ); + background-image: linear-gradient(120deg, #a1c4fd, #c2e9fb, #fefdfc); + html[theme-mode="dark"] & { + background-image: linear-gradient(120deg, #8999d1, #6e8dca, #4264bc); } - transition: .2s; + transition: 0.2s; > main { position: absolute; top: 50%; @@ -112,8 +109,8 @@ min-width: 300px; padding: 10px; filter: drop-shadow(0 5px 8px #00000037); - transition: .2s; - html[theme-mode=dark] & { + transition: 0.2s; + html[theme-mode="dark"] & { filter: drop-shadow(0 10px 20px #00000078); } } @@ -133,7 +130,7 @@ background-color: var(--bg-cr-o0); backdrop-filter: blur(12px); box-shadow: 0 5px 16px #00000020; - transition: .3s; + transition: 0.3s; > .menu-item { display: flex; align-items: center; @@ -149,7 +146,7 @@ font-size: 18px; cursor: pointer; - transition: .3s; + transition: 0.3s; &:hover { background-color: var(--primary-hover); } From 774a2ec806d20575bccf92352d48c17b4f13336f Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <51957438+XiaoDaiGua-Ray@users.noreply.github.com> Date: Fri, 15 Sep 2023 22:14:18 +0800 Subject: [PATCH 2/8] Update core/src/components/Resizable.scss Co-authored-by: YiJie <51358815+NWYLZW@users.noreply.github.com> --- core/src/components/Resizable.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/Resizable.scss b/core/src/components/Resizable.scss index 201284fd..fdd8f684 100644 --- a/core/src/components/Resizable.scss +++ b/core/src/components/Resizable.scss @@ -22,7 +22,7 @@ position: absolute; background-color: #cacdd1; transition: 0.1s; - html[theme-mode="dark"] & { + html[theme-mode='dark'] & { background-color: #494c50; &:hover { background-color: #fff5; From 89fcd05b96e4c8d26d16161b4d7a9d3693a4efe6 Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <51957438+XiaoDaiGua-Ray@users.noreply.github.com> Date: Fri, 15 Sep 2023 22:14:27 +0800 Subject: [PATCH 3/8] Update core/src/components/Resizable.scss Co-authored-by: YiJie <51358815+NWYLZW@users.noreply.github.com> --- core/src/components/Resizable.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/Resizable.scss b/core/src/components/Resizable.scss index fdd8f684..87c63e5f 100644 --- a/core/src/components/Resizable.scss +++ b/core/src/components/Resizable.scss @@ -40,7 +40,7 @@ transform: translate(-50%, -50%); opacity: 0; - transition: 0.1s; + transition: .1s; > button { display: flex; align-items: center; From 093a8737b52354ccb45c7bccf74eee54cf69e62b Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <51957438+XiaoDaiGua-Ray@users.noreply.github.com> Date: Fri, 15 Sep 2023 22:14:45 +0800 Subject: [PATCH 4/8] Update core/src/components/Resizable.scss Co-authored-by: YiJie <51358815+NWYLZW@users.noreply.github.com> --- core/src/components/Resizable.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/core/src/components/Resizable.scss b/core/src/components/Resizable.scss index 87c63e5f..5ba85828 100644 --- a/core/src/components/Resizable.scss +++ b/core/src/components/Resizable.scss @@ -61,9 +61,7 @@ box-shadow: 0 0 2px gray; background-color: color-mix(in srgb, var(--primary), var(--bg-cr) 30%); } - > span.cldr { - font-size: 12px; - } + > span.cldr { font-size: 12px } } } &:hover &__btns { From ccdbcc56cf18f4f3d2cec2d96a8b86335fe6b4d7 Mon Sep 17 00:00:00 2001 From: YiJie <51358815+NWYLZW@users.noreply.github.com> Date: Fri, 15 Sep 2023 22:24:06 +0800 Subject: [PATCH 5/8] Update core/src/components/Resizable.scss --- core/src/components/Resizable.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/Resizable.scss b/core/src/components/Resizable.scss index 5ba85828..f89c5ef5 100644 --- a/core/src/components/Resizable.scss +++ b/core/src/components/Resizable.scss @@ -56,7 +56,7 @@ border: 1px solid color-mix(in srgb, var(--primary), var(--bg-cr) 80%); cursor: e-resize; - transition: 0.1s; + transition: .1s; &:hover { box-shadow: 0 0 2px gray; background-color: color-mix(in srgb, var(--primary), var(--bg-cr) 30%); From a8c7ead310b2bcde22cd3dafeee55254f3c19e40 Mon Sep 17 00:00:00 2001 From: YiJie <51358815+NWYLZW@users.noreply.github.com> Date: Fri, 15 Sep 2023 22:24:12 +0800 Subject: [PATCH 6/8] Update core/src/components/Resizable.scss --- core/src/components/Resizable.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/Resizable.scss b/core/src/components/Resizable.scss index f89c5ef5..72c1b753 100644 --- a/core/src/components/Resizable.scss +++ b/core/src/components/Resizable.scss @@ -22,7 +22,7 @@ position: absolute; background-color: #cacdd1; transition: 0.1s; - html[theme-mode='dark'] & { + html[theme-mode=dark] & { background-color: #494c50; &:hover { background-color: #fff5; From f90265667e1eef9106f9b3255bf33e1dad01441b Mon Sep 17 00:00:00 2001 From: YiJie <51358815+NWYLZW@users.noreply.github.com> Date: Fri, 15 Sep 2023 22:24:19 +0800 Subject: [PATCH 7/8] Update core/src/components/Resizable.scss --- core/src/components/Resizable.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/Resizable.scss b/core/src/components/Resizable.scss index 72c1b753..ff65d9aa 100644 --- a/core/src/components/Resizable.scss +++ b/core/src/components/Resizable.scss @@ -21,7 +21,7 @@ z-index: 100; position: absolute; background-color: #cacdd1; - transition: 0.1s; + transition: .1s; html[theme-mode=dark] & { background-color: #494c50; &:hover { From 8d5f752182dfadeacdebd56c404156e46b902fad Mon Sep 17 00:00:00 2001 From: YiJie <51358815+NWYLZW@users.noreply.github.com> Date: Fri, 15 Sep 2023 22:29:47 +0800 Subject: [PATCH 8/8] Apply suggestions from code review --- core/src/components/Resizable.scss | 9 +++------ src/App.scss | 30 +++++++++++++++++++----------- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/core/src/components/Resizable.scss b/core/src/components/Resizable.scss index ff65d9aa..d218babf 100644 --- a/core/src/components/Resizable.scss +++ b/core/src/components/Resizable.scss @@ -71,16 +71,14 @@ z-index: 10; background-color: #0008; } - &__top > &__btns, - &__bottom > &__btns { + &__top > &__btns, &__bottom > &__btns { flex-direction: row; > button { width: 30px; height: 16px; } } - &__left, - &__right { + &__left, &__right { top: 0; width: var(--inner-border-width); height: 100%; @@ -89,8 +87,7 @@ width: calc(var(--inner-border-width) * var(--inner-border-scale)); } } - &__top, - &__bottom { + &__top, &__bottom { left: 0; width: 100%; height: var(--inner-border-width); diff --git a/src/App.scss b/src/App.scss index 1e8e3800..bb7856b0 100644 --- a/src/App.scss +++ b/src/App.scss @@ -10,12 +10,12 @@ display: flex; align-items: center; justify-content: space-between; - padding: 0.6em; + padding: .6em; background: var(--primary); box-shadow: 0 0 16px #00000047; color: #fff; overflow: hidden; - transition: 0.1s; + transition: .1s; a { display: flex; align-items: center; @@ -36,7 +36,7 @@ align-items: center; cursor: pointer; filter: drop-shadow(0 0 0 #0000); - transition: 0.3s; + transition: .3s; &:hover { filter: drop-shadow(0 0 4px #000); } @@ -94,12 +94,20 @@ height: 100%; background-size: 150% 150%; - background-image: linear-gradient(120deg, #a1c4fd, #c2e9fb, #fefdfc); - html[theme-mode="dark"] & { - background-image: linear-gradient(120deg, #8999d1, #6e8dca, #4264bc); + background-image: linear-gradient(120deg, + #a1c4fd, + #c2e9fb, + #fefdfc + ); + html[theme-mode=dark] & { + background-image: linear-gradient(120deg, + #8999D1, + #6E8DCA, + #4264BC + ); } - transition: 0.2s; + transition: .2s; > main { position: absolute; top: 50%; @@ -109,8 +117,8 @@ min-width: 300px; padding: 10px; filter: drop-shadow(0 5px 8px #00000037); - transition: 0.2s; - html[theme-mode="dark"] & { + transition: .2s; + html[theme-mode=dark] & { filter: drop-shadow(0 10px 20px #00000078); } } @@ -130,7 +138,7 @@ background-color: var(--bg-cr-o0); backdrop-filter: blur(12px); box-shadow: 0 5px 16px #00000020; - transition: 0.3s; + transition: .3s; > .menu-item { display: flex; align-items: center; @@ -146,7 +154,7 @@ font-size: 18px; cursor: pointer; - transition: 0.3s; + transition: .3s; &:hover { background-color: var(--primary-hover); }