more

src/style/toolbar/_layout.scss

@@ -0,0 +1,137 @@
+@use 'shared' as *;
+
+html > body > aside.control-dock > .toolbar-row {
+  --toolbar-background-opacity: 0%;
+  --toolbar-background-strength: 0;
+  --toolbar-divider-space: clamp(6px, 1.8vw, 14px);
+  --toolbar-top-max-width: 594px;
+
+  display: grid;
+  grid-template-areas:
+    'previous controls next'
+    'previous divider next'
+    'previous buttons next';
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: stretch;
+  justify-content: center;
+  width: 100%;
+  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: 52px;
+    height: auto;
+    min-height: 66px;
+    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;
+  }
+}