message-progress.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. [data-component="message-progress"] {
  2. display: flex;
  3. flex-direction: column;
  4. gap: 12px;
  5. }
  6. [data-component="message-progress"] [data-slot="message-progress-status"] {
  7. display: flex;
  8. align-items: center;
  9. column-gap: 20px;
  10. padding-left: 12px;
  11. border: 1px solid transparent;
  12. color: var(--text-base);
  13. }
  14. [data-component="message-progress"] [data-slot="message-progress-status-text"] {
  15. font-size: 12px;
  16. font-weight: 500;
  17. line-height: 1.5;
  18. }
  19. [data-component="message-progress"] [data-slot="message-progress-list-container"] {
  20. height: 120px;
  21. overflow: hidden;
  22. pointer-events: none;
  23. padding-bottom: 4px;
  24. mask-image: linear-gradient(to bottom, transparent 0%, black 33%, black 95%, transparent 100%);
  25. -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 33%, black 95%, transparent 100%);
  26. }
  27. [data-component="message-progress"] [data-slot="message-progress-list"] {
  28. width: 100%;
  29. display: flex;
  30. flex-direction: column;
  31. align-items: flex-start;
  32. align-self: stretch;
  33. gap: 8px;
  34. padding-top: 32px;
  35. padding-bottom: 32px;
  36. transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  37. }
  38. [data-component="message-progress"] [data-slot="message-progress-item"] {
  39. height: 32px;
  40. display: flex;
  41. align-items: center;
  42. width: 100%;
  43. }