diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss index 7ce04ca..ac04519 100644 --- a/src/frontend/styles/components/sidebar.pcss +++ b/src/frontend/styles/components/sidebar.pcss @@ -182,13 +182,16 @@ transition-property: background-color; transition-duration: 0.1s; - @apply --squircle; - &--selected { border-radius: 8px; /* border using box-shadow which doesn't increase the height */ box-shadow: 0 0 0 2px rgba(147, 166, 233, 0.5) inset; } + + &--active, + &--hover { + @apply --squircle; + } } &__section-title > span, diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss index 2af7f66..b1ed001 100644 --- a/src/frontend/styles/vars.pcss +++ b/src/frontend/styles/vars.pcss @@ -138,6 +138,7 @@ --squircle { border-radius: 8px; + @supports(-webkit-mask-box-image: url('')){ border-radius: 0; -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;