@@ -1,13 +0,0 @@
|
||||
:host {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
advanced-camera-card-surround-basic {
|
||||
// The folder will grow indefinitely in the `unconstrained` aspect ratio
|
||||
// modes, the surround height needs to be limited to something reasonable in
|
||||
// order for the media filter to still display somewhere the user can
|
||||
// easily/continually access. See similar: gallery.scss.
|
||||
max-height: 110dvh;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
.heart {
|
||||
position: absolute;
|
||||
|
||||
left: var(--start-x);
|
||||
top: var(--start-y);
|
||||
|
||||
font-size: var(--size, 1em);
|
||||
color: hsl(var(--hue, 340), var(--saturation, 80%), var(--lightness, 55%));
|
||||
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
will-change: transform;
|
||||
animation: pulse var(--pulse-duration) ease-in-out infinite;
|
||||
animation-delay: var(--pulse-delay);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
15% {
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
85% {
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
.snowflake {
|
||||
position: absolute;
|
||||
|
||||
left: var(--start-x);
|
||||
|
||||
color: white;
|
||||
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
will-change: transform;
|
||||
animation: fall var(--fall-duration) linear infinite;
|
||||
animation-delay: var(--fall-delay);
|
||||
}
|
||||
|
||||
@keyframes fall {
|
||||
0% {
|
||||
// Start above the card.
|
||||
top: -2em;
|
||||
|
||||
transform: translateX(0);
|
||||
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
25% {
|
||||
top: 25%;
|
||||
transform: translateX(calc(var(--end-x) - var(--start-x) + 8px));
|
||||
}
|
||||
50% {
|
||||
top: 50%;
|
||||
transform: translateX(calc(var(--end-x) - var(--start-x) - 10px));
|
||||
}
|
||||
75% {
|
||||
top: 75%;
|
||||
transform: translateX(calc(var(--end-x) - var(--start-x) + 20px));
|
||||
}
|
||||
90% {
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
100% {
|
||||
// 100% ensures snowflakes fall through the entire card height
|
||||
top: 100%;
|
||||
|
||||
transform: translateX(calc(var(--end-x) - var(--start-x)));
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user