text-content.pcss.css

Same filename in other branches
  1. 10 core/themes/olivero/css/components/text-content.pcss.css
  2. 11.x core/themes/olivero/css/components/text-content.pcss.css

Text Content.

File

core/themes/olivero/css/components/text-content.pcss.css

View source
  1. /**
  2. * @file
  3. * Text Content.
  4. */
  5. @import "../base/variables.pcss.css";
  6. .text-content,
  7. .cke_editable {
  8. color: var(--color--gray-10);
  9. font-family: var(--font-serif);
  10. line-height: var(--sp1-5);
  11. /*
  12. @todo
  13. text-decoration-thickness is supported by FF & Safari
  14. text-underline-offset is supported by Safari
  15. text-decoration-color supported by Chrome, FF, & Safari
  16. */
  17. & a:not(.button) {
  18. color: var(--color--blue-20);
  19. text-decoration-color: var(--color--blue-20);
  20. text-decoration-thickness: 2px;
  21. overflow-wrap: break-word;
  22. @supports (box-shadow: none) {
  23. transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
  24. text-decoration: none;
  25. box-shadow: inset 0 -2px 0 0 var(--color--blue-50);
  26. &:hover {
  27. text-decoration: underline;
  28. color: var(--color--black);
  29. /* @todo - #d9ecfa isn't currently a variable. */
  30. box-shadow: inset 0 -2em 0 0 #d9ecfa;
  31. text-decoration-color: #d9ecfa;
  32. }
  33. }
  34. }
  35. & p {
  36. margin-block-start: var(--sp);
  37. margin-block-end: var(--sp);
  38. &:first-child {
  39. margin-block-start: 0;
  40. }
  41. &:last-child {
  42. margin-block-end: 0;
  43. }
  44. @media (--md) {
  45. margin-block-start: var(--sp2);
  46. margin-block-end: var(--sp2);
  47. }
  48. }
  49. & code {
  50. background-color: var(--color--gray-95);
  51. }
  52. & pre code {
  53. display: block;
  54. overflow: auto;
  55. padding-block: var(--sp);
  56. padding-inline-start: var(--sp);
  57. padding-inline-end: var(--sp);
  58. color: var(--color--gray-20);
  59. }
  60. & blockquote {
  61. position: relative;
  62. margin-block: var(--sp2);
  63. margin-inline-start: 0;
  64. margin-inline-end: 0;
  65. padding-inline-start: var(--sp2);
  66. letter-spacing: -0.01em;
  67. font-family: var(--font-serif);
  68. font-size: 21px;
  69. line-height: var(--sp2);
  70. &:before {
  71. position: absolute;
  72. inset-block-start: 0;
  73. inset-inline-start: 0;
  74. content: "\201C";
  75. color: var(--color--blue-70);
  76. font-size: 54px;
  77. }
  78. &:after {
  79. position: absolute;
  80. inset-block-end: 0;
  81. inset-inline-start: 0;
  82. width: var(--sp0-5);
  83. height: calc(100% - 30px);
  84. margin-inline-start: 4px;
  85. content: "";
  86. background: var(--color--gray-95);
  87. }
  88. @media (--grid-md) {
  89. font-size: 32px;
  90. line-height: var(--sp3);
  91. }
  92. @media (--lg) {
  93. font-size: 40px;
  94. line-height: calc(3.5 * var(--sp));
  95. }
  96. }
  97. @media (--grid-md) {
  98. font-size: 18px;
  99. line-height: var(--sp2);
  100. }
  101. }
  102. /**
  103. * Special colors for footer that has a dark background.
  104. */
  105. .site-footer .text-content {
  106. color: inherit;
  107. & * {
  108. color: inherit;
  109. }
  110. & a {
  111. text-decoration: underline;
  112. color: var(--color--white);
  113. box-shadow: none;
  114. &:hover {
  115. text-decoration: none;
  116. color: var(--color--white);
  117. box-shadow: none;
  118. }
  119. }
  120. }
  121. /**
  122. * Decrease font-size for blockquote placed in sidebar region.
  123. */
  124. .region--sidebar .text-content blockquote {
  125. @media (--lg) {
  126. font-size: 24px;
  127. line-height: var(--sp2);
  128. }
  129. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.