Mailspring/internal_packages/message-list/stylesheets/message-list.less

@import "ui-variables";
@import "ui-mixins";

@message-max-width: 800px;

// This class wraps the items that appear above the message list in the
// toolbar. We want the toolbar items to sit right above the centered
// content, so we need another 800px-wide container in the toolbar...
.message-toolbar-items {
  order: -100;
  width: 100%;
  text-align: center;
  position: absolute;
  pointer-events: none;
  transition: opacity .25s ease-in-out;

  .message-toolbar-items-inner {
    margin: auto;
    max-width: @message-max-width - @spacing-three-quarters*2;
    text-align: left;
    pointer-events: auto;
  }
}

// .message-toolbar-items also fades in and out when you select / deselect
.message-toolbar-items.hidden {
  opacity: 0;
}

#message-list {
  position: relative;

  width: 100%;
  height: 100%;
  padding: 0;

  order: 2;

  .title-and-messages {
    height: 100%;
    overflow: auto;
  }

  .messages-wrap {
    position: relative;

    height: 100%;
    width: 100%;
  }

  .message-list-headers {
    margin: 0 auto;
    padding: @spacing-double;
    padding-bottom: @spacing-standard;
    width: 100%;
    max-width: @message-max-width;

    .participants {
      .contact-chip {
        display:inline-block;
      }
    }
  }

  .message-item-wrap {
    position: relative;
    width: 100%;

    margin: 0 auto;
    padding: @spacing-double 0;
    &:first-child { padding-top: 0; }

    border-bottom: 1px solid @border-primary-bg;
    &:last-child { border-bottom: 0; }
  }

  .message-item-area {
    width: 100%;
    max-width: @message-max-width;
    margin: 0 auto;
    padding: @spacing-standard @spacing-double;

    &.collapsed {
      padding: 0 @spacing-double;
    }

    .message-header {
      font-size: @font-size-small;
      .message-actions {
        float:right;
        padding-right:15px;
        .btn-icon {
          font-size:16px;
          color:rgba(35, 31, 32, 0.1);
          &:hover {
            color:rgba(35, 31, 32, 0.5);
          }
        }
      }
    }

    .message-time, .message-indicator {
      color: @text-color-very-subtle;
      margin-top: 3px;
      float: right;
    }

    .message-indicator {
      margin-right: 4px;
    }

    .to-label {
      font-weight: 600;
    }

    .to-label, .to-everyone, .cc-label, .cc-contact, .to-label, .to-contact {
      position: relative;
      top: -1px;
    }

    .from-label {
      display: none;
    }
    .from-contact {
      font-weight: @headings-font-weight;
      color: @text-color;
    }

    .to-label, .cc-label {
      color: @text-color-very-subtle;
    }
    .cc-label {
      margin-left: @spacing-standard;
    }
    .to-contact, .cc-contact, .to-everyone {
      color: @text-color-very-subtle;
    }

    iframe {
      width: 100%;
      border: 0;
      padding: 0;
      margin-top: @spacing-sub-double;
      overflow: auto;
    }
  }
}
.attachments-area {
  padding: 5px 15px 0px 15px;
}