VEmptyState.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. .v-empty-state {
  2. align-items: center;
  3. display: flex;
  4. flex-direction: column;
  5. justify-content: center;
  6. min-height: 100%;
  7. padding: 16px;
  8. }
  9. .v-empty-state--start {
  10. align-items: flex-start;
  11. }
  12. .v-empty-state--center {
  13. align-items: center;
  14. }
  15. .v-empty-state--end {
  16. align-items: flex-end;
  17. }
  18. .v-empty-state__media {
  19. text-align: center;
  20. width: 100%;
  21. }
  22. .v-empty-state__media .v-icon {
  23. color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
  24. }
  25. .v-empty-state__headline {
  26. color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
  27. font-size: 3.75rem;
  28. font-weight: 300;
  29. line-height: 1;
  30. text-align: center;
  31. margin-bottom: 8px;
  32. }
  33. .v-empty-state--mobile .v-empty-state__headline {
  34. font-size: 2.125rem;
  35. }
  36. .v-empty-state__title {
  37. font-size: 1.25rem;
  38. font-weight: 500;
  39. line-height: 1.6;
  40. margin-bottom: 4px;
  41. text-align: center;
  42. }
  43. .v-empty-state__text {
  44. font-size: 0.875rem;
  45. font-weight: 400;
  46. line-height: 1.425;
  47. padding: 0 16px;
  48. text-align: center;
  49. }
  50. .v-empty-state__content {
  51. padding: 24px 0;
  52. }
  53. .v-empty-state__actions {
  54. display: flex;
  55. gap: 8px;
  56. padding: 16px;
  57. }
  58. .v-empty-state__action-btn.v-btn {
  59. background-color: initial;
  60. color: initial;
  61. }