// Keep these in sync with photoSlideshow.tsx:
$PHOTO_INTERVAL: 60s;
$FADE_IN_DURATION: 5s;

.root
{
   .photo
   {
      position: absolute;
      width: 100vw;
      height: 100vh;
      cursor: none;
      opacity: 0;
      transition: opacity $FADE_IN_DURATION linear, transform ($PHOTO_INTERVAL + $FADE_IN_DURATION) linear;

      &.visible
      {
         opacity: 1;
         transform: scale(1.3);
      }

      img
      {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
   }

   label
   {
      display: block;
      position: absolute;
      white-space: nowrap;
      color: rgba(255, 255, 255, 0.4);
      font-size: 16px;
      line-height: 16px;
      opacity: 0;
      transition: opacity $FADE_IN_DURATION linear;

      &.visible
      {
         opacity: 1;
      }

      $margin: 10px;

      &.pos0 { left:  $margin; top:    $margin; }
      &.pos1 { right: $margin; top:    $margin; }
      &.pos2 { right: $margin; bottom: $margin; }
      &.pos3 { left:  $margin; bottom: $margin; }
   }
}

// Keep these in sync with photoSlideshow.tsx:
$PHOTO_INTERVAL: 60s;
$FADE_IN_DURATION: 5s;

.root
{
   .photo
   {
      position: absolute;
      width: 100vw;
      height: 100vh;
      cursor: none;
      opacity: 0;
      transition: opacity $FADE_IN_DURATION linear, transform ($PHOTO_INTERVAL + $FADE_IN_DURATION) linear;

      &.visible
      {
         opacity: 1;
         transform: scale(1.3);
      }

      img
      {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
   }

   label
   {
      display: block;
      position: absolute;
      white-space: nowrap;
      color: #fff9;
      background-color: #0003;
      backdrop-filter: blur(5px);
      padding: 4px 9px;
      border-radius: 5px;
      font-size: 16px;
      line-height: 16px;
      opacity: 0;
      transition: opacity $FADE_IN_DURATION linear;

      &.visible
      {
         opacity: 1;
      }

      $margin: 10px;

      &.pos0 { left:  $margin; top:    $margin; }
      &.pos1 { right: $margin; top:    $margin; }
      &.pos2 { right: $margin; bottom: $margin; }
      &.pos3 { left:  $margin; bottom: $margin; }
   }
}

Make photoSlideshow labels more legible
Make photoSlideshow labels more legible
