DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chatgpt cookeed an animation
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
Details

Browse source
This commit is contained in:
BOTAlex 2025-08-14 06:38:15 +02:00
parent ff62e53745
commit 1b371ff2b7
1 changed files with 48 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/pages/shop/comps/ShopItemCard.svelte
View file

@ -7,8 +7,10 @@
</script> </script>
<div class=""> <div class="">
<div class="relative"> <div class="relative w-48 h-48">
<div class="relative w-48 h-48 corner-border-container"></div> <!-- moved w/h here -->
<div class="corner-border-container"></div>
<!-- removed 'relative w-48 h-48' -->
<div <div
class="absolute" class="absolute"
style:top={`${-(selectionScale - 100) / 2}%`} style:top={`${-(selectionScale - 100) / 2}%`}
@ -29,10 +31,18 @@
<style> <style>
.corner-border-container { .corner-border-container {
--length: 5px; /* Controls */
--width: 1px; --length: 8px;
--width: 2px;
--line-color: #eeeeee; --line-color: #eeeeee;
background-color: #0008;
/* Sit on top of the image */
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
/* Corner lines (same 8-gradients as before) */
background-image: background-image:
linear-gradient(var(--line-color), var(--line-color)), linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)), linear-gradient(var(--line-color), var(--line-color)),
@ -42,15 +52,6 @@
linear-gradient(var(--line-color), var(--line-color)), linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)), linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)); linear-gradient(var(--line-color), var(--line-color));
background-size:
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length);
background-position: background-position:
top left, top left,
top left, top left,
@ -61,5 +62,38 @@
bottom left, bottom left,
bottom left; bottom left;
background-repeat: no-repeat; background-repeat: no-repeat;
/* Start: invisible and a bit bigger */
opacity: 0;
transform: scale(1.06);
background-color: transparent;
/* Draw lines from 0 length */
--x: 0;
--y: 0;
background-size:
var(--x) var(--width),
var(--width) var(--y),
var(--x) var(--width),
var(--width) var(--y),
var(--x) var(--width),
var(--width) var(--y),
var(--x) var(--width),
var(--width) var(--y);
transition:
opacity 220ms ease,
transform 220ms ease,
background-size 220ms ease,
background-color 220ms ease;
}
/* On hover: normal size + visible + darken backdrop */
.relative:hover .corner-border-container {
--x: var(--length);
--y: var(--length);
opacity: 1;
transform: scale(1);
background-color: #0008;
} }
</style> </style>