diff --git a/sites/svelte.dev/src/routes/_components/Demo.svelte b/sites/svelte.dev/src/routes/_components/Demo.svelte index cfd66e2ce4..0f54a08c1a 100644 --- a/sites/svelte.dev/src/routes/_components/Demo.svelte +++ b/sites/svelte.dev/src/routes/_components/Demo.svelte @@ -38,7 +38,11 @@
{#each examples as example, i} - @@ -90,8 +94,8 @@ display: grid; grid-template-columns: repeat(4, 1fr); height: 100%; - border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0; - background-color: rgba(255, 255, 255, 0.1); + background-color: var(--sk-back-1); + border-radius: var(--sk-border-radius); } button, @@ -101,16 +105,40 @@ height: 100%; align-items: center; justify-content: center; - border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0; + border-right: 0.5px solid var(--sk-text-4); + background-color: var(--sk-back-4); + transition: 0.15s ease; + transition-property: transform, background-color, color; } button:hover { background-color: rgba(255, 255, 255, 0.2); } + button:has(+ .selected) { + border-right: initial; + } + + button:first-child { + border-radius: var(--sk-border-radius) 0 0 0; + } + button:last-child { + border-radius: 0 var(--sk-border-radius) 0 0; + border-right: initial; + } + button.selected { background-color: var(--sk-back-1); color: var(--sk-text-2); + border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0; + border-right: initial; + transform: translateY(-5px); + } + + a { + border-right: initial; + border-radius: 0 var(--sk-border-radius) var(--sk-border-radius) 0; + background-color: initial; } .small-show {