DropOverlay.module.css 933 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. /* Drag events must keep reaching the page so the owner's enter/leave count
  2. stays balanced. */
  3. .mask {
  4. position: fixed;
  5. inset: 0;
  6. z-index: 1000;
  7. display: flex;
  8. align-items: center;
  9. justify-content: center;
  10. pointer-events: none;
  11. background-color: var(--dsw-alias-bg-mask-drop);
  12. backdrop-filter: blur(10px);
  13. animation: fade-in 160ms ease-out;
  14. }
  15. @keyframes fade-in {
  16. from { opacity: 0; }
  17. to { opacity: 1; }
  18. }
  19. @media (prefers-reduced-motion: reduce) {
  20. .mask {
  21. animation: none;
  22. }
  23. }
  24. .wrap {
  25. display: flex;
  26. flex-direction: column;
  27. align-items: center;
  28. margin-top: -3%;
  29. padding: 0 40px;
  30. color: var(--dsw-alias-label-primary);
  31. text-align: center;
  32. }
  33. .illustration {
  34. width: 115px;
  35. height: 84px;
  36. }
  37. .title {
  38. margin-top: 16px;
  39. font: var(--dsw-font-l-20);
  40. }
  41. .desc {
  42. margin-top: 16px;
  43. font: var(--dsw-font-s-14);
  44. color: var(--dsw-alias-label-tertiary);
  45. white-space: pre-wrap;
  46. }