padding: 0;
width: $menu-width;
z-index: z(menu);
- scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor);
+ scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
}
menu {
@include ellipsis;
- background-color: var(--menuBackgroundColor);
+ background-color: pvar(--menuBackgroundColor);
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
- color: var(--menuForegroundColor);
+ color: pvar(--menuForegroundColor);
display: flex;
flex-direction: column;
width: 100%;
overflow-y: auto;
}
+ @media not all and (hover: hover) and (pointer: fine) {
+ overflow-y: auto;
+ }
+
&.logged-in {
.panel-block {
margin-bottom: 20px;
.logged-in-display-name {
font-size: 16px;
font-weight: $font-semibold;
- color: var(--menuForegroundColor);
+ color: pvar(--menuForegroundColor);
cursor: pointer;
@include disable-default-a-behaviour;
}
::ng-deep {
- @include apply-svg-color(var(--menuForegroundColor));
+ @include apply-svg-color(pvar(--menuForegroundColor));
}
}
}
display: flex;
align-items: center;
padding-left: $menu-lateral-padding;
- color: var(--menuForegroundColor);
+ color: pvar(--menuForegroundColor);
cursor: pointer;
min-height: 40px;
font-size: 16px;
width: $menu-width;
padding-bottom: 15px;
- & > div:not(.panel-block) {
- padding-left: $menu-lateral-padding;
- padding-right: $menu-lateral-padding;
- row-gap: 1em;
+ .bottom-links {
+ display: flex;
+ flex-direction: column;
+ padding: 0 $menu-lateral-padding;
}
$footer-links-base-opacity: .8;
.footer-links {
- display: inline-flex;
- flex-wrap: wrap;
-
- & > a {
- @include disable-default-a-behaviour;
+ &, > div {
+ display: flex;
+ flex-wrap: wrap;
+ }
+ a, span[role=button] {
display: inline-block;
text-decoration: none;
- color: var(--mainBackgroundColor);
+ color: pvar(--mainBackgroundColor);
opacity: $footer-links-base-opacity;
white-space: nowrap;
font-size: 90%;
height: 1.4rem;
my-global-icon {
- @include apply-svg-color(var(--mainBackgroundColor));
-
+ @include apply-svg-color(pvar(--mainBackgroundColor));
+
display: flex;
width: auto;
height: 90%;
.footer-copyleft small a {
@include disable-default-a-behaviour;
- color: var(--mainBackgroundColor);
+ color: pvar(--mainBackgroundColor);
opacity: $footer-links-base-opacity - .2;
}
}
top: -1px;
margin-right: 10px;
- background-image: url('../../assets/images/menu/keyboard.png');
+ background-image: url('../../assets/images/misc/keyboard.png');
}
}
left: 3px;
width: 14px;
height: 14px;
- background: var(--mainBackgroundColor);
+ background: pvar(--mainBackgroundColor);
border-radius: 50%;
transition: 0.3s ease-out;
}
}
input:checked + label {
- background: var(--mainColor);
+ background: pvar(--mainColor);
&:after {
left: calc(100% - 3px);