shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: mask instruction order
All checks were successful
Deploy Sokko G / deploy (push) Successful in 5s
Details

Browse source
This commit is contained in:
Shinuwa 2026-07-22 16:16:59 +02:00
parent d359fd0a35
commit 843a2822ed
1 changed files with 26 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

50
website/src/styles/_home.scss
View file

@ -1,3 +1,26 @@
@mixin border-mask {
mask-image:
linear-gradient(#000 0 0),
linear-gradient(#000 0 0);
mask-origin:
content-box,
border-box;
mask-clip:
content-box,
border-box;
mask-composite: exclude;
-webkit-mask-image:
linear-gradient(#000 0 0),
linear-gradient(#000 0 0);
-webkit-mask-origin:
content-box,
border-box;
-webkit-mask-clip:
content-box,
border-box;
-webkit-mask-composite: xor;
}
.hero, .hero,
.game-hero, .game-hero,
.page-hero { .page-hero {
@ -30,14 +53,7 @@
background: background:
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.5), transparent 26%), radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.5), transparent 26%),
linear-gradient(135deg, rgba(246, 196, 83, 0.38), rgba(139, 92, 246, 0.22) 48%, rgba(196, 181, 253, 0.3)); linear-gradient(135deg, rgba(246, 196, 83, 0.38), rgba(139, 92, 246, 0.22) 48%, rgba(196, 181, 253, 0.3));
mask: @include border-mask;
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
pointer-events: none; pointer-events: none;
} }
@ -211,14 +227,7 @@ span {
padding: 1px; padding: 1px;
border-radius: inherit; border-radius: inherit;
background: rgba(165, 180, 252, 0.14); background: rgba(165, 180, 252, 0.14);
mask: @include border-mask;
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
pointer-events: none; pointer-events: none;
} }
@ -232,14 +241,7 @@ span {
radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.9) 0 18px, transparent 27px), radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.9) 0 18px, transparent 27px),
linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%), linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%),
linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%); linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%);
mask: @include border-mask;
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
pointer-events: none; pointer-events: none;
} }