Clena up CSS
This commit is contained in:
parent
20433bd9f0
commit
70423851ba
10 changed files with 180 additions and 674 deletions
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue