signal-desktop/stylesheets/components/TitleBarContainer.scss

// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

.TitleBarContainer {
  display: flex;
  flex-direction: column;
  height: 100vh;

  --border-color: transparent;

  &--active {
    --border-color: transparent;
  }

  border: var(--window-border) solid var(--border-color);

  @mixin titlebar-position {
    position: fixed;
    top: 0;
    left: 0;

    width: calc(100vw * var(--zoom-factor));
    z-index: $z-index-window-controls;
    transform: scale(calc(1 / var(--zoom-factor)));
    transform-origin: 0 0;
  }

  // Draw bottom-less border frame around titlebar to prevent border-bottom
  // color from leaking to corners.
  &:after {
    content: '';
    display: none;

    @include titlebar-position;

    height: calc(var(--titlebar-height) * var(--zoom-factor));

    border: var(--unscaled-window-border) solid var(--border-color);
    border-bottom: none;
  }

  &__title {
    @include titlebar-position;
    border: var(--unscaled-window-border) solid transparent;

    // This matches the inline styles of frameless-titlebar
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial,
      sans-serif;

    padding-left: env(titlebar-area-x, 0);

    & button {
      font-family: inherit;
    }
  }

  &__padding {
    height: calc(var(--titlebar-height) - var(--window-border));
  }

  &__content {
    height: calc(100vh - var(--titlebar-height));
    position: relative;
    overflow: hidden;
  }
}