From d222e1cb8d375659b840586f72f0050523693840 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 2 Nov 2024 15:03:57 -0400 Subject: [PATCH 1/4] nicer gutters --- apps/svelte.dev/src/lib/icons/chevron.svg | 4 +-- packages/editor/src/lib/Editor.svelte | 2 +- packages/editor/src/lib/codemirror.css | 42 +++++++++++++++++++---- 3 files changed, 38 insertions(+), 10 deletions(-) diff --git a/apps/svelte.dev/src/lib/icons/chevron.svg b/apps/svelte.dev/src/lib/icons/chevron.svg index d85858ec63..7334ed9673 100644 --- a/apps/svelte.dev/src/lib/icons/chevron.svg +++ b/apps/svelte.dev/src/lib/icons/chevron.svg @@ -1,3 +1,3 @@ - - \ No newline at end of file + + diff --git a/packages/editor/src/lib/Editor.svelte b/packages/editor/src/lib/Editor.svelte index 14b5e42fd3..20ad089fd6 100644 --- a/packages/editor/src/lib/Editor.svelte +++ b/packages/editor/src/lib/Editor.svelte @@ -115,7 +115,7 @@ .fake-gutter { text-align: right; - padding-right: 3px; + padding-right: 0.7rem; } .fake-content { diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css index 5ab18f360e..c8cc0ed72a 100644 --- a/packages/editor/src/lib/codemirror.css +++ b/packages/editor/src/lib/codemirror.css @@ -38,16 +38,48 @@ } .cm-activeLine { + background: inherit; + } + + .cm-foldGutter { + width: 1.4rem; + } + + .cm-activeLineGutter { + position: relative; + /* this must be translucent, or it will obscure the selection */ background: hsl(0, 0%, 0%, 0.04); :root.dark & { background: hsl(0, 0%, 100%, 0.04); } - } - .cm-activeLineGutter { - background-color: var(--sk-bg-3); + span { + position: absolute; + display: block; + width: 100%; + height: 100%; + right: 0; + color: transparent; + user-select: none; + + &::after { + content: ''; + position: absolute; + top: 0.1rem; + left: 0; + width: 100%; + height: 100%; + background: url($lib/icons/chevron.svg) no-repeat 50% 50%; + background-size: contain; + rotate: -90deg; + } + + &[title='Fold line']::after { + rotate: 0deg; + } + } } .cm-lineNumbers { @@ -60,10 +92,6 @@ } } - .cm-foldGutter { - width: 1rem; - } - .cm-foldPlaceholder { background-color: transparent; border: none; From 14fe0be0481b894b62ba3d698223d2261005429c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 2 Nov 2024 15:06:25 -0400 Subject: [PATCH 2/4] fix --- apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte | 4 ++-- packages/site-kit/src/lib/components/Text.svelte | 4 ++-- packages/site-kit/src/lib/search/SearchResultList.svelte | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte index 185131131a..c48e55108f 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte @@ -129,7 +129,7 @@ background-size: 2rem; top: 0.4rem; right: 0.2rem; - rotate: -90deg; + rotate: 0deg; transition: rotate 0.2s; transition: rotate 0.2s; } @@ -153,7 +153,7 @@ label:has(:checked) { &::after { - rotate: 90deg; + rotate: 180deg; } /* TODO remove :global once https://github.com/sveltejs/svelte/issues/13779 is fixed */ diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index 89f5f43cc8..40218618e9 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -495,7 +495,7 @@ &::after { background: url($lib/icons/chevron.svg) 50% 50% no-repeat; background-size: 2rem; - rotate: -90deg; + rotate: 0deg; transition: rotate 0.2s; transition: rotate 0.2s; top: 0.2rem; @@ -534,7 +534,7 @@ &[open] { &::after { - rotate: 90deg; + rotate: 180deg; } & > summary { diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte index f5ac8abaf6..9ce7ac1e3f 100644 --- a/packages/site-kit/src/lib/search/SearchResultList.svelte +++ b/packages/site-kit/src/lib/search/SearchResultList.svelte @@ -100,12 +100,12 @@ height: 2rem; background: url($lib/icons/chevron.svg); background-size: contain; - rotate: -90deg; + rotate: 0deg; transition: rotate 0.2s; } [open] &::after { - rotate: 90deg; + rotate: 180deg; } span:not(:last-child)::after { From 6eab1ca17eaf990b38311eb5067b63f96e434472 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 2 Nov 2024 15:27:52 -0400 Subject: [PATCH 3/4] better --- packages/editor/src/lib/codemirror.css | 52 ++++++++++---------------- 1 file changed, 19 insertions(+), 33 deletions(-) diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css index c8cc0ed72a..0cc84e56f1 100644 --- a/packages/editor/src/lib/codemirror.css +++ b/packages/editor/src/lib/codemirror.css @@ -46,39 +46,35 @@ } .cm-activeLineGutter { - position: relative; - /* this must be translucent, or it will obscure the selection */ background: hsl(0, 0%, 0%, 0.04); :root.dark & { background: hsl(0, 0%, 100%, 0.04); } + } - span { + .cm-gutterElement { + position: relative; + + &:where(:has([title='Fold line']), :has([title='Unfold line']))::after { + content: ''; position: absolute; - display: block; width: 100%; - height: 100%; right: 0; - color: transparent; - user-select: none; - - &::after { - content: ''; - position: absolute; - top: 0.1rem; - left: 0; - width: 100%; - height: 100%; - background: url($lib/icons/chevron.svg) no-repeat 50% 50%; - background-size: contain; - rotate: -90deg; - } + top: 0; + height: 2.4rem; + background: url($lib/icons/chevron.svg) no-repeat 50% 50%; + background-size: contain; + transition: transform 0.2s; + } - &[title='Fold line']::after { - rotate: 0deg; - } + &:has([title='Unfold line'])::after { + transform: rotate(-90deg); + } + + span { + color: transparent; } } @@ -113,17 +109,7 @@ } .cm-content { - /* ensure no gap between top of editor and highlighted first/last line */ - padding-top: 0; - padding-bottom: 0; - - .cm-line:first-child { - padding-top: 4px; - } - - .cm-line:last-child { - padding-bottom: 4px; - } + padding: 0.4rem 0; } .cm-line { From 9f2c36c82c3816d0a1700f3c1d4739b018e740a8 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 2 Nov 2024 15:30:42 -0400 Subject: [PATCH 4/4] cursor --- packages/editor/src/lib/codemirror.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css index 0cc84e56f1..9872dbf1d0 100644 --- a/packages/editor/src/lib/codemirror.css +++ b/packages/editor/src/lib/codemirror.css @@ -67,6 +67,7 @@ background: url($lib/icons/chevron.svg) no-repeat 50% 50%; background-size: contain; transition: transform 0.2s; + cursor: pointer; } &:has([title='Unfold line'])::after {