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;
47 background-color: rgba(255, 255, 255, 0.15);
50 justify-content: center;
58 .logged-in-display-name {
60 font-weight: $font-semibold;
61 color: var(--menuForegroundColor);
64 @include disable-default-a-behaviour;
80 my-global-icon.dropdown-toggle {
88 @include apply-svg-color(var(--menuForegroundColor));
95 margin: 30px 25px 35px 25px;
98 @include peertube-button-link;
99 @include orange-button;
106 .create-account-button {
107 @include peertube-button-link;
113 background-color: rgba(255, 255, 255, 0.25);
116 background-color: rgba(255, 255, 255, 0.28);
122 text-transform: uppercase;
123 font-weight: $font-bold; // Bold
133 @include disable-default-a-behaviour;
137 padding-left: $menu-lateral-padding;
138 color: var(--menuForegroundColor);
142 transition: background-color .1s ease-in-out;
144 word-break: break-word;
148 background-color: rgba(255, 255, 255, 0.15);
151 &:hover, &.focus-visible {
152 background-color: rgba(255, 255, 255, 0.10);
156 @include apply-svg-color(#808080);
163 &[iconName="playlists"] {
170 &[iconName="videos"] {
186 padding-bottom: 15px;
188 & > div:not(.panel-block) {
189 padding-left: $menu-lateral-padding;
190 padding-right: $menu-lateral-padding;
194 $footer-links-base-opacity: .8;
197 display: inline-flex;
201 @include disable-default-a-behaviour;
203 display: inline-block;
204 text-decoration: none;
205 color: var(--mainBackgroundColor);
206 opacity: $footer-links-base-opacity;
213 &.inline-global-icon {
214 display: inline-flex;
220 @include apply-svg-color(var(--mainBackgroundColor));
231 .footer-copyleft small a {
232 @include disable-default-a-behaviour;
234 color: var(--mainBackgroundColor);
235 opacity: $footer-links-base-opacity - .2;
241 width: calc(100% + 40px);
245 @include dropdown-with-icon-item;
251 i.glyphicon-menu-right {
257 &[iconName="sign-out"] {
265 my-global-icon.not-displayed {
270 my-global-icon.hover-display-toggle.not-displayed {
273 my-global-icon.hover-display-toggle {
280 text-transform: uppercase;
286 @include disable-outline;
295 background-image: url('../../assets/images/menu/keyboard.png');
299 input[type=checkbox]{
306 text-indent: -9999px;
311 border-radius: 100px;
322 background: var(--mainBackgroundColor);
324 transition: 0.3s ease-out;
332 input:checked + label {
333 background: var(--mainColor);
336 left: calc(100% - 3px);
337 transform: translateX(-100%);
341 @media screen and (max-width: $mobile-view) {
343 width: 100% !important;
351 width: 100% !important;