From d6235c6f4428d73acb1bf4a86c109e8eff402587 Mon Sep 17 00:00:00 2001 From: Shinuwa Date: Wed, 22 Jul 2026 16:21:46 +0200 Subject: [PATCH] fix: mask instruction order --- website/src/styles/_cards.scss | 11 +++-------- website/src/styles/_home.scss | 29 ++++------------------------- website/src/styles/_mixins.scss | 22 ++++++++++++++++++++++ website/src/styles/_shell.scss | 11 +++-------- website/src/styles/_toolboxes.scss | 20 ++++---------------- 5 files changed, 36 insertions(+), 57 deletions(-) create mode 100644 website/src/styles/_mixins.scss diff --git a/website/src/styles/_cards.scss b/website/src/styles/_cards.scss index 406bf38..c6386e0 100644 --- a/website/src/styles/_cards.scss +++ b/website/src/styles/_cards.scss @@ -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; } diff --git a/website/src/styles/_home.scss b/website/src/styles/_home.scss index 49cc052..e858a59 100644 --- a/website/src/styles/_home.scss +++ b/website/src/styles/_home.scss @@ -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; } diff --git a/website/src/styles/_mixins.scss b/website/src/styles/_mixins.scss new file mode 100644 index 0000000..97eff5c --- /dev/null +++ b/website/src/styles/_mixins.scss @@ -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; +} diff --git a/website/src/styles/_shell.scss b/website/src/styles/_shell.scss index f5e7f99..843a348 100644 --- a/website/src/styles/_shell.scss +++ b/website/src/styles/_shell.scss @@ -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; } diff --git a/website/src/styles/_toolboxes.scss b/website/src/styles/_toolboxes.scss index 8b6d5da..c7d15ce 100644 --- a/website/src/styles/_toolboxes.scss +++ b/website/src/styles/_toolboxes.scss @@ -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); }