6 height: calc(100vh - #{$header-height});
10 scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor);
16 background-color: var(--menuBackgroundColor);
21 color: var(--menuForegroundColor);
23 flex-direction: column;
30 @media not all and (hover: hover) and (pointer: fine) {
51 background-color: rgba(255, 255, 255, 0.15);
54 justify-content: center;
62 .logged-in-display-name {
64 font-weight: $font-semibold;
65 color: var(--menuForegroundColor);
68 @include disable-default-a-behaviour;
84 my-global-icon.dropdown-toggle {
92 @include apply-svg-color(var(--menuForegroundColor));
99 margin: 30px 25px 35px 25px;
102 @include peertube-button-link;
103 @include orange-button;
110 .create-account-button {
111 @include peertube-button-link;
117 background-color: rgba(255, 255, 255, 0.25);
120 background-color: rgba(255, 255, 255, 0.28);
126 text-transform: uppercase;
127 font-weight: $font-bold; // Bold
137 @include disable-default-a-behaviour;
141 padding-left: $menu-lateral-padding;
142 color: var(--menuForegroundColor);
146 transition: background-color .1s ease-in-out;
148 word-break: break-word;
152 background-color: rgba(255, 255, 255, 0.15);
155 &:hover, &.focus-visible {
156 background-color: rgba(255, 255, 255, 0.10);
160 @include apply-svg-color(#808080);
167 &[iconName="playlists"] {
174 &[iconName="videos"] {
190 padding-bottom: 15px;
194 flex-direction: column;
195 padding: 0 $menu-lateral-padding;
198 $footer-links-base-opacity: .8;
206 a, span[role=button] {
207 display: inline-block;
208 text-decoration: none;
209 color: var(--mainBackgroundColor);
210 opacity: $footer-links-base-opacity;
217 &.inline-global-icon {
218 display: inline-flex;
224 @include apply-svg-color(var(--mainBackgroundColor));
235 .footer-copyleft small a {
236 @include disable-default-a-behaviour;
238 color: var(--mainBackgroundColor);
239 opacity: $footer-links-base-opacity - .2;
245 width: calc(100% + 40px);
249 @include dropdown-with-icon-item;
255 i.glyphicon-menu-right {
261 &[iconName="sign-out"] {
269 my-global-icon.not-displayed {
274 my-global-icon.hover-display-toggle.not-displayed {
277 my-global-icon.hover-display-toggle {
284 text-transform: uppercase;
290 @include disable-outline;
299 background-image: url('../../assets/images/menu/keyboard.png');
303 input[type=checkbox]{
310 text-indent: -9999px;
315 border-radius: 100px;
326 background: var(--mainBackgroundColor);
328 transition: 0.3s ease-out;
336 input:checked + label {
337 background: var(--mainColor);
340 left: calc(100% - 3px);
341 transform: translateX(-100%);
345 @media screen and (max-width: $mobile-view) {
347 width: 100% !important;
355 width: 100% !important;