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

fix(style): make [aria-pressed] override any :hover styles

This commit is contained in:
upsiflu 2024-12-17 23:39:00 +01:00
parent b6d4ca5901
commit 22b99a10e0
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -496,16 +496,16 @@
border: 1px solid var(--background-color); border: 1px solid var(--background-color);
&.interactive { &.interactive {
&[aria-pressed=true] {
color: var(--pressed-color, var(--active-color));
background-color: var(--pressed-background-color, var(--active-background-color));
border-color: var(--pressed-background-color, var(--active-background-color));
}
&:hover { &:hover {
color:var(--hover-color); color:var(--hover-color);
background-color:var(--hover-background-color); background-color:var(--hover-background-color);
border-color: var(--hover-background-color); border-color: var(--hover-background-color);
} }
&[aria-pressed=true] {
color: var(--pressed-color, var(--active-color));
background-color: var(--pressed-background-color, var(--active-background-color));
border-color: var(--pressed-background-color, var(--active-background-color));
}
&:is(:active, .active) { &:is(:active, .active) {
color:var(--active-color); color:var(--active-color);
background-color:var(--active-background-color); background-color:var(--active-background-color);
@ -525,15 +525,15 @@
border: 1px solid transparent; border: 1px solid transparent;
&.interactive{ &.interactive{
&:hover {
background-color: var(--hover-background-color);
border-color: var(--hover-background-color);
}
&[aria-pressed=true] { &[aria-pressed=true] {
color: var(--pressed-color, var(--active-color)); color: var(--pressed-color, var(--active-color));
background-color: var(--pressed-background-color, var(--active-background-color)); background-color: var(--pressed-background-color, var(--active-background-color));
border-color: var(--pressed-background-color, var(--active-background-color)); border-color: var(--pressed-background-color, var(--active-background-color));
} }
&:hover {
background-color: var(--hover-background-color);
border-color: var(--hover-background-color);
}
&:active { &:active {
background-color: var(--active-background-color); background-color: var(--active-background-color);
} }
@ -559,14 +559,14 @@
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
&.interactive{ &.interactive{
&:hover{
border-color: var(--hover-background-color);
}
&[aria-pressed=true] { &[aria-pressed=true] {
color: var(--pressed-color, var(--active-color)); color: var(--pressed-color, var(--active-color));
background-color: var(--pressed-background-color, var(--active-background-color)); background-color: var(--pressed-background-color, var(--active-background-color));
border-color: var(--pressed-background-color, var(--active-background-color)); border-color: var(--pressed-background-color, var(--active-background-color));
} }
&:hover{
border-color: var(--hover-background-color);
}
&:is(:active, .active) { &:is(:active, .active) {
border-color: var(--active-background-color); border-color: var(--active-background-color);
&.router-link-exact-active { &.router-link-exact-active {