X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fmenu%2Fmenu.component.scss;h=cb5f907232f04ccb1155574d3f4395fc8ee647e5;hb=1d17d86349fd2b3a9bc85145d02383ba4aea4dc0;hp=9241e8059a0e03a1da0b5b4f50e585bc099d5ac9;hpb=a55052c9baf2952795685d3b4e5348c8cb9da70d;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 9241e8059..cb5f90723 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -6,7 +6,8 @@ height: calc(100vh - #{$header-height}); padding: 0; width: $menu-width; - z-index: 10000; + z-index: z(menu); + scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor); } menu { @@ -16,7 +17,7 @@ menu { margin: 0; padding: 0; height: 100%; - overflow: auto; + overflow-x: hidden; color: var(--menuForegroundColor); display: flex; flex-direction: column; @@ -69,28 +70,29 @@ menu { font-size: 13px; color: #C6C6C6; max-width: 140px; + cursor: pointer; } } .logged-in-more { margin-right: 20px; - my-global-icon { - @include apply-svg-color(var(--mainBackgroundColor)); - + my-global-icon.dropdown-toggle { cursor: pointer; &::after { border: none; } + + ::ng-deep { + @include apply-svg-color(var(--menuForegroundColor)); + } } .dropdown-item { @include dropdown-with-icon-item; my-global-icon { - @include apply-svg-color(var(--mainForegroundColor)); - width: 22px; height: 22px; @@ -144,15 +146,19 @@ menu { margin-bottom: 45px; a { + @include disable-default-a-behaviour; + display: flex; align-items: center; padding-left: $menu-lateral-padding; color: var(--menuForegroundColor); cursor: pointer; - height: 40px; + min-height: 40px; font-size: 16px; transition: background-color .1s ease-in-out; - @include disable-default-a-behaviour; + white-space: normal; + word-break: break-word; + padding-right: 20px; &.active { background-color: rgba(255, 255, 255, 0.15); @@ -225,7 +231,6 @@ menu { height: 24px; background-image: url('../../assets/images/menu/keyboard.png'); - background-color: #fff; filter: invert(100%); }