penpot/frontend/src/app/main/ui/workspace/top_toolbar.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_utils.scss" as *;
@use "ds/spacing.scss" as *;
@use "ds/typography.scss" as t;
@use "ds/z-index.scss" as *;

.toolbar {
  --toolbar-position-y: #{$sz-28};
  --toolbar-offset-y: 0px;
  --menu-border-color: var(--color-background-quaternary);
  --menu-background-color: var(--color-background-primary);

  cursor: default;
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: var(--sp-m);
  border-radius: $br-8;
  border: $b-2 solid var(--menu-border-color);
  z-index: var(--z-index-panels);
  background-color: var(--menu-background-color);
  transition:
    inset-block-start 0.3s,
    block-size 0.3s,
    opacity 0.3s;
  inset-block-start: calc(var(--toolbar-position-y) + var(--toolbar-offset-y));
  will-change: auto;

  &.no-rulers {
    --toolbar-position-y: 0px;
    --toolbar-offset-y: 8px;
  }

  &.hidden {
    --toolbar-offset-y: -4px;

    block-size: $sz-16;
    z-index: 1;
    border-radius: 0 0 $br-8 $br-8;
    border-block-start: 0;

    .toolbar-options {
      opacity: 0;
      visibility: hidden;
    }
  }
}

.toolbar-options {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin: 0;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.toolbar-option {
  position: relative;
}

.toolbar-group {
  position: relative;
}

.toolbar-group-flyout {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  inset-block-start: 140%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  margin-block-start: var(--sp-xxs);
  padding: var(--sp-xxs) 0;
  border-radius: $br-8;
  border: #{$b-1} solid var(--menu-border-color);
  background-color: var(--menu-background-color);
  z-index: var(--z-index-panels);
  display: flex;
  transition:
    opacity 80ms ease-out,
    visibility 80ms linear;

  &.open {
    opacity: 1;
    transition-delay: 0s;
    visibility: visible;
    pointer-events: auto;
  }
}

.toolbar-mcp-button {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

.toolbar-mcp-button-label {
  &.connected {
    color: var(--color-accent-primary);
  }
}

.toolbar-mcp-button-dot {
  position: relative;
  display: flex;
  flex-shrink: 0;
  inline-size: px2rem(6);
  block-size: px2rem(6);
  border-radius: 50%;
  background-color: var(--color-background-disabled);

  &.connected {
    background-color: var(--color-accent-primary);
  }

  // One-shot "blob" ripple that confirms the moment the tab becomes
  // connected (e.g. after using "Switch here"). Triggered purely by the
  // `.connected` class appearing, in sync with the color change.
  &.connected::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--color-accent-primary);
    opacity: 0;
    animation: mcp-status-blob 0.5s ease-out;
  }
}

@keyframes mcp-status-blob {
  from {
    opacity: 0.5;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(2.5);
  }
}

.toolbar-mcp-menu {
  position: absolute;
  left: 0;
  top: $sz-36;
}

.toolbar-mcp-dropdown {
  box-shadow: 0 0 $sz-12 0 var(--color-shadow-dark);
  z-index: var(--z-index-dropdown);
  margin: 0;
  padding: var(--sp-xs);
  border: $b-1 solid var(--panel-border-color);
  border-radius: $br-8;
  background-color: var(--menu-background-color);
}

.toolbar-mcp-dropdown-info {
  @include t.use-typography("body-small");

  padding: var(--sp-s) var(--sp-m);
  color: var(--color-foreground-secondary);
  white-space: nowrap;
}

.toolbar-mcp-dropdown-item {
  @include t.use-typography("body-small");

  display: flex;
  align-items: center;
  padding: var(--sp-s) var(--sp-m);
  border-radius: $br-8;
  color: var(--menu-foreground-color);
  white-space: nowrap;

  &:hover {
    background-color: var(--menu-background-color-hover);
  }
}

.toolbar-separator {
  --separator-color: var(--color-background-quaternary);

  margin: 0 var(--sp-m);
  border-inline-start: $b-1 solid var(--separator-color);
  block-size: $sz-32;
}

.toolbar-handler {
  block-size: $sz-12;
  display: flex;
  justify-content: center;
  align-items: center;
  appearance: none;
  border: none;
  background: transparent;
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
}

.toolbar-handler-indicator {
  block-size: px2rem(4);
  inline-size: $sz-64;
  padding: 0;
  border-radius: $br-4;
  background-color: var(--color-accent-default);
}