mirrors/Hyperpipe
1
0
Fork 0
mirror of https://codeberg.org/Hyperpipe/Hyperpipe synced 2025-06-27 20:58:01 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add click animation to Genres, Modal, Playlists

Browse source
This commit is contained in:
Denevola 2022-09-24 03:10:08 +09:00
parent 437e3ebd2f
commit f207b2f4dc
3 changed files with 12 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/Genres.vue
View file

@ -126,10 +126,14 @@ onMounted(get);
letter-spacing: 0.125rem; letter-spacing: 0.125rem;
background-color: var(--color-background-mute); background-color: var(--color-background-mute);
color: var(--btn-color); color: var(--btn-color);
transition: background-color 0.1s ease;
} }
.btn:hover { .btn:hover {
background-color: var(--color-background-soft); background-color: var(--color-background-soft);
} }
.btn:active {
background-color: var(--color-border);
}
.head { .head {
margin-top: 1.75rem; margin-top: 1.75rem;
text-align: center; text-align: center;

4
src/components/Modal.vue
View file

@ -91,6 +91,7 @@ watch(show, n => {
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
border-right: 1px solid var(--color-shadow); border-right: 1px solid var(--color-shadow);
transition: background-color 0.1s ease;
} }
.modal-buttons button:first-child { .modal-buttons button:first-child {
color: indianred; color: indianred;
@ -103,6 +104,9 @@ watch(show, n => {
.modal-buttons button:hover { .modal-buttons button:hover {
background-color: var(--color-background-mute); background-color: var(--color-background-mute);
} }
.modal-buttons button:active {
background-color: var(--color-border);
}
@media (max-width: 530px) { @media (max-width: 530px) {
.modal-box { .modal-box {

4
src/components/Playlists.vue
View file

@ -62,10 +62,14 @@ defineEmits(['playthis']);
margin: 0.125rem; margin: 0.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background: var(--color-background); background: var(--color-background);
transition: background-color 0.1s ease;
} }
.pl-item:hover { .pl-item:hover {
background: var(--color-background-soft); background: var(--color-background-soft);
} }
.pl-item:active {
background: var(--color-border);
}
.pl-main { .pl-main {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;