cdn/app/frontend/styles/file_dropzone.scss

.file-dropzone {
  background-color: rgba(255, 255, 255, 0.95);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;

  display: flex;
  align-items: center;
  justify-content: center;

  // Animated dashed border using gradient technique
  background-image:
    linear-gradient(90deg, #0969da 50%, transparent 50%),
    linear-gradient(90deg, #0969da 50%, transparent 50%),
    linear-gradient(0deg, #0969da 50%, transparent 50%),
    linear-gradient(0deg, #0969da 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size:
    50px 8px,
    50px 8px,
    8px 50px,
    8px 50px;
  background-position:
    0 0,
    0 100%,
    0 100%,
    100% 20px;
  animation: border-dance 1s infinite linear;

  opacity: 0;

  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: ease-out;

  padding: 3rem;
  text-align: center;

  h1 {
    padding-bottom: 0;
    border: none;
    color: #0969da;
    font-size: 2.5rem;
    font-weight: 600;

    transition-property: transform;
    transition-duration: 300ms;
    transition-timing-function: ease-out;

    transform: scale(1.08);
  }
}

.file-dropzone.visible {
  opacity: 1;

  h1 {
    transform: none;
  }
}

@keyframes border-dance {
  0% {
    background-position:
      0 0,
      0 100%,
      0 100%,
      100% 20px;
  }
  100% {
    background-position:
      -50px 0,
      50px 100%,
      0 calc(100% + 50px),
      100% -30px;
  }
}

// Dark mode support
@media (prefers-color-scheme: dark) {
  .file-dropzone {
    background-color: rgba(13, 17, 23, 0.95);

    h1 {
      color: #58a6ff;
    }

    background-image:
      linear-gradient(90deg, #58a6ff 50%, transparent 50%),
      linear-gradient(90deg, #58a6ff 50%, transparent 50%),
      linear-gradient(0deg, #58a6ff 50%, transparent 50%),
      linear-gradient(0deg, #58a6ff 50%, transparent 50%);
  }
}