setup (but did not apply) holofoil styling and added new seticon for perfect order set
This commit is contained in:
Zach Harding
349
src/assets/css/_holofoil-integration.scss
Normal file
349
src/assets/css/_holofoil-integration.scss
Normal file
@@ -0,0 +1,349 @@
|
||||
// =============================================================================
|
||||
// HOLOFOIL INTEGRATION
|
||||
// _holofoil-integration.scss
|
||||
// =============================================================================
|
||||
|
||||
@import "card";
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 1. WRAPPER NORMALISATION
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
%holofoil-wrapper-base {
|
||||
--card-aspect: 0.718;
|
||||
--card-radius: 4.55% / 3.5%;
|
||||
|
||||
--pointer-x: 50%;
|
||||
--pointer-y: 50%;
|
||||
--background-x: 50%;
|
||||
--background-y: 50%;
|
||||
--pointer-from-center: 0;
|
||||
--pointer-from-top: 0.5;
|
||||
--pointer-from-left: 0.5;
|
||||
--card-scale: 1;
|
||||
--card-opacity: 0;
|
||||
|
||||
--grain: url('/public/holofoils/grain.webp');
|
||||
--glitter: url('/public/holofoils/glitter.png');
|
||||
--glittersize: 25%;
|
||||
--space: 5%;
|
||||
--angle: 133deg;
|
||||
--imgsize: cover;
|
||||
|
||||
--red: #f80e35;
|
||||
--yellow: #eedf10;
|
||||
--green: #21e985;
|
||||
--blue: #0dbde9;
|
||||
--violet: #c929f1;
|
||||
|
||||
--clip: inset(9.85% 8% 52.85% 8%);
|
||||
--clip-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 8% 9.85%, 8% 47.15%, 0 50%);
|
||||
--clip-stage: polygon(91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 92% 47.15%);
|
||||
--clip-stage-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 0 50%);
|
||||
--clip-trainer: inset(14.5% 8.5% 48.2% 8.5%);
|
||||
--clip-borders: inset(2.8% 4% round 2.55% / 1.5%);
|
||||
|
||||
--sunpillar-clr-1: var(--sunpillar-1);
|
||||
--sunpillar-clr-2: var(--sunpillar-2);
|
||||
--sunpillar-clr-3: var(--sunpillar-3);
|
||||
--sunpillar-clr-4: var(--sunpillar-4);
|
||||
--sunpillar-clr-5: var(--sunpillar-5);
|
||||
--sunpillar-clr-6: var(--sunpillar-6);
|
||||
|
||||
// NOTE: no overflow:hidden here -- that would clip the lift/scale transform
|
||||
// on .image-grow. Overflow is handled by the child .holo-shine/.holo-glare.
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
border-radius: var(--card-radius);
|
||||
}
|
||||
|
||||
%holofoil-energy-glows {
|
||||
&[data-energy="Water"] { --card-glow: hsl(192, 97%, 60%); }
|
||||
&[data-energy="Fire"] { --card-glow: hsl(9, 81%, 59%); }
|
||||
&[data-energy="Grass"] { --card-glow: hsl(96, 81%, 65%); }
|
||||
&[data-energy="Lightning"] { --card-glow: hsl(54, 87%, 63%); }
|
||||
&[data-energy="Psychic"] { --card-glow: hsl(281, 62%, 58%); }
|
||||
&[data-energy="Fighting"] { --card-glow: rgb(145, 90, 39); }
|
||||
&[data-energy="Darkness"] { --card-glow: hsl(189, 77%, 27%); }
|
||||
&[data-energy="Metal"] { --card-glow: hsl(184, 20%, 70%); }
|
||||
&[data-energy="Dragon"] { --card-glow: hsl(51, 60%, 35%); }
|
||||
&[data-energy="Fairy"] { --card-glow: hsl(323, 100%, 89%); }
|
||||
}
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 2. SHINE + GLARE CHILD DIVS
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
%shine-base {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: var(--card-radius);
|
||||
overflow: hidden; // clipping lives here, not on the parent
|
||||
z-index: 3;
|
||||
will-change: transform, opacity, background-image, background-size,
|
||||
background-position, background-blend-mode, filter;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: var(--card-radius);
|
||||
}
|
||||
}
|
||||
|
||||
%glare-base {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: var(--card-radius);
|
||||
z-index: 4;
|
||||
transform: translateZ(0);
|
||||
overflow: hidden;
|
||||
will-change: transform, opacity, background-image, background-size,
|
||||
background-position, background-blend-mode, filter;
|
||||
}
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 3. MODES
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// -- 3a. GRID -----------------------------------------------------------------
|
||||
// No idle animation. Effect is invisible until hover.
|
||||
|
||||
.image-grow,
|
||||
.card-image-wrap {
|
||||
@extend %holofoil-wrapper-base;
|
||||
@extend %holofoil-energy-glows;
|
||||
|
||||
// No effect if the image fell back to default.jpg
|
||||
&[data-default="true"] {
|
||||
.holo-shine,
|
||||
.holo-glare { display: none !important; }
|
||||
}
|
||||
|
||||
.holo-shine { @extend %shine-base; }
|
||||
.holo-glare { @extend %glare-base; }
|
||||
}
|
||||
|
||||
|
||||
// -- 3b. GRID HOVER -----------------------------------------------------------
|
||||
// The existing main.scss .image-grow:hover handles lift + scale.
|
||||
// We layer the holo effect on top without overriding transform or transition.
|
||||
|
||||
.image-grow:hover,
|
||||
.image-grow[data-holo-active] {
|
||||
--card-opacity: 0.45;
|
||||
}
|
||||
|
||||
|
||||
// -- 3c. MODAL ----------------------------------------------------------------
|
||||
// Sweeps once per minute. Peaks at 0.35.
|
||||
// Pointer tracking bumps opacity to 0.45 while hovering.
|
||||
|
||||
@keyframes holo-modal-pulse {
|
||||
0% {
|
||||
--card-opacity: 0;
|
||||
--pointer-x: 50%; --pointer-y: 50%;
|
||||
--background-x: 50%; --background-y: 50%;
|
||||
--pointer-from-center: 0; --pointer-from-left: 0.5; --pointer-from-top: 0.5;
|
||||
}
|
||||
4% { --card-opacity: 0; }
|
||||
8% {
|
||||
--card-opacity: 0.35;
|
||||
--pointer-x: 25%; --pointer-y: 15%;
|
||||
--background-x: 38%; --background-y: 28%;
|
||||
--pointer-from-center: 0.85; --pointer-from-left: 0.25; --pointer-from-top: 0.15;
|
||||
}
|
||||
25% {
|
||||
--pointer-x: 70%; --pointer-y: 30%;
|
||||
--background-x: 64%; --background-y: 34%;
|
||||
--pointer-from-center: 0.9; --pointer-from-left: 0.70; --pointer-from-top: 0.30;
|
||||
}
|
||||
45% {
|
||||
--pointer-x: 80%; --pointer-y: 70%;
|
||||
--background-x: 74%; --background-y: 68%;
|
||||
--pointer-from-center: 0.88; --pointer-from-left: 0.80; --pointer-from-top: 0.70;
|
||||
}
|
||||
65% {
|
||||
--pointer-x: 35%; --pointer-y: 80%;
|
||||
--background-x: 38%; --background-y: 76%;
|
||||
--pointer-from-center: 0.8; --pointer-from-left: 0.35; --pointer-from-top: 0.80;
|
||||
}
|
||||
85% {
|
||||
--card-opacity: 0.35;
|
||||
--pointer-x: 25%; --pointer-y: 15%;
|
||||
--background-x: 38%; --background-y: 28%;
|
||||
--pointer-from-center: 0.85;
|
||||
}
|
||||
90% { --card-opacity: 0; }
|
||||
100% {
|
||||
--card-opacity: 0;
|
||||
--pointer-x: 50%; --pointer-y: 50%;
|
||||
--background-x: 50%; --background-y: 50%;
|
||||
--pointer-from-center: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-image-wrap.holo-modal-mode {
|
||||
--card-opacity: 0;
|
||||
|
||||
.holo-shine,
|
||||
.holo-glare {
|
||||
animation: holo-modal-pulse 60s ease-in-out infinite;
|
||||
animation-delay: var(--shimmer-delay, -2s);
|
||||
}
|
||||
|
||||
&[data-holo-active] {
|
||||
--card-opacity: 0.45;
|
||||
.holo-shine,
|
||||
.holo-glare { animation-play-state: paused; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 4. RARITY -> CLIP-PATH BRIDGE
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.image-grow,
|
||||
.card-image-wrap {
|
||||
|
||||
// No effect on common/uncommon or unrecognised wrapper
|
||||
&[data-rarity="common"],
|
||||
&[data-rarity="uncommon"],
|
||||
&:not([data-rarity]) {
|
||||
.holo-shine,
|
||||
.holo-glare { display: none; }
|
||||
}
|
||||
|
||||
// Standard holo — artwork area only
|
||||
&[data-rarity="rare holo"] {
|
||||
.holo-shine { clip-path: var(--clip); }
|
||||
&[data-subtypes^="stage"] .holo-shine { clip-path: var(--clip-stage); }
|
||||
&[data-subtypes^="supporter"] .holo-shine,
|
||||
&[data-subtypes^="item"] .holo-shine { clip-path: var(--clip-trainer); }
|
||||
}
|
||||
|
||||
// Cosmos holo
|
||||
&[data-rarity="rare holo cosmos"] {
|
||||
.holo-shine { clip-path: var(--clip); }
|
||||
&[data-subtypes^="stage"] .holo-shine { clip-path: var(--clip-stage); }
|
||||
&[data-subtypes^="supporter"] .holo-shine { clip-path: var(--clip-trainer); }
|
||||
}
|
||||
|
||||
&[data-rarity="radiant rare"] { .holo-shine { clip-path: var(--clip-borders); } }
|
||||
&[data-rarity="amazing rare"] { .holo-shine { clip-path: var(--clip); } }
|
||||
|
||||
&[data-rarity="trainer gallery rare holo"],
|
||||
&[data-rarity="rare holo"][data-trainer-gallery="true"] {
|
||||
.holo-shine { clip-path: var(--clip-borders); }
|
||||
}
|
||||
|
||||
&[data-rarity="rare shiny"] {
|
||||
.holo-shine { clip-path: var(--clip); }
|
||||
&[data-subtypes^="stage"] .holo-shine { clip-path: var(--clip-stage); }
|
||||
}
|
||||
|
||||
// Reverse holo by rarity — borders only
|
||||
&[data-rarity$="reverse holo"] { .holo-shine { clip-path: var(--clip-invert); } }
|
||||
// Reverse Holofoil variant — borders only
|
||||
&[data-variant="Reverse Holofoil"] { .holo-shine { clip-path: var(--clip-invert); } }
|
||||
|
||||
// True holofoil variants + full-bleed rarities — no clip
|
||||
&[data-variant="Holofoil"],
|
||||
&[data-variant="1st Edition Holofoil"],
|
||||
&[data-variant="Unlimited Holofoil"],
|
||||
&[data-rarity="rare ultra"],
|
||||
&[data-rarity="rare holo v"],
|
||||
&[data-rarity="rare holo vmax"],
|
||||
&[data-rarity="rare holo vstar"],
|
||||
&[data-rarity="rare shiny v"],
|
||||
&[data-rarity="rare shiny vmax"],
|
||||
&[data-rarity="rare rainbow"],
|
||||
&[data-rarity="rare rainbow alt"],
|
||||
&[data-rarity="rare secret"] {
|
||||
.holo-shine { clip-path: none; }
|
||||
}
|
||||
|
||||
// Foil variant shine/glare — clip handled above per variant type
|
||||
&[data-variant="Holofoil"],
|
||||
&[data-variant="Reverse Holofoil"],
|
||||
&[data-variant="1st Edition Holofoil"],
|
||||
&[data-variant="Unlimited Holofoil"] {
|
||||
.holo-shine {
|
||||
background-image:
|
||||
radial-gradient(
|
||||
circle at var(--pointer-x) var(--pointer-y),
|
||||
#fff 5%, #000 50%, #fff 80%
|
||||
),
|
||||
linear-gradient(
|
||||
var(--foil-angle, -45deg),
|
||||
#000 15%, #fff, #000 85%
|
||||
);
|
||||
background-blend-mode: soft-light, difference;
|
||||
background-size: 120% 120%, 200% 200%;
|
||||
background-position:
|
||||
center center,
|
||||
calc(100% * var(--pointer-from-left)) calc(100% * var(--pointer-from-top));
|
||||
filter: brightness(var(--foil-brightness, 0.4)) contrast(1.3) saturate(var(--foil-saturation, 0.5));
|
||||
mix-blend-mode: color-dodge;
|
||||
opacity: calc((var(--card-opacity) * 0.9) - (var(--pointer-from-center) * 0.1));
|
||||
}
|
||||
|
||||
.holo-glare {
|
||||
opacity: calc(var(--card-opacity) * 0.5);
|
||||
background-image: radial-gradient(
|
||||
farthest-corner circle at var(--pointer-x) var(--pointer-y),
|
||||
hsla(0, 0%, 100%, 0.5) 10%,
|
||||
hsla(0, 0%, 100%, 0.25) 30%,
|
||||
hsla(0, 0%, 0%, 0.4) 90%
|
||||
);
|
||||
filter: brightness(0.7) contrast(1.2);
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 5. DEFAULT HOLO SHINE / GLARE
|
||||
// Fallback for rarities not explicitly handled above.
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.image-grow,
|
||||
.card-image-wrap {
|
||||
&[data-rarity]:not([data-rarity="common"]):not([data-rarity="uncommon"]) {
|
||||
|
||||
.holo-shine {
|
||||
background-image:
|
||||
repeating-linear-gradient(110deg,
|
||||
var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
|
||||
var(--violet), var(--blue), var(--green), var(--yellow), var(--red)
|
||||
);
|
||||
background-position:
|
||||
calc(((50% - var(--background-x)) * 2.6) + 50%)
|
||||
calc(((50% - var(--background-y)) * 3.5) + 50%);
|
||||
background-size: 400% 400%;
|
||||
filter: brightness(0.7) contrast(0.9) saturate(0.8);
|
||||
mix-blend-mode: color-dodge;
|
||||
opacity: calc(var(--card-opacity) * 0.6);
|
||||
}
|
||||
|
||||
.holo-glare {
|
||||
background-image: radial-gradient(
|
||||
farthest-corner circle at var(--pointer-x) var(--pointer-y),
|
||||
hsla(0, 0%, 100%, 0.35) 10%,
|
||||
hsla(0, 0%, 100%, 0.15) 30%,
|
||||
hsla(0, 0%, 0%, 0.35) 90%
|
||||
);
|
||||
opacity: calc(var(--card-opacity) * 0.4);
|
||||
mix-blend-mode: overlay;
|
||||
filter: brightness(0.7) contrast(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user