Andras Schmelczer
ed5a4379db
All checks were successful
Check & deploy / build (pull_request) Successful in 1m51s
133 lines
3.6 KiB
SCSS
133 lines
3.6 KiB
SCSS
html > body.is-loading .perf-stats-overlay {
|
|
display: none;
|
|
}
|
|
|
|
$grain-noise-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='257' height='257' viewBox='0 0 257 257'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='257' height='257' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
$grain-noise-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='389' height='389' viewBox='0 0 389 389'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.53' numOctaves='5' seed='41' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='389' height='389' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
|
|
html > body {
|
|
width: 100%;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
display: flex;
|
|
position: relative;
|
|
background: var(--garden-background, #10151f);
|
|
|
|
> .canvas-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
> canvas {
|
|
position: relative;
|
|
z-index: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
touch-action: none;
|
|
}
|
|
|
|
> .garden-grain {
|
|
--garden-grain-strength: 0;
|
|
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
contain: strict;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
&::before {
|
|
opacity: clamp(0, calc(var(--garden-grain-strength) * 4.25), 0.24);
|
|
background-image: $grain-noise-a;
|
|
background-size: 257px 257px;
|
|
filter: contrast(145%) brightness(0.82);
|
|
mix-blend-mode: multiply;
|
|
}
|
|
|
|
&::after {
|
|
opacity: clamp(0, calc(var(--garden-grain-strength) * 2.5), 0.12);
|
|
background-image: $grain-noise-b;
|
|
background-position: 73px 41px;
|
|
background-size: 389px 389px;
|
|
filter: contrast(135%) brightness(1);
|
|
mix-blend-mode: screen;
|
|
transform: rotate(0.01deg);
|
|
}
|
|
|
|
&[hidden] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
> .eraser-preview {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
width: var(--eraser-preview-size, 96px);
|
|
height: var(--eraser-preview-size, 96px);
|
|
border: 2px solid rgb(255 234 228 / 88%);
|
|
border-radius: 50%;
|
|
background: rgb(255 140 117 / 13%);
|
|
box-shadow:
|
|
0 0 0 1px rgb(255 88 70 / 34%),
|
|
0 0 26px rgb(255 118 92 / 24%);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translate(-50%, -50%);
|
|
transition:
|
|
opacity var(--transition-time),
|
|
width var(--transition-time),
|
|
height var(--transition-time);
|
|
mix-blend-mode: screen;
|
|
|
|
&.visible {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
> .perf-stats-overlay {
|
|
position: absolute;
|
|
top: max(8px, env(safe-area-inset-top));
|
|
left: max(8px, env(safe-area-inset-left));
|
|
z-index: 6;
|
|
padding: 6px 8px;
|
|
border: 1px solid rgb(255 255 255 / 18%);
|
|
border-radius: 6px;
|
|
background: rgb(0 0 0 / 62%);
|
|
color: rgb(255 255 255 / 92%);
|
|
font:
|
|
600 12px/1.35 ui-monospace,
|
|
SFMono-Regular,
|
|
Menlo,
|
|
Consolas,
|
|
monospace;
|
|
white-space: pre;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
|
|
}
|
|
|
|
> .errors-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin: var(--normal-margin);
|
|
z-index: 5;
|
|
|
|
pre {
|
|
font-size: 20px;
|
|
color: red;
|
|
}
|
|
}
|
|
}
|
|
}
|