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;
79 my-global-icon.dropdown-toggle {
87 @include apply-svg-color(var(--menuForegroundColor));
92 @include dropdown-with-icon-item;
98 &[iconName="sign-out"] {
110 margin: 30px 25px 35px 25px;
113 @include peertube-button-link;
114 @include orange-button;
121 .create-account-button {
122 @include peertube-button-link;
128 background-color: rgba(255, 255, 255, 0.25);
131 background-color: rgba(255, 255, 255, 0.28);
137 text-transform: uppercase;
138 font-weight: $font-bold; // Bold
148 @include disable-default-a-behaviour;
152 padding-left: $menu-lateral-padding;
153 color: var(--menuForegroundColor);
157 transition: background-color .1s ease-in-out;
159 word-break: break-word;
163 background-color: rgba(255, 255, 255, 0.15);
166 &:hover, &.focus-visible {
167 background-color: rgba(255, 255, 255, 0.10);
171 @include apply-svg-color(#808080);
178 &[iconName="playlists"] {
185 &[iconName="videos"] {
200 padding-bottom: 15px;
201 padding-left: $menu-lateral-padding;
202 padding-right: $menu-lateral-padding;
205 .language, .shortcuts, .color-palette {
206 display: inline-block;
207 color: $menu-bottom-color;
210 font-weight: $font-semibold;
213 @include disable-outline;
223 background-image: url('../../assets/images/menu/language.png');
232 background-image: url('../../assets/images/menu/keyboard.png');
233 filter: invert(100%);
243 background-image: url('../../assets/images/menu/moonsun.svg');
254 @media screen and (max-width: $mobile-view) {
256 width: 100% !important;
260 width: 100% !important;