141 lines
3.4 KiB
SCSS
141 lines
3.4 KiB
SCSS
@use 'shared' as *;
|
|
|
|
.toolbar-row {
|
|
--toolbar-background-opacity: 0%;
|
|
--toolbar-background-strength: 0;
|
|
--toolbar-divider-space: clamp(6px, 1.8vw, 14px);
|
|
--toolbar-top-max-width: 594px;
|
|
--vibe-button-hit-size: 64px;
|
|
|
|
display: grid;
|
|
grid-template-areas:
|
|
'previous controls next'
|
|
'previous divider next'
|
|
'previous buttons next';
|
|
grid-template-columns:
|
|
var(--vibe-button-hit-size)
|
|
minmax(0, var(--toolbar-top-max-width))
|
|
var(--vibe-button-hit-size);
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
padding-inline: clamp(8px, 1.4vw, 14px);
|
|
column-gap: 0;
|
|
row-gap: 0;
|
|
border-radius: 12px;
|
|
color: rgb(245 250 244 / 92%);
|
|
background-color: rgb(5 8 13 / var(--toolbar-background-opacity));
|
|
box-shadow:
|
|
inset 0 0 0 1px rgb(255 255 255 / calc(var(--toolbar-background-strength) * 16%)),
|
|
inset 0 1px 0 rgb(255 255 255 / calc(var(--toolbar-background-strength) * 7%)),
|
|
0 14px 34px rgb(0 0 0 / calc(var(--toolbar-background-strength) * 28%));
|
|
backdrop-filter: blur(calc(var(--toolbar-background-strength) * 18px))
|
|
brightness(calc(1 - var(--toolbar-background-strength) * 0.38))
|
|
saturate(calc(1 - var(--toolbar-background-strength) * 0.18));
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
transition:
|
|
backdrop-filter var(--transition-time-long),
|
|
background-color var(--transition-time-long),
|
|
box-shadow var(--transition-time-long);
|
|
|
|
&::after {
|
|
content: '';
|
|
grid-area: divider;
|
|
align-self: center;
|
|
justify-self: center;
|
|
width: min(100%, var(--toolbar-top-max-width));
|
|
height: 1px;
|
|
margin-block: var(--toolbar-divider-space);
|
|
background: rgb(255 255 255 / 12%);
|
|
}
|
|
|
|
button {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
border: 0;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
@include toolbar-button-transition();
|
|
|
|
&:disabled {
|
|
cursor: progress;
|
|
opacity: 0.58;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid white;
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
> .toolbar-shell {
|
|
grid-area: controls;
|
|
display: grid;
|
|
grid-template-areas: 'swatches';
|
|
grid-template-columns: minmax(0, 1fr);
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-self: center;
|
|
width: min(100%, var(--toolbar-top-max-width));
|
|
min-width: 0;
|
|
padding: 8px 9px;
|
|
}
|
|
|
|
> .vibe-button {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
width: var(--vibe-button-hit-size);
|
|
height: auto;
|
|
min-height: 72px;
|
|
flex: 0 0 auto;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: rgb(255 255 255 / 70%);
|
|
font-size: 0;
|
|
line-height: 1;
|
|
|
|
&::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 {
|
|
color: color-mix(in srgb, var(--accent-color) 70%, white);
|
|
}
|
|
|
|
&.previous-vibe:hover {
|
|
transform: translateX(-2px);
|
|
}
|
|
|
|
&.next-vibe:hover {
|
|
transform: translateX(2px);
|
|
}
|
|
}
|
|
|
|
> .previous-vibe {
|
|
grid-area: previous;
|
|
}
|
|
|
|
> .next-vibe {
|
|
grid-area: next;
|
|
}
|
|
}
|