signal-desktop/stylesheets/components/Inbox.scss

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

@use '../mixins';
@use '../variables';

.Inbox {
  display: flex;
  flex-direction: row;
  height: 100%;

  &__conversation-stack {
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
  }

  &__no-conversation-open {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    position: relative;
    text-align: center;
  }

  .__conversation {
    @include mixins.light-theme {
      background-color: variables.$color-white;
    }

    @include mixins.dark-theme {
      background-color: variables.$color-gray-95;
    }
  }
}

.Inbox__no-conversation-open .module-splash-screen__logo {
  margin: 0;
}

.Inbox__logo {
  flex-shrink: 0;

  display: block;
  width: 150px;
  height: 150px;
  margin-block: 24px;
  position: relative;

  @include mixins.light-theme() {
    --Inbox__logo__bg: #{variables.$color-ultramarine-logo};
  }
  @include mixins.dark-theme() {
    --Inbox__logo__bg: #{variables.$color-white};
  }

  .Inbox__logo__part {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .Inbox__logo__part--base {
    @include mixins.color-svg(
      '../images/logo-parts/base.svg',
      var(--Inbox__logo__bg)
    );
    & {
      z-index: 1;
    }
  }

  .Inbox__logo__part--segment {
    opacity: 0;
    z-index: 2;
  }

  .Inbox__logo__part--animated {
    transition:
      opacity 250ms,
      transform 250ms;
  }

  @for $i from 1 through 16 {
    .Inbox__logo__part--segment:nth-child(#{$i + 1}) {
      @include mixins.color-svg(
        '../images/logo-parts/p#{$i}.svg',
        var(--Inbox__logo__bg)
      );
      & {
        transform: rotate(#{(16 - $i) * 22.5}deg);
      }
    }
  }

  .Inbox__logo__part--segment:nth-child(n).Inbox__logo__part--visible {
    transform: rotate(0deg);
    opacity: 1;
  }
}

.Inbox__welcome {
  margin-block: 20px 6px;

  @include mixins.font-title-medium;
  line-height: 24px;
}

.Inbox__whatsnew {
  margin: 0;
}

// To center the content relative left pane
.Inbox__padding {
  flex-grow: 1;
  max-height: 28px;
}