wpcom-colors.php 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569
  1. <?php
  2. /* Custom Colors: Radcliffe 2 */
  3. // Background
  4. add_color_rule( 'bg', '#ffffff', array(
  5. array( 'body', 'background-color' ),
  6. array( '.comment-wrapper,
  7. .pingback,
  8. .trackback',
  9. 'background-color', '0.5' ),
  10. array( '.comment-wrapper:after', 'border-right-color' ),
  11. array( '.hero-area .button,
  12. .hero-area .button:focus,
  13. .hero-area .button:hover', 'background', 'link', 1 ),
  14. array( 'table tbody > tr:nth-child(odd) > th,
  15. table tbody > tr:nth-child(odd) > td', 'background-color', 'bg', 1.5 ),
  16. array( '.widget li,
  17. .contact-info-area', 'border-color', 'bg', 1.5 ),
  18. array( '.hero-area .button:focus,
  19. .hero-area .button:hover', 'background-color', 'bg', 2 ),
  20. // Style pack - Colorful
  21. array( '.style-pack-colorful .contact-info-area,
  22. .style-pack-colorful .widget-area,
  23. .style-pack-colorful .site-footer', 'background-color' ),
  24. array( '.main-navigation.toggled .menu', 'background-color', 'bg', 1.5 ),
  25. // Style pack - Modern
  26. array( '.style-pack-modern .menu-toggle', 'border-color', 'bg', 2 ),
  27. // Style pack - Vintage
  28. array( '.style-pack-vintage .main-navigation.toggled .menu', 'background-color', 'bg', 2 ),
  29. array( '.style-pack-vintage .menu-toggle,
  30. .style-pack-vintage.single-post article,
  31. .style-pack-vintage.page article,
  32. .site-header .contact-info-area:before,
  33. .site-header .contact-info-area', 'border-color', 'bg', 2 ),
  34. array( '.style-pack-vintage.single-post article,
  35. .style-pack-vintage.page article', 'background-color', 'bg', 1.25 ),
  36. // Woocommerce
  37. array( '.woocommerce-tabs ul.tabs li.active:hover a,
  38. .woocommerce-tabs ul.tabs li.active a', 'background-color' ),
  39. array( '.woocommerce-tabs ul.tabs li.active', 'border-bottom-color' ),
  40. ) );
  41. // Main Accent Color
  42. add_color_rule( 'link', '#ca2017', array(
  43. array( 'a,
  44. a:visited,
  45. .jetpack-social-navigation a:hover,
  46. .jetpack-social-navigation a:focus', 'color', 'bg' ),
  47. array( 'a:hover,
  48. a:focus,
  49. a:active', 'color', 'bg', 3 ),
  50. array( '#wp-calendar tfoot a:hover,
  51. .posts-navigation a:hover,
  52. .comment-navigation a:hover,
  53. .entry-footer a:hover,
  54. .entry-meta a:hover,
  55. .post-navigation a:hover,
  56. .site-info a:hover,
  57. .contact-info-area a:focus,
  58. .contact-info-area a:hover,
  59. .site-title a:hover', 'color', 'bg' ),
  60. array( '.hero-area .button,
  61. .hero-area .button:focus,
  62. .hero-area .button:hover', 'color' ),
  63. array( '.blog .entry-title a:hover,
  64. .search .entry-title a:hover,
  65. .archive .entry-title a:hover', 'color', '#000000' ),
  66. array( '#infinite-handle span:hover,
  67. .button:active,
  68. .button:focus,
  69. .button:hover,
  70. .bypostauthor .by-post-author,
  71. button:active,
  72. button:focus,
  73. button:hover,
  74. input[type="button"]:active,
  75. input[type="button"]:focus,
  76. input[type="button"]:hover,
  77. input[type="reset"]:active,
  78. input[type="reset"]:focus,
  79. input[type="reset"]:hover,
  80. input[type="submit"]:active,
  81. input[type="submit"]:focus,
  82. input[type="submit"]:hover', 'background-color', 'bg', 2 ),
  83. array( '.main-navigation.toggled li a:active,
  84. .main-navigation.toggled li a:focus,
  85. .main-navigation.toggled li a:hover,
  86. .main-navigation li:hover > a,
  87. .main-navigation li.focus > a,
  88. .main-navigation li.current-menu-item > a,
  89. .woocommerce-MyAccount-navigation li.is-active a,
  90. .main-navigation li.current-menu-item ~ li.current-menu-item > a:hover,
  91. .hero-area', 'background-color' ),
  92. array( '.main-navigation ul ul > li:first-child:hover:after,
  93. .main-navigation ul ul > li.current-menu-item:first-child:after', 'border-bottom-color' ),
  94. array( '.main-navigation ul ul ul > li:first-child:hover:after,
  95. .main-navigation ul ul ul > li.current-menu-item:first-child:after', 'border-right-color' ),
  96. array( '.contact-info-area .icon', 'fill', 'bg' ),
  97. // Style Pack - Colorful
  98. array( '.style-pack-colorful .main-navigation li li:hover > a,
  99. .style-pack-colorful .main-navigation li li.focus > a', 'background-color' ),
  100. array( '.style-pack-colorful h1,
  101. .style-pack-colorful h2,
  102. .style-pack-colorful h3,
  103. .style-pack-colorful h4,
  104. .style-pack-colorful h5,
  105. .style-pack-colorful h6', 'color', 'bg', 4 ),
  106. array( '.style-pack-colorful .hero-area .button,
  107. .style-pack-colorful .hero-area .button:focus,
  108. .style-pack-colorful .hero-area .button:hover', 'color', '#ffffff' ),
  109. // Woocommerce
  110. array( '.woocommerce-page ul.products li.product a.added_to_cart,
  111. .woocommerce-page .entry-content .woocommerce-MyAccount-navigation li:hover > a,
  112. .woocommerce-MyAccount-navigation li.focus > a,
  113. .woocommerce-tabs ul.tabs li:hover a,
  114. .site-header-cart:hover>li>a,
  115. .site-header-cart.focus>li>a,
  116. .site-header-cart>li:hover>a,
  117. .site-header-cart>li.focus>a,
  118. .site-header-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons a', 'background-color' ),
  119. array( '.woocommerce-page .star-rating span:before,
  120. .woocommerce-page p.stars:hover a:before,
  121. .woocommerce-page p.stars.selected a.active:before,
  122. .woocommerce-page p.stars.selected a:not(.active):before,
  123. .woocommerce-tabs ul.tabs li.active a', 'color' ),
  124. ),
  125. __( 'Main Accent' ) );
  126. // White
  127. add_color_rule( 'extra', '#ffffff', array(
  128. array( '#infinite-handle span,
  129. #wp-calendar tfoot a,
  130. .comment-navigation a,
  131. .entry-footer a,
  132. .entry-footer a:visited,
  133. .entry-meta,
  134. .entry-meta a,
  135. .entry-meta a:visited,
  136. .post-navigation a,
  137. .post-navigation a span,
  138. .posts-navigation a,
  139. .comment-header cite,
  140. .comment-header span a', 'color', 'bg', 3 ),
  141. array( '.blog .entry-title a,
  142. .blog .entry-title a:visited,
  143. .search .entry-title a,
  144. .search .entry-title a:visited,
  145. .archive .entry-title a,
  146. .archive .entry-title a:visited', 'color' ),
  147. array( '.main-navigation li:hover > a,
  148. .main-navigation li.focus > a,
  149. .main-navigation ul li.current-menu-item > a,
  150. button:hover', 'color', 'link', 3 ),
  151. array( 'a:hover + .dropdown-toggle,
  152. a:focus + .dropdown-toggle,
  153. .dropdown-toggle:hover,
  154. .dropdown-toggle:focus,
  155. .main-navigation.toggled li a:hover,
  156. .main-navigation.toggled li a:focus,
  157. .main-navigation.toggled li a:active,
  158. .main-navigation.toggled li:hover > a,
  159. .main-navigation.toggled li.focus > a', 'color', 'link', 6 ),
  160. array( '.cat-links .icon,
  161. .tags-links .icon,
  162. .edit-link .icon', 'fill', 'bg' ),
  163. // Style Pack - Colorful
  164. array( '.style-pack-colorful .comments-title,
  165. .style-pack-colorful .comment-reply-title', 'color', 'bg' ),
  166. // Woocommerce
  167. array( '.woocommerce a.button', 'color', '#222222', 3 ),
  168. array( '.woocommerce a.button:hover,
  169. .woocommerce-page .site-header-cart:hover .count,
  170. .woocommerce-page .site-header-cart.focus .count,
  171. .woocommerce-page .site-header-cart li.is-active a,
  172. .woocommerce-page .site-header-cart ul ul a,
  173. .woocommerce-page .site-header-cart:hover>li>a,
  174. .woocommerce-page .site-header-cart.focus>li>a,
  175. .woocommerce-page .site-header-cart>li:hover>a,
  176. .woocommerce-page .site-header-cart>li.focus>a,
  177. .woocommerce-page ul.products li.product a.added_to_cart,
  178. .woocommerce-MyAccount-navigation li:hover > a,
  179. .woocommerce-MyAccount-navigation li.focus > a,
  180. .woocommerce-MyAccount-navigation li.is-active a,
  181. .woocommerce-MyAccount-navigation ul ul a,
  182. .woocommerce-tabs ul.tabs li:hover a,
  183. .woocommerce-page ul.woocommerce-message li,
  184. .woocommerce-page ul.woocommerce-info li,
  185. .woocommerce-page ul.woocommerce-error li,
  186. .site-header-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons a', 'color', 'link', 3 ),
  187. array( '.site-header-cart:hover .icon,
  188. .site-header-cart.focus .icon', 'fill', 'link', 3 ),
  189. array( '.woocommerce-store-notice,
  190. .site-header-cart .widget_shopping_cart_content .product_list_widget li a,
  191. #site-header-cart .widget_shopping_cart_content .mini_cart_item,
  192. .site-header-cart ul ul a', 'color' ),
  193. ) );
  194. // Light Grey
  195. add_color_rule( 'extra', '#dddddd', array(
  196. array( 'blockquote:before,
  197. blockquote:after', 'background-color', 'bg', 3 ),
  198. array( 'tbody', 'border-top', 'bg', 3 ),
  199. array( 'tbody,
  200. th,
  201. td', 'border-bottom', 'bg', 3 ),
  202. // Woocommerce
  203. array( '.woocommerce.widget_product_search .woocommerce-product-search .search-field', 'background-color' ),
  204. ) );
  205. // Dark Grey
  206. add_color_rule( 'extra', '#222222', array(
  207. array( '.main-navigation a,
  208. .main-navigation a:visited,
  209. .main-navigation li.current-menu-item,
  210. .post-navigation a,
  211. .site-title a,
  212. .site-title a:visited,
  213. .menu-toggle,
  214. .comment-header cite a,
  215. .contact-info-area,
  216. .contact-info-area a,
  217. body,
  218. th', 'color', 'bg' ),
  219. array( '.button,
  220. .header-search,
  221. .main-navigation ul ul a,
  222. button,
  223. input[type="button"],
  224. input[type="reset"],
  225. input[type="submit"]', 'background-color' ),
  226. array( '.main-navigation ul ul > li:first-child:after', 'border-bottom-color' ),
  227. array( '.main-navigation ul ul ul > li:first-child:after', 'border-right-color' ),
  228. array( '.site', 'border-top-color' ),
  229. array( '.search-toggle .icon', 'fill', 'bg' ),
  230. // Style Pack - Colorful
  231. array( '.style-pack-colorful .entry-title,
  232. .style-pack-colorful .single .entry-title,
  233. .style-pack-colorful .page-template-default .entry-title,
  234. .style-pack-colorful .widget-title', 'color', 'bg' ),
  235. // Woocommerce
  236. array( '.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
  237. .woocommerce-page ul.products li.product .price,
  238. .single-product div.product .product_meta a,
  239. .woocommerce-tabs ul.tabs li a', 'color', 'bg' ),
  240. array( '.woocommerce-page ul.products li.product .price ins .amount,
  241. .woocommerce-page .onsale', 'color', '#fff9c0' ),
  242. array( '.woocommerce-MyAccount-navigation a,
  243. .woocommerce-page .site-header-cart .count,
  244. .woocommerce-page .site-header-cart .cart-contents', 'color', 'bg' ),
  245. array( '.woocommerce-page .site-header-cart li.is-active a,
  246. .woocommerce-page .site-header-cart ul ul a,
  247. .woocommerce-page ul.products li.product a.added_to_cart:hover,
  248. .woocommerce-MyAccount-navigation ul ul a,
  249. .woocommerce-store-notice,
  250. .site-header-cart ul ul a', 'background-color' ),
  251. ) );
  252. add_color_rule( 'extra', '#444444', array(
  253. array( 'th', 'color', 'bg', 6 ),
  254. // Woocommerce
  255. array( '.woocommerce-page ul.products li.product .price del,
  256. .woocommerce-page .star-rating:before,
  257. .woocommerce-page p.stars a:before,
  258. .woocommerce-page p.stars.selected a.active~a:before,
  259. .woocommerce-page p.stars a:hover~a:before,
  260. .woocommerce.widget_product_search .woocommerce-product-search .search-field', 'color', 'bg', 6 ),
  261. ) );
  262. // Grey
  263. add_color_rule( 'extra', '#888888', array(
  264. array( '.site-info,
  265. .site-info a,
  266. .archive .page-title,
  267. .search .page-title,
  268. .error404 .page-title', 'color', 'bg', 3 ),
  269. // Woocommerce
  270. array( '.single-product div.product .entry-summary .price del,
  271. .single-product div.product .product_meta,
  272. .single-product div.product .commentlist .comment-text .meta', 'color', 'bg', 3 ),
  273. ) );
  274. // Mid Grey
  275. add_color_rule( 'extra', '#666666', array(
  276. array( 'blockquote,
  277. .jetpack-social-navigation a,
  278. .jetpack-social-navigation a:visited,
  279. .dropdown-toggle,
  280. .dropdown-toggle:hover
  281. .dropdown-toggle:hover,
  282. .main-navigation.toggled ul a', 'color', 'bg' ),
  283. // Style Pack - Vintage
  284. array( '.style-pack-vintage .entry-content blockquote', 'color', '#f7f7f4' ),
  285. ) );
  286. // Black
  287. add_color_rule( 'extra', '#000000', array(
  288. array( '.comments-area,
  289. .respond,
  290. #infinite-handle span', 'background-color', 0.1 ),
  291. array( '.archive:not(.style-pack-vintage) .entry-header,
  292. .blog:not(.style-pack-vintage) .entry-header,
  293. .search-results:not(.style-pack-vintage) .entry-header', 'background-color', 0.35 ),
  294. array( '.archive:not(.style-pack-vintage) article:nth-of-type(even) .entry-header,
  295. .blog:not(.style-pack-vintage) article:nth-of-type(even) .entry-header,
  296. .search-results:not(.style-pack-vintage) article:nth-of-type(even) .entry-header', 'background-color', 0.4 ),
  297. array( '.archive article .entry-header:hover,
  298. .archive article:nth-of-type(even) .entry-header:hover,
  299. .blog article .entry-header:hover,
  300. .blog article:nth-of-type(even) .entry-header:hover,
  301. .search-results article .entry-header:hover,
  302. .search-results article:nth-of-type(even) .entry-header:hover', 'background-color', 0.75 ),
  303. array( '.comments-area,
  304. .entry-author,
  305. .entry-links,
  306. .page-header,
  307. .post-navigation,
  308. .respond,
  309. .post-nav-wrapper,
  310. .site-footer,
  311. .widget-area,
  312. .main-navigation.toggled ul,
  313. #wp-calendar thead th', 'border-top-color', 0.15 ),
  314. array( '.comments-title,
  315. .error-404 .page-header,
  316. .no-results .page-header,
  317. .page.no-featured-image .site-header,
  318. .search-no-results .page-header,
  319. .single.no-featured-image .site-header,
  320. #wp-calendar thead th,
  321. #wp-calendar tbody', 'border-bottom-color', 0.15 ),
  322. array( '.contact-info-area', 'border-color', 0.15 ),
  323. // Woocommerce
  324. array( '.woocommerce-page .site-header-cart ul ul a,
  325. .woocommerce-products-header,
  326. .woocommerce-page table.shop_table_responsive,
  327. .woocommerce-page table.shop_table_responsive thead th,
  328. .woocommerce-page table.shop_table_responsive tbody tr,
  329. .woocommerce-cart .cart_totals .shop_table tr,
  330. .woocommerce-checkout .shop_table thead,
  331. .woocommerce-checkout .shop_table tbody,
  332. .woocommerce-checkout .shop_table tfoot,
  333. .single-product div.product .cart,
  334. .single-product div.product .product_meta,
  335. .single-product div.product .commentlist .comment,
  336. .woocommerce-tabs ul.tabs,
  337. .woocommerce-tabs ul.tabs li,
  338. .woocommerce-page .upsells.products,
  339. .woocommerce-page .related.products', 'border-color', 0.15 ),
  340. ) );
  341. // Green (Woocommerce)
  342. add_color_rule( 'extra', '#0f834d', array(
  343. // Woocommerce
  344. array( '.woocommerce-page .stock.in-stock,
  345. .woocommerce-password-strength.strong', 'color', 'bg' ),
  346. array( '.woocommerce-page .form-row.woocommerce-validated input.input-text,
  347. .woocommerce-page .form-row.woocommerce-validated .select2-selection', 'border-color', 'bg' ),
  348. array( '.woocommerce-message,
  349. .woocommerce-info,
  350. .woocommerce-error,
  351. .woocommerce-noreviews,
  352. p.no-comments', 'border-color', 'bg' ),
  353. ) );
  354. // Red (Woocommerce)
  355. add_color_rule( 'extra', '#e2401c', array(
  356. // Woocommerce
  357. array( '.woocommerce-page .stock.out-of-stock,
  358. .woocommerce-password-strength.short,
  359. .woocommerce-password-strength.bad,
  360. .woocommerce-page .required', 'color', 'bg' ),
  361. array( '.form-row.woocommerce-invalid input.input-text', 'border-color', 'bg' ),
  362. array( '.woocommerce-error,
  363. ul.woocommerce-error li', 'background-color' ),
  364. ) );
  365. // Blue (Woocommerce)
  366. add_color_rule( 'extra', '#e2401c', array(
  367. // Woocommerce
  368. array( '.woocommerce-password-strength.good', 'color', 'bg' ),
  369. array( '.widget_price_filter .ui-slider .ui-slider-handle,
  370. .widget_price_filter .ui-slider .ui-slider-range', 'background-color', 'bg' ),
  371. ) );
  372. function radcliffe_2_extra_css() { ?>
  373. .style-pack-vintage .comment-wrapper,
  374. .style-pack-vintage .pingback,
  375. .style-pack-vintage .trackback {
  376. background-color: transparent;
  377. }
  378. .style-pack-colorful.archive article:nth-of-type(3n+1) .entry-header,
  379. .style-pack-colorful.blog article:nth-of-type(3n+1) .entry-header,
  380. .style-pack-colorful.search-results article:nth-of-type(3n+1) .entry-header,
  381. .style-pack-colorful.archive article:nth-of-type(3n+2) .entry-header,
  382. .style-pack-colorful.blog article:nth-of-type(3n+2) .entry-header,
  383. .style-pack-colorful.search-results article:nth-of-type(3n+2) .entry-header,
  384. .style-pack-colorful.archive article:nth-of-type(3n+3) .entry-header,
  385. .style-pack-colorful.blog article:nth-of-type(3n+3) .entry-header,
  386. .style-pack-colorful.search-results article:nth-of-type(3n+3) .entry-header {
  387. background-color: rgba( 0, 0, 0, 0.35 );
  388. }
  389. .style-pack-colorful.archive article:nth-of-type(3n+1) .entry-header:hover,
  390. .style-pack-colorful.blog article:nth-of-type(3n+1) .entry-header:hover,
  391. .style-pack-colorful.search-results article:nth-of-type(3n+1) .entry-header:hover,
  392. .style-pack-colorful.archive article:nth-of-type(3n+2) .entry-header:hover,
  393. .style-pack-colorful.blog article:nth-of-type(3n+2) .entry-header:hover,
  394. .style-pack-colorful.search-results article:nth-of-type(3n+2) .entry-header:hover,
  395. .style-pack-colorful.archive article:nth-of-type(3n+3) .entry-header:hover,
  396. .style-pack-colorful.blog article:nth-of-type(3n+3) .entry-header:hover,
  397. .style-pack-colorful.search-results article:nth-of-type(3n+3) .entry-header:hover {
  398. background-color: rgba( 0, 0, 0, 0.75 );
  399. }
  400. .style-pack-colorful .hero-area-button .button {
  401. background-color: #fff;
  402. box-shadow: 0 5px 0 0 #ccc;
  403. }
  404. .style-pack-colorful .hero-area-button .button:hover {
  405. background-color: #fff;
  406. box-shadow: 0 10px 0 0 #ccc;
  407. }
  408. .style-pack-colorful .hero-area-button .button:focus,
  409. .style-pack-colorful .hero-area-button .button:active {
  410. background-color: #fff;
  411. box-shadow: 0 0 0 0 #ccc;
  412. }
  413. @media screen and (max-width: 768px) {
  414. .site-header .main-navigation.toggled ul ul {
  415. background-color: transparent;
  416. border-top: 0;
  417. }
  418. .site-header .main-navigation li.current-menu-item > a {
  419. background-color: transparent;
  420. color: #666;
  421. }
  422. .site-header .main-navigation li.current-menu-item > a {
  423. color: inherit;
  424. }
  425. .style-pack-vintage.single-post article,
  426. .style-pack-vintage.page article {
  427. background-color: none;
  428. border: 0;
  429. }
  430. }
  431. @media screen and (min-width: 768px) {
  432. .main-navigation .sub-menu a,
  433. .main-navigation .sub-menu a:visited {
  434. color: #fff;
  435. }
  436. }
  437. <?php }
  438. add_theme_support( 'custom_colors_extra_css', 'radcliffe_2_extra_css' );
  439. //Additional palettes
  440. add_color_palette( array(
  441. '#ffffff',
  442. '',
  443. '#e2632a',
  444. ), 'White and Orange' );
  445. add_color_palette( array(
  446. '#ffffff',
  447. '',
  448. '#20a6e8',
  449. ), 'White and Blue' );
  450. add_color_palette( array(
  451. '#e5e5e5',
  452. '',
  453. '#3d348b',
  454. ), 'Grey and Purple' );
  455. add_color_palette( array(
  456. '#3a3a3a',
  457. '',
  458. '#e7c52b',
  459. ), 'Dark Grey and Yellow' );
  460. add_color_palette( array(
  461. '#303030',
  462. '',
  463. '#6fb3aa',
  464. ), 'Dark Grey and Green' );
  465. add_color_palette( array(
  466. '#413e4a',
  467. '',
  468. '#a86b96',
  469. ), 'Dark Purple and Pink' );