use album colors on album header play button

- use alnum chars only on hashes
- add underline on track album hover
This commit is contained in:
geoffrey45
2022-06-30 21:02:01 +03:00
committed by Mungai Geoffrey
parent 5acb8cb84d
commit 34a214df22
6 changed files with 87 additions and 19 deletions
+18 -2
View File
@@ -2,8 +2,12 @@
<div
class="playbtnrect rounded"
@click="usePlayFrom(source, useQStore, store)"
:style="{
backgroundColor: background.color,
}"
:class="{ playbtnrectdark: background.isDark }"
>
<div class="icon image"></div>
<playBtnSvg />
<div class="text">Play</div>
</div>
</template>
@@ -15,9 +19,14 @@ import useFStore from "@/stores/pages/folder";
import useAStore from "@/stores/pages/album";
import usePStore from "@/stores/pages/playlist";
import useQStore from "@/stores/queue";
import playBtnSvg from "@/assets/icons/play.svg";
defineProps<{
source: playSources;
background?: {
color: string;
isDark?: boolean;
};
store:
| typeof useQStore
| typeof useFStore
@@ -34,7 +43,6 @@ defineProps<{
height: 2.5rem;
padding-left: 0.75rem;
cursor: pointer;
background-color: $accent;
user-select: none;
color: $white;
transition: all 0.5s ease-in-out;
@@ -51,4 +59,12 @@ defineProps<{
}
}
}
.playbtnrectdark {
color: $black !important;
svg > path {
fill: $accent !important;
}
}
</style>