style.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447
  1. /**
  2. * Colors
  3. */
  4. /**
  5. * Breakpoints & Media Queries
  6. */
  7. /**
  8. * SCSS Variables.
  9. *
  10. * Please use variables from this sheet to ensure consistency across the UI.
  11. * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  12. * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  13. */
  14. /**
  15. * Colors
  16. */
  17. /**
  18. * Fonts & basic variables.
  19. */
  20. /**
  21. * Grid System.
  22. * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  23. */
  24. /**
  25. * Dimensions.
  26. */
  27. /**
  28. * Shadows.
  29. */
  30. /**
  31. * Editor widths.
  32. */
  33. /**
  34. * Block & Editor UI.
  35. */
  36. /**
  37. * Block paddings.
  38. */
  39. /**
  40. * React Native specific.
  41. * These variables do not appear to be used anywhere else.
  42. */
  43. /**
  44. * Converts a hex value into the rgb equivalent.
  45. *
  46. * @param {string} hex - the hexadecimal value to convert
  47. * @return {string} comma separated rgb values
  48. */
  49. /**
  50. * Breakpoint mixins
  51. */
  52. /**
  53. * Long content fade mixin
  54. *
  55. * Creates a fading overlay to signify that the content is longer
  56. * than the space allows.
  57. */
  58. /**
  59. * Focus styles.
  60. */
  61. /**
  62. * Applies editor left position to the selector passed as argument
  63. */
  64. /**
  65. * Styles that are reused verbatim in a few places
  66. */
  67. /**
  68. * Allows users to opt-out of animations via OS-level preferences.
  69. */
  70. /**
  71. * Reset default styles for JavaScript UI based pages.
  72. * This is a WP-admin agnostic reset
  73. */
  74. /**
  75. * Reset the WP Admin page styles for Gutenberg-like pages.
  76. */
  77. .wp-block-social-links {
  78. padding-left: 0;
  79. padding-right: 0;
  80. text-indent: 0;
  81. margin-left: 0;
  82. background: none;
  83. }
  84. .wp-block-social-links .wp-social-link a,
  85. .wp-block-social-links .wp-social-link a:hover {
  86. text-decoration: none;
  87. border-bottom: 0;
  88. box-shadow: none;
  89. }
  90. .wp-block-social-links .wp-social-link a {
  91. padding: 0.25em;
  92. }
  93. .wp-block-social-links .wp-social-link svg {
  94. width: 1em;
  95. height: 1em;
  96. }
  97. .wp-block-social-links .wp-social-link span:not(.screen-reader-text) {
  98. margin-left: 0.5em;
  99. margin-right: 0.5em;
  100. font-size: 0.65em;
  101. }
  102. .wp-block-social-links.has-small-icon-size {
  103. font-size: 16px;
  104. }
  105. .wp-block-social-links, .wp-block-social-links.has-normal-icon-size {
  106. font-size: 24px;
  107. }
  108. .wp-block-social-links.has-large-icon-size {
  109. font-size: 36px;
  110. }
  111. .wp-block-social-links.has-huge-icon-size {
  112. font-size: 48px;
  113. }
  114. .wp-block-social-links.aligncenter {
  115. justify-content: center;
  116. display: flex;
  117. }
  118. .wp-block-social-links.alignright {
  119. justify-content: flex-end;
  120. }
  121. .wp-block-social-link {
  122. display: block;
  123. border-radius: 9999px;
  124. transition: transform 0.1s ease;
  125. height: auto;
  126. }
  127. @media (prefers-reduced-motion: reduce) {
  128. .wp-block-social-link {
  129. transition-duration: 0s;
  130. transition-delay: 0s;
  131. }
  132. }
  133. .wp-block-social-link a {
  134. align-items: center;
  135. display: flex;
  136. line-height: 0;
  137. transition: transform 0.1s ease;
  138. }
  139. .wp-block-social-link:hover {
  140. transform: scale(1.1);
  141. }
  142. .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor, .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:hover, .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:active, .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:visited,
  143. .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor svg {
  144. color: currentColor;
  145. fill: currentColor;
  146. }
  147. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link {
  148. background-color: #f0f0f0;
  149. color: #444;
  150. }
  151. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-amazon {
  152. background-color: #f90;
  153. color: #fff;
  154. }
  155. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-bandcamp {
  156. background-color: #1ea0c3;
  157. color: #fff;
  158. }
  159. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-behance {
  160. background-color: #0757fe;
  161. color: #fff;
  162. }
  163. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-codepen {
  164. background-color: #1e1f26;
  165. color: #fff;
  166. }
  167. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-deviantart {
  168. background-color: #02e49b;
  169. color: #fff;
  170. }
  171. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-dribbble {
  172. background-color: #e94c89;
  173. color: #fff;
  174. }
  175. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-dropbox {
  176. background-color: #4280ff;
  177. color: #fff;
  178. }
  179. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-etsy {
  180. background-color: #f45800;
  181. color: #fff;
  182. }
  183. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-facebook {
  184. background-color: #1778f2;
  185. color: #fff;
  186. }
  187. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-fivehundredpx {
  188. background-color: #000;
  189. color: #fff;
  190. }
  191. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-flickr {
  192. background-color: #0461dd;
  193. color: #fff;
  194. }
  195. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-foursquare {
  196. background-color: #e65678;
  197. color: #fff;
  198. }
  199. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-github {
  200. background-color: #24292d;
  201. color: #fff;
  202. }
  203. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-goodreads {
  204. background-color: #eceadd;
  205. color: #382110;
  206. }
  207. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-google {
  208. background-color: #ea4434;
  209. color: #fff;
  210. }
  211. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-instagram {
  212. background-color: #f00075;
  213. color: #fff;
  214. }
  215. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-lastfm {
  216. background-color: #e21b24;
  217. color: #fff;
  218. }
  219. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-linkedin {
  220. background-color: #0d66c2;
  221. color: #fff;
  222. }
  223. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-mastodon {
  224. background-color: #3288d4;
  225. color: #fff;
  226. }
  227. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-medium {
  228. background-color: #02ab6c;
  229. color: #fff;
  230. }
  231. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-meetup {
  232. background-color: #f6405f;
  233. color: #fff;
  234. }
  235. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-patreon {
  236. background-color: #ff424d;
  237. color: #fff;
  238. }
  239. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-pinterest {
  240. background-color: #e60122;
  241. color: #fff;
  242. }
  243. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-pocket {
  244. background-color: #ef4155;
  245. color: #fff;
  246. }
  247. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-reddit {
  248. background-color: #fe4500;
  249. color: #fff;
  250. }
  251. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-skype {
  252. background-color: #0478d7;
  253. color: #fff;
  254. }
  255. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-snapchat {
  256. background-color: #fefc00;
  257. color: #fff;
  258. stroke: #000;
  259. }
  260. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-soundcloud {
  261. background-color: #ff5600;
  262. color: #fff;
  263. }
  264. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-spotify {
  265. background-color: #1bd760;
  266. color: #fff;
  267. }
  268. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-telegram {
  269. background-color: #2aabee;
  270. color: #fff;
  271. }
  272. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-tiktok {
  273. background-color: #000;
  274. color: #fff;
  275. }
  276. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-tumblr {
  277. background-color: #011835;
  278. color: #fff;
  279. }
  280. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-twitch {
  281. background-color: #6440a4;
  282. color: #fff;
  283. }
  284. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-twitter {
  285. background-color: #1da1f2;
  286. color: #fff;
  287. }
  288. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-vimeo {
  289. background-color: #1eb7ea;
  290. color: #fff;
  291. }
  292. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-vk {
  293. background-color: #4680c2;
  294. color: #fff;
  295. }
  296. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-wordpress {
  297. background-color: #3499cd;
  298. color: #fff;
  299. }
  300. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-yelp {
  301. background-color: #d32422;
  302. color: #fff;
  303. }
  304. .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-youtube {
  305. background-color: #f00;
  306. color: #fff;
  307. }
  308. .wp-block-social-links.is-style-logos-only .wp-social-link {
  309. background: none;
  310. }
  311. .wp-block-social-links.is-style-logos-only .wp-social-link a {
  312. padding: 0;
  313. }
  314. .wp-block-social-links.is-style-logos-only .wp-social-link svg {
  315. width: 1.25em;
  316. height: 1.25em;
  317. }
  318. .wp-block-social-links.is-style-logos-only .wp-social-link-amazon {
  319. color: #f90;
  320. }
  321. .wp-block-social-links.is-style-logos-only .wp-social-link-bandcamp {
  322. color: #1ea0c3;
  323. }
  324. .wp-block-social-links.is-style-logos-only .wp-social-link-behance {
  325. color: #0757fe;
  326. }
  327. .wp-block-social-links.is-style-logos-only .wp-social-link-codepen {
  328. color: #1e1f26;
  329. }
  330. .wp-block-social-links.is-style-logos-only .wp-social-link-deviantart {
  331. color: #02e49b;
  332. }
  333. .wp-block-social-links.is-style-logos-only .wp-social-link-dribbble {
  334. color: #e94c89;
  335. }
  336. .wp-block-social-links.is-style-logos-only .wp-social-link-dropbox {
  337. color: #4280ff;
  338. }
  339. .wp-block-social-links.is-style-logos-only .wp-social-link-etsy {
  340. color: #f45800;
  341. }
  342. .wp-block-social-links.is-style-logos-only .wp-social-link-facebook {
  343. color: #1778f2;
  344. }
  345. .wp-block-social-links.is-style-logos-only .wp-social-link-fivehundredpx {
  346. color: #000;
  347. }
  348. .wp-block-social-links.is-style-logos-only .wp-social-link-flickr {
  349. color: #0461dd;
  350. }
  351. .wp-block-social-links.is-style-logos-only .wp-social-link-foursquare {
  352. color: #e65678;
  353. }
  354. .wp-block-social-links.is-style-logos-only .wp-social-link-github {
  355. color: #24292d;
  356. }
  357. .wp-block-social-links.is-style-logos-only .wp-social-link-goodreads {
  358. color: #382110;
  359. }
  360. .wp-block-social-links.is-style-logos-only .wp-social-link-google {
  361. color: #ea4434;
  362. }
  363. .wp-block-social-links.is-style-logos-only .wp-social-link-instagram {
  364. color: #f00075;
  365. }
  366. .wp-block-social-links.is-style-logos-only .wp-social-link-lastfm {
  367. color: #e21b24;
  368. }
  369. .wp-block-social-links.is-style-logos-only .wp-social-link-linkedin {
  370. color: #0d66c2;
  371. }
  372. .wp-block-social-links.is-style-logos-only .wp-social-link-mastodon {
  373. color: #3288d4;
  374. }
  375. .wp-block-social-links.is-style-logos-only .wp-social-link-medium {
  376. color: #02ab6c;
  377. }
  378. .wp-block-social-links.is-style-logos-only .wp-social-link-meetup {
  379. color: #f6405f;
  380. }
  381. .wp-block-social-links.is-style-logos-only .wp-social-link-patreon {
  382. color: #ff424d;
  383. }
  384. .wp-block-social-links.is-style-logos-only .wp-social-link-pinterest {
  385. color: #e60122;
  386. }
  387. .wp-block-social-links.is-style-logos-only .wp-social-link-pocket {
  388. color: #ef4155;
  389. }
  390. .wp-block-social-links.is-style-logos-only .wp-social-link-reddit {
  391. color: #fe4500;
  392. }
  393. .wp-block-social-links.is-style-logos-only .wp-social-link-skype {
  394. color: #0478d7;
  395. }
  396. .wp-block-social-links.is-style-logos-only .wp-social-link-snapchat {
  397. color: #fff;
  398. stroke: #000;
  399. }
  400. .wp-block-social-links.is-style-logos-only .wp-social-link-soundcloud {
  401. color: #ff5600;
  402. }
  403. .wp-block-social-links.is-style-logos-only .wp-social-link-spotify {
  404. color: #1bd760;
  405. }
  406. .wp-block-social-links.is-style-logos-only .wp-social-link-telegram {
  407. color: #2aabee;
  408. }
  409. .wp-block-social-links.is-style-logos-only .wp-social-link-tiktok {
  410. color: #000;
  411. }
  412. .wp-block-social-links.is-style-logos-only .wp-social-link-tumblr {
  413. color: #011835;
  414. }
  415. .wp-block-social-links.is-style-logos-only .wp-social-link-twitch {
  416. color: #6440a4;
  417. }
  418. .wp-block-social-links.is-style-logos-only .wp-social-link-twitter {
  419. color: #1da1f2;
  420. }
  421. .wp-block-social-links.is-style-logos-only .wp-social-link-vimeo {
  422. color: #1eb7ea;
  423. }
  424. .wp-block-social-links.is-style-logos-only .wp-social-link-vk {
  425. color: #4680c2;
  426. }
  427. .wp-block-social-links.is-style-logos-only .wp-social-link-wordpress {
  428. color: #3499cd;
  429. }
  430. .wp-block-social-links.is-style-logos-only .wp-social-link-yelp {
  431. color: #d32422;
  432. }
  433. .wp-block-social-links.is-style-logos-only .wp-social-link-youtube {
  434. color: #f00;
  435. }
  436. .wp-block-social-links.is-style-pill-shape .wp-social-link {
  437. width: auto;
  438. }
  439. .wp-block-social-links.is-style-pill-shape .wp-social-link a {
  440. padding-left: calc((2/3) * 1em);
  441. padding-right: calc((2/3) * 1em);
  442. }