theme.css 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. /* Text selection text color */
  2. ::selection {
  3. color: var(--wp--custom--color--background);
  4. background-color: var(--wp--custom--color--foreground);
  5. }
  6. /* Post title when featured image is present */
  7. body:not(.has-featured-image) h1.wp-block-post-title {
  8. border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
  9. padding-bottom: calc(var(--wp--custom--gap--vertical) * 3);
  10. }
  11. /* Separator width */
  12. /* This can be removed when this issue gets fixed: https://github.com/WordPress/gutenberg/issues/40624 */
  13. .wp-block-separator {
  14. opacity: 1;
  15. }
  16. .wp-block-separator.has-background:not(.is-style-dots) {
  17. height: 3px;
  18. }
  19. .wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
  20. height: 3px;
  21. }
  22. /* Links and underlines */
  23. a {
  24. text-decoration-thickness: 0.07em;
  25. text-underline-offset: 0.46ex;
  26. }
  27. .wp-block-post-content p a:not(.wp-block-post-excerpt__more-link) {
  28. -webkit-text-decoration-line: underline;
  29. text-decoration-line: underline;
  30. }
  31. .wp-block-post-content p a:not(.wp-block-post-excerpt__more-link):hover {
  32. text-decoration: none;
  33. background-color: var(--wp--custom--color--primary);
  34. color: var(--wp--custom--color--background);
  35. }
  36. .wp-block-post-comments .comment-meta > a,
  37. .wp-block-post-comments .comment-body > p > a,
  38. .wp-block-post-comments .comment-edit-link,
  39. .post-meta a {
  40. -webkit-text-decoration-line: underline;
  41. text-decoration-line: underline;
  42. }
  43. .wp-block-post-comments .comment-meta > a:hover,
  44. .wp-block-post-comments .comment-body > p > a:hover,
  45. .wp-block-post-comments .comment-edit-link:hover,
  46. .post-meta a:hover {
  47. -webkit-text-decoration-line: none;
  48. text-decoration-line: none;
  49. }
  50. h1 a,
  51. h2 a,
  52. h3 a,
  53. h4 a,
  54. h5 a,
  55. h6 a,
  56. .wp-block-site-title a,
  57. .wp-block-post-title a {
  58. text-underline-offset: 0.1ex;
  59. }
  60. .wp-block-site-title a,
  61. .wp-block-post-title a,
  62. .wp-block-query-pagination a,
  63. .wp-block-navigation a {
  64. -webkit-text-decoration-line: none;
  65. text-decoration-line: none;
  66. }
  67. .wp-block-site-title a:hover,
  68. .wp-block-post-title a:hover,
  69. .wp-block-query-pagination a:hover,
  70. .wp-block-navigation a:hover {
  71. -webkit-text-decoration-line: underline;
  72. text-decoration-line: underline;
  73. }
  74. .wp-block-search__button:active, .wp-block-search__button:focus,
  75. a:not(.ab-item):not(.screen-reader-shortcut):active,
  76. a:not(.ab-item):not(.screen-reader-shortcut):focus {
  77. outline: 1px dotted var(--wp--custom--color--primary);
  78. outline-offset: 0.1em;
  79. text-decoration: none;
  80. }
  81. .wp-block-navigation .wp-block-search__button:active, .wp-block-navigation .wp-block-search__button:focus,
  82. .wp-block-navigation a:not(.ab-item):not(.screen-reader-shortcut):active,
  83. .wp-block-navigation a:not(.ab-item):not(.screen-reader-shortcut):focus {
  84. outline-color: currentcolor;
  85. }
  86. .archive .wp-block-post-date,
  87. .blog .wp-block-post-date,
  88. .home .wp-block-post-date {
  89. text-decoration: underline;
  90. text-decoration-thickness: 0.07em;
  91. text-underline-offset: 0.46ex;
  92. }
  93. .wp-block-query-pagination .wp-block-query-pagination-numbers .current {
  94. text-decoration-thickness: 0.07em;
  95. text-underline-offset: 0.46ex;
  96. }
  97. .wp-block-post-excerpt__more-link {
  98. font-weight: 500;
  99. }
  100. /*
  101. * Search and File Block button styles.
  102. * Necessary until the following issues are resolved in Gutenberg:
  103. * https://github.com/WordPress/gutenberg/issues/36444
  104. * https://github.com/WordPress/gutenberg/issues/27760
  105. */
  106. .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  107. border-style: var(--wp--custom--button--border--style);
  108. border-width: var(--wp--custom--button--border--width);
  109. border-color: var(--wp--custom--color--foreground);
  110. }
  111. .wp-block-search__input {
  112. background-color: transparent;
  113. border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
  114. }
  115. .wp-block-search__button,
  116. .wp-block-file .wp-block-file__button {
  117. border-width: 0;
  118. border-radius: 0;
  119. background-color: var(--wp--custom--color--foreground);
  120. color: var(--wp--custom--color--background);
  121. font-size: var(--wp--preset--font-size--normal);
  122. font-weight: var(--wp--custom--button--typography--font-weight);
  123. padding: calc(0.667em + 2px) calc(1.333em + 2px);
  124. line-height: var(--wp--custom--button--typography--line-height);
  125. }
  126. .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
  127. border-width: 0;
  128. padding-top: calc(var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
  129. padding-bottom: calc(var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
  130. padding-left: calc(var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
  131. padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
  132. }
  133. /*
  134. * Button hover styles.
  135. * Necessary until the following issue is resolved in Gutenberg:
  136. * https://github.com/WordPress/gutenberg/issues/27075
  137. */
  138. .wp-block-search__button:hover,
  139. .wp-block-file .wp-block-file__button:hover,
  140. .wp-block-button__link:hover {
  141. opacity: 0.9;
  142. }
  143. /* Comments */
  144. .wp-block-post-comments input[type=submit] {
  145. font-family: var(--wp--preset--font-family--red-hat-display);
  146. color: var(--wp--custom--color--background);
  147. }
  148. .wp-block-post-comments textarea,
  149. .wp-block-post-comments input:not([type=submit]) {
  150. background-color: var(--wp--custom--color--background);
  151. color: var(--wp--custom--color--foreground);
  152. border-style: var(--wp--custom--button--border--style);
  153. border-width: var(--wp--custom--button--border--width);
  154. border-color: var(--wp--custom--color--foreground);
  155. }
  156. /*
  157. * Alignment styles, borrowed from Twenty Twenty-Two.
  158. * These rules are temporary, and should not be relied on or
  159. * modified too heavily by themes or plugins that build on
  160. * Twenty Twenty-Two. These are meant to be a precursor to
  161. * a global solution provided by the Block Editor.
  162. *
  163. * Relevant issues:
  164. * https://github.com/WordPress/gutenberg/issues/35607
  165. * https://github.com/WordPress/gutenberg/issues/35884
  166. */
  167. .wp-site-blocks,
  168. body > .is-root-container,
  169. .edit-post-visual-editor__post-title-wrapper,
  170. .wp-block-group.alignfull,
  171. .wp-block-group.has-background,
  172. .wp-block-cover.alignfull,
  173. .is-root-container .wp-block[data-align=full] > .wp-block-group,
  174. .is-root-container .wp-block[data-align=full] > .wp-block-cover {
  175. padding-left: var(--wp--custom--spacing--outer);
  176. padding-right: var(--wp--custom--spacing--outer);
  177. }
  178. .wp-site-blocks .alignfull,
  179. .wp-site-blocks > .wp-block-group.has-background,
  180. .wp-site-blocks > .wp-block-cover,
  181. .wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
  182. .wp-site-blocks > .wp-block-template-part > .wp-block-cover,
  183. body > .is-root-container > .wp-block-cover,
  184. body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
  185. body > .is-root-container > .wp-block-template-part > .wp-block-cover,
  186. .is-root-container .wp-block[data-align=full] {
  187. margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  188. margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  189. max-width: unset;
  190. width: unset;
  191. }
  192. /* Blocks inside columns don't have negative margins. */
  193. .wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
  194. .is-root-container .wp-block-columns .wp-block-column .wp-block[data-align=full],
  195. .wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
  196. .is-root-container .wp-block[data-align=full] > *:not(.wp-block-group) .wp-block[data-align=full] {
  197. margin-left: auto !important;
  198. margin-right: auto !important;
  199. width: inherit;
  200. }
  201. /*
  202. * Responsive menu container padding.
  203. * This ensures the responsive container inherits the same
  204. * spacing defined above. This behavior may be built into
  205. * the Block Editor in the future.
  206. */
  207. .wp-block-navigation__responsive-container.is-menu-open {
  208. padding-top: var(--wp--custom--spacing--outer);
  209. padding-bottom: var(--wp--custom--spacing--large);
  210. padding-right: var(--wp--custom--spacing--outer);
  211. padding-left: var(--wp--custom--spacing--outer);
  212. }
  213. /*# sourceMappingURL=theme.css.map */