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;
13 padding-left: $menu-lateral-padding;
14 color: pvar(--menuForegroundColor);
18 word-break: break-word;
20 transition: background-color .1s ease-in-out;
21 line-height: $line-height-normal;
24 background-color: rgba(255, 255, 255, 0.15);
29 background-color: rgba(255, 255, 255, 0.1);
33 @include apply-svg-color(#808080);
36 width: $menu-link-icon-size;
37 height: $menu-link-icon-size;
38 margin-right: $menu-link-icon-margin-right;
44 height: calc(100vh - #{$header-height});
48 scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
54 background-color: pvar(--menuBackgroundColor);
55 color: pvar(--menuForegroundColor);
58 flex-direction: column;
69 @media not all and (hover: hover) and (pointer: fine) {
91 background-color: rgba(255, 255, 255, 0.15);
97 justify-content: left;
107 @mixin display-hints($is-mobile: false) {
108 background-color: rgba(255, 255, 255, 0.15);
111 .dropdown-toggle-indicator {
112 display: inherit !important;
114 .dropdown-toggle:first-child {
115 padding-right: 30px !important;
124 border-radius: $main-radius;
125 transition: all .1s ease-in-out;
130 background-color: rgba(255, 255, 255, 0.2);
131 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
135 @include display-hints;
138 /* smartphones and touchscreens */
139 @media (hover: none) and (pointer: coarse) {
140 @include display-hints($is-mobile: true);
142 /* fill space when on mobile */
143 max-width: calc(100% - 80px);
150 max-width: calc(100% - 45px) !important;
154 .dropdown-toggle-indicator {
174 .dropdown-toggle:first-child {
178 border-radius: $main-radius;
192 .logged-in-display-name,
193 .logged-in-username {
197 .logged-in-display-name {
198 @include disable-default-a-behaviour;
201 font-weight: $font-semibold;
202 color: pvar(--menuForegroundColor);
205 .logged-in-username {
213 flex-direction: column;
214 align-items: flex-start;
215 border-top: 1px solid var(--greyForegroundColor);
216 line-height: $line-height-normal;
220 $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
230 // Keep aligned with other icons
231 margin-left: $additional-margin;
238 @include apply-svg-color(var(--menuForegroundColor));
243 $border-left-width: 4px;
245 font-weight: $font-semibold;
246 border-left: $border-left-width solid var(--mainColor);
249 margin-left: $additional-margin - $border-left-width;
255 .login-buttons-block {
256 margin: 30px 25px 35px;
268 .create-account-button {
270 background-color: rgba(255, 255, 255, 0.25);
273 background-color: rgba(255, 255, 255, 0.28);
285 text-transform: uppercase;
286 font-weight: $font-bold; // Bold
300 padding-bottom: 15px;
305 flex-direction: column;
306 padding: 0 $menu-lateral-padding;
318 display: inline-block;
319 text-decoration: none;
320 color: pvar(--menuForegroundColor);
321 opacity: $footer-links-base-opacity;
330 .footer-copyleft small a {
331 @include disable-default-a-behaviour;
333 color: pvar(--menuForegroundColor);
334 opacity: $footer-links-base-opacity - .2;
338 z-index: #{z('menu') + 1} !important;
342 width: calc(100% + 40px);
346 @include dropdown-with-icon-item;
352 i.glyphicon-menu-right {
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);
391 .dropdown-item:hover,
392 .dropdown-item:active {
393 &.settings-sensitive my-global-icon ::ng-deep svg {
394 margin-top: 0 !important;
400 &[iconName=playlists] {
412 &[iconName=channel] {
416 &[iconName='sign-out'] {