Update SCSS
This commit is contained in:
parent
4e92913925
commit
cb1df6f29e
9 changed files with 1136 additions and 274 deletions
653
src/style/_toolbar.scss
Normal file
653
src/style/_toolbar.scss
Normal file
|
|
@ -0,0 +1,653 @@
|
|||
@use 'mixins' as *;
|
||||
@use 'range-input' as *;
|
||||
|
||||
html > body > aside.control-dock > .toolbar-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
gap: clamp(6px, 1.8vw, 14px);
|
||||
color: rgb(245 250 244 / 92%);
|
||||
font:
|
||||
600 13px/1 'Open Sans',
|
||||
sans-serif;
|
||||
|
||||
button {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color var(--transition-time),
|
||||
border-color var(--transition-time),
|
||||
color var(--transition-time),
|
||||
box-shadow var(--transition-time),
|
||||
transform var(--transition-time);
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid white;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
> .toolbar-shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
'swatches'
|
||||
'nav';
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
min-height: 86px;
|
||||
padding: 8px 9px;
|
||||
border: 1px solid rgb(255 255 255 / 10%);
|
||||
border-radius: 10px;
|
||||
background: rgb(12 14 16 / 74%);
|
||||
backdrop-filter: blur(16px);
|
||||
box-shadow:
|
||||
0 10px 30px rgb(0 0 0 / 22%),
|
||||
0 1px 3px rgb(0 0 0 / 18%);
|
||||
}
|
||||
|
||||
> .vibe-button {
|
||||
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: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-color: currentColor;
|
||||
border-style: solid;
|
||||
border-width: 0 0 3px 3px;
|
||||
transform: translate(-35%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
&.next-vibe::before {
|
||||
border-width: 3px 3px 0 0;
|
||||
transform: translate(-65%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
color: color-mix(in srgb, var(--accent-color) 70%, white);
|
||||
box-shadow: none;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
> .toolbar-shell > nav.buttons {
|
||||
grid-area: nav;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
padding-top: 7px;
|
||||
border-top: 1px solid rgb(255 255 255 / 12%);
|
||||
|
||||
> button {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: auto;
|
||||
background-color: rgb(245 250 244 / 76%);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
transition:
|
||||
background-color var(--transition-time),
|
||||
transform var(--transition-time);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
border-color: rgb(255 255 255 / 10%);
|
||||
background: rgb(255 255 255 / 9%);
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
&.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');
|
||||
}
|
||||
|
||||
&.sound.muted::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
width: 2px;
|
||||
height: 28px;
|
||||
margin: auto;
|
||||
border-radius: 999px;
|
||||
background: white;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
&.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 {
|
||||
flex: 0 1 140px;
|
||||
min-height: 20px;
|
||||
max-width: 140px;
|
||||
overflow: hidden;
|
||||
color: rgb(255 255 255 / 82%);
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .toolbar-shell > .garden-controls {
|
||||
grid-area: swatches;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
padding: 0 4px;
|
||||
|
||||
> .swatches {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
min-height: 58px;
|
||||
padding: 6px 10px;
|
||||
|
||||
> button {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: 2px solid rgb(255 255 255 / 54%);
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgb(0 0 0 / 16%),
|
||||
0 3px 10px rgb(0 0 0 / 22%);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
outline: 2px solid rgb(255 255 255 / 96%);
|
||||
outline-offset: 3px;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgb(0 0 0 / 14%),
|
||||
0 0 0 7px color-mix(in srgb, var(--accent-color) 52%, transparent),
|
||||
0 7px 18px rgb(0 0 0 / 26%);
|
||||
}
|
||||
}
|
||||
|
||||
> .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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .mirror-segment-control {
|
||||
--mirror-progress: 0%;
|
||||
--mirror-angle: 360deg;
|
||||
|
||||
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(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%));
|
||||
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(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%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: rgb(167 245 219 / 74%);
|
||||
background-color: rgb(92 206 177 / 12%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgb(255 255 255 / 10%),
|
||||
0 0 0 5px rgb(92 206 177 / 28%),
|
||||
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(148 233 203 / 78%) 0 var(--mirror-progress),
|
||||
rgb(255 255 255 / 24%) var(--mirror-progress) 100%
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include range-thumb-base(44px, 44px, 2px solid rgb(240 255 251 / 94%), 50%);
|
||||
margin-top: -18.5px;
|
||||
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);
|
||||
}
|
||||
|
||||
&::-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);
|
||||
}
|
||||
|
||||
&::-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%
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&::-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 on-small-screen {
|
||||
width: 100%;
|
||||
gap: 6px;
|
||||
|
||||
> .vibe-button {
|
||||
width: 44px;
|
||||
min-height: 44px;
|
||||
|
||||
&::before {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
> .toolbar-shell {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
|
||||
> nav.buttons {
|
||||
grid-area: nav;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding-top: 7px;
|
||||
border-top: 1px solid rgb(255 255 255 / 12%);
|
||||
|
||||
> button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
&::after {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
> .export-status {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
> .garden-controls {
|
||||
grid-area: swatches;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 2px 4px;
|
||||
|
||||
> .swatches {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 9px;
|
||||
row-gap: 8px;
|
||||
min-height: 54px;
|
||||
padding: 7px 8px;
|
||||
|
||||
> .color-swatch {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
> .eraser-size-control {
|
||||
width: clamp(104px, 31vw, 138px);
|
||||
height: 44px;
|
||||
flex-basis: clamp(104px, 31vw, 138px);
|
||||
padding: 0 9px;
|
||||
}
|
||||
|
||||
> .mirror-segment-control {
|
||||
width: clamp(104px, 31vw, 138px);
|
||||
height: 44px;
|
||||
flex-basis: clamp(104px, 31vw, 138px);
|
||||
padding: 0 9px;
|
||||
|
||||
&::before {
|
||||
right: 9px;
|
||||
left: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue