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);
27 &:hover, &.focus-visible {
28 background-color: rgba(255, 255, 255, 0.10);
32 @include apply-svg-color(#808080);
35 width: $menu-link-icon-size;
36 height: $menu-link-icon-size;
37 margin-right: $menu-link-icon-margin-right;
43 height: calc(100vh - #{$header-height});
47 scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
53 background-color: pvar(--menuBackgroundColor);
54 color: pvar(--menuForegroundColor);
57 flex-direction: column;
67 @media not all and (hover: hover) and (pointer: fine) {
89 background-color: rgba(255, 255, 255, 0.15);
95 justify-content: left;
105 @mixin display-hints($is-mobile: false) {
106 background-color: rgba(255, 255, 255, 0.15);
109 .dropdown-toggle-indicator {
110 display: inherit !important;
112 .dropdown-toggle:first-child {
113 padding-right: 30px !important;
122 border-radius: $main-radius;
123 transition: all .1s ease-in-out;
128 background-color: rgba(255, 255, 255, 0.20);
129 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
133 @include display-hints;
136 /* smartphones and touchscreens */
137 @media (hover: none) and (pointer: coarse) {
138 @include display-hints($is-mobile: true);
140 /* fill space when on mobile */
141 max-width: calc(100% - 80px);
148 max-width: calc(100% - 45px) !important;
152 .dropdown-toggle-indicator {
172 .dropdown-toggle:first-child {
176 border-radius: $main-radius;
190 .logged-in-display-name,
191 .logged-in-username {
195 .logged-in-display-name {
197 font-weight: $font-semibold;
198 color: pvar(--menuForegroundColor);
200 @include disable-default-a-behaviour;
203 .logged-in-username {
211 flex-direction: column;
212 align-items: flex-start;
213 border-top: 1px solid var(--greyForegroundColor);
214 line-height: $line-height-normal;
218 $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
228 // Keep aligned with other icons
229 margin-left: $additional-margin;
236 @include apply-svg-color(var(--menuForegroundColor));
241 $border-left-width: 4px;
243 font-weight: $font-semibold;
244 border-left: $border-left-width solid var(--mainColor);
247 margin-left: $additional-margin - $border-left-width;
253 .login-buttons-block {
254 margin: 30px 25px 35px 25px;
266 .create-account-button {
268 background-color: rgba(255, 255, 255, 0.25);
271 background-color: rgba(255, 255, 255, 0.28);
283 text-transform: uppercase;
284 font-weight: $font-bold; // Bold
298 padding-bottom: 15px;
303 flex-direction: column;
304 padding: 0 $menu-lateral-padding;
315 display: inline-block;
316 text-decoration: none;
317 color: pvar(--menuForegroundColor);
318 opacity: $footer-links-base-opacity;
327 .footer-copyleft small a {
328 @include disable-default-a-behaviour;
330 color: pvar(--menuForegroundColor);
331 opacity: $footer-links-base-opacity - .2;
335 z-index: #{z('menu') + 1} !important;
339 width: calc(100% + 40px);
343 @include dropdown-with-icon-item;
349 i.glyphicon-menu-right {
354 .hover-display-toggle {
358 .hover-display-toggle[hidden] {
359 display: inherit !important;
365 text-transform: uppercase;
370 @media screen and (max-width: $mobile-view) {
372 width: 100% !important;
381 width: 100% !important;
385 width: calc(100vw - 30px);
388 .dropdown-item:hover,
389 .dropdown-item:active {
390 &.settings-sensitive my-global-icon ::ng-deep svg {
391 margin-top: 0px !important;
397 &[iconName="playlists"] {
404 &[iconName="videos"] {
409 &[iconName="channel"] {
413 &[iconName="sign-out"] {