text-content.css

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

Text Content.

File

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

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Text Content.
  10. */
  11. .text-content,
  12. .cke_editable {
  13. color: #313637;
  14. font-family: Lora, georgia, serif;
  15. line-height: 1.6875rem;
  16. /*
  17. @todo
  18. text-decoration-thickness is supported by FF & Safari
  19. text-underline-offset is supported by Safari
  20. text-decoration-color supported by Chrome, FF, & Safari
  21. */
  22. }
  23. .text-content a:not(.button),
  24. .cke_editable a:not(.button) {
  25. word-wrap: break-word;
  26. color: #0d77b5;
  27. text-decoration-color: #0d77b5;
  28. text-decoration-thickness: 2px;
  29. }
  30. @supports (box-shadow: none) {
  31. .text-content a:not(.button),
  32. .cke_editable a:not(.button) {
  33. transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
  34. text-decoration: none;
  35. box-shadow: inset 0 -2px 0 0 #2494db;
  36. }
  37. .text-content a:not(.button):hover,
  38. .cke_editable a:not(.button):hover {
  39. text-decoration: underline;
  40. color: #000;
  41. /* @todo - #d9ecfa isn't currently a variable. */
  42. box-shadow: inset 0 -2em 0 0 #d9ecfa;
  43. text-decoration-color: #d9ecfa;
  44. }
  45. }
  46. .text-content p,
  47. .cke_editable p {
  48. margin-top: 1.125rem;
  49. margin-bottom: 1.125rem;
  50. }
  51. .text-content p:first-child,
  52. .cke_editable p:first-child {
  53. margin-top: 0;
  54. }
  55. .text-content p:last-child,
  56. .cke_editable p:last-child {
  57. margin-bottom: 0;
  58. }
  59. @media (min-width: 43.75rem) {
  60. .text-content p,
  61. .cke_editable p {
  62. margin-top: 2.25rem;
  63. margin-bottom: 2.25rem;
  64. }
  65. }
  66. .text-content code,
  67. .cke_editable code {
  68. background-color: #f7f9fa;
  69. }
  70. [dir="ltr"] .text-content pre code,
  71. [dir="ltr"] .cke_editable pre code {
  72. padding-left: 1.125rem;
  73. }
  74. [dir="rtl"] .text-content pre code,
  75. [dir="rtl"] .cke_editable pre code {
  76. padding-right: 1.125rem;
  77. }
  78. [dir="ltr"] .text-content pre code,
  79. [dir="ltr"] .cke_editable pre code {
  80. padding-right: 1.125rem;
  81. }
  82. [dir="rtl"] .text-content pre code,
  83. [dir="rtl"] .cke_editable pre code {
  84. padding-left: 1.125rem;
  85. }
  86. .text-content pre code,
  87. .cke_editable pre code {
  88. display: block;
  89. overflow: auto;
  90. padding-top: 1.125rem;
  91. padding-bottom: 1.125rem;
  92. color: #6e7172;
  93. }
  94. [dir="ltr"] .text-content blockquote,
  95. [dir="ltr"] .cke_editable blockquote {
  96. margin-left: 0;
  97. }
  98. [dir="rtl"] .text-content blockquote,
  99. [dir="rtl"] .cke_editable blockquote {
  100. margin-right: 0;
  101. }
  102. [dir="ltr"] .text-content blockquote,
  103. [dir="ltr"] .cke_editable blockquote {
  104. margin-right: 0;
  105. }
  106. [dir="rtl"] .text-content blockquote,
  107. [dir="rtl"] .cke_editable blockquote {
  108. margin-left: 0;
  109. }
  110. [dir="ltr"] .text-content blockquote,
  111. [dir="ltr"] .cke_editable blockquote {
  112. padding-left: 2.25rem;
  113. }
  114. [dir="rtl"] .text-content blockquote,
  115. [dir="rtl"] .cke_editable blockquote {
  116. padding-right: 2.25rem;
  117. }
  118. .text-content blockquote,
  119. .cke_editable blockquote {
  120. position: relative;
  121. margin-top: 2.25rem;
  122. margin-bottom: 2.25rem;
  123. letter-spacing: -0.01em;
  124. font-family: Lora, georgia, serif;
  125. font-size: 1.3125rem;
  126. line-height: 2.25rem;
  127. }
  128. [dir="ltr"] .text-content blockquote:before,
  129. [dir="ltr"] .cke_editable blockquote:before {
  130. left: 0;
  131. }
  132. [dir="rtl"] .text-content blockquote:before,
  133. [dir="rtl"] .cke_editable blockquote:before {
  134. right: 0;
  135. }
  136. .text-content blockquote:before,
  137. .cke_editable blockquote:before {
  138. position: absolute;
  139. top: 0;
  140. content: "\201C";
  141. color: #53b0eb;
  142. font-size: 3.375rem;
  143. }
  144. [dir="ltr"] .text-content blockquote:after,
  145. [dir="ltr"] .cke_editable blockquote:after {
  146. left: 0;
  147. }
  148. [dir="rtl"] .text-content blockquote:after,
  149. [dir="rtl"] .cke_editable blockquote:after {
  150. right: 0;
  151. }
  152. [dir="ltr"] .text-content blockquote:after,
  153. [dir="ltr"] .cke_editable blockquote:after {
  154. margin-left: 0.25rem;
  155. }
  156. [dir="rtl"] .text-content blockquote:after,
  157. [dir="rtl"] .cke_editable blockquote:after {
  158. margin-right: 0.25rem;
  159. }
  160. .text-content blockquote:after,
  161. .cke_editable blockquote:after {
  162. position: absolute;
  163. bottom: 0;
  164. width: 0.5625rem;
  165. height: calc(100% - 1.875rem);
  166. content: "";
  167. background: #f7f9fa;
  168. }
  169. @media (min-width: 43.75rem) {
  170. .text-content blockquote,
  171. .cke_editable blockquote {
  172. font-size: 2rem;
  173. line-height: 3.375rem;
  174. }
  175. }
  176. @media (min-width: 62.5rem) {
  177. .text-content blockquote,
  178. .cke_editable blockquote {
  179. font-size: 2.5rem;
  180. line-height: 3.9375rem;
  181. }
  182. }
  183. @media (min-width: 43.75rem) {
  184. .text-content,
  185. .cke_editable {
  186. font-size: 1.125rem;
  187. line-height: 2.25rem;
  188. }
  189. }
  190. /**
  191. * Special colors for footer that has a dark background.
  192. */
  193. .site-footer .text-content {
  194. color: inherit;
  195. }
  196. .site-footer .text-content * {
  197. color: inherit;
  198. }
  199. .site-footer .text-content a {
  200. text-decoration: underline;
  201. color: #fff;
  202. box-shadow: none;
  203. }
  204. .site-footer .text-content a:hover {
  205. text-decoration: none;
  206. color: #fff;
  207. box-shadow: none;
  208. }
  209. /**
  210. * Decrease font-size for blockquote placed in sidebar region.
  211. */
  212. @media (min-width: 62.5rem) {
  213. .region--sidebar .text-content blockquote {
  214. font-size: 1.5rem;
  215. line-height: 2.25rem;
  216. }
  217. }

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