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);
21 word-break: break-word;
22 transition: background-color .1s ease-in-out;
23 line-height: $line-height-normal;
26 background-color: rgba(255, 255, 255, 0.15);
31 background-color: rgba(255, 255, 255, 0.1);
35 @include apply-svg-color(#808080);
36 @include margin-right($menu-link-icon-margin-right);
39 width: $menu-link-icon-size;
40 height: $menu-link-icon-size;
46 height: calc(100vh - #{$header-height});
50 scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
56 background-color: pvar(--menuBackgroundColor);
57 color: pvar(--menuForegroundColor);
60 flex-direction: column;
71 @media not all and (hover: hover) and (pointer: fine) {
93 background-color: rgba(255, 255, 255, 0.15);
99 justify-content: left;
104 @include margin-left(auto);
105 @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;
117 .dropdown-toggle:first-child {
118 @include padding-left(30px !important);
125 @include margin-left(13px);
128 border-radius: $main-radius;
129 transition: all .1s ease-in-out;
134 background-color: rgba(255, 255, 255, 0.2);
135 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
139 @include display-hints;
142 /* smartphones and touchscreens */
143 @media (hover: none) and (pointer: coarse) {
144 @include display-hints($is-mobile: true);
146 /* fill space when on mobile */
147 max-width: calc(100% - 80px);
154 max-width: calc(100% - 45px) !important;
158 .dropdown-toggle-indicator {
178 .dropdown-toggle:first-child {
182 border-radius: $main-radius;
187 @include margin-right(10px);
196 .logged-in-display-name,
197 .logged-in-username {
201 .logged-in-display-name {
202 @include disable-default-a-behaviour;
205 font-weight: $font-semibold;
206 color: pvar(--menuForegroundColor);
209 .logged-in-username {
217 flex-direction: column;
218 align-items: flex-start;
219 border-top: 1px solid var(--greyForegroundColor);
220 line-height: $line-height-normal;
224 $additional-margin: math.div($menu-link-icon-size - $icon-size, 2);
231 // Keep aligned with other icons
232 @include margin-left($additional-margin);
242 @include apply-svg-color(var(--menuForegroundColor));
247 $border-left-width: 4px;
249 font-weight: $font-semibold;
250 border-left: $border-left-width solid var(--mainColor);
253 @include margin-left($additional-margin - $border-left-width);
259 .login-buttons-block {
260 margin: 30px 25px 35px;
272 .create-account-button {
274 background-color: rgba(255, 255, 255, 0.25);
277 background-color: rgba(255, 255, 255, 0.28);
287 @include margin-left(26px);
288 @include margin-right(30px);
290 text-transform: uppercase;
291 font-weight: $font-bold; // Bold
303 padding-bottom: 15px;
308 flex-direction: column;
309 padding: 0 $menu-lateral-padding;
321 @include margin-right(8px);
323 display: inline-block;
324 text-decoration: none;
325 color: pvar(--menuForegroundColor);
326 opacity: $footer-links-base-opacity;
334 .footer-copyleft small a {
335 @include disable-default-a-behaviour;
337 color: pvar(--menuForegroundColor);
338 opacity: $footer-links-base-opacity - .2;
342 z-index: #{z('menu') + 1} !important;
346 width: calc(100% + 40px);
350 @include dropdown-with-icon-item;
356 i.glyphicon-menu-right {
361 .hover-display-toggle {
365 .hover-display-toggle[hidden] {
366 display: inherit !important;
372 text-transform: uppercase;
377 @media screen and (max-width: $mobile-view) {
379 width: 100% !important;
388 width: 100% !important;
392 width: calc(100vw - 30px);
395 .dropdown-item:hover,
396 .dropdown-item:active {
397 &.settings-sensitive my-global-icon ::ng-deep svg {
398 margin-top: 0 !important;
404 &[iconName=playlists] {
405 @include margin-right(16px);
416 &[iconName=channel] {
420 &[iconName='sign-out'] {