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: center;
98 .logged-in-display-name {
100 font-weight: $font-semibold;
101 color: pvar(--menuForegroundColor);
104 @include disable-default-a-behaviour;
107 .logged-in-username {
120 my-global-icon.dropdown-toggle {
128 @include apply-svg-color(pvar(--menuForegroundColor));
136 flex-direction: column;
137 align-items: flex-start;
138 border-top: 1px solid var(--greyForegroundColor);
142 @include disable-default-a-behaviour;
145 $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
155 // Keep aligned with other icons
156 margin-left: $additional-margin;
158 &[iconName="channel"] {
167 @include apply-svg-color(var(--menuForegroundColor));
172 $border-left-width: 4px;
174 font-weight: $font-semibold;
175 border-left: $border-left-width solid var(--mainColor);
178 margin-left: $additional-margin - $border-left-width;
185 .login-buttons-block {
186 margin: 30px 25px 35px 25px;
189 @include peertube-button-link;
190 @include orange-button;
197 .create-account-button {
198 @include peertube-button-link;
204 background-color: rgba(255, 255, 255, 0.25);
207 background-color: rgba(255, 255, 255, 0.28);
218 text-transform: uppercase;
219 font-weight: $font-bold; // Bold
231 @include disable-default-a-behaviour;
236 &[iconName="playlists"] {
243 &[iconName="videos"] {
253 padding-bottom: 15px;
257 flex-direction: column;
258 padding: 0 $menu-lateral-padding;
261 $footer-links-base-opacity: .8;
269 a, span[role=button] {
270 display: inline-block;
271 text-decoration: none;
272 color: pvar(--menuForegroundColor);
273 opacity: $footer-links-base-opacity;
280 &.inline-global-icon {
281 display: inline-flex;
287 @include apply-svg-color(pvar(--menuForegroundColor));
298 .footer-copyleft small a {
299 @include disable-default-a-behaviour;
301 color: pvar(--menuForegroundColor);
302 opacity: $footer-links-base-opacity - .2;
307 z-index: #{z('menu') + 1} !important;
311 width: calc(100% + 40px);
315 @include dropdown-with-icon-item;
321 i.glyphicon-menu-right {
327 &[iconName="sign-out"] {
335 my-global-icon.not-displayed {
340 my-global-icon.hover-display-toggle.not-displayed {
343 my-global-icon.hover-display-toggle {
350 text-transform: uppercase;
355 @media screen and (max-width: $mobile-view) {
357 width: 100% !important;
365 width: 100% !important;