style.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. /*
  2. Theme Name: Remote
  3. Theme URI: https://wordpress.com/theme/remote
  4. Author: Automattic
  5. Author URI: https://automattic.com
  6. Description: Remote is a dark, minimal block theme ideal for bloggers. Its default styles - a sans-serif font and dark background - contribute for a comfortable, immersive reading experience. It features a set of bold block patterns such as a large posts list and bordered categories and tags.
  7. Requires at least: 5.8
  8. Tested up to: 5.9
  9. Requires PHP: 5.7
  10. Version: 1.0.4
  11. License: GNU General Public License v2 or later
  12. License URI: https://raw.githubusercontent.com/Automattic/themes/trunk/LICENSE
  13. Text Domain: remote
  14. Tags: one-column, block-patterns, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, threaded-comments, translation-ready, wide-blocks
  15. */
  16. /*
  17. * Font smoothing.
  18. */
  19. body {
  20. -moz-osx-font-smoothing: grayscale;
  21. -webkit-font-smoothing: antialiased;
  22. }
  23. /*
  24. * Links styles.
  25. */
  26. .wp-block-post-title a {
  27. text-decoration: none;
  28. }
  29. /*
  30. * Alignment styles, borrowed from Twenty Twenty-Two.
  31. * These rules are temporary, and should not be relied on or
  32. * modified too heavily by themes or plugins that build on
  33. * Twenty Twenty-Two. These are meant to be a precursor to
  34. * a global solution provided by the Block Editor.
  35. *
  36. * Relevant issues:
  37. * https://github.com/WordPress/gutenberg/issues/35607
  38. * https://github.com/WordPress/gutenberg/issues/35884
  39. */
  40. .wp-site-blocks,
  41. body > .is-root-container,
  42. .edit-post-visual-editor__post-title-wrapper,
  43. .wp-block-group.alignfull,
  44. .wp-block-group.has-background,
  45. .wp-block-columns.alignfull.has-background,
  46. .wp-block-cover.alignfull,
  47. .is-root-container .wp-block[data-align='full'] > .wp-block-group,
  48. .is-root-container .wp-block[data-align='full'] > .wp-block-columns.has-background,
  49. .is-root-container .wp-block[data-align='full'] > .wp-block-cover {
  50. padding-left: var(--wp--custom--spacing--outer);
  51. padding-right: var(--wp--custom--spacing--outer);
  52. }
  53. .wp-site-blocks .alignfull,
  54. .wp-site-blocks > .wp-block-group.has-background,
  55. .wp-site-blocks > .wp-block-cover,
  56. .wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
  57. .wp-site-blocks > .wp-block-template-part > .wp-block-cover,
  58. body > .is-root-container > .wp-block-cover,
  59. body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
  60. body > .is-root-container > .wp-block-template-part > .wp-block-cover,
  61. .is-root-container .wp-block[data-align='full'] {
  62. margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  63. margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  64. max-width: unset;
  65. width: unset;
  66. }
  67. /* Blocks inside columns don't have negative margins. */
  68. .wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
  69. .is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
  70. /* We also want to avoid stacking negative margins. */
  71. .wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
  72. .is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
  73. margin-left: auto !important;
  74. margin-right: auto !important;
  75. width: inherit;
  76. }
  77. /*
  78. * Responsive menu container padding.
  79. * This ensures the responsive container inherits the same
  80. * spacing defined above. This behavior may be built into
  81. * the Block Editor in the future.
  82. */
  83. .wp-block-navigation__responsive-container.is-menu-open {
  84. padding-top: var(--wp--custom--spacing--outer);
  85. padding-bottom: var(--wp--custom--spacing--large);
  86. padding-right: var(--wp--custom--spacing--outer);
  87. padding-left: var(--wp--custom--spacing--outer);
  88. }
  89. /* Button styles */
  90. /*
  91. * Search block button styles
  92. * Necessary until the following issue is resolved in Gutenberg:
  93. * https://github.com/WordPress/gutenberg/issues/36444
  94. */
  95. .wp-block-search__button {
  96. border-radius: var(--wp--custom--button--border--radius);
  97. background-color: var(--wp--preset--color--primary);
  98. color: var(--wp--preset--color--background);
  99. border: 1px solid var(--wp--preset--color--primary);
  100. }
  101. /*
  102. * Button hover styles.
  103. * Necessary until the following issue is resolved in Gutenberg:
  104. * https://github.com/WordPress/gutenberg/issues/27075
  105. */
  106. :is(
  107. .wp-block-search__button,
  108. .wp-block-button__link
  109. ):is(
  110. :hover,
  111. :active,
  112. :focus
  113. ) {
  114. border: 1px solid var(--wp--preset--color--foreground);
  115. background-color: var(--wp--preset--color--foreground);
  116. color: var(--wp--preset--color--background);
  117. cursor: pointer;
  118. }
  119. :is(
  120. .wp-block-search__button,
  121. .wp-block-button__link
  122. ):is(
  123. :hover,
  124. :active,
  125. :focus
  126. ) {
  127. border: 1px solid var(--wp--preset--color--foreground);
  128. background-color: var(--wp--preset--color--foreground);
  129. color: var(--wp--preset--color--background);
  130. cursor: pointer;
  131. }
  132. :is(
  133. .wp-block-search__button,
  134. .wp-block-button__link
  135. ):focus {
  136. outline: 1.5px dotted var(--wp--preset--color--foreground);
  137. outline-offset: 3px;
  138. }
  139. /*
  140. * Link Details
  141. */
  142. a {
  143. color: var(--wp--preset--color--foreground);
  144. text-decoration-thickness: 0.075ex;
  145. text-underline-offset: 0.125em;
  146. text-decoration: underline;
  147. }
  148. .wp-block-site-title a {
  149. text-decoration: none;
  150. }
  151. a:not(
  152. .wp-block-search__button,
  153. .wp-block-button__link
  154. ):hover {
  155. color: var(--wp--preset--color--primary);
  156. text-decoration: none;
  157. }
  158. a:not(
  159. .wp-block-search__button,
  160. .wp-block-button__link,
  161. .wp-block-site-title a,
  162. .wp-block-post-title a
  163. ):active {
  164. color: var(--wp--preset--color--primary);
  165. text-decoration: underline;
  166. }
  167. a:not(
  168. .wp-block-search__button,
  169. .wp-block-button__link,
  170. .wp-block-site-title a,
  171. .wp-block-post-title a
  172. ):focus {
  173. color: var(--wp--preset--color--primary);
  174. outline: 1.5px dotted var(--wp--preset--color--primary);
  175. outline-offset: 3px;
  176. }
  177. /*
  178. * Comment form styles
  179. */
  180. .wp-block-post-comments input:not([type=submit]):not([type=checkbox]),
  181. .wp-block-post-comments textarea,
  182. .wp-block-post-comments select {
  183. border-radius: var(--wp--custom--button--border--radius);
  184. background-color: var(--wp--preset--color--background);
  185. color: var(--wp--preset--color--foreground);
  186. border: 1px solid var(--wp--preset--color--foreground);
  187. }
  188. /*
  189. * Needed until https://github.com/WordPress/gutenberg/issues/34196 or something like it.
  190. */
  191. .wp-block-tag-cloud.is-style-outline a {
  192. border-radius: 10px;
  193. padding: .5rem 1.25rem;
  194. }