signal-desktop/stylesheets/components/ConversationHeader.scss

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

.module-ConversationHeader {
  @mixin icon-element($icon, $margin-right: 4px) {
    display: flex;
    align-items: center;
    user-select: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    &::before {
      content: '';
      width: 14px;
      height: 14px;
      display: block;
      margin-inline-end: $margin-right;

      @include light-theme {
        @include color-svg($icon, $color-gray-60);
      }
      @include dark-theme {
        @include color-svg($icon, $color-gray-25);
      }
    }
  }

  --button-spacing: 12px;

  &.module-ConversationHeader--narrow {
    --button-spacing: 4px;
  }

  @include draggable-region;
  // In Electron v23+, clicking on a `drag` region in an unfocused window may not
  // propagate clicks to no-drag elements that have a higher CSS order; this avoids that
  // scenario for interactive elements (e.g. IncomingCallBar) which overlap the
  // conversation header.
  @at-root body:not(.window-focused) & {
    -webkit-app-region: no-drag;
  }

  padding-top: var(--title-bar-drag-area-height);
  display: flex;
  flex-direction: row;
  align-items: center;
  height: calc(#{$header-height} + var(--title-bar-drag-area-height));

  @include light-theme {
    color: $color-gray-90;
    background-color: $color-white;
  }
  @include dark-theme {
    color: $color-gray-02;
    background-color: $color-gray-95;
  }

  &__header {
    $padding: 4px 12px;

    align-items: center;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    margin-inline: 4px var(--button-spacing);
    padding: $padding;
    overflow: hidden;
    min-width: 0;
    transition: margin-inline-end 200ms ease-out;

    &--clickable {
      @include button-reset;
      flex: 1;
      border-radius: 4px;
      -webkit-app-region: no-drag;

      // These are clobbered by button-reset:
      margin-inline: 4px var(--button-spacing);
      padding: $padding;
      padding-inline-start: 0;

      @include keyboard-mode {
        &:focus {
          color: $color-ultramarine;
        }
      }
      @include dark-keyboard-mode {
        &:focus {
          color: $color-ultramarine-light;
        }
      }
    }

    &__avatar {
      min-width: 32px;
      margin-inline-end: 12px;
      padding-top: 4px;
      padding-bottom: 4px;
    }

    &__info {
      display: flex;
      flex-direction: column;
      min-width: 0;

      &__title {
        @include font-body-1-bold;
        display: flex;
        align-items: center;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        user-select: none;

        &__in-contacts-icon {
          margin-inline-start: 4px;
        }
      }

      &__subtitle {
        display: flex;
        @include font-body-2;

        @include light-theme {
          color: $color-gray-60;
        }
        @include dark-theme {
          color: $color-gray-25;
        }

        &__expiration {
          @include icon-element('../images/icons/v3/timer/timer-compact.svg');
          margin-inline-end: 12px;
        }

        &__verified {
          @include icon-element('../images/icons/v3/check/check-compact.svg');
        }
      }
    }
  }

  &__button {
    $icon-size: 32px;

    -webkit-app-region: no-drag;
    @include button-reset;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 2px solid transparent;
    display: flex;
    height: $icon-size;
    margin-inline-end: var(--button-spacing);
    min-width: $icon-size;
    padding: 2px;
    transition: margin-inline-end 200ms ease-out, opacity 200ms ease-out,
      background 100ms ease-out;
    width: $icon-size;

    &:disabled {
      cursor: default;
      opacity: 0.5;
    }

    &--show-disabled {
      opacity: 0.5;
    }

    &:not(:disabled) {
      @include light-theme {
        &:hover,
        &:focus {
          background: $color-gray-02;
        }
        &:active {
          background: $color-gray-05;
        }
      }
      @include dark-theme {
        &:hover,
        &:focus {
          background: $color-gray-80;
        }
        &:active {
          background: $color-gray-75;
        }
      }

      @include keyboard-mode {
        &:focus {
          border-color: $color-ultramarine;
        }
      }
      @include dark-keyboard-mode {
        &:focus {
          border-color: $color-ultramarine-light;
        }
      }
    }

    @mixin normal-button($icon, $size) {
      &::before {
        content: '';
        display: block;
        width: $size;
        height: $size;

        @include light-theme {
          @include color-svg($icon, $color-gray-75);
          &:hover,
          &:active,
          &:focus {
            @include color-svg($icon, $color-gray-90);
          }
        }
        @include dark-theme {
          @include color-svg($icon, $color-gray-15);
          &:hover,
          &:active,
          &:focus {
            @include color-svg($icon, $color-gray-02);
          }
        }
      }
    }

    &--video {
      @include normal-button('../images/icons/v3/video/video.svg', 20px);
    }

    &--audio {
      @include normal-button('../images/icons/v3/phone/phone.svg', 20px);
    }

    &--search {
      @include normal-button('../images/icons/v3/search/search.svg', 20px);
    }

    &--more {
      @include normal-button('../images/icons/v3/more/more.svg', 20px);
      margin-inline-end: 16px;
    }

    &--join-call {
      $background: $color-accent-green;

      @include font-body-1;
      @include rounded-corners;
      align-items: center;
      background-color: $background;
      color: $color-white;
      display: flex;
      outline: none;
      overflow: hidden;
      padding-block: 5px;
      padding-inline: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
      user-select: none;
      width: auto;
      height: 28px;

      &:before {
        $icon-size: 16px;

        @include color-svg(
          '../images/icons/v3/video/video-compact-fill.svg',
          $color-white
        );
        content: '';
        display: block;
        height: $icon-size;
        margin-inline-end: 4px;
        min-width: $icon-size;
        width: $icon-size;
      }

      &:not(:disabled) {
        // Override hover state coming from __button above.
        &:hover {
          @include any-theme {
            background-color: darken($background, 16%);
          }
        }

        &:focus {
          @include keyboard-mode {
            background-color: darken($background, 16%);
          }
        }
      }
    }
  }

  &__disappearing-timer__item {
    padding-inline-start: 25px;

    &--active {
      padding-inline-start: 0px;
      @include icon-element('../images/icons/v3/check/check-compact.svg', 12px);
    }
  }
}