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));
93 @include dropdown-with-icon-item;
99 &[iconName="sign-out"] {
111 margin: 30px 25px 35px 25px;
114 @include peertube-button-link;
115 @include orange-button;
122 .create-account-button {
123 @include peertube-button-link;
129 background-color: rgba(255, 255, 255, 0.25);
132 background-color: rgba(255, 255, 255, 0.28);
138 text-transform: uppercase;
139 font-weight: $font-bold; // Bold
149 @include disable-default-a-behaviour;
153 padding-left: $menu-lateral-padding;
154 color: var(--menuForegroundColor);
158 transition: background-color .1s ease-in-out;
160 word-break: break-word;
164 background-color: rgba(255, 255, 255, 0.15);
167 &:hover, &.focus-visible {
168 background-color: rgba(255, 255, 255, 0.10);
172 @include apply-svg-color(#808080);
179 &[iconName="playlists"] {
186 &[iconName="videos"] {
201 padding-bottom: 15px;
202 padding-left: $menu-lateral-padding;
203 padding-right: $menu-lateral-padding;
206 .language, .shortcuts, .color-palette {
207 display: inline-block;
208 color: $menu-bottom-color;
211 font-weight: $font-semibold;
214 @include disable-outline;
224 background-image: url('../../assets/images/menu/language.png');
233 background-image: url('../../assets/images/menu/keyboard.png');
234 filter: invert(100%);
244 background-image: url('../../assets/images/menu/moonsun.svg');
255 @media screen and (max-width: $mobile-view) {
257 width: 100% !important;
261 width: 100% !important;