randomImageTimer.css

@import url('https://fonts.googleapis.com/css2?family={{timerFontFamily}}');

.main-container {
  width: 100%;
  height: 95%;
  
  /* Arranges the elements. */
  display: flex;
  flex-direction: {{timerPosition}};
}

#display {
  /* 'Absolute' elements are positioned relative to their closest positioned 
   * ancestors. */
  position: relative;
  
  /* This element takes up all the remaining space. */
  min-height: 0;
  flex: 1;
}

#display > div {
  /* For layering. */
  position: absolute;
  
  /* Each layer takes up all the space of its parent. */
  width: 100%;
  height: 100%;
}

#img-layer img {
  /* Used by object-fit property. */
  width: 100%;
  height: 100%;
  
  /* The replaced content is made to fill the box, while preserving its aspect 
   * ratio. */
  object-fit: contain;
}

#overlay * {
  position: absolute;
  
  /* Centers any children of the 'overlay' element. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 100%;
  
  /* Centers the text horizontally and line-height-wise. */
  text-align: center;
  vertical-align: middle;
  
  font-family: sans-serif;
  font-size: 15vmin;
  color: white;
  
  background-color: rgba(0, 0, 0, 0.333);
}

#timer {
  /* Doesn't grow and is therefore the limiting factor of #display. */
  flex: none;
  
  font-family: {{timerFontFamily}};
  font-size: {{timerFontSize}}px;
  color: {{timerFontColor}};
  text-align: {{timerAlignment}};
}

#img-layer, #overlay, #timer {
  /* The 'transitionend' event is used to coordinate functions. Therefore any 
   * kind of transition is mandatory for the widget to work properly. */
  opacity: 0;
  transition: opacity 1.5s;
}