discourse/app/assets/stylesheets/common/base/lightbox.scss

.lightbox {
  position: relative;
  display: inline-block;

  &:hover .meta {
    opacity: 0.9;
    transition: opacity 0.5s;
  }
}

.lightbox-wrapper {
  display: inline-block;
  &,
  * {
    outline: 0;
  }
}

.meta {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: $secondary;
  background: $primary;
  opacity: 0;
  transition: opacity 0.2s;

  span {
    float: left;
  }

  .filename {
    margin: 6px 6px 2px 6px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    &:before {
      // ideally, the SVG used here should be in HTML and reference the SVG sprite
      content: svg-uri(
        '<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 512 512" fill="#{$secondary}"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z"/></svg>'
      );
      margin-right: 5px;
      display: inline-block;
      vertical-align: middle;
      opacity: 0.8;
    }
  }

  .informations {
    margin: 6px;
    padding-right: 20px;
    color: $secondary-high;
    font-size: $font-0;
  }

  .expand {
    position: absolute;
    bottom: 2px;
    right: 7px;
    &:before {
      // ideally, the SVG used here should be in HTML and reference the SVG sprite
      content: svg-uri(
        '<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 512 512" fill="#{$secondary}">  <path d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"/></svg>'
      );
      opacity: 0.8;
    }
  }
}