4 $menu-link-icon-size: 22px;
5 $menu-link-icon-margin-right: 18px;
10 padding-left: $menu-lateral-padding;
11 color: pvar(--menuForegroundColor);
15 word-break: break-word;
17 transition: background-color .1s ease-in-out;
20 background-color: rgba(255, 255, 255, 0.15);
23 &:hover, &.focus-visible {
24 background-color: rgba(255, 255, 255, 0.10);
28 @include apply-svg-color(#808080);
31 width: $menu-link-icon-size;
32 height: $menu-link-icon-size;
33 margin-right: $menu-link-icon-margin-right;
39 height: calc(100vh - #{$header-height});
43 scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
49 background-color: pvar(--menuBackgroundColor);
50 color: pvar(--menuForegroundColor);
53 flex-direction: column;
63 @media not all and (hover: hover) and (pointer: fine) {
85 background-color: rgba(255, 255, 255, 0.15);
91 justify-content: left;
97 border-radius: $main-radius;
98 transition: all .1s ease-in-out;
106 background-color: rgba(255, 255, 255, 0.20);
107 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
110 @mixin display-hints($is-mobile: false) {
111 background-color: rgba(255, 255, 255, 0.15);
114 .dropdown-toggle-indicator {
115 display: inherit !important;
117 .dropdown-toggle:first-child {
118 padding-right: 30px !important;
124 @include display-hints;
127 /* smartphones and touchscreens */
128 @media (hover: none) and (pointer: coarse) {
129 @include display-hints($is-mobile: true);
131 /* fill space when on mobile */
132 max-width: calc(100% - 80px);
137 max-width: calc(100% - 45px) !important;
142 .dropdown-toggle-indicator {
162 .dropdown-toggle:first-child {
163 display: inline-flex;
169 @include avatar(34px);
179 .logged-in-display-name,
180 .logged-in-username {
184 .logged-in-display-name {
186 font-weight: $font-semibold;
187 color: pvar(--menuForegroundColor);
189 @include disable-default-a-behaviour;
192 .logged-in-username {
207 flex-direction: column;
208 align-items: flex-start;
209 border-top: 1px solid var(--greyForegroundColor);
213 @include disable-default-a-behaviour;
216 $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
226 // Keep aligned with other icons
227 margin-left: $additional-margin;
229 &[iconName="channel"] {
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;
256 .login-buttons-block {
257 margin: 30px 25px 35px 25px;
260 @include peertube-button-link;
261 @include orange-button;
268 .create-account-button {
269 @include peertube-button-link;
275 background-color: rgba(255, 255, 255, 0.25);
278 background-color: rgba(255, 255, 255, 0.28);
289 text-transform: uppercase;
290 font-weight: $font-bold; // Bold
302 @include disable-default-a-behaviour;
307 &[iconName="playlists"] {
314 &[iconName="videos"] {
324 padding-bottom: 15px;
328 flex-direction: column;
329 padding: 0 $menu-lateral-padding;
332 $footer-links-base-opacity: .8;
340 a, span[role=button] {
341 display: inline-block;
342 text-decoration: none;
343 color: pvar(--menuForegroundColor);
344 opacity: $footer-links-base-opacity;
351 &.inline-global-icon {
352 display: inline-flex;
358 @include apply-svg-color(pvar(--menuForegroundColor));
369 .footer-copyleft small a {
370 @include disable-default-a-behaviour;
372 color: pvar(--menuForegroundColor);
373 opacity: $footer-links-base-opacity - .2;
378 z-index: #{z('menu') + 1} !important;
382 width: calc(100% + 40px);
386 @include dropdown-with-icon-item;
392 i.glyphicon-menu-right {
398 &[iconName="sign-out"] {
406 my-global-icon.not-displayed {
411 my-global-icon.hover-display-toggle.not-displayed {
414 my-global-icon.hover-display-toggle {
418 &.settings-sensitive {
419 my-global-icon ::ng-deep svg {
420 margin-top: 2px !important;
427 text-transform: uppercase;
432 @media screen and (max-width: $mobile-view) {
434 width: 100% !important;
442 width: 100% !important;
446 width: calc(100vw - 30px);
449 .dropdown-item:hover, .dropdown-item:active {
450 &.settings-sensitive my-global-icon ::ng-deep svg {
451 margin-top: 0px !important;