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:21:46 +02:00
parent 843a2822ed
commit d6235c6f44
5 changed files with 36 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

11
website/src/styles/_cards.scss
View file

@ -1,3 +1,5 @@
@use "mixins";
.section-grid,
.cards,
.info-grid,
@ -317,14 +319,7 @@
background:
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.42), transparent 34%),
linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(139, 92, 246, 0.32) 54%, rgba(196, 181, 253, 0.24));
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;
@include mixins.border-mask;
pointer-events: none;
}

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

@ -1,25 +1,4 @@
@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;
}
@use "mixins";
.hero,
.game-hero,
@ -53,7 +32,7 @@
background:
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));
@include border-mask;
@include mixins.border-mask;
pointer-events: none;
}
@ -227,7 +206,7 @@ span {
padding: 1px;
border-radius: inherit;
background: rgba(165, 180, 252, 0.14);
@include border-mask;
@include mixins.border-mask;
pointer-events: none;
}
@ -241,7 +220,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),
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%);
@include border-mask;
@include mixins.border-mask;
pointer-events: none;
}

22
website/src/styles/_mixins.scss Normal file
View file

@ -0,0 +1,22 @@
@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;
}

11
website/src/styles/_shell.scss
View file

@ -1,3 +1,5 @@
@use "mixins";
.app-shell {
position: relative;
z-index: 1;
@ -174,14 +176,7 @@
background:
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.42), transparent 34%),
linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(139, 92, 246, 0.32) 54%, rgba(196, 181, 253, 0.24));
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;
@include mixins.border-mask;
pointer-events: none;
}

20
website/src/styles/_toolboxes.scss
View file

@ -1,3 +1,5 @@
@use "mixins";
.toolbox-head {
position: relative;
z-index: 30;
@ -304,14 +306,7 @@
padding: 1px;
border-radius: inherit;
background: rgba(165, 180, 252, 0.14);
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;
@include mixins.border-mask;
pointer-events: none;
transition: background var(--duration-fast) var(--ease-standard);
}
@ -326,14 +321,7 @@
radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.52) 0 18px, transparent 27px),
linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%),
linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%);
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;
@include mixins.border-mask;
pointer-events: none;
transition: background var(--duration-fast) var(--ease-standard);
}