diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss index 80e5b3ea6..c01715bd4 100644 --- a/frontend/src/app/main/ui/components/tab_container.scss +++ b/frontend/src/app/main/ui/components/tab_container.scss @@ -46,6 +46,7 @@ @extend .button-icon; stroke: var(--tab-foreground-color); } + .content { @include headlineSmallTypography; text-align: center; @@ -53,17 +54,21 @@ overflow: hidden; text-overflow: ellipsis; } + &.current, &.current:hover { background: var(--tab-background-color-selected); border-color: var(--tab-border-color-selected); color: var(--tab-foreground-color-selected); + svg { stroke: var(--tab-foreground-color-selected); } } + &:hover { color: var(--tab-foreground-color-hover); + svg { stroke: var(--tab-foreground-color-hover); } @@ -78,6 +83,7 @@ min-width: $s-24; padding: 0 $s-6; border-radius: $br-5; + svg { @include flexCenter; height: $s-16; @@ -87,6 +93,7 @@ fill: none; color: transparent; } + &:hover { svg { stroke: var(--icon-foreground-hover); @@ -107,3 +114,10 @@ display: flex; flex-direction: column; } + +//Firefox doesn't respect scrollbar-gutter +@supports (-moz-appearance: none) { + .tab-container-content { + padding-right: $s-8; + } +}