Mailspring/internal_packages/ui-darkside/styles/darkside-composer.less

@import "darkside-variables";

.tokenizing-field .token.invalid,
.tokenizing-field .token.invalid:hover,
.tokenizing-field .token.invalid.selected,
.tokenizing-field .token.invalid.dragging {
  color: @sidebar;
  background: none;
  border: none;
  box-shadow: inset 0 0 0 1px @invalid;
}

// Darken composer action bar to contrast from background
.composer-inner-wrap .composer-action-bar-wrap,
.composer-full-window .composer-inner-wrap .composer-action-bar-wrap {
  background: darken(@messagelist-bg, 1%);
  box-shadow: none;
  border-radius: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

// Replacing focused state with theme accent
#message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap {
  background: white;
  &.focused {
    box-shadow: 0 0 0 1px @accent;
  }
}

.message-item-white-wrap.composer-outer-wrap .composer-participant-field .dropdown-component .signature-button-dropdown .only-item {
  background: white;
}

// make action bar at bottom of composer a bit darker than background
#message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap {
  & .composer-action-bar-wrap { background: transparent; }
  &.focused .composer-action-bar-wrap { background: darken(@messagelist-bg, 1%); }
}

.composer-inner-wrap .composer-action-bar-wrap .composer-action-bar-content {
  padding: 20px;
  max-width: 100%;
}

// ============================
//  Attachements
// ============================

.file-wrap.file-image-wrap .file-preview .file-name-container {
  background: fade(@sidebar, 20%);
  min-height: 0;
  & .file-name {
    left: 0;
    right: 0;
    bottom: 0;
    color: white;
    background: fade(@sidebar, 80%);
    padding: 5px 15px;
  }
}