diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss index 0ad57d89792..b9fef9fce87 100644 --- a/client/src/app/+videos/+video-edit/video-add.component.scss +++ b/client/src/app/+videos/+video-edit/video-add.component.scss @@ -30,16 +30,25 @@ $nav-link-height: 40px; padding: 0 30px !important; font-size: 15px; + border: $border-width $border-type transparent; + + span { + border-bottom: 2px solid transparent; + } + &.active { - border: $border-width $border-type $border-color; - border-bottom: none; + border-color: $border-color; + border-bottom-color: transparent; background-color: pvar(--submenuColor) !important; span { - border-bottom: 2px solid pvar(--mainColor); - font-weight: $font-bold; + border-bottom-color: pvar(--mainColor); } } + + &:hover:not(.active) { + border-color: transparent; + } } } @@ -71,7 +80,7 @@ $nav-link-height: 40px; /* Hide active tab style to not have a moving tab effect */ a.nav-link.active { - border: none; + border-color: transparent; background-color: pvar(--mainBackgroundColor) !important; } } diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 4f753e04120..b1c8345b969 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -178,14 +178,16 @@ label { font-weight: $font-semibold; @include disable-default-a-behaviour; + border-bottom: 2px solid transparent; + &.active, &.title-page-single { margin-top: 30px; margin-bottom: 25px; } &.active { - font-weight: $font-bold; - border-bottom: 2px solid pvar(--mainColor); + color: pvar(--mainColor) !important; + border-bottom-color: pvar(--mainColor); } &.title-page-single { @@ -196,6 +198,10 @@ label { color: pvar(--mainForegroundColor); } + &:hover:not(.active) { + border-bottom-color: pvar(--mainForegroundColor); + } + @media screen and (max-width: $mobile-view) { margin-right: 15px; } @@ -205,10 +211,10 @@ label { .title-page-settings { white-space: nowrap; font-size: 115%; - font-weight: $font-regular; + font-weight: $font-semibold; &.active { - font-weight: $font-semibold; + color: pvar(--mainColor); } } @@ -228,9 +234,9 @@ label { color: pvar(--mainForegroundColor); padding: 5px 15px; border-radius: 0.25rem; + font-weight: $font-semibold; &.active { - font-weight: $font-semibold; background-color: #f0f0f0; color: #000; } diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 0dc58a7c923..1cb84b9d536 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -153,9 +153,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .nav.nav-pills { font-size: 16px !important; + font-weight: $font-semibold !important; .nav-link.active { - font-weight: $font-semibold !important; + color: pvar(--mainColor) } a { @@ -165,29 +166,23 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } } -.nav-tabs { - - .nav-link { - @include disable-default-a-behaviour; +.nav-tabs .nav-link { + @include disable-default-a-behaviour; - color: pvar(--mainForegroundColor) !important; - } -} + color: pvar(--mainForegroundColor); + font-weight: $font-semibold; + border: none; + border-bottom: 2px solid transparent; -.nav-tabs .nav-link { - &:not(.active) { - border-bottom: 3px solid transparent; - } &.active { - font-weight: $font-semibold; + color: pvar(--mainColor) !important; background-color: pvar(--mainBackgroundColor) !important; - border: none; - border-bottom: 2px solid pvar(--mainColor); + border-bottom-color: pvar(--mainColor); } - &:hover { - border-top-color: transparent; - border-left-color: transparent; - border-right-color: transparent; + + &:hover:not(.active) { + color: pvar(--mainColor) !important; + border-bottom-color: transparent; } }