diff --git a/src/frontend/styles/components/header.pcss b/src/frontend/styles/components/header.pcss index 0b43e9eb..3c627205 100644 --- a/src/frontend/styles/components/header.pcss +++ b/src/frontend/styles/components/header.pcss @@ -40,7 +40,10 @@ html { @media (--not-mobile) { padding: 4px 10px; - @apply --squircle; + + &:hover { + @apply --squircle; + } } &:hover { diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss index 7ce04cae..04f6f83a 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/components/table-of-content.pcss b/src/frontend/styles/components/table-of-content.pcss index ab3c9211..a3f56743 100644 --- a/src/frontend/styles/components/table-of-content.pcss +++ b/src/frontend/styles/components/table-of-content.pcss @@ -31,7 +31,10 @@ gap: 2px; &-item { - @apply --squircle; + &:hover, + &--active { + @apply --squircle; + } &:hover { background-color: var(--color-link-hover);