diff --git a/src/app/components/level-card/level-card.scss b/src/app/components/level-card/level-card.scss index 7d009a1..5f12d22 100644 --- a/src/app/components/level-card/level-card.scss +++ b/src/app/components/level-card/level-card.scss @@ -19,7 +19,7 @@ $default_animation_duration: 0.2s; border-radius: 8px; outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 2px solid; - overflow: hidden; + // overflow: hidden; &:focus-visible { outline-offset: 0; @@ -35,7 +35,9 @@ $default_animation_duration: 0.2s; z-index: 1; background-color: light-dark(white, black); - outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 1px solid; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + // outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 1px solid; .soundtrack { display: flex; @@ -113,6 +115,7 @@ $default_animation_duration: 0.2s; flex-direction: row; justify-content: flex-end; align-items: center; + z-index: 10; width: 100%; height: 50%; @@ -130,8 +133,13 @@ $default_animation_duration: 0.2s; --hover-state: 1; } + &:not(:focus-visible) { + box-shadow: -1px 0 0 0 light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)); + } + &:focus-visible { - outline-offset: -2px; + z-index: 11; + outline-offset: 0; } div.button-icon {