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;
57 .logged-in-display-name {
59 font-weight: $font-semibold;
60 color: var(--menuForegroundColor);
63 @include disable-default-a-behaviour;
78 my-global-icon.dropdown-toggle {
86 @include apply-svg-color(var(--menuForegroundColor));
91 @include dropdown-with-icon-item;
97 &[iconName="sign-out"] {
109 margin: 30px 25px 35px 25px;
112 @include peertube-button-link;
113 @include orange-button;
120 .create-account-button {
121 @include peertube-button-link;
127 background-color: rgba(255, 255, 255, 0.25);
130 background-color: rgba(255, 255, 255, 0.28);
136 text-transform: uppercase;
137 font-weight: $font-bold; // Bold
147 @include disable-default-a-behaviour;
151 padding-left: $menu-lateral-padding;
152 color: var(--menuForegroundColor);
156 transition: background-color .1s ease-in-out;
158 word-break: break-word;
162 background-color: rgba(255, 255, 255, 0.15);
165 &:hover, &.focus-visible {
166 background-color: rgba(255, 255, 255, 0.10);
170 @include apply-svg-color(#808080);
177 &[iconName="playlists"] {
184 &[iconName="videos"] {
199 padding-bottom: 15px;
200 padding-left: $menu-lateral-padding;
201 padding-right: $menu-lateral-padding;
204 .language, .shortcuts, .color-palette {
205 display: inline-block;
206 color: $menu-bottom-color;
209 font-weight: $font-semibold;
212 @include disable-outline;
222 background-image: url('../../assets/images/menu/language.png');
231 background-image: url('../../assets/images/menu/keyboard.png');
232 filter: invert(100%);
242 background-image: url('../../assets/images/menu/moonsun.svg');
253 @media screen and (max-width: $mobile-view) {
255 width: 100% !important;
259 width: 100% !important;