philomena/assets/css/views/duplicate_reports.scss

// 16x16 checkerboard
@mixin img-checkerboard-background {
  img {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAGUlEQVR42mP474AKGdDhCFGALoChYWQoAACpW7+B5lv5BwAAAABJRU5ErkJggg==");
  }
}

.grid--dupe-report-list {
  grid-template-rows: auto;
  grid-template-columns: 200px [image-cell-1] 200px [image-cell-2] auto [diff] auto [status-options];
}

.grid--dupe-report-list__cell {
  padding: .5em .25em .5em .25em;
}

.dr__image-cell {
  .image-container {
    @include img-checkerboard-background;
  }
}

.dr__diff {
  white-space: nowrap;
}

.dr__status-options {
  padding: .5em;
}

.report-duplicate {
  margin-top: 1em;
}

.difference, .swipe, .onion-skin {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.onion-skin__slider {
  width: 100%;
  margin-top: 10px;
  max-width: 500px;
}

.swipe__image {
  cursor: ew-resize;
}

.difference__image, .swipe__image, .onion-skin__image {
  max-height: 900px;
}