blocks.css 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403
  1. /*
  2. Theme Name: Canard
  3. Description: Used to style Gutenberg Blocks.
  4. */
  5. /*--------------------------------------------------------------
  6. >>> TABLE OF CONTENTS:
  7. ----------------------------------------------------------------
  8. 1.0 General Block Styles
  9. 2.0 Blocks - Common Blocks
  10. 3.0 Blocks - Formatting
  11. 4.0 Blocks - Layout Elements
  12. 5.0 Blocks - Widgets
  13. 6.0 Blocks - Colors
  14. --------------------------------------------------------------*/
  15. /*--------------------------------------------------------------
  16. 1.0 General Block Styles
  17. --------------------------------------------------------------*/
  18. /* Captions */
  19. [class^="wp-block-"] figcaption {
  20. color: #777;
  21. font-family: Lato, sans-serif;
  22. font-size: 16px;
  23. line-height: 1.25;
  24. max-width: 100%;
  25. }
  26. /*--------------------------------------------------------------
  27. 2.0 Blocks - Common Blocks
  28. --------------------------------------------------------------*/
  29. /* Paragraph */
  30. p.has-drop-cap:not(:focus)::first-letter {
  31. font-size: 64px;
  32. }
  33. /* Images */
  34. .wp-block-cover,
  35. .wp-block-cover.alignleft,
  36. .wp-block-cover.alignright,
  37. .wp-block-cover.aligncenter {
  38. display: flex;
  39. }
  40. /* Gallery */
  41. .wp-block-gallery {
  42. margin-bottom: 30px;
  43. margin-left: auto;
  44. }
  45. /* Quote */
  46. .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
  47. .wp-block-quote:not(.is-large):not(.is-style-large).alignright {
  48. }
  49. .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
  50. .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignright {
  51. }
  52. .wp-block-quote cite {
  53. font-style: normal;
  54. }
  55. .wp-block-quote cite:before {
  56. }
  57. .wp-block-quote.is-large,
  58. .wp-block-quote.is-style-large,
  59. .wp-block-quote.is-large p,
  60. .wp-block-quote.is-style-large p {
  61. font-size: 120%;
  62. }
  63. /* Audio */
  64. .wp-block-audio audio {
  65. display: block;
  66. width: 100%;
  67. }
  68. /* File */
  69. .wp-block-file a.wp-block-file__button {
  70. background: #d11415;
  71. border: 2px solid #d11415;
  72. border-radius: 0;
  73. color: #fff;
  74. font-family: Lato, sans-serif;
  75. font-weight: bold;
  76. padding: 5.5px 13px;
  77. text-transform: uppercase;
  78. }
  79. .wp-block-file a.wp-block-file__button:hover,
  80. .wp-block-file a.wp-block-file__button:focus {
  81. background: #fff;
  82. color: #d11415;
  83. outline: none;
  84. }
  85. .wp-block-file a.wp-block-file__button:focus {
  86. background: #fff;
  87. color: #d11415;
  88. outline: none;
  89. }
  90. .rtl .wp-block-file * + .wp-block-file__button {
  91. margin-left: 0.75em;
  92. margin-right: 0;
  93. }
  94. /*--------------------------------------------------------------
  95. 3.0 Blocks - Formatting Blocks
  96. --------------------------------------------------------------*/
  97. /* Verse */
  98. .wp-block-verse {
  99. background: transparent;
  100. border: 0;
  101. color: inherit;
  102. font-family: inherit;
  103. line-height: inherit;
  104. margin-bottom: 30px;
  105. max-width: 100%;
  106. overflow: auto;
  107. padding: 0;
  108. }
  109. /* Code */
  110. .wp-block-code {
  111. font-family: Inconsolata, monospace;
  112. }
  113. /* Pullquote */
  114. .wp-block-pullquote {
  115. margin: 0;
  116. padding: 0;
  117. border: 0;
  118. }
  119. .wp-block-pullquote blockquote {
  120. border-top: 4px solid currentColor;
  121. border-bottom: 2px solid currentColor;
  122. color: #555;
  123. font-style: italic;
  124. margin: 15px 0 30px;
  125. padding: 15px 0;
  126. position: relative;
  127. }
  128. .wp-block-pullquote blockquote:before {
  129. display: none;
  130. }
  131. .wp-block-pullquote p,
  132. .wp-block-pullquote.alignleft p,
  133. .wp-block-pullquote.alignright p {
  134. font-size: 20px;
  135. }
  136. .wp-block-pullquote.alignleft cite,
  137. .wp-block-pullquote.alignright cite {
  138. font-size: 16px;
  139. }
  140. .rtl .wp-block-pullquote blockquote {
  141. }
  142. .wp-block-pullquote p {
  143. }
  144. .wp-block-pullquote cite {
  145. text-transform: none;
  146. font-size: inherit;
  147. font-weight: bold;
  148. }
  149. .wp-block-pullquote cite:before {
  150. }
  151. /* Table */
  152. .wp-block-table,
  153. .wp-block-table th,
  154. .wp-block-table td {
  155. }
  156. .wp-block-table {
  157. }
  158. .wp-block-table th,
  159. .wp-block-table td {
  160. }
  161. .wp-block-table th {
  162. }
  163. .wp-block-table td {
  164. }
  165. .rtl .wp-block-table th,
  166. .rtl .wp-block-table td {
  167. }
  168. /*--------------------------------------------------------------
  169. 4.0 Blocks - Layout Elements
  170. --------------------------------------------------------------*/
  171. /* Buttons */
  172. .wp-block-button .wp-block-button__link {
  173. border: 2px solid;
  174. display: inline-block;
  175. font-family: Lato, sans-serif;
  176. font-weight: bold;
  177. padding: 5.5px 13px;
  178. text-transform: uppercase;
  179. }
  180. .wp-block-button__link:not(.has-background) {
  181. background: #d11415;
  182. border-color: #d11415;
  183. }
  184. .wp-block-button__link:not(.has-text-color) {
  185. color: #fff;
  186. }
  187. .is-style-outline .wp-block-button__link {
  188. background: transparent;
  189. border-color: currentColor;
  190. }
  191. .is-style-outline .wp-block-button__link:not(.has-text-color) {
  192. color: #d11415;
  193. }
  194. .entry-content .wp-block-button .wp-block-button__link:active,
  195. .entry-content .wp-block-button .wp-block-button__link:focus,
  196. .entry-content .wp-block-button .wp-block-button__link:hover {
  197. color: #d11415;
  198. background: #fff;
  199. border-color: #d11415;
  200. }
  201. /* Seperator */
  202. hr.wp-block-separator {
  203. border: 0;
  204. }
  205. .wp-block-separator {
  206. background-color: #ddd;
  207. border: 0;
  208. height: 1px;
  209. margin-bottom: 30px;
  210. max-width: 66%;
  211. }
  212. .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  213. margin-left: auto;
  214. margin-right: auto;
  215. max-width: 100px;
  216. }
  217. .wp-block-separator.is-style-wide {
  218. max-width: 100%;
  219. }
  220. /*--------------------------------------------------------------
  221. 5.0 Blocks - Widget Blocks
  222. --------------------------------------------------------------*/
  223. /* General Widget styles */
  224. .wp-block-categories.aligncenter,
  225. .wp-block-categories.aligncenter ul,
  226. .wp-block-archives.aligncenter,
  227. .wp-block-latest-posts.aligncenter,
  228. .wp-block-latest-comments.aligncenter {
  229. list-style-position: inside;
  230. text-align: center;
  231. }
  232. /* Latest Comments */
  233. .editor-block-list__block .wp-block-latest-comments__comment-meta a {
  234. box-shadow: none;
  235. font-weight: 700;
  236. text-decoration: none;
  237. }
  238. .wp-block-latest-comments__comment-date {
  239. }
  240. .wp-block-latest-comments .wp-block-latest-comments__comment {
  241. border-top: 1px solid #d1d1d1;
  242. margin-bottom: 0;
  243. padding: 30px 0;
  244. }
  245. .wp-block-latest-comments__comment-excerpt p:last-child {
  246. margin-bottom: 0;
  247. }
  248. /*--------------------------------------------------------------
  249. 6.0 Blocks - Colors
  250. --------------------------------------------------------------*/
  251. .has-dark-gray-color,
  252. .has-dark-gray-color:hover,
  253. .has-dark-gray-color:focus,
  254. .has-dark-gray-color:active {
  255. color: #555;
  256. }
  257. .has-dark-gray-background-color,
  258. .has-dark-gray-background-color:hover,
  259. .has-dark-gray-background-color:focus,
  260. .has-dark-gray-background-color:active {
  261. background-color: #555;
  262. }
  263. .has-medium-gray-color,
  264. .has-medium-gray-color:hover,
  265. .has-medium-gray-color:focus,
  266. .has-medium-gray-color:active {
  267. color: #777;
  268. }
  269. .has-medium-gray-background-color,
  270. .has-medium-gray-background-color:hover,
  271. .has-medium-gray-background-color:focus,
  272. .has-medium-gray-background-color:active {
  273. background-color: #777;
  274. }
  275. .has-light-gray-color,
  276. .has-light-gray-color:hover,
  277. .has-light-gray-color:focus,
  278. .has-light-gray-color:active {
  279. color: #ddd;
  280. }
  281. .has-light-gray-background-color,
  282. .has-light-gray-background-color:hover,
  283. .has-light-gray-background-color:focus,
  284. .has-light-gray-background-color:active {
  285. background-color: #ddd;
  286. }
  287. .has-white-color,
  288. .has-white-color:hover,
  289. .has-white-color:focus,
  290. ,.has-white-color:active {
  291. color: #fff;
  292. }
  293. .has-white-background-color,
  294. .has-white-background-color:hover,
  295. .has-white-background-color:focus,
  296. .has-white-background-color:active {
  297. background-color: #fff;
  298. }
  299. .has-red-color,
  300. .has-red-color:hover,
  301. .has-red-color:focus,
  302. .has-red-color:active {
  303. color: #d11415;
  304. }
  305. .has-red-background-color,
  306. .has-red-background-color:hover,
  307. .has-red-background-color:focus,
  308. .has-red-background-color:active {
  309. background-color: #d11415;
  310. }
  311. .has-black-color,
  312. .has-black-color:hover,
  313. .has-black-color:focus,
  314. .has-black-color:active {
  315. color: #222;
  316. }
  317. .has-black-background-color,
  318. .has-black-background-color:hover,
  319. .has-black-background-color:focus,
  320. .has-black-background-color:active {
  321. background-color: #222;
  322. }