Fix menu active/hover colors
This commit is contained in:
Chocobozzz
parent
e560ec090c
commit
21d4de3e14
|
|
@ -1,9 +1,16 @@
|
|||
<ng-template #moreInfoButton>
|
||||
<my-button i18n class="mt-2 d-block" theme="secondary" icon="help" i18n-title title="More info" i18n ptRouterLink="/about" ptRouterLinkActive="active">
|
||||
@if (!collapsed) {
|
||||
More info
|
||||
}
|
||||
</my-button>
|
||||
<div class="more-info-btn-container">
|
||||
<a
|
||||
class="more-info-btn peertube-button-link secondary-button peertube-button-icon mt-2 d-block" [ngClass]="{ 'icon-only': collapsed }"
|
||||
routerLink="/about" i18n-title title="More info" routerLinkActive="active"
|
||||
>
|
||||
<my-global-icon iconName="help"></my-global-icon>
|
||||
|
||||
@if (!collapsed) {
|
||||
More info
|
||||
}
|
||||
</a>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<div class="menu-container" [ngClass]="{ collapsed: collapsed, 'logged-in': loggedIn }">
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
.menu-button,
|
||||
.block-title,
|
||||
.about .description,
|
||||
.about my-button {
|
||||
.about .more-info-btn-container {
|
||||
@include padding-left(var(--co-menu-x-padding));
|
||||
@include padding-right(var(--co-menu-x-padding));
|
||||
}
|
||||
|
|
@ -107,6 +107,78 @@
|
|||
}
|
||||
}
|
||||
|
||||
.block-title {
|
||||
font-weight: $font-bold;
|
||||
color: pvar-fallback(--menu-fg, --fg-350);
|
||||
font-size: 14px;
|
||||
margin-bottom: 0.5rem;
|
||||
max-width: 180px;
|
||||
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
transition: background-color .1s ease-in-out;
|
||||
width: 100%;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
background-color: pvar-fallback(--menu-bg, --bg-secondary-450);
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
||||
+ *:not(.visually-hidden) {
|
||||
@include margin-left(12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.about {
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: pvar-fallback(--menu-fg, --fg-200);
|
||||
}
|
||||
}
|
||||
|
||||
.more-info-btn,
|
||||
.menu-link {
|
||||
color: pvar-fallback(--menu-fg, --fg-400);
|
||||
|
||||
my-global-icon {
|
||||
color: pvar(--secondary-icon-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
&,
|
||||
my-global-icon {
|
||||
color: pvar(--fg);
|
||||
}
|
||||
|
||||
font-weight: $font-bold;
|
||||
background-color: pvar-fallback(--menu-bg, --bg-secondary-500);
|
||||
}
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
.menu-block,
|
||||
.toggle-menu-container,
|
||||
|
|
@ -133,95 +205,19 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
.menu-link,
|
||||
.more-info-btn {
|
||||
border: 0 !important;
|
||||
justify-content: center;
|
||||
|
||||
my-global-icon {
|
||||
color: pvar-fallback(--menu-fg, --fg-400);
|
||||
&:not(.active) {
|
||||
my-global-icon {
|
||||
color: pvar-fallback(--menu-fg, --fg-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-title {
|
||||
font-weight: $font-bold;
|
||||
color: pvar-fallback(--menu-fg, --fg-350);
|
||||
font-size: 14px;
|
||||
margin-bottom: 0.5rem;
|
||||
max-width: 180px;
|
||||
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: pvar-fallback(--menu-fg, --fg-400);
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
transition: background-color .1s ease-in-out;
|
||||
width: 100%;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
background-color: pvar-fallback(--menu-bg, --bg-secondary-450);
|
||||
}
|
||||
|
||||
&.active {
|
||||
&,
|
||||
my-global-icon {
|
||||
color: pvar(--fg) !important;
|
||||
}
|
||||
|
||||
font-weight: $font-bold;
|
||||
background-color: pvar-fallback(--menu-bg, --bg-secondary-500);
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
||||
+ *:not(.visually-hidden) {
|
||||
@include margin-left(12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.about {
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: pvar-fallback(--menu-fg, --fg-200);
|
||||
}
|
||||
}
|
||||
|
||||
my-button[theme=secondary] {
|
||||
color: pvar-fallback(--menu-fg, --fg-400);
|
||||
}
|
||||
|
||||
my-button[theme=secondary] ::ng-deep my-global-icon,
|
||||
.menu-link my-global-icon {
|
||||
color: pvar(--secondary-icon-color) !important;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
my-button[theme=secondary] ::ng-deep my-global-icon,
|
||||
.menu-link my-global-icon {
|
||||
color: pvar-fallback(--menu-fg, --fg-200) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-overlay {
|
||||
background-color: #000;
|
||||
width: 100vw;
|
||||
|
|
|
|||
|
|
@ -211,8 +211,12 @@
|
|||
line-height: $width;
|
||||
top: $top;
|
||||
right: $right;
|
||||
}
|
||||
|
||||
@include margin-right($margin-right);
|
||||
&:not(.icon-only) {
|
||||
my-global-icon {
|
||||
@include margin-right($margin-right);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue