piskel/css/preview-film-section.css

.preview-list-wrapper {
  overflow-y: scroll;
  position: absolute;
  top: 30px;
  right:0;
  bottom: 0;
  left: 0;
}

.preview-list {
  list-style-type: none;
  padding-left: 7px;
  padding-right: 7px;
}

.preview-tile {
  padding : 10px;
  overflow: hidden;
  background-color: gray;
  border-radius: 2px;

  -webkit-box-shadow:  0 0 7px 0 rgba(0, 0, 0, 1);
  box-shadow:  0 0 7px 0 rgba(0, 0, 0, 1);
}

.preview-tile:hover {
  -webkit-box-shadow:  0 0 10px 0 rgba(0, 0, 0, 1);
  box-shadow:  0 0 10px 0 rgba(0, 0, 0, 1);
}

.preview-tile .canvas-container {
  float: left;
}

.preview-tile .tile-view {
  float: left;
  border: #ccc 1px solid;
}

.preview-tile .tile-action {
  display: block;
  cursor: pointer;
  width: 30px;
  height: 30px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 7px 7px;
  border: none;
}

.preview-tile .tile-action-container {
  float: right;
  visibility : hidden;
  overflow: hidden;
}

.preview-tile:hover .tile-action-container {
  visibility : visible;
}

.preview-tile .tile-action.duplicate-frame-action {
   background-image: url(../img/actions/duplicate.png);
}

.preview-tile .tile-action.delete-frame-action {
   background-image: url(../img/actions/delete.png);
}

.preview-tile:hover {
  background-color: lightgray;
}

.preview-tile.selected {
  background-color: lightyellow;
}

.preview-tile.ui-draggable-dragging {
  opacity: 0.3;
}


.preview-tile.droppable-active {
  background-color: pink;
}

.interstitial-tile.droppable-hover-active {
  background-color: purple;
}

.preview-tile.droppable-hover-active {
  background-color: yellow;
}

.interstitial-tile {
  visibility: hidden;
  background-color: blue;
  height: 10px;
}

.show-interstitial-tiles .interstitial-tile {
  visibility: visible;
}