signal-desktop/stylesheets/components/ConversationDetails.scss

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

.ConversationDetails {
  &-header {
    &__root {
      align-items: center;
      display: flex;
      flex-direction: column;
      margin: 0 0 20px 0;
      padding: 0 24px;
      text-align: center;
      width: 100%;
    }

    &__root--editable {
      @include button-reset();
    }

    &__root--editable {
      cursor: pointer;
    }

    &__title {
      @include font-title-1;
      align-items: center;
      display: flex;
      justify-content: center;
      padding-bottom: 8px;
      padding-top: 12px;
    }

    &__subtitle {
      @include font-body-1;
      color: $color-gray-60;
      justify-content: center;
      padding-bottom: 6px;

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

    &__root--editable &__title {
      $icon: '../images/icons/v2/compose-solid-24.svg';

      &::after {
        $size: 24px;

        content: '';
        height: $size;
        left: $size + 13px;
        margin-left: -$size;
        opacity: 0;
        position: relative;
        transition: opacity 100ms ease-out;
        width: $size;

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

    &__root--editable:hover &__title::after {
      opacity: 1;
    }
  }

  &__chat-color {
    @include color-bubble(20px);
  }

  &-membership-list,
  &-groups {
    &__add-members-icon,
    &__add-to-group-icon {
      @mixin plus-icon($color) {
        @include color-svg('../images/icons/v2/plus-24.svg', $color);
        content: '';
        display: block;
        height: 16px;
        width: 16px;
      }

      align-items: center;
      border-radius: 100%;
      display: flex;
      height: 32px;
      justify-content: center;
      width: 32px;

      @include light-theme {
        background: $color-gray-02;
        &::before {
          @include plus-icon($color-black);
        }
      }
      @include dark-theme {
        background: $color-gray-90;
        &::before {
          @include plus-icon($color-gray-15);
        }
      }
    }
  }

  &__leave-group {
    color: $color-accent-red;

    &--disabled {
      @include light-theme {
        color: $color-gray-60;
      }

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

  &__block-group {
    color: $color-accent-red;
  }
  &__unblock-group {
    color: $color-accent-blue;
  }

  &__tabs {
    display: flex;
    justify-content: space-around;
  }

  &__tab {
    @include font-body-1;
    cursor: pointer;
    padding: 15px;

    &:focus {
      @include mouse-mode {
        outline: none;
      }
    }

    &--selected {
      @include font-body-1-bold;
      border-bottom: 2px solid $color-black;
    }
  }

  &__pending--info {
    @include font-subtitle;
    @include light-theme {
      color: $color-gray-60;
    }
    @include dark-theme {
      color: $color-gray-25;
    }
    padding: 0 28px;
    padding-top: 16px;
  }

  &-icon {
    &__button {
      background: none;
      border: none;
      padding: none;

      &:focus {
        outline: none;

        .ConversationDetails-icon__icon::after {
          @include keyboard-mode {
            background-color: $color-ultramarine;
          }
        }
      }
    }

    &__icon {
      height: 32px;
      width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;

      &::after {
        display: block;
        content: '';
        width: 24px;
        height: 24px;
        -webkit-mask-size: 100%;
      }

      &--color {
        &::after {
          -webkit-mask: url(../images/icons/v2/color-outline-24.svg) no-repeat
            center;

          @include light-theme {
            background-color: $color-gray-75;
          }

          @include dark-theme {
            background-color: $color-gray-15;
          }
        }
      }

      &--timer {
        &::after {
          -webkit-mask: url(../images/icons/v2/timer-disabled-outline-24.svg)
            no-repeat center;

          @include light-theme {
            background-color: $color-gray-75;
          }

          @include dark-theme {
            background-color: $color-gray-15;
          }
        }
      }

      &--notifications {
        &::after {
          -webkit-mask: url('../images/icons/v2/sound-outline-24.svg') no-repeat
            center;

          @include light-theme {
            background-color: $color-gray-75;
          }

          @include dark-theme {
            background-color: $color-gray-15;
          }
        }
      }

      &--mute {
        &::after {
          @include light-theme {
            -webkit-mask: url('../images/icons/v2/bell-disabled-outline-24.svg')
              no-repeat center;
            background-color: $color-gray-75;
          }

          @include dark-theme {
            -webkit-mask: url('../images/icons/v2/bell-disabled-solid-24.svg')
              no-repeat center;
            background-color: $color-gray-15;
          }
        }
      }

      &--mention {
        &::after {
          -webkit-mask: url('../images/icons/v2/at-24.svg') no-repeat center;

          @include light-theme {
            background-color: $color-gray-75;
          }

          @include dark-theme {
            background-color: $color-gray-15;
          }
        }
      }

      &--lock {
        &::after {
          -webkit-mask: url(../images/icons/v2/lock-outline-24.svg) no-repeat
            center;

          @include light-theme {
            background-color: $color-gray-75;
          }

          @include dark-theme {
            background-color: $color-gray-15;
          }
        }
      }

      &--approve {
        &::after {
          -webkit-mask: url(../images/icons/v2/check-24.svg) no-repeat center;

          @include light-theme {
            background-color: $color-gray-75;
          }

          @include dark-theme {
            background-color: $color-gray-15;
          }
        }
      }

      &--link {
        &::after {
          -webkit-mask: url(../images/icons/v2/link-16.svg) no-repeat center;

          @include light-theme {
            background-color: $color-gray-75;
          }

          @include dark-theme {
            background-color: $color-gray-15;
          }
        }
      }

      &--share {
        &::after {
          -webkit-mask: url(../images/icons/v2/share-ios-24.svg) no-repeat
            center;

          @include light-theme {
            background-color: $color-gray-75;
          }

          @include dark-theme {
            background-color: $color-gray-15;
          }
        }
      }

      &--reset {
        &::after {
          -webkit-mask: url(../images/icons/v2/refresh-24.svg) no-repeat center;

          @include light-theme {
            background-color: $color-gray-75;
          }

          @include dark-theme {
            background-color: $color-gray-15;
          }
        }
      }

      &--trash {
        &::after {
          -webkit-mask: url(../images/icons/v2/trash-outline-24.svg) no-repeat
            center;

          @include light-theme {
            background-color: $color-gray-75;
          }

          @include dark-theme {
            background-color: $color-gray-15;
          }
        }
      }

      &--invites {
        &::after {
          -webkit-mask: url(../images/icons/v2/pending-invite-24.svg) no-repeat
            center;

          @include light-theme {
            background-color: $color-gray-75;
          }

          @include dark-theme {
            background-color: $color-gray-15;
          }
        }
      }

      &--down {
        border-radius: 18px;
        @include light-theme {
          background-color: $color-gray-02;
        }

        @include dark-theme {
          background-color: $color-gray-90;
        }

        &::after {
          -webkit-mask: url(../images/icons/v2/chevron-down-16.svg) no-repeat
            center;

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

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

      &--leave {
        &::after {
          -webkit-mask: url(../images/icons/v2/leave-24.svg) no-repeat center;
          background-color: $color-accent-red;
        }

        &--disabled::after {
          @include light-theme {
            background-color: $color-gray-60;
          }

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

      &--block {
        &::after {
          -webkit-mask: url(../images/icons/v2/block-24.svg) no-repeat center;
          background-color: $color-accent-red;
        }
      }
      &--unblock {
        &::after {
          -webkit-mask: url(../images/icons/v2/block-24.svg) no-repeat center;
          background-color: $color-accent-blue;
        }
      }

      &--verify {
        &::after {
          -webkit-mask: url(../images/icons/v2/safety-number-outline-24.svg)
            no-repeat center;

          @include light-theme {
            background-color: $color-gray-75;
          }

          @include dark-theme {
            background-color: $color-gray-15;
          }
        }
      }
    }
  }

  &-media-list {
    &__root {
      display: flex;
      justify-content: center;
      padding: 0 20px;
      padding-bottom: 24px;

      .module-media-grid-item {
        border-radius: 4px;
        height: auto;
        margin: 0 4px;
        max-height: 94px;
        overflow: hidden;
        width: calc(100% / 6);

        .module-media-grid-item__icon {
          &::before {
            content: '';
            display: block;
            padding-top: 100%;
          }
        }

        .module-media-grid-item__image-container,
        img {
          margin: 0;
        }
      }
    }

    &__show-all {
      background: none;
      border: none;
      padding: 0;

      @include light-theme {
        color: $color-gray-95;
      }
      @include dark-theme {
        color: $color-gray-05;
      }
    }
  }

  &-panel-row {
    $row-root-selector: '#{&}__root';
    &__root {
      align-items: center;
      border-radius: 5px;
      border: 2px solid transparent;
      display: flex;
      padding: 8px 24px;
      user-select: none;
      width: 100%;

      &--button {
        color: inherit;
        background: none;

        &:hover:not(:disabled) {
          @include light-theme {
            background-color: $color-gray-02;
          }

          @include dark-theme {
            background-color: $color-gray-90;
          }

          & .ConversationDetails-panel-row__actions {
            opacity: 1;
          }
        }
      }

      &:focus {
        outline: none;
      }

      @mixin keyboard-focus-state($color) {
        &:focus {
          border-color: $color;
        }
      }

      @include keyboard-mode {
        @include keyboard-focus-state($color-ultramarine);
      }
      @include dark-keyboard-mode {
        @include keyboard-focus-state($color-ultramarine-light);
      }
    }

    &__icon {
      margin-right: 12px;
      flex-shrink: 0;
    }

    &__label {
      flex-grow: 1;
      text-align: left;
      margin-right: 12px;
    }

    &__info {
      @include font-body-2;
      margin-top: 4px;

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

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

    &__right {
      position: relative;
      color: $color-gray-45;
      min-width: 143px;
    }

    &__actions {
      margin-left: 12px;
      overflow: hidden;
      opacity: 0;

      #{$row-root-selector}:hover &,
      #{$row-root-selector}:focus-within & {
        opacity: 1;
      }
    }
  }

  &-panel-section {
    &__root {
      position: relative;

      &:not(:first-child)::before {
        border-top: 1px solid transparent;

        @include light-theme {
          border-top-color: $color-gray-15;
        }

        @include dark-theme {
          border-top-color: $color-gray-65;
        }

        content: '';
        display: block;
        margin: 8px 0;
      }

      &--borderless {
        &:not(:first-child)::before {
          border-top: none;
        }
      }
    }

    &__header {
      display: flex;
      justify-content: space-between;
      padding: 18px 24px 12px;

      &--center {
        justify-content: center;
      }
    }

    &__title {
      @include font-body-1-bold;
    }
  }

  &__header-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;

    .module-Button {
      margin: 0 8px;
    }
  }

  &__radio {
    &__container {
      padding: 12px 0;
    }
  }
}