signal-desktop/stylesheets/components/MediaEditor.scss

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

.MediaEditor {
  $tools-height: 44px;

  background: $color-gray-95;
  display: flex;
  flex-direction: column;
  width: var(--window-width);
  height: var(--window-height);
  inset-inline-start: 0;
  top: var(--titlebar-height);
  position: absolute;
  user-select: none;
  z-index: $z-index-popup-overlay;

  &__container {
    display: flex;
    flex: 1;
    padding-block: 22px;
    padding-inline: 60px;
    padding-bottom: 0;
    overflow: hidden;
  }

  &__media {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;

    &--canvas {
      border-radius: 12px;
      transition: border-radius 200ms ease-out;

      &--cropping {
        border-radius: 0;
      }
    }
  }

  &__control {
    @include button-reset;
    align-items: center;
    border-radius: 32px;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    margin-block: 0;
    margin-inline: 18px;
    opacity: 1;
    width: 32px;

    &::after {
      content: ' ';
      height: 20px;
      width: 20px;
    }

    &--crop::after {
      @include color-svg(
        '../images/icons/v3/crop/crop-rotate.svg',
        $color-white
      );
    }

    &--pen::after {
      @include color-svg('../images/icons/v2/draw-24.svg', $color-white);
    }

    &--redo {
      &::after {
        @include color-svg('../images/icons/v3/redo/redo.svg', $color-white);
      }
      &:disabled::after {
        @include color-svg('../images/icons/v3/redo/redo.svg', $color-gray-45);
      }
    }

    &--sticker.module-sticker-button__button::after {
      @include color-svg(
        '../images/icons/v3/sticker/sticker-smiley.svg',
        $color-white
      );
    }

    &--text::after {
      @include color-svg('../images/icons/v2/text-24.svg', $color-white);
    }

    &--undo {
      &::after {
        @include color-svg('../images/icons/v3/undo/undo.svg', $color-white);
      }
      &:disabled::after {
        @include color-svg('../images/icons/v3/undo/undo.svg', $color-gray-45);
      }
    }

    &--selected {
      background-color: $color-white;

      &::after {
        background-color: $color-black;
      }
    }

    &:hover {
      background-color: $color-gray-80;

      &::after {
        background-color: $color-white;
      }
    }
  }

  &__toolbar {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px;
    width: 100%;

    &--buttons {
      align-items: center;
      display: flex;
      justify-content: center;
      width: 100%;
    }

    &--space {
      height: $tools-height;
      margin-bottom: 22px;
    }

    &__caption {
      height: $tools-height;
      margin-bottom: 22px;

      &__add-caption-button {
        @include button-reset;
        border-radius: 9999px;
        background: $color-gray-90;
        color: $color-gray-15;
        padding-block: 8px;
        padding-inline: 15px;
        border: none;

        & > span {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
      }
    }
  }

  &__controls {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 596px;
  }

  &__tools {
    align-items: center;
    background-color: $color-gray-90;
    border-radius: 10px;
    color: $color-white;
    display: flex;
    height: $tools-height;
    justify-content: center;
    margin-bottom: 22px;
    padding-block: 14px;
    padding-inline: 12px;

    &__tool,
    &__tool__button {
      margin-inline-end: 14px;
    }

    &__button {
      @mixin icon($icon) {
        @include color-svg('../images/icons/v2/#{$icon}', $color-white);
        opacity: 1;
        height: 20px;
        width: 20px;
        border-radius: 0;

        &::after {
          display: none;
        }
      }

      @include button-reset;
      display: flex;
      margin-block: 0;
      margin-inline: 8px;
      padding: 8px;

      &--words {
        height: auto;
        width: auto;
        padding-block: 0;
        padding-inline: 6px;
      }

      &--draw-pen__button {
        @include icon('pen-20.svg');
      }
      &--draw-highlighter__button {
        @include icon('pen-highlighter-20.svg');
      }
      &--width-thin__button {
        @include icon('pen-light-20.svg');
      }
      &--width-regular__button {
        @include icon('pen-regular-20.svg');
      }
      &--width-medium__button {
        @include icon('pen-medium-20.svg');
      }
      &--width-heavy__button {
        @include icon('pen-heavy-20.svg');
      }
      &--text-regular__button {
        @include icon('text-regular-20.svg');
      }
      &--text-highlight__button {
        @include icon('text-highlight-20.svg');
      }
      &--text-outline__button {
        @include icon('text-outline-20.svg');
      }
      &--rotate {
        @include icon('rotate-outline-24.svg');
      }
      &--flip {
        @include icon('flip-outline-24.svg');
      }
      &--crop-locked {
        @include icon('crop-lock-24.svg');
      }
      &--crop-unlocked {
        @include icon('crop-unlock-24.svg');
      }
    }
  }

  &__icon {
    &--draw-pen {
      @include color-svg('../images/icons/v2/pen-20.svg', $color-white);
    }

    &--draw-highlighter {
      @include color-svg(
        '../images/icons/v2/pen-highlighter-20.svg',
        $color-white
      );
    }

    &--text-regular {
      @include color-svg(
        '../images/icons/v2/text-regular-20.svg',
        $color-white
      );
    }

    &--text-highlight {
      @include color-svg(
        '../images/icons/v2/text-highlight-20.svg',
        $color-white
      );
    }

    &--text-outline {
      @include color-svg(
        '../images/icons/v2/text-outline-20.svg',
        $color-white
      );
    }

    &--width-thin {
      @include color-svg('../images/icons/v2/pen-light-20.svg', $color-white);
    }

    &--width-regular {
      @include color-svg('../images/icons/v2/pen-regular-20.svg', $color-white);
    }

    &--width-medium {
      @include color-svg('../images/icons/v2/pen-medium-20.svg', $color-white);
    }

    &--width-heavy {
      @include color-svg('../images/icons/v2/pen-heavy-20.svg', $color-white);
    }
  }
}