Clena up CSS
This commit is contained in:
parent
20433bd9f0
commit
70423851ba
10 changed files with 188 additions and 682 deletions
|
|
@ -1,4 +1,4 @@
|
|||
html > body {
|
||||
html>body {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
|
|
@ -9,7 +9,7 @@ html > body {
|
|||
position: relative;
|
||||
background: var(--garden-background, #10151f);
|
||||
|
||||
> .canvas-container {
|
||||
>.canvas-container {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
height: 100%;
|
||||
|
|
@ -18,16 +18,13 @@ html > body {
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
> canvas {
|
||||
>canvas {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
touch-action: none;
|
||||
cursor:
|
||||
url('../../assets/icons/brush.svg') 0 24,
|
||||
auto;
|
||||
}
|
||||
|
||||
> .eraser-preview {
|
||||
>.eraser-preview {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -54,7 +51,7 @@ html > body {
|
|||
}
|
||||
}
|
||||
|
||||
> .dev-stats-overlay {
|
||||
>.dev-stats-overlay {
|
||||
position: absolute;
|
||||
top: max(10px, env(safe-area-inset-top, 0px));
|
||||
left: max(10px, env(safe-area-inset-left, 0px));
|
||||
|
|
@ -79,7 +76,7 @@ html > body {
|
|||
}
|
||||
}
|
||||
|
||||
> .errors-container {
|
||||
>.errors-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -92,4 +89,4 @@ html > body {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@ html > body > .canvas-container > .garden-prompt {
|
|||
backdrop-filter: blur(12px);
|
||||
color: rgb(255 255 255 / 94%);
|
||||
font:
|
||||
600 20px/1.2 'Open Sans',
|
||||
400 20px/1.2 'Open Sans',
|
||||
sans-serif;
|
||||
text-shadow: 0 1px 12px rgb(0 0 0 / 58%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
> .loading-status {
|
||||
color: rgb(255 255 255 / 88%);
|
||||
font:
|
||||
600 16px/1.25 'Open Sans',
|
||||
400 16px/1.25 'Open Sans',
|
||||
sans-serif;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 12px rgb(0 0 0 / 60%);
|
||||
|
|
@ -90,7 +90,6 @@ html > body.is-loading {
|
|||
aside.control-dock {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(var(--dock-hidden-translate-y));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -109,7 +108,6 @@ html > body.is-loading {
|
|||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.loading-indicator > .loading-dots > .loading-dot {
|
||||
animation: none;
|
||||
transform: scale(0.85);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
@use 'mixins' as *;
|
||||
@use 'range-input' as *;
|
||||
|
||||
html > body > aside.control-dock > .pages {
|
||||
@include blurred-background(#fff);
|
||||
width: min(calc(100vw - 1rem), 560px);
|
||||
max-height: min(58vh, 520px);
|
||||
max-height: min(58dvh, 520px);
|
||||
|
|
@ -11,9 +9,11 @@ html > body > aside.control-dock > .pages {
|
|||
overflow-y: auto;
|
||||
border: 1px solid rgb(255 255 255 / 54%);
|
||||
border-radius: 8px;
|
||||
background-color: rgb(255 255 255 / 34%);
|
||||
box-shadow:
|
||||
0 18px 48px rgb(0 0 0 / 28%),
|
||||
0 2px 10px rgb(0 0 0 / 16%);
|
||||
backdrop-filter: blur(12px);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--main-color) transparent;
|
||||
transition:
|
||||
|
|
@ -64,7 +64,7 @@ html > body > aside.control-dock > .pages {
|
|||
|
||||
a {
|
||||
color: rgb(0 84 120);
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid currentColor;
|
||||
|
|
@ -96,75 +96,17 @@ html > body > aside.control-dock > .pages {
|
|||
}
|
||||
|
||||
p {
|
||||
@include main-font();
|
||||
margin-bottom: var(--small-margin);
|
||||
line-height: 1.65;
|
||||
color: var(--normal-text-color);
|
||||
font:
|
||||
400 1.1rem/1.65 'Open Sans',
|
||||
sans-serif;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.slider {
|
||||
$track-height: 8px;
|
||||
$thumb-size: 22px;
|
||||
margin-bottom: var(--small-margin);
|
||||
user-select: none;
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--small-margin);
|
||||
margin-bottom: 0.35rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
@include settings-range-input();
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include range-track(rgb(49 52 63 / 14%), $track-height, 1000px, null);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include range-thumb-base(
|
||||
$thumb-size,
|
||||
$thumb-size,
|
||||
2px solid var(--accent-color),
|
||||
1000px
|
||||
);
|
||||
margin-top: -7px;
|
||||
appearance: none;
|
||||
background: white;
|
||||
box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
|
||||
transition: transform var(--transition-time);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@include range-track(rgb(49 52 63 / 14%), $track-height, 1000px, null);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include range-thumb-base(
|
||||
$thumb-size,
|
||||
$thumb-size,
|
||||
2px solid var(--accent-color),
|
||||
1000px
|
||||
);
|
||||
background: white;
|
||||
box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.large-button {
|
||||
margin: var(--small-margin) 0 0 auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@include on-small-screen {
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
@mixin toolbar-range-input() {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
cursor: ew-resize;
|
||||
outline: none;
|
||||
touch-action: pan-y;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid white;
|
||||
outline-offset: 2px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin settings-range-input() {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@mixin range-track(
|
||||
$background,
|
||||
$height: 7px,
|
||||
$border-radius: 999px,
|
||||
$box-shadow: inset 0 1px 2px rgb(0 0 0 / 24%)
|
||||
) {
|
||||
height: $height;
|
||||
cursor: pointer;
|
||||
border-radius: $border-radius;
|
||||
background: $background;
|
||||
|
||||
@if $box-shadow != null {
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin range-thumb-base($width, $height, $border, $border-radius) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
cursor: pointer;
|
||||
border: $border;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
|
@ -1,5 +1,39 @@
|
|||
@use 'mixins' as *;
|
||||
@use 'range-input' as *;
|
||||
|
||||
@mixin toolbar-track() {
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(var(--control-rgb) / 72%) 0 var(--control-progress),
|
||||
rgb(255 255 255 / 24%) var(--control-progress) 100%
|
||||
);
|
||||
box-shadow: inset 0 1px 2px rgb(0 0 0 / 24%);
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
@mixin toolbar-thumb() {
|
||||
width: var(--thumb-width);
|
||||
height: var(--thumb-height);
|
||||
border: 2px solid rgb(255 255 255 / 92%);
|
||||
border-radius: var(--thumb-radius);
|
||||
background: var(--thumb-background);
|
||||
box-shadow:
|
||||
inset 0 1px 2px rgb(255 255 255 / 22%),
|
||||
0 4px 12px rgb(0 0 0 / 30%);
|
||||
cursor: ew-resize;
|
||||
transform: var(--thumb-transform);
|
||||
}
|
||||
|
||||
$toolbar-icons: (
|
||||
info: 'info',
|
||||
maximize-full-screen: 'maximize',
|
||||
minimize-full-screen: 'minimize',
|
||||
settings: 'settings',
|
||||
sound: 'sound',
|
||||
export-4k: 'download',
|
||||
restart: 'restart',
|
||||
);
|
||||
|
||||
html > body > aside.control-dock > .toolbar-row {
|
||||
display: flex;
|
||||
|
|
@ -8,11 +42,17 @@ html > body > aside.control-dock > .toolbar-row {
|
|||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-inline: clamp(8px, 1.4vw, 14px);
|
||||
gap: clamp(6px, 1.8vw, 14px);
|
||||
border-radius: 12px;
|
||||
color: rgb(245 250 244 / 92%);
|
||||
font:
|
||||
600 13px/1 'Open Sans',
|
||||
400 13px/1 'Open Sans',
|
||||
sans-serif;
|
||||
transition:
|
||||
backdrop-filter var(--transition-time-long),
|
||||
background-color var(--transition-time-long),
|
||||
box-shadow var(--transition-time-long);
|
||||
|
||||
button {
|
||||
min-width: 44px;
|
||||
|
|
@ -25,8 +65,14 @@ html > body > aside.control-dock > .toolbar-row {
|
|||
border-color var(--transition-time),
|
||||
color var(--transition-time),
|
||||
box-shadow var(--transition-time),
|
||||
opacity var(--transition-time),
|
||||
transform var(--transition-time);
|
||||
|
||||
&:disabled {
|
||||
cursor: progress;
|
||||
opacity: 0.58;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid white;
|
||||
outline-offset: 2px;
|
||||
|
|
@ -35,40 +81,32 @@ html > body > aside.control-dock > .toolbar-row {
|
|||
|
||||
> .toolbar-shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
'swatches'
|
||||
'nav';
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
min-height: 86px;
|
||||
padding: 8px 9px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> .vibe-button {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
position: relative;
|
||||
width: 52px;
|
||||
height: auto;
|
||||
min-height: 66px;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: rgb(255 255 255 / 70%);
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
@ -92,12 +130,28 @@ html > body > aside.control-dock > .toolbar-row {
|
|||
background: transparent;
|
||||
color: color-mix(in srgb, var(--accent-color) 70%, white);
|
||||
box-shadow: none;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
&.previous-vibe:hover {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
&.next-vibe:hover {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
|
||||
&.needs-contrast-background {
|
||||
background: linear-gradient(180deg, rgb(22 28 36 / 72%), rgb(5 8 13 / 82%));
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgb(255 255 255 / 16%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 7%),
|
||||
0 14px 34px rgb(0 0 0 / 28%);
|
||||
backdrop-filter: blur(18px) brightness(0.62) saturate(0.82);
|
||||
}
|
||||
|
||||
> .toolbar-shell > nav.buttons {
|
||||
|
|
@ -149,31 +203,16 @@ html > body > aside.control-dock > .toolbar-row {
|
|||
&.active {
|
||||
border-color: color-mix(in srgb, var(--accent-color) 55%, white 15%);
|
||||
background: color-mix(in srgb, var(--accent-color) 30%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.active::after {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&.info::after {
|
||||
mask-image: url('../../assets/icons/info.svg');
|
||||
}
|
||||
|
||||
&.maximize-full-screen::after {
|
||||
mask-image: url('../../assets/icons/maximize.svg');
|
||||
}
|
||||
|
||||
&.minimize-full-screen::after {
|
||||
mask-image: url('../../assets/icons/minimize.svg');
|
||||
}
|
||||
|
||||
&.settings::after {
|
||||
mask-image: url('../../assets/icons/settings.svg');
|
||||
}
|
||||
|
||||
&.sound::after {
|
||||
mask-image: url('../../assets/icons/sound.svg');
|
||||
@each $class, $icon in $toolbar-icons {
|
||||
&.#{$class}::after {
|
||||
mask-image: url('../../assets/icons/#{$icon}.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.sound.muted::before {
|
||||
|
|
@ -193,14 +232,6 @@ html > body > aside.control-dock > .toolbar-row {
|
|||
&.sound.muted::after {
|
||||
background-color: rgb(255 255 255 / 46%);
|
||||
}
|
||||
|
||||
&.export-4k::after {
|
||||
mask-image: url('../../assets/icons/download.svg');
|
||||
}
|
||||
|
||||
&.restart::after {
|
||||
mask-image: url('../../assets/icons/restart.svg');
|
||||
}
|
||||
}
|
||||
|
||||
> .export-status {
|
||||
|
|
@ -238,7 +269,7 @@ html > body > aside.control-dock > .toolbar-row {
|
|||
min-height: 58px;
|
||||
padding: 6px 10px;
|
||||
|
||||
> button {
|
||||
> .color-swatch {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
|
@ -262,168 +293,16 @@ html > body > aside.control-dock > .toolbar-row {
|
|||
}
|
||||
}
|
||||
|
||||
> .eraser-size-control {
|
||||
--eraser-control-scale: 1;
|
||||
--eraser-progress: 33%;
|
||||
|
||||
position: relative;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 184px;
|
||||
height: 46px;
|
||||
flex: 0 0 184px;
|
||||
padding: 0 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(255 255 255 / 14%);
|
||||
border-radius: 8px;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 24% 78%,
|
||||
rgb(255 226 215 / 42%) 0 1px,
|
||||
transparent 1.5px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 47% 72%,
|
||||
rgb(255 226 215 / 34%) 0 1px,
|
||||
transparent 1.5px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 67% 81%,
|
||||
rgb(255 226 215 / 38%) 0 1px,
|
||||
transparent 1.5px
|
||||
),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 4%));
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgb(255 255 255 / 6%),
|
||||
0 3px 10px rgb(0 0 0 / 18%);
|
||||
cursor: ew-resize;
|
||||
transition:
|
||||
border-color var(--transition-time),
|
||||
background-color var(--transition-time),
|
||||
box-shadow var(--transition-time),
|
||||
transform var(--transition-time);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 8px;
|
||||
left: 12px;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(255 140 117 / 56%) 0 var(--eraser-progress),
|
||||
rgb(255 255 255 / 18%) var(--eraser-progress) 100%
|
||||
);
|
||||
box-shadow: 0 1px 4px rgb(0 0 0 / 22%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgb(255 255 255 / 24%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: rgb(255 212 202 / 72%);
|
||||
background-color: rgb(255 140 117 / 11%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgb(255 255 255 / 10%),
|
||||
0 0 0 5px rgb(255 140 117 / 34%),
|
||||
0 6px 15px rgb(0 0 0 / 22%);
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
@include toolbar-range-input();
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include range-track(
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgb(255 140 117 / 72%) 0 var(--eraser-progress),
|
||||
rgb(255 255 255 / 24%) var(--eraser-progress) 100%
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include range-thumb-base(
|
||||
calc(34px * var(--eraser-control-scale)),
|
||||
calc(21px * var(--eraser-control-scale)),
|
||||
2px solid rgb(255 239 233 / 94%),
|
||||
calc(6px * var(--eraser-control-scale))
|
||||
);
|
||||
margin-top: calc((7px - (21px * var(--eraser-control-scale))) / 2);
|
||||
appearance: none;
|
||||
background:
|
||||
linear-gradient(
|
||||
110deg,
|
||||
transparent 0 12%,
|
||||
rgb(255 255 255 / 44%) 13% 20%,
|
||||
transparent 21% 100%
|
||||
),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
#ff8fa3 0 52%,
|
||||
rgb(54 46 51 / 78%) 53% 56%,
|
||||
#f5eee5 57% 100%
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 -2px 3px rgb(117 46 58 / 22%),
|
||||
inset 0 2px 3px rgb(255 255 255 / 28%),
|
||||
0 4px 10px rgb(0 0 0 / 28%);
|
||||
transform: rotate(-10deg);
|
||||
transition:
|
||||
height var(--transition-time),
|
||||
margin-top var(--transition-time),
|
||||
width var(--transition-time);
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@include range-track(
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgb(255 140 117 / 72%) 0 var(--eraser-progress),
|
||||
rgb(255 255 255 / 24%) var(--eraser-progress) 100%
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include range-thumb-base(
|
||||
calc(34px * var(--eraser-control-scale)),
|
||||
calc(21px * var(--eraser-control-scale)),
|
||||
2px solid rgb(255 239 233 / 94%),
|
||||
calc(6px * var(--eraser-control-scale))
|
||||
);
|
||||
background:
|
||||
linear-gradient(
|
||||
110deg,
|
||||
transparent 0 12%,
|
||||
rgb(255 255 255 / 44%) 13% 20%,
|
||||
transparent 21% 100%
|
||||
),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
#ff8fa3 0 52%,
|
||||
rgb(54 46 51 / 78%) 53% 56%,
|
||||
#f5eee5 57% 100%
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 -2px 3px rgb(117 46 58 / 22%),
|
||||
inset 0 2px 3px rgb(255 255 255 / 28%),
|
||||
0 4px 10px rgb(0 0 0 / 28%);
|
||||
transform: rotate(-10deg);
|
||||
transition:
|
||||
height var(--transition-time),
|
||||
width var(--transition-time);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .eraser-size-control,
|
||||
> .mirror-segment-control {
|
||||
--mirror-progress: 0%;
|
||||
--mirror-angle: 360deg;
|
||||
--control-progress: 0%;
|
||||
--control-rgb: 255 255 255;
|
||||
--thumb-background: rgb(var(--control-rgb));
|
||||
--thumb-height: 28px;
|
||||
--thumb-hover-transform: scale(1.03);
|
||||
--thumb-radius: 50%;
|
||||
--thumb-transform: none;
|
||||
--thumb-width: 28px;
|
||||
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
|
@ -435,23 +314,7 @@ html > body > aside.control-dock > .toolbar-row {
|
|||
overflow: hidden;
|
||||
border: 1px solid rgb(255 255 255 / 14%);
|
||||
border-radius: 8px;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 24% 78%,
|
||||
rgb(197 255 234 / 38%) 0 1px,
|
||||
transparent 1.5px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 47% 72%,
|
||||
rgb(197 255 234 / 30%) 0 1px,
|
||||
transparent 1.5px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 67% 81%,
|
||||
rgb(197 255 234 / 34%) 0 1px,
|
||||
transparent 1.5px
|
||||
),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 4%));
|
||||
background: linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 4%));
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgb(255 255 255 / 6%),
|
||||
0 3px 10px rgb(0 0 0 / 18%);
|
||||
|
|
@ -462,108 +325,113 @@ html > body > aside.control-dock > .toolbar-row {
|
|||
box-shadow var(--transition-time),
|
||||
transform var(--transition-time);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 8px;
|
||||
left: 12px;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(148 233 203 / 56%) 0 var(--mirror-progress),
|
||||
rgb(255 255 255 / 18%) var(--mirror-progress) 100%
|
||||
);
|
||||
box-shadow: 0 1px 4px rgb(0 0 0 / 22%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgb(255 255 255 / 24%);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: rgb(167 245 219 / 74%);
|
||||
background-color: rgb(92 206 177 / 12%);
|
||||
border-color: rgb(var(--control-rgb) / 72%);
|
||||
background-color: rgb(var(--control-rgb) / 11%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgb(255 255 255 / 10%),
|
||||
0 0 0 5px rgb(92 206 177 / 28%),
|
||||
0 0 0 5px rgb(var(--control-rgb) / 28%),
|
||||
0 6px 15px rgb(0 0 0 / 22%);
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
@include toolbar-range-input();
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
cursor: ew-resize;
|
||||
outline: none;
|
||||
touch-action: pan-y;
|
||||
|
||||
&:focus-visible {
|
||||
border-radius: 8px;
|
||||
outline: 2px solid white;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include range-track(
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgb(148 233 203 / 78%) 0 var(--mirror-progress),
|
||||
rgb(255 255 255 / 24%) var(--mirror-progress) 100%
|
||||
)
|
||||
);
|
||||
@include toolbar-track();
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include range-thumb-base(44px, 44px, 2px solid rgb(240 255 251 / 94%), 50%);
|
||||
margin-top: -18.5px;
|
||||
@include toolbar-thumb();
|
||||
margin-top: calc((7px - var(--thumb-height)) / 2);
|
||||
appearance: none;
|
||||
background:
|
||||
radial-gradient(circle, white 0 3px, rgb(9 20 18 / 78%) 3.5px 8px),
|
||||
repeating-conic-gradient(
|
||||
from -90deg,
|
||||
rgb(218 255 241) 0 8deg,
|
||||
rgb(8 22 19 / 94%) 8deg var(--mirror-angle)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 0 0 7px rgb(0 0 0 / 18%),
|
||||
0 0 0 5px rgb(92 206 177 / 16%),
|
||||
0 5px 14px rgb(0 0 0 / 30%);
|
||||
transition:
|
||||
box-shadow var(--transition-time),
|
||||
transform var(--transition-time);
|
||||
height var(--transition-time),
|
||||
margin-top var(--transition-time),
|
||||
transform var(--transition-time),
|
||||
width var(--transition-time);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:hover {
|
||||
box-shadow:
|
||||
inset 0 0 0 7px rgb(0 0 0 / 18%),
|
||||
0 0 0 7px rgb(92 206 177 / 24%),
|
||||
0 6px 16px rgb(0 0 0 / 34%);
|
||||
transform: scale(1.04);
|
||||
inset 0 1px 2px rgb(255 255 255 / 22%),
|
||||
0 0 0 4px rgb(var(--control-rgb) / 22%),
|
||||
0 5px 14px rgb(0 0 0 / 34%);
|
||||
transform: var(--thumb-hover-transform);
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@include range-track(
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgb(148 233 203 / 78%) 0 var(--mirror-progress),
|
||||
rgb(255 255 255 / 24%) var(--mirror-progress) 100%
|
||||
)
|
||||
);
|
||||
@include toolbar-track();
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include range-thumb-base(44px, 44px, 2px solid rgb(240 255 251 / 94%), 50%);
|
||||
background:
|
||||
radial-gradient(circle, white 0 3px, rgb(9 20 18 / 78%) 3.5px 8px),
|
||||
repeating-conic-gradient(
|
||||
from -90deg,
|
||||
rgb(218 255 241) 0 8deg,
|
||||
rgb(8 22 19 / 94%) 8deg var(--mirror-angle)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 0 0 7px rgb(0 0 0 / 18%),
|
||||
0 0 0 5px rgb(92 206 177 / 16%),
|
||||
0 5px 14px rgb(0 0 0 / 30%);
|
||||
@include toolbar-thumb();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .eraser-size-control {
|
||||
--control-progress: var(--eraser-progress, 33%);
|
||||
--control-rgb: 255 140 117;
|
||||
--thumb-background:
|
||||
linear-gradient(
|
||||
110deg,
|
||||
transparent 0 12%,
|
||||
rgb(255 255 255 / 44%) 13% 20%,
|
||||
transparent 21% 100%
|
||||
),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
#ff8fa3 0 52%,
|
||||
rgb(54 46 51 / 78%) 53% 56%,
|
||||
#f5eee5 57% 100%
|
||||
);
|
||||
--thumb-height: calc(21px * var(--eraser-control-scale, 1));
|
||||
--thumb-hover-transform: rotate(-10deg) scale(1.03);
|
||||
--thumb-radius: calc(6px * var(--eraser-control-scale, 1));
|
||||
--thumb-transform: rotate(-10deg);
|
||||
--thumb-width: calc(34px * var(--eraser-control-scale, 1));
|
||||
}
|
||||
|
||||
> .mirror-segment-control {
|
||||
--control-progress: var(--mirror-progress, 0%);
|
||||
--control-rgb: 148 233 203;
|
||||
--thumb-background:
|
||||
radial-gradient(circle, white 0 3px, rgb(9 20 18 / 78%) 3.5px 8px),
|
||||
repeating-conic-gradient(
|
||||
from -90deg,
|
||||
rgb(218 255 241) 0 8deg,
|
||||
rgb(8 22 19 / 94%) 8deg var(--mirror-angle, 360deg)
|
||||
);
|
||||
--thumb-height: 44px;
|
||||
--thumb-width: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include on-small-screen {
|
||||
width: 100%;
|
||||
padding-inline: 6px;
|
||||
gap: 6px;
|
||||
|
||||
> .vibe-button {
|
||||
|
|
@ -577,17 +445,14 @@ html > body > aside.control-dock > .toolbar-row {
|
|||
}
|
||||
|
||||
> .toolbar-shell {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
gap: 8px;
|
||||
padding: 4px 8px;
|
||||
|
||||
> nav.buttons {
|
||||
grid-area: nav;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding-top: 3px;
|
||||
border-top: 1px solid rgb(255 255 255 / 12%);
|
||||
|
||||
> button {
|
||||
width: 44px;
|
||||
|
|
@ -608,110 +473,46 @@ html > body > aside.control-dock > .toolbar-row {
|
|||
}
|
||||
|
||||
> .garden-controls {
|
||||
grid-area: swatches;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 2px 4px;
|
||||
|
||||
> .swatches {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
flex: 1 1 100%;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
justify-content: stretch;
|
||||
column-gap: 7px;
|
||||
row-gap: 8px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 54px;
|
||||
flex: 1 1 100%;
|
||||
padding: 4px 6px;
|
||||
column-gap: 7px;
|
||||
row-gap: 8px;
|
||||
|
||||
> .color-swatch {
|
||||
grid-column: span 2;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
> .eraser-size-control,
|
||||
> .mirror-segment-control {
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 42px;
|
||||
flex-basis: auto;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
> .eraser-size-control {
|
||||
grid-column: 1 / span 3;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 42px;
|
||||
flex-basis: auto;
|
||||
padding: 0 8px;
|
||||
|
||||
&::before {
|
||||
right: 8px;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
> .mirror-segment-control {
|
||||
--thumb-height: 38px;
|
||||
--thumb-width: 38px;
|
||||
|
||||
grid-column: 4 / span 3;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 42px;
|
||||
flex-basis: auto;
|
||||
padding: 0 8px;
|
||||
|
||||
&::before {
|
||||
right: 8px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
&::-webkit-slider-thumb {
|
||||
@include range-thumb-base(
|
||||
38px,
|
||||
38px,
|
||||
2px solid rgb(240 255 251 / 94%),
|
||||
50%
|
||||
);
|
||||
margin-top: -15.5px;
|
||||
background:
|
||||
radial-gradient(circle, white 0 2.5px, rgb(9 20 18 / 78%) 3px 7px),
|
||||
repeating-conic-gradient(
|
||||
from -90deg,
|
||||
rgb(218 255 241) 0 8deg,
|
||||
rgb(8 22 19 / 94%) 8deg var(--mirror-angle)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 0 0 6px rgb(0 0 0 / 18%),
|
||||
0 0 0 3px rgb(92 206 177 / 16%),
|
||||
0 4px 10px rgb(0 0 0 / 28%);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:hover {
|
||||
box-shadow:
|
||||
inset 0 0 0 6px rgb(0 0 0 / 18%),
|
||||
0 0 0 4px rgb(92 206 177 / 24%),
|
||||
0 5px 12px rgb(0 0 0 / 32%);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include range-thumb-base(
|
||||
38px,
|
||||
38px,
|
||||
2px solid rgb(240 255 251 / 94%),
|
||||
50%
|
||||
);
|
||||
background:
|
||||
radial-gradient(circle, white 0 2.5px, rgb(9 20 18 / 78%) 3px 7px),
|
||||
repeating-conic-gradient(
|
||||
from -90deg,
|
||||
rgb(218 255 241) 0 8deg,
|
||||
rgb(8 22 19 / 94%) 8deg var(--mirror-angle)
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 0 0 6px rgb(0 0 0 / 18%),
|
||||
0 0 0 3px rgb(92 206 177 / 16%),
|
||||
0 4px 10px rgb(0 0 0 / 28%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@use 'vars';
|
||||
@use 'fonts';
|
||||
@use 'mixins' as *;
|
||||
|
||||
*,
|
||||
*::before,
|
||||
|
|
@ -21,7 +20,7 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: 'Comfortaa', sans-serif;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
margin-bottom: var(--small-margin);
|
||||
}
|
||||
|
||||
|
|
@ -48,16 +47,3 @@ html {
|
|||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.large-button {
|
||||
min-height: 44px;
|
||||
border: none;
|
||||
background-color: var(--accent-color);
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius);
|
||||
padding: calc(var(--small-margin) / 2) var(--small-margin);
|
||||
margin: var(--small-margin) auto;
|
||||
align-self: flex-end;
|
||||
@include main-font();
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,3 @@
|
|||
/* comfortaa-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Comfortaa';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src:
|
||||
local(''),
|
||||
url('../../assets/fonts/comfortaa-v40-latin-regular.woff2') format('woff2'),
|
||||
/* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('../../assets/fonts/comfortaa-v40-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* open-sans-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
@use 'sass:math';
|
||||
@use 'sass:color';
|
||||
|
||||
$breakpoint-width: 600px !default;
|
||||
|
||||
@mixin on-small-screen() {
|
||||
|
|
@ -8,132 +5,3 @@ $breakpoint-width: 600px !default;
|
|||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin on-large-screen() {
|
||||
@media (min-width: $breakpoint-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin title-fragment-link() {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '#';
|
||||
position: absolute;
|
||||
left: -0.5ch;
|
||||
top: 50%;
|
||||
opacity: 0;
|
||||
transform: translateX(-100%) translateY(-50%);
|
||||
transition: opacity var(--transition-time);
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin center-children() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin absolute-center() {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
@mixin blurred-background($color: transparent) {
|
||||
background-color: color.adjust($color, $alpha: -0.66);
|
||||
backdrop-filter: blur(var(--blur-radius));
|
||||
}
|
||||
|
||||
@mixin square($size) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
@mixin title-font() {
|
||||
font:
|
||||
400 3rem 'Comfortaa',
|
||||
sans-serif;
|
||||
color: var(--normal-text-color);
|
||||
line-height: 1;
|
||||
|
||||
@include on-small-screen {
|
||||
font-size: 3rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sub-title-font() {
|
||||
font:
|
||||
400 1.75rem 'Comfortaa',
|
||||
sans-serif;
|
||||
color: var(--normal-text-color);
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
@mixin main-font() {
|
||||
font:
|
||||
400 1.1rem 'Open Sans',
|
||||
sans-serif;
|
||||
color: var(--normal-text-color);
|
||||
line-height: 1.8;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
@mixin special-text-font() {
|
||||
font:
|
||||
400 1rem 'Open Sans',
|
||||
sans-serif;
|
||||
color: var(--special-text-color);
|
||||
hyphens: auto;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@mixin link {
|
||||
$border-shift: 10px;
|
||||
$line-width: 2px;
|
||||
|
||||
@include special-text-font();
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
padding: 0 3px $line-width 0;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
width: calc(100% + #{$border-shift});
|
||||
border-bottom: $line-width dashed var(--accent-color);
|
||||
transition: transform var(--transition-time);
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
height: $line-width;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--card-color) 0,
|
||||
transparent 4px,
|
||||
transparent calc(100% - 4px),
|
||||
var(--card-color) 100%
|
||||
);
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
transform: translateX(-$border-shift);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,9 @@
|
|||
@use 'mixins' as *;
|
||||
|
||||
:root {
|
||||
--transition-time: 200ms;
|
||||
--transition-time-long: 350ms;
|
||||
--line-width: 4px;
|
||||
--line-height: 1.125rem;
|
||||
--accent-color: rgb(6.39851188659668, 70.28645324707031, 102.23043060302734);
|
||||
--very-light-text-color: #ffffff;
|
||||
--main-color: #aaa;
|
||||
--normal-text-color: #31343f;
|
||||
--blurred-card-color: transparent;
|
||||
--blur-radius: 12px;
|
||||
--special-text-color: var(--accent-color);
|
||||
--border-radius: 0.6rem;
|
||||
|
||||
--large-margin: 4.6rem;
|
||||
--normal-margin: 2rem;
|
||||
--small-margin: 1rem;
|
||||
--shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
--icon-size: 2.5rem;
|
||||
--large-icon-size: 3.75rem;
|
||||
--body-width: min(80%, 60rem);
|
||||
}
|
||||
|
||||
@include on-small-screen {
|
||||
:root {
|
||||
--body-width: 90%;
|
||||
--large-margin: 2.8rem;
|
||||
--normal-margin: 2rem;
|
||||
--icon-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue