filesafe/public/css/album.css

/*
  This is the same sheets used in dashboard.css, minus the on-hover ones.
  I should probably put this in a file named _thumbs.css, remove the ones in dashboard.css,
  and use it for both album and dashboard (which means dashboard will have to load an extra css).
  But oh well, that's something for the future me to think further about.
*/

.image-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 200px;
  margin: 9px;
  background-color: #31363b;
  overflow: hidden;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
  box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
}

.image-container .title {
  font-weight: normal;
}

.image-container .image {
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
}

.image-container .file-checkbox {
  position: absolute;
  top: .75rem;
  left: .75rem;
}

.image-container .controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: .75rem;
  right: .75rem;
}

.image-container .controls .button {
  border-radius: 0;
}

.image-container .controls .button:not(:active):not(:hover) {
  color: #fff;
  background-color: rgba(49, 54, 59, .75);
}

.image-container .details {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  right: .75rem;
  background-color: rgba(49, 54, 59, .75);
  color: #eff0f1;
  padding: .25rem;
  font-size: .75rem;
}

.image-container .details p {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
}

.image-container .details p span {
  font-weight: 800;
}