From 9e3acb88484c1f752a1cbeb62abefa040ee8dc22 Mon Sep 17 00:00:00 2001 From: Jonathan Desrosiers Date: Tue, 18 Dec 2018 22:50:33 +0000 Subject: [PATCH] Bundled Themes: Fix button block custom colors on front end. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Simplify some of the button block’s CSS selectors in the theme, to make sure the default colors don’t override the custom colors on the front end. This fix is applied to Twenty Sixteen, Twenty Fifteen and Twenty Fourteen. Props laurelfulford. Merges [44197-44198] and [44200] into trunk. Fixes #45428, #45429. git-svn-id: https://develop.svn.wordpress.org/trunk@44306 602fd350-edb4-49c9-b593-d223f7449a82 --- .../themes/twentyfifteen/css/blocks.css | 13 ++-- .../themes/twentyfourteen/css/blocks.css | 16 +++-- .../themes/twentysixteen/css/blocks.css | 60 ++++++++++--------- 3 files changed, 50 insertions(+), 39 deletions(-) diff --git a/src/wp-content/themes/twentyfifteen/css/blocks.css b/src/wp-content/themes/twentyfifteen/css/blocks.css index d3ede1a14d..9c822769ca 100644 --- a/src/wp-content/themes/twentyfifteen/css/blocks.css +++ b/src/wp-content/themes/twentyfifteen/css/blocks.css @@ -384,10 +384,8 @@ p.has-drop-cap:not(:focus)::first-letter { /* Button */ .wp-block-button .wp-block-button__link { - background-color: #333; border: 0; border-radius: 0; - color: #fff; cursor: pointer; font-family: "Noto Sans", sans-serif; font-size: 12px; @@ -399,11 +397,16 @@ p.has-drop-cap:not(:focus)::first-letter { vertical-align: baseline; } -.wp-block-button .wp-block-button__link:hover, -.wp-block-button .wp-block-button__link:focus { +.wp-block-button__link { + background-color: #333; + color: #fff; +} + +.wp-block-button__link:hover, +.wp-block-button__link:focus { background-color: #707070; background-color: rgba(51, 51, 51, 0.7); - outline: 0; + color: #fff; } @media screen and (min-width: 46.25em) { diff --git a/src/wp-content/themes/twentyfourteen/css/blocks.css b/src/wp-content/themes/twentyfourteen/css/blocks.css index a1b6cb5f91..e3c5360f59 100644 --- a/src/wp-content/themes/twentyfourteen/css/blocks.css +++ b/src/wp-content/themes/twentyfourteen/css/blocks.css @@ -221,10 +221,8 @@ p.has-drop-cap:not(:focus)::first-letter { /* Buttons */ .wp-block-button .wp-block-button__link { - background-color: #24890d; border: 0; border-radius: 2px; - color: #fff; font-size: 12px; font-weight: 700; line-height: 15px; @@ -233,12 +231,18 @@ p.has-drop-cap:not(:focus)::first-letter { vertical-align: bottom; } -.wp-block-button .wp-block-button__link:hover, -.wp-block-button .wp-block-button__link:focus { - background-color: #41a62a; +.wp-block-button__link { + background-color: #24890d; + color: #fff; } -.wp-block-button .wp-block-button__link:active { +.wp-block-button__link:hover, +.wp-block-button__link:focus { + background-color: #41a62a; + color: #fff; +} + +.wp-block-button__link:active { background-color: #55d737; } diff --git a/src/wp-content/themes/twentysixteen/css/blocks.css b/src/wp-content/themes/twentysixteen/css/blocks.css index 093109a4de..2013cc8019 100644 --- a/src/wp-content/themes/twentysixteen/css/blocks.css +++ b/src/wp-content/themes/twentysixteen/css/blocks.css @@ -232,10 +232,8 @@ p.has-drop-cap:not(:focus)::first-letter { /* Buttons */ .wp-block-button .wp-block-button__link { - background: #1a1a1a; border: 0; border-radius: 2px; - color: #fff; font-family: Montserrat, "Helvetica Neue", sans-serif; font-weight: 700; letter-spacing: 0.046875em; @@ -244,9 +242,15 @@ p.has-drop-cap:not(:focus)::first-letter { text-transform: uppercase; } -.wp-block-button .wp-block-button__link:hover, -.wp-block-button .wp-block-button__link:focus { +.entry-content .wp-block-button__link { + background: #1a1a1a; + color: #fff; +} + +.entry-content .wp-block-button__link:hover, +.entry-content .wp-block-button__link:focus { background: #007acc; + color: #fff; } .wp-block-button .wp-block-button__link:focus { @@ -322,98 +326,98 @@ hr.wp-block-separator { 6.0 Blocks - Colors --------------------------------------------------------------*/ -.has-dark-gray-color { +.entry-content .has-dark-gray-color { color: #1a1a1a; } -.has-dark-gray-background-color { +.entry-content .has-dark-gray-background-color { background-color: #1a1a1a; } -.has-medium-gray-color { +.entry-content .has-medium-gray-color { color: #686868; } -.has-medium-gray-background-color { +.entry-content .has-medium-gray-background-color { background-color: #686868; } -.has-light-gray-color { +.entry-content .has-light-gray-color { color: #e5e5e5; } -.has-light-gray-background-color { +.entry-content .has-light-gray-background-color { background-color: #e5e5e5; } -.has-white-color { +.entry-content .has-white-color { color: #fff; } -.has-white-background-color { +.entry-content .has-white-background-color { background-color: #fff; } -.has-blue-gray-color { +.entry-content .has-blue-gray-color { color: #4d545c; } -.has-blue-gray-background-color { +.entry-content .has-blue-gray-background-color { background-color: #4d545c; } -.has-bright-blue-color { +.entry-content .has-bright-blue-color { color: #007acc; } -.has-bright-blue-background-color { +.entry-content .has-bright-blue-background-color { background-color: #007acc; } -.has-light-blue-color { +.entry-content .has-light-blue-color { color: #9adffd; } -.has-light-blue-background-color { +.entry-content .has-light-blue-background-color { background-color: #9adffd; } -.has-dark-brown-color { +.entry-content .has-dark-brown-color { color: #402b30; } -.has-dark-brown-background-color { +.entry-content .has-dark-brown-background-color { background-color: #402b30; } -.has-medium-brown-color { +.entry-content .has-medium-brown-color { color: #774e24; } -.has-medium-brown-background-color { +.entry-content .has-medium-brown-background-color { background-color: #774e24; } -.has-dark-red-color { +.entry-content .has-dark-red-color { color: #640c1f; } -.has-dark-red-background-color { +.entry-content .has-dark-red-background-color { background-color: #640c1f; } -.has-bright-red-color { +.entry-content .has-bright-red-color { color: #ff675f; } -.has-bright-red-background-color { +.entry-content .has-bright-red-background-color { background-color: #ff675f; } -.has-yellow-color { +.entry-content .has-yellow-color { color: #ffef8e; } -.has-yellow-background-color { +.entry-content .has-yellow-background-color { background-color: #ffef8e; }