4 $menu-link-icon-size: 22px;
5 $menu-link-icon-margin-right: 18px;
6 $footer-links-base-opacity: .8;
11 padding-left: $menu-lateral-padding;
12 color: pvar(--menuForegroundColor);
16 word-break: break-word;
18 transition: background-color .1s ease-in-out;
19 line-height: $line-height-normal;
22 background-color: rgba(255, 255, 255, 0.15);
25 &:hover, &.focus-visible {
26 background-color: rgba(255, 255, 255, 0.10);
30 @include apply-svg-color(#808080);
33 width: $menu-link-icon-size;
34 height: $menu-link-icon-size;
35 margin-right: $menu-link-icon-margin-right;
41 height: calc(100vh - #{$header-height});
45 scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
51 background-color: pvar(--menuBackgroundColor);
52 color: pvar(--menuForegroundColor);
55 flex-direction: column;
65 @media not all and (hover: hover) and (pointer: fine) {
87 background-color: rgba(255, 255, 255, 0.15);
93 justify-content: left;
107 border-radius: $main-radius;
108 transition: all .1s ease-in-out;
116 background-color: rgba(255, 255, 255, 0.20);
117 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
120 @mixin display-hints($is-mobile: false) {
121 background-color: rgba(255, 255, 255, 0.15);
124 .dropdown-toggle-indicator {
125 display: inherit !important;
127 .dropdown-toggle:first-child {
128 padding-right: 30px !important;
134 @include display-hints;
137 /* smartphones and touchscreens */
138 @media (hover: none) and (pointer: coarse) {
139 @include display-hints($is-mobile: true);
141 /* fill space when on mobile */
142 max-width: calc(100% - 80px);
147 max-width: calc(100% - 45px) !important;
152 .dropdown-toggle-indicator {
172 .dropdown-toggle:first-child {
176 border-radius: $main-radius;
180 @include avatar(34px);
191 .logged-in-display-name,
192 .logged-in-username {
196 .logged-in-display-name {
198 font-weight: $font-semibold;
199 color: pvar(--menuForegroundColor);
201 @include disable-default-a-behaviour;
204 .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 @include disable-default-a-behaviour;
223 $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
233 // Keep aligned with other icons
234 margin-left: $additional-margin;
236 &[iconName="channel"] {
245 @include apply-svg-color(var(--menuForegroundColor));
250 $border-left-width: 4px;
252 font-weight: $font-semibold;
253 border-left: $border-left-width solid var(--mainColor);
256 margin-left: $additional-margin - $border-left-width;
262 .login-buttons-block {
263 margin: 30px 25px 35px 25px;
266 @include peertube-button-link;
267 @include orange-button;
274 .create-account-button {
275 @include peertube-button-link;
281 background-color: rgba(255, 255, 255, 0.25);
284 background-color: rgba(255, 255, 255, 0.28);
295 text-transform: uppercase;
296 font-weight: $font-bold; // Bold
308 @include disable-default-a-behaviour;
313 &[iconName="playlists"] {
320 &[iconName="videos"] {
330 padding-bottom: 15px;
334 flex-direction: column;
335 padding: 0 $menu-lateral-padding;
345 a, span[role=button] {
346 display: inline-block;
347 text-decoration: none;
348 color: pvar(--menuForegroundColor);
349 opacity: $footer-links-base-opacity;
356 &.inline-global-icon {
357 display: inline-flex;
363 @include apply-svg-color(pvar(--menuForegroundColor));
374 .footer-copyleft small a {
375 @include disable-default-a-behaviour;
377 color: pvar(--menuForegroundColor);
378 opacity: $footer-links-base-opacity - .2;
382 z-index: #{z('menu') + 1} !important;
386 width: calc(100% + 40px);
390 @include dropdown-with-icon-item;
396 i.glyphicon-menu-right {
402 &[iconName="sign-out"] {
410 my-global-icon.not-displayed {
415 my-global-icon.hover-display-toggle.not-displayed {
418 my-global-icon.hover-display-toggle {
422 &.settings-sensitive {
423 my-global-icon ::ng-deep svg {
424 margin-top: 2px !important;
431 text-transform: uppercase;
436 @media screen and (max-width: $mobile-view) {
438 width: 100% !important;
446 width: 100% !important;
450 width: calc(100vw - 30px);
453 .dropdown-item:hover, .dropdown-item:active {
454 &.settings-sensitive my-global-icon ::ng-deep svg {
455 margin-top: 0px !important;