diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json index 1d904e8bd7..bdb8c8692a 100644 --- a/apps/svelte.dev/package.json +++ b/apps/svelte.dev/package.json @@ -81,7 +81,7 @@ "satori-html": "^0.3.2", "shiki": "^1.6.4", "shiki-twoslash": "^3.1.2", - "svelte": "5.0.0-next.243", + "svelte": "5.0.0-next.260", "svelte-check": "^4.0.0", "svelte-preprocess": "^5.1.4", "tiny-glob": "^0.2.9", diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte index 2b12eaf87d..0089a201cd 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte @@ -106,7 +106,7 @@ position: relative; height: calc(100% - var(--sk-nav-height) - var(--sk-banner-bottom-height)); height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-bottom-height)); - --app-controls-h: 5.6rem; + --app-controls-h: 5rem; --pane-controls-h: 4.2rem; overflow: hidden; background-color: var(--sk-back-1); @@ -115,6 +115,10 @@ box-sizing: border-box; display: flex; flex-direction: column; + + @media (min-width: 800px) { + --app-controls-h: 4rem; + } } /* temp fix for #2499 and #2550 while waiting for a fix for https://github.com/sveltejs/svelte-repl/issues/8 */ diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte index 7f358979c3..13aadc3585 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -268,10 +268,27 @@ export default app;` align-items: center; justify-content: space-between; padding: 0.6rem var(--sk-page-padding-side); - background-color: var(--sk-back-4); + background-color: var(--sk-back-2); color: var(--sk-text-1); white-space: nowrap; flex: 0; + gap: 2rem; + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: -4px; + width: 100%; + height: 4px; + z-index: 2; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), transparent); + } + + @media (min-width: 800px) { + padding-top: 0; + padding-bottom: 1rem; + } } .buttons { @@ -311,24 +328,12 @@ export default app;` border: none; color: currentColor; font-family: var(--sk-font-ui); - opacity: 0.7; - outline: none; flex: 1; - margin: 0 0.2em 0 0.4rem; - padding-top: 0.2em; - border-bottom: 1px solid transparent; + margin: 0 0.2em 0 0rem; + padding: 0.2rem; font-size: var(--sk-font-size-ui-medium); } - input:hover { - border-bottom: 1px solid currentColor; - opacity: 1; - } - input:focus { - border-bottom: 1px solid currentColor; - opacity: 1; - } - button span { display: none; } diff --git a/apps/svelte.dev/src/routes/+layout.svelte b/apps/svelte.dev/src/routes/+layout.svelte index 83e4eafa45..28bd34375d 100644 --- a/apps/svelte.dev/src/routes/+layout.svelte +++ b/apps/svelte.dev/src/routes/+layout.svelte @@ -23,7 +23,11 @@ {#snippet top_nav()} -