Cutlery/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-11 07:35:17 -05:00
Code Issues Packages Projects Releases Wiki Activity

style: add hover states

Browse Source
This commit is contained in:
MAZE 2023-12-29 17:30:13 +03:30
parent 8efb1cee00
commit 2c74dd0d60
7 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/buttons/play/play.module.css
View File

@ -13,6 +13,11 @@
border: 1px solid var(--color-neutral-50); border: 1px solid var(--color-neutral-50);
border-radius: 100px; border-radius: 100px;
outline: none; outline: none;
transition: 0.2s;
&:hover {
background-color: var(--color-neutral-800);
}
&:disabled, &:disabled,
&.disabled { &.disabled {

6
src/components/buttons/unselect/unselect.module.css
View File

@ -10,7 +10,7 @@
color: var(--color-foreground); color: var(--color-foreground);
cursor: pointer; cursor: pointer;
background-color: var(--color-neutral-100); background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-200); border: 1px solid var(--color-neutral-300);
border-radius: 100px; border-radius: 100px;
outline: none; outline: none;
transition: 0.2s; transition: 0.2s;
@ -19,6 +19,10 @@
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
} }
&:hover {
background-color: var(--color-neutral-200);
}
} }
.tooltip { .tooltip {

5
src/components/scroll-to-top/scroll-to-top.module.css
View File

@ -14,4 +14,9 @@
background-color: var(--color-neutral-100); background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-300); border: 1px solid var(--color-neutral-300);
border-radius: 50%; border-radius: 50%;
transition: 0.2s;
&:hover {
background-color: var(--color-neutral-200);
}
} }

5
src/components/sections/ready.astro
View File

@ -111,6 +111,11 @@ import { Container } from '@/components/container';
border: none; border: none;
border-radius: 100px; border-radius: 100px;
outline: none; outline: none;
transition: 0.2s;
&:hover {
background-color: var(--color-neutral-800);
}
} }
} }
</style> </style>

5
src/components/shuffle/shuffle.module.css
View File

@ -14,4 +14,9 @@
background-color: var(--color-neutral-100); background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-300); border: 1px solid var(--color-neutral-300);
border-radius: 50%; border-radius: 50%;
transition: 0.2s;
&:hover {
background-color: var(--color-neutral-200);
}
} }

5
src/components/sound/favorite/favorite.module.css
View File

@ -15,6 +15,11 @@
border: 1px solid var(--color-neutral-200); border: 1px solid var(--color-neutral-200);
border-radius: 50%; border-radius: 50%;
outline: none; outline: none;
transition: 0.2s;
&:hover {
color: var(--color-foreground);
}
&.isFavorite { &.isFavorite {
color: var(--color-foreground); color: var(--color-foreground);

4
src/components/sound/sound.module.css
View File

@ -78,6 +78,10 @@
} }
} }
&:hover .icon {
color: var(--color-foreground-subtle);
}
&.selected { &.selected {
border-color: transparent; border-color: transparent;
box-shadow: 0 0 0 2px var(--color-neutral-800); box-shadow: 0 0 0 2px var(--color-neutral-800);