6 height: calc(100vh - #{$header-height});
13 background-color: var(--menuBackgroundColor);
18 text-overflow: ellipsis;
20 color: var(--menuForegroundColor);
22 flex-direction: column;
36 background-color: rgba(255, 255, 255, 0.15);
39 justify-content: center;
43 @include avatar(34px);
54 font-weight: $font-semibold;
55 color: var(--menuForegroundColor);
58 @include disable-default-a-behaviour;
66 text-overflow: ellipsis;
86 margin: 30px 25px 35px 25px;
89 @include peertube-button-link;
90 @include orange-button;
97 .create-account-button {
98 @include peertube-button-link;
104 background-color: rgba(255, 255, 255, 0.25);
107 background-color: rgba(255, 255, 255, 0.28);
113 text-transform: uppercase;
114 font-weight: $font-bold; // Bold
126 padding-left: $menu-lateral-padding;
127 color: var(--menuForegroundColor);
131 transition: background-color .1s ease-in-out;
132 @include disable-default-a-behaviour;
135 background-color: rgba(255, 255, 255, 0.15);
138 &:hover, &.focus-visible {
139 background-color: rgba(255, 255, 255, 0.10);
147 &.icon-videos-subscriptions {
150 background-image: url('../../assets/images/menu/subscriptions.svg');
153 &.icon-videos-overview {
155 background-image: url('../../assets/images/menu/globe.svg');
158 &.icon-videos-trending {
161 background-image: url('../../assets/images/menu/trending.svg');
164 &.icon-videos-recently-added {
167 background-image: url('../../assets/images/menu/recently-added.svg');
170 &.icon-videos-local {
177 background-image: url('../../assets/images/menu/home.svg');
180 &.icon-administration {
184 background-image: url('../../assets/images/menu/administration.svg');
191 background-image: url('../../assets/images/menu/about.svg');
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 background-color: #fff;
232 filter: invert(100%);
242 background-image: url('../../assets/images/menu/moonsun.svg');
253 @media screen and (max-width: 400px) {
255 width: 100% !important;
259 width: 100% !important;