/* Creates an "icon" of sorts that can be displayed in place of a thumbnail for a file. The intent here is to offer
 * a visual indication that a file exists (i.e. in an upload area) when an actual image is unavailable. If a file
 * with an unusual extension is uploaded, for example, this allows us to represent it without having to generate a
 * thumbnails specific to that file. The HTML should take the following form:
 *
 *  <div class="dg-html-thumb">
 *    <div class="ext">FILE_EXTENSION</div>
 *    <div class="about">
 *      <div class="size">SIZE</div>
 *      <div class="icon">ICON</div>
 *      <div class="name">NAME</div>
 *    </div>
 *  </div>
 *
 * By default, this will produce 120x120 box with a tilted extension label and centered about material, which might
 * be some combination of a file size, file icon, file name, and so on. All of this will be centered over a gradient
 * fade from the top left to the bottom right. We might then distinguish one type of file from the other by adding
 * the file extension to the top element and overriding the gradient with different colors, designs, and so on.
 *
 * A template for this thumb is available in "parts/html_thumb.html".
 */
.dg-html-thumb {
  background-image: linear-gradient(165deg, #555 30%, white 200%);
  border-radius: 10px;
  height: 120px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 120px
}

.dg-html-thumb.doc, .dg-html-thumb.docx {
  background-image: linear-gradient(165deg, #2561C1 30%, white 200%)
}

.dg-html-thumb.pdf {
  background-image: linear-gradient(165deg, #B30600 30%, white 200%)
}

.dg-html-thumb.ppt, .dg-html-thumb.pptx {
  background-image: linear-gradient(165deg, #C94926 30%, white 200%)
}

.dg-html-thumb.xls, .dg-html-thumb.xlsx {
  background-image: linear-gradient(165deg, #14864A 30%, white 200%)
}

.dg-html-thumb .about {
  color: white;
  font-size: smaller;
  font-weight: bold;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.dg-html-thumb .about > div {
  margin:5px;
}

.dg-html-thumb .ext {
  background: white;
  font-size: 12px;
  font-weight: bold;
  left: -55%;
  padding: 1px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 14px;
  transform: rotate(-45deg);
  width: 150%;
}

/* Similar to the dg-html-thum above, this creates an element in which a thumbnail can be displayed along with
 * details about the underlying file. Details will become visible on hover.
 *
 *  <div class="dg-thumb">
 *    <img src="URL">
 *    <div class="about">
 *      <div class="size">SIZE</div>
 *      <div class="name">NAME</div>
 *    </div>
 *  </div>
 *
 * A template for this thumb is available in "parts/thumb.html".
 */
.dg-thumb {
  background-image: linear-gradient(165deg, #ccc 30%, white 150%);
  border-radius: 10px;
  display: table-cell;
  height: 120px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 120px;
}

.dg-thumb .about {
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
}

.dg-thumb:hover .about {
  overflow: unset;
}

.dg-thumb .about > .fd {
  background: rgba(255,255,255,.75);
  color: inherit;
  display: inline-block;
  font-size: smaller;
  opacity: 0;
  padding: 3px 6px;
  margin: 10px 0;
  transition: opacity 0.3s linear;
}

.dg-thumb:hover .about > .fd {
  border-radius: 5px;
  opacity: 1;
  transition: opacity .15s linear;
}

/* Add <div class="my-bottom-fade">OPTIONAL TEXT</div> to a containing DIV to produce a fade effect within that
 * DIV on whatever text goes behind it. This will be most useful in a DIV whose height is limited and content
 * overflow is hidden, so that rather than having a hard end to the text, the text appears to fade as the DIV
 * comes to an end.
 */
.my-bottom-fade {
  background: white;
  bottom: 0;
  box-shadow: 0 0 30px 25px white;
  left: 0;
  position: absolute;
  width: 100%;
}

/* Use to overlay text over an image or other fixed height element.

  <div style="display: absolute/relative">
    <img src="example.jpg">
    <div class="my-text-overlay">Overlay text here</div>
  </div>
*/
.my-text-overlay {
  background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.7));
  bottom: 0;
  color: white;
  padding: 5px 10px;
  position: absolute;
  width: 100%;
}

/* Use to make a note about something

  <div class="my-note">
    <p>A note about something</p>
  </div>
*/
.my-note {
  background-color: #eee;
  border-radius: 0 5px 5px 5px;
  font-style: italic;
  margin-top: 25px;
  padding: 10px 15px;
  position: relative;
}

.my-note:before {
  background-color: inherit;
  border-radius: 5px;
  content: 'NOTE';
  font-style: normal;
  font-weight: bold;
  left: 0;
  padding: 5px 15px;
  position: absolute;
  top: -25px;
}

/* Use to insert pipes between divs

  <div class="my-pipes">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
*/
.my-pipes > * {
  display: inline-block!important;
}

.my-pipes > *:not(:first-child):before {
  content: '|';
  margin: 0 10px;
}