Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Card.svelte: get rid of :has() and Firefox-specific hacks

Browse Source
This commit is contained in:
Alexander Bocken 2024-01-22 12:40:55 +01:00
parent 6fc2755d87
commit 0f45145119
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
1 changed files with 3 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/lib/components/Card.svelte
View File

@ -49,7 +49,8 @@ import { onMount } from "svelte";
.unblur{ .unblur{
filter: blur(0px) !important; filter: blur(0px) !important;
} }
div:has(#image){ #div_image,
#div_div_image{
width: var(--card-width); width: var(--card-width);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
@ -58,30 +59,12 @@ div:has(#image){
border-top-left-radius: inherit; border-top-left-radius: inherit;
border-top-right-radius: inherit; border-top-right-radius: inherit;
} }
div:has(div #image){ #div_div_image{
height: calc(var(--card-width)*0.85); height: calc(var(--card-width)*0.85);
position: absolute; position: absolute;
width: var(--card-width); width: var(--card-width);
top: 0; top: 0;
} }
@supports(-moz-appearance:none){
#image, #div_image{
border-top-left-radius: 20px;
border-top-right-radius: 20px;
height: 100%;
}
#div_image{
background-repeat: no-repeat;
background-size: cover;
}
#div_div_image{
height: calc(var(--card-width)*0.85);
position: absolute;
width: var(--card-width);
top: 0;
}
}
#card:hover, #card:hover,
#card:focus-within{ #card:focus-within{