From b050e1c7dbb27eed24edce5518c2e7d9a99a345d Mon Sep 17 00:00:00 2001 From: Ignatius Bagus Date: Thu, 25 Jul 2024 13:47:52 +0700 Subject: [PATCH] chore: use css nesting --- .../src/lib/components/Button.svelte | 80 ++++++++--------- .../src/lib/components/Resizable.svelte | 90 ++++++++++--------- .../extension/src/lib/nodes/Ellipsis.svelte | 7 +- workspace/extension/src/lib/nodes/Node.svelte | 82 +++++++++-------- .../extension/src/lib/panel/Editable.svelte | 36 ++++---- .../src/lib/panel/PropertyList.svelte | 23 ++--- .../extension/src/routes/Breadcrumbs.svelte | 19 ++-- .../src/routes/ConnectMessage.svelte | 32 ++++--- .../extension/src/routes/Profiler.svelte | 18 ++-- .../extension/src/routes/ProfilerFrame.svelte | 6 +- .../src/routes/VisibilitySelection.svelte | 42 +++++---- workspace/extension/vite.config.ts | 1 + 12 files changed, 236 insertions(+), 200 deletions(-) diff --git a/workspace/extension/src/lib/components/Button.svelte b/workspace/extension/src/lib/components/Button.svelte index 2b12631..1883286 100644 --- a/workspace/extension/src/lib/components/Button.svelte +++ b/workspace/extension/src/lib/components/Button.svelte @@ -26,58 +26,58 @@ border-radius: 0.2rem; outline: none; - background-color: transparent; + background: transparent; color: rgb(12, 12, 13); line-height: 0; - } - button.active { - color: rgb(0, 96, 223); - } - button:hover { - background: rgb(237, 237, 240); - } - button:active:hover { - color: inherit; - } + &:active { + color: rgba(12, 12, 13, 0.8); + } - button:active { - color: rgba(12, 12, 13, 0.8); - } + &:hover { + background: rgb(237, 237, 240); - button:disabled { - color: rgba(12, 12, 13, 0.2); - } + &:active { + color: inherit; + } + } - :global(.dark) button { - color: rgba(249, 249, 250, 0.7); - } + &:disabled { + cursor: default; + background: transparent; + color: rgba(12, 12, 13, 0.2); + } - :global(.dark) button.active { - color: rgb(117, 186, 255); - } + &.active { + color: rgb(0, 96, 223); + } - :global(.dark) button:hover { - background-color: rgb(37, 37, 38); + & :global(svg) { + width: 1.25rem; + height: 1.25rem; + fill: currentColor; + } } - :global(.dark) button:active { - color: rgba(249, 249, 250, 0.8); - } + :global(.dark) button { + color: rgba(249, 249, 250, 0.7); - :global(.dark) button:disabled { - color: rgba(249, 249, 250, 0.2); - } + &:active { + color: rgba(249, 249, 250, 0.8); + } - :global(.dark) button:disabled, - button:disabled { - background-color: transparent; - cursor: default; - } + &:hover { + background-color: rgb(37, 37, 38); + } + + &:disabled { + cursor: default; + background: transparent; + color: rgba(249, 249, 250, 0.2); + } - button :global(svg) { - width: 1.25rem; - height: 1.25rem; - fill: currentColor; + &.active { + color: rgb(117, 186, 255); + } } diff --git a/workspace/extension/src/lib/components/Resizable.svelte b/workspace/extension/src/lib/components/Resizable.svelte index 6a0cf5a..8439766 100644 --- a/workspace/extension/src/lib/components/Resizable.svelte +++ b/workspace/extension/src/lib/components/Resizable.svelte @@ -30,12 +30,13 @@ position: relative; display: grid; color: rgb(57, 63, 76); - } - aside.x { - grid-template-columns: auto 1fr; - } - aside.y { - grid-template-rows: auto 1fr; + + &.x { + grid-template-columns: auto 1fr; + } + &.y { + grid-template-rows: auto 1fr; + } } .resize { @@ -43,41 +44,50 @@ left: 0; width: 0.25rem; background: rgb(224, 224, 226); - } - .resize:hover { - background: rgb(177, 177, 179); - } - .resize.x { - cursor: ew-resize; - bottom: 0; - width: 0.2rem; - } - .resize.y { - cursor: ns-resize; - right: 0; - height: 0.2rem; - } - .resize + div { - display: grid; - gap: 0.625rem; - align-content: flex-start; - padding-top: 1rem; - } - .resize.x + div { - overflow-x: hidden; - } - .resize.y + div { - overflow-y: hidden; - } - :global(.dark) aside { - background: rgb(36, 36, 36); - color: rgb(177, 177, 179); - } - :global(.dark) .resize { - background: rgb(60, 60, 61); + &:hover { + background: rgb(177, 177, 179); + } + + &.x { + cursor: ew-resize; + bottom: 0; + width: 0.2rem; + + & + div { + overflow-x: hidden; + } + } + &.y { + cursor: ns-resize; + right: 0; + height: 0.2rem; + + & + div { + overflow-y: hidden; + } + } + + & + div { + display: grid; + gap: 0.625rem; + align-content: flex-start; + padding-top: 1rem; + } } - :global(.dark) .resize:hover { - background: rgb(107, 107, 108); + + :global(.dark) { + aside { + background: rgb(36, 36, 36); + color: rgb(177, 177, 179); + } + + .resize { + background: rgb(60, 60, 61); + + &:hover { + background: rgb(107, 107, 108); + } + } } diff --git a/workspace/extension/src/lib/nodes/Ellipsis.svelte b/workspace/extension/src/lib/nodes/Ellipsis.svelte index 7ee9cbd..466e591 100644 --- a/workspace/extension/src/lib/nodes/Ellipsis.svelte +++ b/workspace/extension/src/lib/nodes/Ellipsis.svelte @@ -18,8 +18,9 @@ background: var(--background); color: var(--color); font-size: 0.5rem; - } - button:hover { - background: rgba(255, 255, 255, 0.1); + + &:hover { + background: rgba(255, 255, 255, 0.1); + } } diff --git a/workspace/extension/src/lib/nodes/Node.svelte b/workspace/extension/src/lib/nodes/Node.svelte index d81ef61..09f17dd 100644 --- a/workspace/extension/src/lib/nodes/Node.svelte +++ b/workspace/extension/src/lib/nodes/Node.svelte @@ -93,48 +93,56 @@ align-items: center; line-height: 1.5; font-size: 0.75rem; - } - ul { - width: 100%; - position: relative; - } - li :global(div) { - width: 100%; - display: flex; - flex-wrap: wrap; - padding-left: calc(var(--indent) + 6px); - } - li[data-hovered] > :global(div) { - background: #f0f9fe; - } - li[data-current] > ul::before { - content: ''; - z-index: 1; - width: 0.125rem; - position: absolute; - top: 0.2rem; - bottom: 0.15rem; - left: calc(var(--indent) - 0.75rem); - background: #e0e0e2; - } + ul { + width: 100%; + position: relative; + } - li[data-current] > :global(div:first-child), - li[data-current][data-hovered] > :global(div) { - background: rgba(0, 116, 232, 0.2); - } - li[data-current] > :global(div:first-child:after) { - content: '== $n'; - margin-left: 0.5rem; - } + &[data-hovered] > :global(div) { + background: #f0f9fe; + } + + &[data-current] { + & > ul::before { + content: ''; + z-index: 1; + width: 0.125rem; + position: absolute; + top: 0.2rem; + bottom: 0.15rem; + left: calc(var(--indent) - 0.75rem); + background: #e0e0e2; + } + + & > :global(div:first-child), + &[data-hovered] > :global(div) { + background: rgb(0, 116, 232); + } + + & > :global(div:first-child:after) { + content: '== $n'; + margin-left: 0.5rem; + } + } - :global(.dark) li[data-hovered] > :global(div) { - background: rgb(53, 59, 72); + & :global(div) { + width: 100%; + display: flex; + flex-wrap: wrap; + padding-left: calc(var(--indent) + 6px); + } } - :global(.dark) li[data-current] > :global(div:first-child), - :global(.dark) li[data-current][data-hovered] > :global(div) { - background: rgb(32, 78, 138); + :global(.dark) { + li[data-hovered] > :global(div) { + background: rgb(53, 59, 72); + } + + li[data-current] > :global(div:first-child), + li[data-current][data-hovered] > :global(div) { + background: rgb(32, 78, 138); + } } /* flash animation for updates */ diff --git a/workspace/extension/src/lib/panel/Editable.svelte b/workspace/extension/src/lib/panel/Editable.svelte index 326fd2c..8a08bc0 100644 --- a/workspace/extension/src/lib/panel/Editable.svelte +++ b/workspace/extension/src/lib/panel/Editable.svelte @@ -72,32 +72,34 @@ {/if} diff --git a/workspace/extension/src/lib/panel/PropertyList.svelte b/workspace/extension/src/lib/panel/PropertyList.svelte index e859854..f6188aa 100644 --- a/workspace/extension/src/lib/panel/PropertyList.svelte +++ b/workspace/extension/src/lib/panel/PropertyList.svelte @@ -115,12 +115,13 @@ align-items: center; padding: 0.25rem; border-radius: 0.25rem; - } - li[data-tooltip] { - background: rgba(179, 0, 0, 0.8); - } - li:hover { - background: rgba(135, 135, 137, 0.075); + + &:hover { + background: rgba(135, 135, 137, 0.075); + } + &[data-tooltip] { + background: rgba(179, 0, 0, 0.8); + } } .function, @@ -129,9 +130,11 @@ color: rgb(0, 116, 232); } - :global(.dark) .function, - :global(.dark) .symbol, - :global(.dark) .object { - color: rgb(117, 191, 255); + :global(.dark) { + .function, + .symbol, + .object { + color: rgb(117, 191, 255); + } } diff --git a/workspace/extension/src/routes/Breadcrumbs.svelte b/workspace/extension/src/routes/Breadcrumbs.svelte index da4a89d..3cf1c56 100644 --- a/workspace/extension/src/routes/Breadcrumbs.svelte +++ b/workspace/extension/src/routes/Breadcrumbs.svelte @@ -48,15 +48,18 @@ background: var(--background); color: var(--color); font-size: inherit; - } - button:hover { - background: rgba(255, 255, 255, 0.1); - } - button.selected { - background: rgba(255, 255, 255, 0.05); + + &:hover { + background: rgba(255, 255, 255, 0.1); + } + &.selected { + background: rgba(255, 255, 255, 0.05); + } } - :global(.dark) ul { - border-top-color: rgb(60, 60, 61); + :global(.dark) { + ul { + border-top-color: rgb(60, 60, 61); + } } diff --git a/workspace/extension/src/routes/ConnectMessage.svelte b/workspace/extension/src/routes/ConnectMessage.svelte index d7f9553..4815049 100644 --- a/workspace/extension/src/routes/ConnectMessage.svelte +++ b/workspace/extension/src/routes/ConnectMessage.svelte @@ -27,9 +27,10 @@ justify-items: center; align-content: center; justify-content: center; - } - main * { - margin: 0; + + * { + margin: 0; + } } button { @@ -40,9 +41,10 @@ color: #040d14; font-family: monospace; transition-duration: var(--t-duration); - } - button:hover { - outline-color: rgba(208, 212, 215, 0.8); + + &:hover { + outline-color: rgba(208, 212, 215, 0.8); + } } footer { @@ -50,13 +52,15 @@ display: grid; gap: 0.75rem; padding-top: 3rem; - } - ul { - padding-left: 1.5rem; - list-style-type: disc; - font-size: 0.875rem; - } - li:not(:first-child) { - margin-top: 0.5rem; + + ul { + padding-left: 1.5rem; + list-style-type: disc; + font-size: 0.875rem; + + li:not(:first-child) { + margin-top: 0.5rem; + } + } } diff --git a/workspace/extension/src/routes/Profiler.svelte b/workspace/extension/src/routes/Profiler.svelte index aa0fc17..5b99c4b 100644 --- a/workspace/extension/src/routes/Profiler.svelte +++ b/workspace/extension/src/routes/Profiler.svelte @@ -118,16 +118,16 @@ display: flex; flex-wrap: wrap; padding: 1rem; - } - .panel div { - width: calc(100% / 3); - display: flex; - gap: 0.417rem /* 5px */; - margin: 0.417rem /* 5px */ 0; - } + div { + width: calc(100% / 3); + display: flex; + gap: 0.417rem /* 5px */; + margin: 0.417rem /* 5px */ 0; + } - .panel span:first-child { - font-weight: 500; + span:first-child { + font-weight: 500; + } } diff --git a/workspace/extension/src/routes/ProfilerFrame.svelte b/workspace/extension/src/routes/ProfilerFrame.svelte index 295f6b3..c102163 100644 --- a/workspace/extension/src/routes/ProfilerFrame.svelte +++ b/workspace/extension/src/routes/ProfilerFrame.svelte @@ -52,10 +52,10 @@ color: white; line-height: 2rem; cursor: pointer; - } - button:hover { - opacity: 0.8; + &:hover { + opacity: 0.8; + } } .mount { diff --git a/workspace/extension/src/routes/VisibilitySelection.svelte b/workspace/extension/src/routes/VisibilitySelection.svelte index 15a2fb0..d126ff9 100644 --- a/workspace/extension/src/routes/VisibilitySelection.svelte +++ b/workspace/extension/src/routes/VisibilitySelection.svelte @@ -42,35 +42,39 @@ background-color: #ffffff; font-size: 0.875rem; text-align: left; - } - section::before { - content: ''; - z-index: -1; - position: absolute; - top: 0; - left: 0; - width: 1rem; - height: 1rem; - background-color: inherit; - transform: translate(50%, -30%) rotate(45deg); + + &::before { + content: ''; + z-index: -1; + position: absolute; + top: 0; + left: 0; + width: 1rem; + height: 1rem; + background-color: inherit; + transform: translate(50%, -30%) rotate(45deg); + } } label { display: flex; align-items: center; padding: 0.25rem 0.5rem; + + & > span { + margin-left: 0.5rem; + text-transform: capitalize; + } } input { margin: 0; } - label > span { - margin-left: 0.5rem; - text-transform: capitalize; - } - :global(.dark) section { - border: none; - background-color: #4a4a4f; - color: #f9f9fa; + :global(.dark) { + section { + border: none; + background-color: #4a4a4f; + color: #f9f9fa; + } } diff --git a/workspace/extension/vite.config.ts b/workspace/extension/vite.config.ts index 553a45c..fde691d 100644 --- a/workspace/extension/vite.config.ts +++ b/workspace/extension/vite.config.ts @@ -7,6 +7,7 @@ export default defineConfig(() => { plugins: [svelte()], build: { + cssTarget: 'chrome111', outDir: 'build', },