Mailspring/internal_packages/attachments/stylesheets/attachments.less

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

.file-wrap {
  cursor: default;
  display: inline-block;
  position: relative;
  font-size: @font-size-small;
  margin: 0 0 @spacing-standard @spacing-standard;
  width: calc(~"50% - 23px");
  min-width: 320px;
  -webkit-user-drag: element;

  .inner {
    border-radius: 2px;
    color: @text-color;
    background: @background-off-primary;
    height: 37px;
  }

  .file-info-wrap {
    display: flex;
    align-items: center;
    padding-left: @spacing-half + 1;
    width: 100%;
    height: 100%;
    border: solid 1px rgba(0, 0, 0, 0.09);
    border-right: none;

    .file-icon {
      margin-right: 10px;
      flex-shrink:0;
    }
    .file-name {
      font-weight: @font-weight-medium;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 235px;
    }
    .file-size {
      @file-size-color: #b8b8b8;

      margin-left: auto;
      margin-right: @spacing-three-quarters;
      color: @file-size-color;
    }
  }

  .file-action-icon {
    @file-icon-color: #c7c7c7;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    padding-top: 1px;
    height: 100%;
    width: 37px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);

    img {
      background-color: @file-icon-color;
    }

    &:hover img {
      background-color: darken(@file-icon-color, 20%);
    }
    &:active {
      background-color: darken(@btn-default-bg-color, 5%);
    }
  }

  &.file-upload {
    .file-name {
      color: @text-color-very-subtle;
      .uploading {
        color: @text-color;
      }
    }
  }

  .progress-bar-wrap {
    display: none;

    &.state-downloading, &.state-started, &.state-progress {
      display: block;
    }

    &.state-completed, &.state-success {
      display: block;
      .progress-foreground { background: @background-color-success; }
    }

    &.state-aborted, &.state-failed {
      display: block;
      .progress-foreground { background: @background-color-error; }
    }

    .progress-foreground {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 0; // Changed by React
      z-index: 3;
      display: block;
      background: @blue-light;
      border-bottom-left-radius:4px;
      transition: width .3s linear;

    }
    .progress-background {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 100%;
      z-index: 2;
      display: block;
      background: @background-color-pending;
      border-bottom-left-radius:4px;
      border-bottom-right-radius:4px;
    }
  }

}

.file-wrap.file-image-wrap {
  position: relative;
  text-align: center;
  display:inline-block;
  vertical-align: top;
  margin-bottom: @spacing-standard;
  margin-right: @spacing-standard;
  margin-left: @spacing-standard;
  width: initial;
  max-width: calc(~"100% - 30px");

  .progress-foreground,
  .progress-foreground {
    bottom: -2px;
  }
  .progress-background {
    bottom: -2px;
  }

  .file-action-icon, .file-name-container, .file-name {
    display: none;
  }
  .file-action-icon:active {
    background: none;
    -webkit-filter: brightness(95%);
  }

  &:hover {
    .file-action-icon, .file-name-container, .file-name {
      display: block;
    }
  }

  .file-action-icon {
    position: absolute;
    z-index: 2;
    right: -8px;
    top: -8px;
    width: 26px;
    border-radius: 0 0 0 3px;
    box-shadow: none;
    img {
      background: none;
    }
  }

  .file-preview {
    position: relative;
    z-index: 1;
    overflow: hidden;

    .file-name-container {
      cursor: default;
      position: absolute;
      bottom: 0;
      top: 0;
      z-index: 2;
      width: 100%;
      height:100%;
      min-height:300px;
      background: linear-gradient(to top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 23%);
      vertical-align:bottom;

      // Important! file-name-container is on top of the image and prevents you from dragging it.
      pointer-events: none;

      .file-name {
        color: @white;
        left: @spacing-standard;
        right: @spacing-standard;
        bottom: @spacing-standard;
        text-align:left;
        position: absolute;
        z-index: 3;
      }
    }

    img {
      position: relative;
      z-index: 1;
      max-width: 100%;
      background: url(../static/images/attachments/transparency-background.png) top left repeat;
      background-size: 8px;
    }
  }

}

body.platform-win32 {
  .file-wrap {
    .inner {
      border-radius: 0;
    }
  }
}