MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): colors for active links

This commit is contained in:
upsiflu 2024-12-14 13:41:54 +01:00
parent d703c3e88e
commit 94f02e2d02
2 changed files with 33 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
front/src/components/ui/Link.vue
View File

@ -15,10 +15,10 @@ const isExternalLink = computed(() => {
</script>
<template>
<a v-if="isExternalLink" :class="[$style.external, $style[colorClass]]" :href="to?.toString()" target="_blank">
<a v-if="isExternalLink" :class="[$style.external, colorClass, 'is-colored']" :href="to?.toString()" target="_blank">
<slot />
</a>
<RouterLink v-if="to && !isExternalLink" :to="to" :class="$style[colorClass]">
<RouterLink v-if="to && !isExternalLink" :to="to" :class="[colorClass, 'is-colored']">
<i v-if="icon" :class="['bi', icon]" />
<slot />
</RouterLink>
@ -56,7 +56,7 @@ const isExternalLink = computed(() => {
font-size:1.4em;
}
&:not(:hover) {
&:not(:hover):not(:global(.active)) {
text-decoration:none;
background-color:transparent;
border-color:transparent;
@ -64,132 +64,6 @@ const isExternalLink = computed(() => {
transition:background-color .3s, border-color .2s;
@include light-theme {
&.is-secondary.is-outline {
--fw-bg-color: var(--fw-gray-600);
--fw-text-color: var(--fw-gray-700);
&[disabled] {
--fw-bg-color: var(--fw-gray-600) !important;
--fw-text-color: var(--fw-gray-600) !important;
}
&.is-hovered,
&:hover {
--fw-bg-color: var(--fw-gray-700) !important;
--fw-text-color: var(--fw-gray-800) !important;
}
&.is-active,
&:active {
--fw-text-color: var(--fw-red-010) !important;
border: 1px solid var(--fw-gray-600) !important;
}
}
&.is-outline {
&:not(:active):not(.is-active) {
background-color: transparent !important;
--fw-text-color:--fw-gray-400;
}
}
&.is-ghost {
&:not(:active):not(.is-active):not(:hover):not(.is-hovered) {
background-color: transparent !important;
border-color: transparent !important;
--fw-text-color:--fw-gray-400;
}
}
}
@include dark-theme {
&.is-secondary.is-outline {
--fw-bg-color: var(--fw-gray-500);
--fw-text-color: var(--fw-gray-400);
&[disabled] {
--fw-bg-color: var(--fw-gray-600) !important;
--fw-text-color: var(--fw-gray-700) !important;
}
&.is-hovered,
&:hover {
--fw-bg-color: var(--fw-gray-600) !important;
--fw-text-color: var(--fw-gray-500) !important;
}
&.is-active,
&:active {
--fw-text-color: var(--fw-red-010) !important;
--fw-bg-color: var(--fw-gray-700) !important;
border: 1px solid var(--fw-gray-600) !important;
}
}
&.is-outline {
&:not(:active):not(.is-active) {
background-color: transparent !important;
}
}
&.is-ghost {
&:not(:active):not(.is-active):not(:hover):not(.is-hovered) {
background-color: transparent !important;
border-color: transparent !important;
}
}
&.is-aligned-center {
justify-content: center;
}
&.is-aligned-left {
justify-content: flex-start;
}
&.is-aligned-right {
justify-content: flex-end;
}
&.is-shadow {
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}
&:not(.icon-only):not(.is-auto) {
min-width: 8.5rem;
}
&.is-full {
display: block;
}
&.is-round {
border-radius: 100vh;
}
&[disabled] {
font-weight: normal;
pointer-events: none;
}
&.is-loading {
@extend .is-active;
> span {
opacity: 0;
}
}
i.bi {
font-size: 1.2rem;
}
i.bi + span:not(:empty) {
margin-left: 1ch;
}
}
}

41
front/src/style/colors.scss
View File

@ -98,7 +98,7 @@
.funkwhale {
@include light-theme {
&.is-primary {
.is-primary {
--fw-bg-color: var(--fw-blue-400);
--fw-text-color: var(--fw-blue-010);
@ -116,11 +116,14 @@
&.is-active,
&:active {
--fw-bg-color: var(--fw-blue-600);
&.router-link-exact-active {
--fw-bg-color: var(--fw-blue-700);
}
}
}
}
&.is-secondary {
.is-secondary {
--fw-bg-color: var(--fw-gray-200);
--fw-text-color: var(--fw-gray-900);
@ -135,13 +138,17 @@
}
&.is-active,
&.active,
&:active {
--fw-bg-color: var(--fw-gray-400);
&.router-link-exact-active {
--fw-bg-color: var(--fw-gray-500);
}
}
}
}
&.is-destructive {
.is-destructive {
--fw-bg-color: var(--fw-red-400);
--fw-text-color: var(--fw-red-010);
@ -157,15 +164,19 @@
}
&.is-active,
&.active,
&:active {
--fw-bg-color: var(--fw-red-700);
&.router-link-exact-active {
--fw-bg-color: var(--fw-red-800);
}
}
}
}
}
@include dark-theme {
&.is-primary {
.is-primary {
--fw-bg-color: var(--fw-blue-600);
--fw-text-color: var(--fw-blue-010);
@ -181,35 +192,42 @@
}
&.is-active,
&.active,
&:active {
--fw-bg-color: var(--fw-blue-800);
&.router-link-exact-active {
--fw-bg-color: var(--fw-blue-900);
}
}
}
}
&.is-secondary {
.is-secondary {
--fw-bg-color: var(--fw-gray-700);
--fw-text-color: var(--fw-red-010);
&.is-colored {
&[disabled] {
--fw-bg-color: var(--fw-gray-600) !important;
--fw-text-color: var(--fw-gray-950) !important;
}
&.is-hovered,
&:hover {
--fw-bg-color: var(--fw-gray-800);
}
&.is-active,
&.active,
&:active {
--fw-bg-color: var(--fw-gray-900);
&.router-link-exact-active {
--fw-bg-color: var(--fw-gray-950);
}
}
}
&[disabled] {
--fw-bg-color: var(--fw-gray-600)
--fw-text-color: var(--fw-gray-950)
}
}
&.is-destructive {
.is-destructive {
--fw-bg-color: var(--fw-red-600);
--fw-text-color: var(--fw-red-010);
@ -225,6 +243,7 @@
}
&.is-active,
&.active,
&:active {
--fw-bg-color: var(--fw-red-800);
}