4 $menu-link-icon-size: 22px;
5 $menu-link-icon-margin-right: 18px;
6 $footer-links-base-opacity: .8;
9 @include disable-default-a-behaviour;
10 @include padding-left($menu-lateral-padding);
11 @include padding-right(20px);
16 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);
108 @mixin display-hints($is-mobile: false) {
109 background-color: rgba(255, 255, 255, 0.15);
112 .dropdown-toggle-indicator {
113 display: inherit !important;
116 .dropdown-toggle:first-child {
117 @include padding-left(30px !important);
124 @include margin-left(13px);
127 border-radius: $main-radius;
128 transition: all .1s ease-in-out;
133 background-color: rgba(255, 255, 255, 0.2);
134 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
138 @include display-hints;
141 /* smartphones and touchscreens */
142 @media (hover: none) and (pointer: coarse) {
143 @include display-hints($is-mobile: true);
145 /* fill space when on mobile */
146 max-width: calc(100% - 80px);
153 max-width: calc(100% - 45px) !important;
157 .dropdown-toggle-indicator {
177 .dropdown-toggle:first-child {
181 border-radius: $main-radius;
186 @include margin-right(10px);
195 .logged-in-display-name,
196 .logged-in-username {
200 .logged-in-display-name {
201 @include disable-default-a-behaviour;
204 font-weight: $font-semibold;
205 color: pvar(--menuForegroundColor);
208 .logged-in-username {
216 flex-direction: column;
217 align-items: flex-start;
218 border-top: 1px solid var(--greyForegroundColor);
219 line-height: $line-height-normal;
223 $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
230 // Keep aligned with other icons
231 @include margin-left($additional-margin);
241 @include apply-svg-color(var(--menuForegroundColor));
246 $border-left-width: 4px;
248 font-weight: $font-semibold;
249 border-left: $border-left-width solid var(--mainColor);
252 @include margin-left($additional-margin - $border-left-width);
258 .login-buttons-block {
259 margin: 30px 25px 35px;
271 .create-account-button {
273 background-color: rgba(255, 255, 255, 0.25);
276 background-color: rgba(255, 255, 255, 0.28);
286 @include margin-left(26px);
287 @include margin-right(30px);
289 text-transform: uppercase;
290 font-weight: $font-bold; // Bold
302 padding-bottom: 15px;
307 flex-direction: column;
308 padding: 0 $menu-lateral-padding;
320 @include margin-right(8px);
322 display: inline-block;
323 text-decoration: none;
324 color: pvar(--menuForegroundColor);
325 opacity: $footer-links-base-opacity;
333 .footer-copyleft small a {
334 @include disable-default-a-behaviour;
336 color: pvar(--menuForegroundColor);
337 opacity: $footer-links-base-opacity - .2;
341 z-index: #{z('menu') + 1} !important;
345 width: calc(100% + 40px);
349 @include dropdown-with-icon-item;
355 i.glyphicon-menu-right {
360 .hover-display-toggle {
364 .hover-display-toggle[hidden] {
365 display: inherit !important;
371 text-transform: uppercase;
376 @media screen and (max-width: $mobile-view) {
378 width: 100% !important;
387 width: 100% !important;
391 width: calc(100vw - 30px);
394 .dropdown-item:hover,
395 .dropdown-item:active {
396 &.settings-sensitive my-global-icon ::ng-deep svg {
397 margin-top: 0 !important;
403 &[iconName=playlists] {
404 @include margin-right(16px);
415 &[iconName=channel] {
419 &[iconName='sign-out'] {