content-text.module.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. .root {
  2. color: var(--sl-color-text);
  3. background-color: var(--sl-color-bg-surface);
  4. padding: 0.5rem calc(0.5rem + 3px);
  5. padding-right: calc(1rem + 18px);
  6. border-radius: 0.25rem;
  7. display: flex;
  8. flex-direction: column;
  9. align-items: flex-start;
  10. gap: 1rem;
  11. align-self: flex-start;
  12. font-size: 0.875rem;
  13. &[data-compact] {
  14. font-size: 0.75rem;
  15. color: var(--sl-color-text-dimmed);
  16. }
  17. [data-slot="text"] {
  18. line-height: 1.5;
  19. white-space: pre-wrap;
  20. overflow-wrap: anywhere;
  21. display: -webkit-box;
  22. -webkit-box-orient: vertical;
  23. -webkit-line-clamp: 3;
  24. line-clamp: 3;
  25. overflow: hidden;
  26. [data-expanded] & {
  27. display: block;
  28. }
  29. }
  30. [data-slot="expand-button"] {
  31. flex: 0 0 auto;
  32. padding: 2px 0;
  33. font-size: 0.75rem;
  34. }
  35. &[data-theme="invert"] {
  36. background-color: var(--sl-color-blue-high);
  37. color: var(--sl-color-text-invert);
  38. [data-slot="expand-button"] {
  39. opacity: 0.85;
  40. color: var(--sl-color-text-invert);
  41. &:hover {
  42. opacity: 1;
  43. }
  44. }
  45. }
  46. &[data-theme="blue"] {
  47. background-color: var(--sl-color-blue-low);
  48. }
  49. }