6 height: calc(100vh - #{$header-height});
15 background-color: var(--menuBackgroundColor);
20 color: var(--menuForegroundColor);
22 flex-direction: column;
46 background-color: rgba(255, 255, 255, 0.15);
49 justify-content: center;
58 text-overflow: ellipsis;
60 .logged-in-display-name {
62 font-weight: $font-semibold;
63 color: var(--menuForegroundColor);
66 @include disable-default-a-behaviour;
82 @include apply-svg-color(var(--mainBackgroundColor));
92 @include dropdown-with-icon-item;
95 @include apply-svg-color(var(--mainForegroundColor));
100 &[iconName="sign-out"] {
112 margin: 30px 25px 35px 25px;
115 @include peertube-button-link;
116 @include orange-button;
123 .create-account-button {
124 @include peertube-button-link;
130 background-color: rgba(255, 255, 255, 0.25);
133 background-color: rgba(255, 255, 255, 0.28);
139 text-transform: uppercase;
140 font-weight: $font-bold; // Bold
152 padding-left: $menu-lateral-padding;
153 color: var(--menuForegroundColor);
157 transition: background-color .1s ease-in-out;
158 @include disable-default-a-behaviour;
161 background-color: rgba(255, 255, 255, 0.15);
164 &:hover, &.focus-visible {
165 background-color: rgba(255, 255, 255, 0.10);
169 @include apply-svg-color(#808080);
176 &[iconName="playlists"] {
183 &[iconName="videos"] {
198 padding-bottom: 15px;
199 padding-left: $menu-lateral-padding;
200 padding-right: $menu-lateral-padding;
203 .language, .shortcuts, .color-palette {
204 display: inline-block;
205 color: $menu-bottom-color;
208 font-weight: $font-semibold;
211 @include disable-outline;
221 background-image: url('../../assets/images/menu/language.png');
230 background-image: url('../../assets/images/menu/keyboard.png');
231 filter: invert(100%);
241 background-image: url('../../assets/images/menu/moonsun.svg');
252 @media screen and (max-width: $mobile-view) {
254 width: 100% !important;
258 width: 100% !important;