You are here

Home » API reference » Drupal 9

text-content.css in Drupal 9

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. /**

  9.  * @file

  10.  * Text Content.

  11.  */

  12. 

  13. .text-content,

  14. .cke_editable {

  15.   color: #313637;

  16.   font-family: "Lora", "georgia", serif;

  17.   line-height: 1.6875rem

  18. 

  19.   /*

  20.     @todo

  21. 

  22.     text-decoration-thickness is supported by FF & Safari

  23.     text-underline-offset is supported by Safari

  24. 

  25.     text-decoration-color supported by Chrome, FF, & Safari

  26.   */

  27. }

  28. 

  29. .text-content a, .cke_editable a {

  30.     color: #0d77b5;

  31.     -webkit-text-decoration-color: #0d77b5;

  32.     text-decoration-color: #0d77b5;

  33.     text-decoration-thickness: 2px;

  34.     word-wrap: break-word

  35.   }

  36. 

  37. @supports (box-shadow: none) {

  38. 

  39. .text-content a, .cke_editable a {

  40.       transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);

  41.       text-decoration: none;

  42.       box-shadow: inset 0 -2px 0 0 #2494db

  43.   }

  44. 

  45.       .text-content a:hover, .cke_editable a:hover {

  46.         text-decoration: underline;

  47.         color: #000;

  48. 

  49.         /* @todo - #d9ecfa isn't currently a variable. */

  50.         box-shadow: inset 0 -2em 0 0 #d9ecfa;

  51.         -webkit-text-decoration-color: #d9ecfa;

  52.         text-decoration-color: #d9ecfa;

  53.       }

  54.     }

  55. 

  56. .text-content p, .cke_editable p {

  57.     margin-top: 1.125rem;

  58.     margin-bottom: 1.125rem

  59.   }

  60. 

  61. .text-content p:first-child, .cke_editable p:first-child {

  62.       margin-top: 0;

  63.     }

  64. 

  65. .text-content p:last-child, .cke_editable p:last-child {

  66.       margin-bottom: 0;

  67.     }

  68. 

  69. @media (min-width: 43.75rem) {

  70. 

  71. .text-content p, .cke_editable p {

  72.       margin-top: 2.25rem;

  73.       margin-bottom: 2.25rem

  74.   }

  75.     }

  76. 

  77. .text-content code, .cke_editable code {

  78.     background-color: #f7f9fa;

  79.   }

  80. 

  81. [dir="ltr"] .text-content pre code,[dir="ltr"]  .cke_editable pre code {

  82.     padding-left: 1.125rem

  83. }

  84. 

  85. [dir="rtl"] .text-content pre code,[dir="rtl"]  .cke_editable pre code {

  86.     padding-right: 1.125rem

  87. }

  88. 

  89. [dir="ltr"] .text-content pre code,[dir="ltr"]  .cke_editable pre code {

  90.     padding-right: 1.125rem

  91. }

  92. 

  93. [dir="rtl"] .text-content pre code,[dir="rtl"]  .cke_editable pre code {

  94.     padding-left: 1.125rem

  95. }

  96. 

  97. .text-content pre code, .cke_editable pre code {

  98.     display: block;

  99.     overflow: auto;

  100.     padding-top: 1.125rem;

  101.     padding-bottom: 1.125rem;

  102.     color: #6e7172;

  103.   }

  104. 

  105. [dir="ltr"] .text-content blockquote,[dir="ltr"]  .cke_editable blockquote {

  106.     margin-left: 0

  107. }

  108. 

  109. [dir="rtl"] .text-content blockquote,[dir="rtl"]  .cke_editable blockquote {

  110.     margin-right: 0

  111. }

  112. 

  113. [dir="ltr"] .text-content blockquote,[dir="ltr"]  .cke_editable blockquote {

  114.     margin-right: 0

  115. }

  116. 

  117. [dir="rtl"] .text-content blockquote,[dir="rtl"]  .cke_editable blockquote {

  118.     margin-left: 0

  119. }

  120. 

  121. [dir="ltr"] .text-content blockquote,[dir="ltr"]  .cke_editable blockquote {

  122.     padding-left: 2.25rem

  123. }

  124. 

  125. [dir="rtl"] .text-content blockquote,[dir="rtl"]  .cke_editable blockquote {

  126.     padding-right: 2.25rem

  127. }

  128. 

  129. .text-content blockquote, .cke_editable blockquote {

  130.     position: relative;

  131.     margin-top: 2.25rem;

  132.     margin-bottom: 2.25rem;

  133.     letter-spacing: -0.01em;

  134.     font-family: "Lora", "georgia", serif;

  135.     font-size: 1.3125rem;

  136.     line-height: 2.25rem

  137.   }

  138. 

  139. [dir="ltr"] .text-content blockquote:before,[dir="ltr"]  .cke_editable blockquote:before {

  140.       left: 0

  141. }

  142. 

  143. [dir="rtl"] .text-content blockquote:before,[dir="rtl"]  .cke_editable blockquote:before {

  144.       right: 0

  145. }

  146. 

  147. .text-content blockquote:before, .cke_editable blockquote:before {

  148.       position: absolute;

  149.       top: 0;

  150.       content: "“";

  151.       color: #53b0eb;

  152.       font-size: 3.375rem;

  153.     }

  154. 

  155. [dir="ltr"] .text-content blockquote:after,[dir="ltr"]  .cke_editable blockquote:after {

  156.       left: 0

  157. }

  158. 

  159. [dir="rtl"] .text-content blockquote:after,[dir="rtl"]  .cke_editable blockquote:after {

  160.       right: 0

  161. }

  162. 

  163. [dir="ltr"] .text-content blockquote:after,[dir="ltr"]  .cke_editable blockquote:after {

  164.       margin-left: 0.25rem

  165. }

  166. 

  167. [dir="rtl"] .text-content blockquote:after,[dir="rtl"]  .cke_editable blockquote:after {

  168.       margin-right: 0.25rem

  169. }

  170. 

  171. .text-content blockquote:after, .cke_editable blockquote:after {

  172.       position: absolute;

  173.       bottom: 0;

  174.       width: 0.5625rem;

  175.       height: calc(100% - 1.875rem);

  176.       content: "";

  177.       background: #f7f9fa;

  178.     }

  179. 

  180. @media (min-width: 43.75rem) {

  181. 

  182. .text-content blockquote, .cke_editable blockquote {

  183.       font-size: 2rem;

  184.       line-height: 3.375rem

  185.   }

  186.     }

  187. 

  188. @media (min-width: 62.5rem) {

  189. 

  190. .text-content blockquote, .cke_editable blockquote {

  191.       font-size: 2.5rem;

  192.       line-height: 3.9375rem

  193.   }

  194.     }

  195. 

  196. @media (min-width: 43.75rem) {

  197. 

  198. .text-content,

  199. .cke_editable {

  200.     font-size: 1.125rem;

  201.     line-height: 2.25rem

  202. }

  203.   }

  204. 

  205. /**

  206.  * Special colors for footer that has a dark background.

  207.  */

  208. 

  209. .site-footer .text-content {

  210.   color: inherit

  211. }

  212. 

  213. .site-footer .text-content * {

  214.     color: inherit;

  215.   }

  216. 

  217. .site-footer .text-content a {

  218.     text-decoration: underline;

  219.     color: #fff;

  220.     box-shadow: none

  221.   }

  222. 

  223. .site-footer .text-content a:hover {

  224.       text-decoration: none;

  225.       color: #fff;

  226.       box-shadow: none;

  227.     }

  228. 

  229. /**

  230.  * Decrease font-size for blockquote placed in sidebar region.

  231.  */

  232. 

  233. @media (min-width: 62.5rem) {

  234. 

  235. .region--sidebar .text-content blockquote {

  236.     font-size: 1.5rem;

  237.     line-height: 2.25rem

  238. }

  239.   }