content-error.module.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .root {
  2. background-color: var(--sl-color-bg-surface);
  3. padding: 0.5rem calc(0.5rem + 3px);
  4. border-radius: 0.25rem;
  5. display: flex;
  6. flex-direction: column;
  7. align-items: flex-start;
  8. gap: 1rem;
  9. align-self: flex-start;
  10. [data-section="content"] {
  11. pre {
  12. margin-bottom: 0.5rem;
  13. line-height: 1.5;
  14. font-size: 0.75rem;
  15. white-space: pre-wrap;
  16. word-break: break-word;
  17. &:last-child {
  18. margin-bottom: 0;
  19. }
  20. span {
  21. margin-right: 0.25rem;
  22. &:last-child {
  23. margin-right: 0;
  24. }
  25. }
  26. span[data-color="red"] {
  27. color: var(--sl-color-red);
  28. }
  29. span[data-color="dimmed"] {
  30. color: var(--sl-color-text-dimmed);
  31. }
  32. span[data-marker="label"] {
  33. text-transform: uppercase;
  34. letter-spacing: -0.5px;
  35. }
  36. span[data-separator] {
  37. margin-right: 0.375rem;
  38. }
  39. }
  40. }
  41. &[data-expanded="true"] {
  42. [data-section="content"] {
  43. display: block;
  44. }
  45. }
  46. &[data-expanded="false"] {
  47. [data-section="content"] {
  48. display: -webkit-box;
  49. -webkit-box-orient: vertical;
  50. -webkit-line-clamp: 7;
  51. overflow: hidden;
  52. }
  53. }
  54. button {
  55. flex: 0 0 auto;
  56. padding: 2px 0;
  57. font-size: 0.75rem;
  58. }
  59. }