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;
47 font-weight: $font-semibold;
48 color: var(--menuForegroundColor);
51 @include disable-default-a-behaviour;
59 text-overflow: ellipsis;
79 margin: 30px 25px 35px 25px;
82 @include peertube-button-link;
83 @include orange-button;
90 .create-account-button {
91 @include peertube-button-link;
97 background-color: rgba(255, 255, 255, 0.25);
100 background-color: rgba(255, 255, 255, 0.28);
106 text-transform: uppercase;
107 font-weight: $font-bold; // Bold
119 padding-left: $menu-lateral-padding;
120 color: var(--menuForegroundColor);
124 transition: background-color .1s ease-in-out;
125 @include disable-default-a-behaviour;
128 background-color: rgba(255, 255, 255, 0.15);
131 &:hover, &.focus-visible {
132 background-color: rgba(255, 255, 255, 0.10);
140 &.icon-videos-subscriptions {
143 background-image: url('../../assets/images/menu/subscriptions.svg');
146 &.icon-videos-overview {
148 background-image: url('../../assets/images/menu/globe.svg');
151 &.icon-videos-trending {
154 background-image: url('../../assets/images/menu/trending.svg');
157 &.icon-videos-recently-added {
160 background-image: url('../../assets/images/menu/recently-added.svg');
163 &.icon-videos-local {
170 background-image: url('../../assets/images/menu/home.svg');
173 &.icon-administration {
177 background-image: url('../../assets/images/menu/administration.svg');
184 background-image: url('../../assets/images/menu/about.svg');
191 padding-bottom: 15px;
192 padding-left: $menu-lateral-padding;
193 padding-right: $menu-lateral-padding;
196 .language, .shortcuts, .color-palette {
197 display: inline-block;
198 color: $menu-bottom-color;
201 font-weight: $font-semibold;
204 @include disable-outline;
214 background-image: url('../../assets/images/menu/language.png');
223 background-image: url('../../assets/images/menu/keyboard.png');
224 background-color: #fff;
225 filter: invert(100%);
235 background-image: url('../../assets/images/menu/moonsun.svg');
246 @media screen and (max-width: $mobile-view) {
248 width: 100% !important;
252 width: 100% !important;