2 @use '_variables' as *;
5 $menu-link-icon-size: 22px;
6 $menu-link-icon-margin-right: 18px;
7 $footer-links-base-opacity: .8;
10 @include disable-default-a-behaviour;
11 @include padding-left($menu-lateral-padding);
12 @include padding-right(20px);
17 color: pvar(--menuForegroundColor);
20 word-break: break-word;
21 transition: background-color .1s ease-in-out;
22 line-height: $line-height-normal;
25 background-color: rgba(255, 255, 255, 0.15);
30 background-color: rgba(255, 255, 255, 0.1);
34 @include apply-svg-color(#808080);
35 @include margin-right($menu-link-icon-margin-right);
38 width: $menu-link-icon-size;
39 height: $menu-link-icon-size;
45 height: calc(100vh - #{$header-height});
49 scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
55 background-color: pvar(--menuBackgroundColor);
56 color: pvar(--menuForegroundColor);
59 flex-direction: column;
70 @media not all and (hover: hover) and (pointer: fine) {
92 background-color: rgba(255, 255, 255, 0.15);
98 justify-content: left;
103 @include margin-left(auto);
104 @include margin-right(15px);
109 @mixin display-hints($is-mobile: false) {
110 background-color: rgba(255, 255, 255, 0.15);
113 .dropdown-toggle-indicator {
114 display: inherit !important;
118 max-width: 88% !important;
123 @include margin-left(13px);
127 transition: all .1s ease-in-out;
132 background-color: rgba(255, 255, 255, 0.2);
133 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
137 @include display-hints;
140 /* smartphones and touchscreens */
141 @media (hover: none) and (pointer: coarse) {
142 @include display-hints($is-mobile: true);
144 /* fill space when on mobile */
145 max-width: calc(100% - 80px);
152 max-width: calc(100% - 45px) !important;
156 .dropdown-toggle-indicator {
168 .dropdown-toggle::after {
172 > .dropdown-toggle:first-child {
180 @include margin-right(10px);
189 .logged-in-display-name,
190 .logged-in-username {
194 .logged-in-display-name {
195 @include disable-default-a-behaviour;
197 font-weight: $font-semibold;
198 color: pvar(--menuForegroundColor);
201 .logged-in-username {
209 flex-direction: column;
210 align-items: flex-start;
211 border-top: 1px solid var(--greyForegroundColor);
212 line-height: $line-height-normal;
216 $additional-margin: math.div($menu-link-icon-size - $icon-size, 2);
223 // Keep aligned with other icons
224 @include margin-left($additional-margin);
234 @include apply-svg-color(var(--menuForegroundColor));
239 $border-left-width: 4px;
241 font-weight: $font-semibold;
242 border-left: $border-left-width solid var(--mainColor);
245 @include margin-left($additional-margin - $border-left-width);
251 .login-buttons-block {
252 margin: 30px 25px 35px;
264 .create-account-button {
266 background-color: rgba(255, 255, 255, 0.25);
269 background-color: rgba(255, 255, 255, 0.28);
279 @include margin-left(26px);
280 @include margin-right(30px);
282 text-transform: uppercase;
283 font-weight: $font-bold; // Bold
294 padding-bottom: 15px;
298 padding: 0 $menu-lateral-padding;
308 @include margin-right(8px);
309 @include disable-default-a-behaviour;
311 color: pvar(--menuForegroundColor);
312 opacity: $footer-links-base-opacity;
316 font-weight: $font-semibold;
319 opacity: $footer-links-base-opacity + .2;
325 @include disable-default-a-behaviour;
327 color: pvar(--menuForegroundColor);
328 opacity: $footer-links-base-opacity - .2;
332 opacity: $footer-links-base-opacity;
337 z-index: #{z('menu') + 1} !important;
341 width: calc(100% + 40px);
343 // Prevent weird display issue on firefox when global style is not loaded yet
350 @include dropdown-with-icon-item;
357 .hover-display-toggle {
361 .hover-display-toggle[hidden] {
362 display: inherit !important;
368 text-transform: uppercase;
373 @media screen and (max-width: $mobile-view) {
375 width: 100% !important;
384 width: 100% !important;
388 width: calc(100vw - 30px);
393 &[iconName=playlists] {
394 @include margin-right(16px);
405 &[iconName=channel] {
409 &[iconName='sign-out'] {