<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[49987] trunk/src/wp-content/themes/twentytwentyone: Twenty Twenty-One: Clean up Button styles.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/49987">49987</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/49987","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>SergeyBiryukov</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2021-01-20 05:49:28 +0000 (Wed, 20 Jan 2021)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Twenty Twenty-One: Clean up Button styles.
This change restructures the Button element styles for better a11y and expected color behaviors. Here what has changed:
- The `button-style()` mixin is now the ''single source or truth'' for how Button should look site-wide.
- Button Block, File Block, and Search form Blocks all rely on this one mixin.
- The same styles is also applied to the `<button>` element which appears in widgets, the 404 search form and comments form.
- Improves expected button styles for various conditions and contexts as follows:
- User color palette selections for Buttons are retained regardless of a parent block's color settings or dark-mode.
- Supports both Default/Filled styles and Outline styles.
- More consistent `:hover` and `:active` styles.
- `:focus` styles are now always visible and legible.
- Adds a `--local-color` color variable to scope color relationships to nested blocks.
- Reduces selectors in `style.css` output.
- 1:1 experience between editor and front end button styles.
- Properly supports Dark-mode.
Props allancole, poena, scruffian, megphillips91.
Fixes <a href="https://core.trac.wordpress.org/ticket/51927">#51927</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetscssieeditorcss">trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetscssiecss">trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetscssstyleeditorcss">trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetssass02toolsmixinsscss">trunk/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetssass05blocksbutton_editorscss">trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetssass05blocksbutton_stylescss">trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetssass05blocksfile_editorscss">trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetssass05blocksfile_stylescss">trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetssass05blockssearch_editorscss">trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetssass05blockssearch_stylescss">trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetssass06componentswidgetsscss">trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetssass07utilitiescolorpalettescss">trunk/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyonestylertlcss">trunk/src/wp-content/themes/twentytwentyone/style-rtl.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyonestylecss">trunk/src/wp-content/themes/twentytwentyone/style.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpcontentthemestwentytwentyoneassetscssieeditorcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -384,33 +384,50 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button__link {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: 1.5;
- color: #d1e4dd;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: 3px solid transparent;
+ border-radius: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: 500;
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1.25rem;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: #39414d;
- border-radius: 0;
- border: 3px solid #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: 1.5;
+ padding: 15px 30px;
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 15px 30px;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button__link:focus {
- background: transparent;
- outline-offset: -6px;
- outline: 2px dotted currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: #d1e4dd;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button__link:focus {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button__link:focus:not(.has-background) {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.wp-block-button__link:hover,
+.wp-block-button__link:active {
+ background-color: transparent;
+ border-color: currentColor;
+ color: inherit;
+}
+
+.wp-block-button__link:focus {
+ outline-offset: -6px;
+ outline: 2px dotted currentColor;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button__link:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: rgba(255, 255, 255, 0.5);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: rgba(255, 255, 255, 0.5);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -433,107 +450,95 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 30px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
- color: #39414d !important;
- background: transparent !important;
- border-color: #39414d;
-}
-
-.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
- color: #39414d !important;
- background: transparent !important;
- border-color: #39414d;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link {
- color: #39414d;
- background: transparent;
- border: 3px solid currentColor;
- padding: 15px 30px;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link:active {
- background-color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #d1e4dd;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-color: #39414d;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:hover {
- background-color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #d1e4dd;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-color: #39414d;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background {
- border-color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background:active {
- background-color: #39414d !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background:hover {
- background-color: #39414d !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
- color: #28303d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
+ border-color: currentColor !important;
+ background-color: transparent !important;
+ color: inherit !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color) {
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
+ outline-offset: inherit;
+ outline: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color) {
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
+ border-color: currentColor;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
- color: #fff;
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color {
- color: #28303d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
+ color: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color {
- color: #28303d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color {
- color: #28303d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:hover {
+ background-color: #28303d !important;
+ border-color: transparent !important;
+ color: #d1e4dd !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color {
- color: #28303d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:active {
+ background-color: #28303d !important;
+ border-color: transparent !important;
+ color: #d1e4dd !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-yellow-background-color {
- color: #28303d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover {
+ background-color: #28303d !important;
+ color: #d1e4dd !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
+ background-color: #28303d !important;
+ color: #d1e4dd !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #d1e4dd !important;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-color: #39414d;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #d1e4dd !important;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-color: #39414d;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:focus {
+ outline-offset: inherit;
+ outline: inherit;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button.is-style-squared {
</span><span class="cx" style="display: block; padding: 0 10px"> border-radius: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -878,34 +883,51 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: 1.5;
- color: #d1e4dd;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: 3px solid transparent;
+ border-radius: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: 500;
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1.25rem;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: #39414d;
- border-radius: 0;
- border: 3px solid #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: 1.5;
+ padding: 15px 30px;
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 15px 30px;
</del><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file .wp-block-file__button:focus {
- background: transparent;
- outline-offset: -6px;
- outline: 2px dotted currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+ color: #d1e4dd;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-file .wp-block-file__button:focus {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file .wp-block-file__button:focus:not(.has-background) {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.wp-block-file .wp-block-file__button:hover,
+.wp-block-file .wp-block-file__button:active {
+ background-color: transparent;
+ border-color: currentColor;
+ color: inherit;
+}
+
+.wp-block-file .wp-block-file__button:focus {
+ outline-offset: -6px;
+ outline: 2px dotted currentColor;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: rgba(255, 255, 255, 0.5);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: rgba(255, 255, 255, 0.5);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -912,9 +934,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: #39414d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file .wp-block-file__button:hover {
- color: #39414d;
- background: transparent;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file .wp-block-file__button:focus {
+ outline-offset: inherit;
+ outline: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-gallery figcaption {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2245,6 +2267,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+ border: 3px solid #39414d;
+ border-radius: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ font-size: 1.125rem;
+ line-height: 1.7;
+ max-width: inherit;
+ margin-right: -3px;
+ padding: 10px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__input {
</span><span class="cx" style="display: block; padding: 0 10px"> border: 3px solid #39414d;
</span><span class="cx" style="display: block; padding: 0 10px"> border-radius: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2256,82 +2289,69 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search .wp-block-search__input {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
</ins><span class="cx" style="display: block; padding: 0 10px"> background: rgba(255, 255, 255, 0.9);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input {
- border-color: #28303d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search .wp-block-search__input {
+ background: rgba(255, 255, 255, 0.9);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input {
- border-color: #28303d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+ border-color: #28303d !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input {
- border-color: #28303d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search .wp-block-search__input {
+ border-color: #28303d !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input {
- border-color: #28303d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button {
+ border: 3px solid transparent;
+ border-radius: 0;
+ cursor: pointer;
+ display: block;
+ font-weight: 500;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ font-size: 1.25rem;
+ line-height: 1.5;
+ padding: 15px 30px;
+ text-decoration: none;
+ box-shadow: none;
+ margin-left: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input {
- border-color: #28303d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
+ color: #d1e4dd;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input {
- border-color: #28303d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__input {
- border-color: #28303d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search .wp-block-search__input {
- border-color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input {
- border-color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
- border-color: #fff;
-}
-
-.wp-block-search .wp-block-search__button {
- line-height: 1.5;
- color: #d1e4dd;
- cursor: pointer;
- font-weight: 500;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
- font-size: 1.25rem;
- background-color: #39414d;
- border-radius: 0;
- border: 3px solid #39414d;
- text-decoration: none;
- padding: 15px 30px;
- box-shadow: none;
- margin-left: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button:active {
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: transparent;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-color: currentColor;
+ color: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: transparent;
</del><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search .wp-block-search__button:focus {
- color: #39414d;
-}
-
-.wp-block-search .wp-block-search__button:focus:not(.has-background) {
- color: #39414d;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: rgba(255, 255, 255, 0.5);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: rgba(255, 255, 255, 0.5);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2338,13 +2358,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: #39414d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search .wp-block-search__button:hover {
- color: #d1e4dd;
- background-color: #39414d;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button.has-icon {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 30px 15px;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button.has-icon svg {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2352,265 +2368,67 @@
</span><span class="cx" style="display: block; padding: 0 10px"> height: 40px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search .wp-block-search__button {
- color: #fff;
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search .wp-block-search__button:hover {
+ background-color: #d1e4dd !important;
+ color: #28303d !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button {
- color: #fff;
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search .wp-block-search__button:active {
+ background-color: #d1e4dd !important;
+ color: #28303d !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-black-background-color .wp-block-search .wp-block-search__button {
- color: #fff;
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-search .wp-block-search__button:hover {
+ color: #28303d !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #39414d;
- border-color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-search .wp-block-search__button:active {
+ color: #28303d !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #39414d;
- border-color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button:focus {
+ outline-offset: inherit;
+ outline: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #39414d;
- border-color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+ padding: 3px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover {
- color: #d1e4dd;
- background-color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
+ border: none;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover {
- color: #d1e4dd;
- background-color: #39414d;
-}
-
-.is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
- color: #d1e4dd;
- background-color: #39414d;
-}
-
-.has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #39414d;
- border-color: #39414d;
-}
-
-.has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #39414d;
- border-color: #39414d;
-}
-
-.has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #39414d;
- border-color: #39414d;
-}
-
-.has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #39414d;
- border-color: #39414d;
-}
-
-.has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #39414d;
- border-color: #39414d;
-}
-
-.has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #39414d;
- border-color: #39414d;
-}
-
-.has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #39414d;
- border-color: #39414d;
-}
-
-.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-color: currentColor;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-color: currentColor;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-color: currentColor;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-color: currentColor;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button {
- color: #28303d;
- border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button {
- color: #28303d;
- border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button {
- color: #28303d;
- border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover {
+ background-color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #fff;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: #d1e4dd;
- border-color: #d1e4dd;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
+ background-color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #fff;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: #d1e4dd;
- border-color: #d1e4dd;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #d1e4dd;
- border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #d1e4dd;
- border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #d1e4dd;
- border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #d1e4dd;
- border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
- color: #fff;
- background-color: #d1e4dd;
- border-color: #d1e4dd;
-}
-
-.wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-white-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-green-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-blue-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-purple-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-red-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-orange-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-yellow-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input {
- border: none;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 15px 30px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
- color: #d1e4dd;
- border-color: currentColor;
-}
-
-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
- color: #fff;
- background-color: #d1e4dd;
- border-color: #d1e4dd;
-}
-
-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
- color: #39414d;
- border-color: currentColor;
-}
-
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
- color: #39414d;
- border-color: currentColor;
-}
-
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
- color: #39414d;
- border-color: currentColor;
-}
-
-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
- color: #fff;
- background-color: #39414d;
- border-color: #39414d;
-}
-
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
- color: #fff;
- background-color: #39414d;
- border-color: #39414d;
-}
-
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
- color: #fff;
- background-color: #39414d;
- border-color: #39414d;
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
- color: #d1e4dd;
- border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
- color: #d1e4dd;
- border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
- color: #d1e4dd;
- border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
- color: #fff;
- background-color: #d1e4dd;
- border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
- color: #fff;
- background-color: #d1e4dd;
- border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
- color: #fff;
- background-color: #d1e4dd;
- border-color: #d1e4dd;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block[data-align=center] > * {
</span><span class="cx" style="display: block; padding: 0 10px"> text-align: center;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3260,42 +3078,82 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: #000;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-black-color[class] [class*=__inner-container] {
+ color: #000;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-gray-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #39414d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-gray-color[class] [class*=__inner-container] {
+ color: #39414d;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-dark-gray-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-dark-gray-color[class] [class*=__inner-container] {
+ color: #28303d;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-green-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #d1e4dd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-green-color[class] [class*=__inner-container] {
+ color: #d1e4dd;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-blue-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #d1dfe4;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-blue-color[class] [class*=__inner-container] {
+ color: #d1dfe4;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #d1d1e4;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-purple-color[class] [class*=__inner-container] {
+ color: #d1d1e4;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-red-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #e4d1d1;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-red-color[class] [class*=__inner-container] {
+ color: #e4d1d1;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-orange-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #e4dad1;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-orange-color[class] [class*=__inner-container] {
+ color: #e4dad1;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-yellow-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #eeeadd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-yellow-color[class] [class*=__inner-container] {
+ color: #eeeadd;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-white-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-white-color[class] [class*=__inner-container] {
+ color: #fff;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-background a,
</span><span class="cx" style="display: block; padding: 0 10px"> .has-background p,
</span><span class="cx" style="display: block; padding: 0 10px"> .has-background h1,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3311,8 +3169,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #000;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-gray-background-color[class] {
- background-color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-black-background-color[class] [class*=__inner-container] {
+ background-color: #000;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-dark-gray-background-color[class] {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3319,74 +3177,122 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-dark-gray-background-color[class] [class*=__inner-container] {
+ background-color: #28303d;
+}
+
+.has-gray-background-color[class] {
+ background-color: #39414d;
+}
+
+.has-gray-background-color[class] [class*=__inner-container] {
+ background-color: #39414d;
+}
+
+.has-light-gray-background-color[class] {
+ background-color: #f0f0f0;
+}
+
+.has-light-gray-background-color[class] [class*=__inner-container] {
+ background-color: #f0f0f0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-green-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #d1e4dd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-green-background-color[class] [class*=__inner-container] {
+ background-color: #d1e4dd;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-blue-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #d1dfe4;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-blue-background-color[class] [class*=__inner-container] {
+ background-color: #d1dfe4;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #d1d1e4;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-purple-background-color[class] [class*=__inner-container] {
+ background-color: #d1d1e4;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-red-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #e4d1d1;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-red-background-color[class] [class*=__inner-container] {
+ background-color: #e4d1d1;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-orange-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #e4dad1;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-orange-background-color[class] [class*=__inner-container] {
+ background-color: #e4dad1;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-yellow-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #eeeadd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-yellow-background-color[class] [class*=__inner-container] {
+ background-color: #eeeadd;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-white-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-black-background-color[class] {
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-white-background-color[class] [class*=__inner-container] {
+ background-color: #fff;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-gray-background-color[class] {
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container] {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-dark-gray-background-color[class] {
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container] {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-green-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-blue-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-purple-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-red-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-orange-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-yellow-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-white-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+ color: #28303d;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-to-yellow-gradient-background {
</span><span class="cx" style="display: block; padding: 0 10px"> background: linear-gradient(160deg, #d1d1e4, #eeeadd);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetscssiecss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2244,299 +2244,346 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Button
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> .site .button {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: 1.5;
- color: #d1e4dd;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: 3px solid transparent;
+ border-radius: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: 500;
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1.25rem;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: #39414d;
- border-radius: 0;
- border: 3px solid #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: 1.5;
+ padding: 15px 30px;
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 15px 30px;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> input[type=submit] {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: 1.5;
- color: #d1e4dd;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: 3px solid transparent;
+ border-radius: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: 500;
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1.25rem;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: #39414d;
- border-radius: 0;
- border: 3px solid #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: 1.5;
+ padding: 15px 30px;
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 15px 30px;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> input[type=reset] {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: 1.5;
- color: #d1e4dd;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: 3px solid transparent;
+ border-radius: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: 500;
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1.25rem;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: #39414d;
- border-radius: 0;
- border: 3px solid #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: 1.5;
+ padding: 15px 30px;
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 15px 30px;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search__button {
- line-height: 1.5;
- color: #d1e4dd;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button {
+ border: 3px solid transparent;
+ border-radius: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: 500;
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1.25rem;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: #39414d;
- border-radius: 0;
- border: 3px solid #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: 1.5;
+ padding: 15px 30px;
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 15px 30px;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button .wp-block-button__link {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: 3px solid transparent;
+ border-radius: 0;
+ cursor: pointer;
+ display: block;
+ font-weight: 500;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ font-size: 1.25rem;
</ins><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.5;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #d1e4dd;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 15px 30px;
+ text-decoration: none;
+}
+
+.wp-block-file a.wp-block-file__button {
+ border: 3px solid transparent;
+ border-radius: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: 500;
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1.25rem;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: #39414d;
- border-radius: 0;
- border: 3px solid #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: 1.5;
+ padding: 15px 30px;
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 15px 30px;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button:focus,
-input[type=submit]:focus,
-input[type=reset]:focus,
-.wp-block-search__button:focus,
-.wp-block-button .wp-block-button__link:focus {
- background: transparent;
- outline-offset: -6px;
- outline: 2px dotted currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site .button:not(:hover):not(:active):not(.has-text-color) {
+ color: #d1e4dd;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .site .button:focus {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+input[type=submit]:not(:hover):not(:active):not(.has-text-color) {
+ color: #d1e4dd;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme input[type=submit]:focus {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+input[type=reset]:not(:hover):not(:active):not(.has-text-color) {
+ color: #d1e4dd;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme input[type=reset]:focus {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
+ color: #d1e4dd;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search__button:focus {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: #d1e4dd;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button .wp-block-button__link:focus {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+ color: #d1e4dd;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button:focus:not(.has-background) {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .site .button:not(:hover):not(:active):not(.has-text-color) {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-input[type=submit]:focus:not(.has-background) {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color) {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-input[type=reset]:focus:not(.has-background) {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color) {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search__button:focus:not(.has-background) {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button .wp-block-button__link:focus:not(.has-background) {
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button:disabled {
- background-color: rgba(255, 255, 255, 0.5);
- border-color: rgba(255, 255, 255, 0.5);
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-input[type=submit]:disabled {
- background-color: rgba(255, 255, 255, 0.5);
- border-color: rgba(255, 255, 255, 0.5);
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-input[type=reset]:disabled {
- background-color: rgba(255, 255, 255, 0.5);
- border-color: rgba(255, 255, 255, 0.5);
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search__button:disabled {
- background-color: rgba(255, 255, 255, 0.5);
- border-color: rgba(255, 255, 255, 0.5);
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button .wp-block-button__link:disabled {
- background-color: rgba(255, 255, 255, 0.5);
- border-color: rgba(255, 255, 255, 0.5);
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button:active {
- color: #39414d;
- background-color: #d1e4dd;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-input[type=submit]:active {
- color: #39414d;
- background-color: #d1e4dd;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-input[type=reset]:active {
- color: #39414d;
- background-color: #d1e4dd;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site .button:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search .wp-block-search__button:active {
- color: #39414d;
- background-color: #d1e4dd;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+input[type=submit]:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file .wp-block-file__button:active {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+input[type=reset]:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.has-background .site .button:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
+}
+
+.site .button:hover,
+.site .button:active,
+input[type=submit]:hover,
+input[type=submit]:active,
+input[type=reset]:hover,
+input[type=reset]:active,
+.wp-block-search .wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button:active,
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:active,
+.wp-block-file a.wp-block-file__button:hover,
+.wp-block-file a.wp-block-file__button:active {
+ background-color: transparent;
+ border-color: currentColor;
+ color: inherit;
+}
+
+.site .button:focus,
+input[type=submit]:focus,
+input[type=reset]:focus,
+.wp-block-search .wp-block-search__button:focus,
+.wp-block-button .wp-block-button__link:focus,
+.wp-block-file a.wp-block-file__button:focus {
+ outline-offset: -6px;
+ outline: 2px dotted currentColor;
+}
+
+.site .button:disabled {
+ background-color: rgba(255, 255, 255, 0.5);
+ border-color: rgba(255, 255, 255, 0.5);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #39414d;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: #d1e4dd;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+input[type=submit]:disabled {
+ background-color: rgba(255, 255, 255, 0.5);
+ border-color: rgba(255, 255, 255, 0.5);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #39414d;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: transparent;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-input[type=submit]:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+input[type=reset]:disabled {
+ background-color: rgba(255, 255, 255, 0.5);
+ border-color: rgba(255, 255, 255, 0.5);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #39414d;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: transparent;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-input[type=reset]:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button:disabled {
+ background-color: rgba(255, 255, 255, 0.5);
+ border-color: rgba(255, 255, 255, 0.5);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #39414d;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: transparent;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search .wp-block-search__button:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button .wp-block-button__link:disabled {
+ background-color: rgba(255, 255, 255, 0.5);
+ border-color: rgba(255, 255, 255, 0.5);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #39414d;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: transparent;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file .wp-block-file__button:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file a.wp-block-file__button:disabled {
+ background-color: rgba(255, 255, 255, 0.5);
+ border-color: rgba(255, 255, 255, 0.5);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #39414d;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: transparent;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Block Options
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
- color: #39414d !important;
- background: transparent !important;
- border-color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: #d1e4dd;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
- color: #39414d !important;
- background: transparent !important;
- border-color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: #d1e4dd;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
- color: #d1e4dd !important;
- background: #39414d !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link {
- padding: 15px 30px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
- background: transparent;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
- background: transparent;
- color: #39414d;
- border-color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
+ border-color: currentColor !important;
+ background-color: transparent !important;
+ color: inherit !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
- color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
+ border-color: currentColor;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color) {
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color) {
- color: #fff;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
- color: #fff;
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color {
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
+ color: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color {
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color {
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:hover {
+ border-color: transparent !important;
+ background-color: #28303d !important;
+ color: #d1e4dd !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color,
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-text-color {
- border-color: currentColor;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button.is-style-outline .wp-block-button__link:active {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-color: transparent !important;
+ background-color: #28303d !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #d1e4dd !important;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: #39414d !important;
- border-color: #39414d;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover {
+ background-color: #28303d !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #d1e4dd !important;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: #39414d !important;
- border-color: #39414d;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color {
- border-color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
+ background-color: #28303d !important;
+ color: #d1e4dd !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color {
- border-color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
+ color: #d1e4dd !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:focus {
- color: #39414d !important;
- background: transparent !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
+ color: #d1e4dd !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button .is-style-squared .wp-block-button__link {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2991,64 +3038,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border: 3px solid #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file a.wp-block-file__button:active {
- color: #39414d;
- opacity: inherit;
-}
-
-.wp-block-file a.wp-block-file__button:focus {
- color: #39414d;
- opacity: inherit;
-}
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file a.wp-block-file__button:active,
+.wp-block-file a.wp-block-file__button:focus,
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file a.wp-block-file__button:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #39414d;
</del><span class="cx" style="display: block; padding: 0 10px"> opacity: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file a.wp-block-file__button:visited {
- color: #d1e4dd;
-}
-
-.wp-block-file a.wp-block-file__button:visited:hover {
- color: #39414d;
-}
-
-.wp-block-file .wp-block-file__button {
- line-height: 1.5;
- color: #d1e4dd;
- cursor: pointer;
- font-weight: 500;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
- font-size: 1.25rem;
- background-color: #39414d;
- border-radius: 0;
- border: 3px solid #39414d;
- text-decoration: none;
- padding: 15px 30px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file a.wp-block-file__button {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file .wp-block-file__button:focus {
- background: transparent;
- outline-offset: -6px;
- outline: 2px dotted currentColor;
-}
-
-.is-dark-theme .wp-block-file .wp-block-file__button:focus {
- color: #39414d;
-}
-
-.wp-block-file .wp-block-file__button:focus:not(.has-background) {
- color: #39414d;
-}
-
-.wp-block-file .wp-block-file__button:disabled {
- background-color: rgba(255, 255, 255, 0.5);
- border-color: rgba(255, 255, 255, 0.5);
- color: #39414d;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-gallery {
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4557,37 +4556,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: #39414d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background .wp-block-search .wp-block-search__input,
-[class*=background-color] .wp-block-search .wp-block-search__input,
-[style*=background-color] .wp-block-search .wp-block-search__input,
-.wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search .wp-block-search__input {
+ border-color: #28303d !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search .wp-block-search__input {
- border-color: #fff;
-}
-
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input {
- border-color: #fff;
-}
-
-.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
- border-color: #fff;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search button.wp-block-search__button {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: transparent;
- color: #39414d;
</del><span class="cx" style="display: block; padding: 0 10px"> line-height: 1;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search button.wp-block-search__button:hover {
- background-color: #39414d;
- color: #d1e4dd;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search button.wp-block-search__button.has-icon {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 6px 15px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4598,234 +4575,68 @@
</span><span class="cx" style="display: block; padding: 0 10px"> fill: currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button {
- color: #fff;
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search button.wp-block-search__button:hover {
+ background-color: #d1e4dd !important;
+ color: #28303d !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button {
- color: #fff;
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search button.wp-block-search__button:active {
+ background-color: #d1e4dd !important;
+ color: #28303d !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-black-background-color .wp-block-search button.wp-block-search__button {
- color: #fff;
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-search button.wp-block-search__button:hover {
+ color: #28303d !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: #39414d;
- border-color: #fff;
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-search button.wp-block-search__button:active {
+ color: #28303d !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: #39414d;
- border-color: #fff;
- color: #fff;
-}
-
-.has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: #39414d;
- border-color: #fff;
- color: #fff;
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover {
- color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover {
- color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
- color: #d1e4dd;
-}
-
-.has-background.has-white-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-green-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-red-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button {
- border-color: currentColor;
- color: currentColor;
-}
-
-.has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: #39414d;
- border-color: #39414d;
- color: #fff;
-}
-
-.has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: #39414d;
- border-color: #39414d;
- color: #fff;
-}
-
-.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: #39414d;
- border-color: #39414d;
- color: #fff;
-}
-
-.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: #39414d;
- border-color: #39414d;
- color: #fff;
-}
-
-.has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: #39414d;
- border-color: #39414d;
- color: #fff;
-}
-
-.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: #39414d;
- border-color: #39414d;
- color: #fff;
-}
-
-.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: #39414d;
- border-color: #39414d;
- color: #fff;
-}
-
-.is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover {
- border-color: #d1e4dd;
- background-color: #d1e4dd;
- color: #39414d;
-}
-
-.is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover {
- border-color: #d1e4dd;
- background-color: #d1e4dd;
- color: #39414d;
-}
-
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover {
- border-color: #d1e4dd;
- background-color: #d1e4dd;
- color: #39414d;
-}
-
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover {
- border-color: #d1e4dd;
- background-color: #d1e4dd;
- color: #39414d;
-}
-
-.is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover {
- border-color: #d1e4dd;
- background-color: #d1e4dd;
- color: #39414d;
-}
-
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover {
- border-color: #d1e4dd;
- background-color: #d1e4dd;
- color: #39414d;
-}
-
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
- border-color: #d1e4dd;
- background-color: #d1e4dd;
- color: #39414d;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> border: 3px solid #39414d;
</span><span class="cx" style="display: block; padding: 0 10px"> border-radius: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 3px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+ border-color: #28303d !important;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-left: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding-left: 10px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #28303d;
+ outline-offset: -2px;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted #39414d;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- outline-offset: -5px;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
- outline-color: currentColor;
-}
-
-.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: 15px 30px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
- border-color: #39414d;
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
- border-color: #39414d;
- color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
- border-color: #39414d;
- color: #39414d;
-}
-
-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
+ background-color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon {
+ padding: 6px 15px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
- color: #fff;
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
- border-color: #d1e4dd;
- color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
- border-color: #d1e4dd;
- color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
- border-color: #d1e4dd;
- color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
- color: #fff;
-}
-
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
- color: #fff;
-}
-
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
- color: #fff;
-}
-
-.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
- border-color: #d1e4dd;
- color: #d1e4dd;
-}
-
-.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
- border-color: #d1e4dd;
- background-color: #d1e4dd;
- color: #39414d;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search__button {
</span><span class="cx" style="display: block; padding: 0 10px"> box-shadow: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7564,16 +7375,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .widget_search > .search-form .search-submit {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: transparent;
- color: #39414d;
</del><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 15px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.widget_search > .search-form .search-submit:hover {
- background-color: #39414d;
- color: #d1e4dd;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .widget_rss a.rsswidget .rss-widget-icon {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7632,42 +7436,82 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: #000;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-black-color[class] [class*=__inner-container] {
+ color: #000;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-gray-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #39414d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-gray-color[class] [class*=__inner-container] {
+ color: #39414d;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-dark-gray-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-dark-gray-color[class] [class*=__inner-container] {
+ color: #28303d;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-green-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #d1e4dd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-green-color[class] [class*=__inner-container] {
+ color: #d1e4dd;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-blue-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #d1dfe4;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-blue-color[class] [class*=__inner-container] {
+ color: #d1dfe4;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #d1d1e4;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-purple-color[class] [class*=__inner-container] {
+ color: #d1d1e4;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-red-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #e4d1d1;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-red-color[class] [class*=__inner-container] {
+ color: #e4d1d1;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-orange-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #e4dad1;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-orange-color[class] [class*=__inner-container] {
+ color: #e4dad1;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-yellow-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #eeeadd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-yellow-color[class] [class*=__inner-container] {
+ color: #eeeadd;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-white-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-white-color[class] [class*=__inner-container] {
+ color: #fff;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-background a,
</span><span class="cx" style="display: block; padding: 0 10px"> .has-background p,
</span><span class="cx" style="display: block; padding: 0 10px"> .has-background h1,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7683,8 +7527,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #000;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-gray-background-color[class] {
- background-color: #39414d;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-black-background-color[class] [class*=__inner-container] {
+ background-color: #000;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-dark-gray-background-color[class] {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7691,74 +7535,122 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-dark-gray-background-color[class] [class*=__inner-container] {
+ background-color: #28303d;
+}
+
+.has-gray-background-color[class] {
+ background-color: #39414d;
+}
+
+.has-gray-background-color[class] [class*=__inner-container] {
+ background-color: #39414d;
+}
+
+.has-light-gray-background-color[class] {
+ background-color: #f0f0f0;
+}
+
+.has-light-gray-background-color[class] [class*=__inner-container] {
+ background-color: #f0f0f0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-green-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #d1e4dd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-green-background-color[class] [class*=__inner-container] {
+ background-color: #d1e4dd;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-blue-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #d1dfe4;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-blue-background-color[class] [class*=__inner-container] {
+ background-color: #d1dfe4;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #d1d1e4;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-purple-background-color[class] [class*=__inner-container] {
+ background-color: #d1d1e4;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-red-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #e4d1d1;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-red-background-color[class] [class*=__inner-container] {
+ background-color: #e4d1d1;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-orange-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #e4dad1;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-orange-background-color[class] [class*=__inner-container] {
+ background-color: #e4dad1;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-yellow-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #eeeadd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-yellow-background-color[class] [class*=__inner-container] {
+ background-color: #eeeadd;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-white-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-black-background-color[class] {
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-white-background-color[class] [class*=__inner-container] {
+ background-color: #fff;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-gray-background-color[class] {
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container] {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-dark-gray-background-color[class] {
- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container] {
+ color: #28303d;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-green-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-blue-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-purple-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-red-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-orange-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-yellow-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-white-background-color[class] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container] {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+ color: #28303d;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-to-yellow-gradient-background {
</span><span class="cx" style="display: block; padding: 0 10px"> background: linear-gradient(160deg, #d1d1e4, #eeeadd);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetscssstyleeditorcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -524,33 +524,50 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button__link {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: var(--button--line-height);
- color: var(--button--color-text);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: var(--button--border-width) solid transparent;
+ border-radius: var(--button--border-radius);
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: var(--button--font-weight);
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: var(--button--font-family);
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--button--font-size);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: var(--button--color-background);
- border-radius: var(--button--border-radius);
- border: var(--button--border-width) solid var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: var(--button--line-height);
+ padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button__link:focus {
- background: transparent;
- outline-offset: -6px;
- outline: 2px dotted currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--global--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button__link:focus {
- color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--local--color-background, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button__link:focus:not(.has-background) {
- color: var(--button--color-text-hover);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--global--color-primary);
+}
+
+.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.wp-block-button__link:hover,
+.wp-block-button__link:active {
+ background-color: transparent;
+ border-color: currentColor;
+ color: inherit;
+}
+
+.wp-block-button__link:focus {
+ outline-offset: -6px;
+ outline: 2px dotted currentColor;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button__link:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white-50);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: var(--global--color-white-50);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -573,69 +590,81 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: var(--global--spacing-vertical);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--global--color-background);
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--local--color-background, var(--global--color-background));
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: var(--global--color-primary);
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--global--color-primary);
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: var(--button--color-text-active) !important;
- background: transparent !important;
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-color: currentColor !important;
+ background-color: transparent !important;
+ color: inherit !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
- color: var(--button--color-text-hover) !important;
- background: transparent !important;
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
+ outline-offset: inherit;
+ outline: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link {
- color: var(--button--color-background);
- background: transparent;
- border: var(--button--border-width) solid currentColor;
- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
+ border-color: currentColor;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:active,
-.wp-block-button.is-style-outline .wp-block-button__link:hover {
- background-color: var(--button--color-background);
- color: var(--button--color-text);
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background {
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--local--color-primary, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background:active,
-.wp-block-button.is-style-outline .wp-block-button__link.has-background:hover {
- background-color: var(--button--color-background) !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
+ color: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
- color: var(--global--color-dark-gray);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:hover,
+.wp-block-button.is-style-outline .wp-block-button__link:active {
+ background-color: var(--global--color-primary) !important;
+ border-color: transparent !important;
+ color: var(--global--color-background) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-yellow-background-color {
- color: var(--global--color-dark-gray);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
+ background-color: var(--local--color-primary, var(--global--color-primary)) !important;
+ color: var(--local--color-background, var(--global--color-background)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
+ color: var(--local--color-background, var(--global--color-background)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active,
-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover {
- color: var(--button--color-text) !important;
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:focus {
+ outline-offset: inherit;
+ outline: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button.is-style-squared {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -848,34 +877,51 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: var(--button--line-height);
- color: var(--button--color-text);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: var(--button--border-width) solid transparent;
+ border-radius: var(--button--border-radius);
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: var(--button--font-weight);
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: var(--button--font-family);
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--button--font-size);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: var(--button--color-background);
- border-radius: var(--button--border-radius);
- border: var(--button--border-width) solid var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: var(--button--line-height);
+ padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file .wp-block-file__button:focus {
- background: transparent;
- outline-offset: -6px;
- outline: 2px dotted currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--global--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-file .wp-block-file__button:focus {
- color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--local--color-background, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file .wp-block-file__button:focus:not(.has-background) {
- color: var(--button--color-text-hover);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--global--color-primary);
+}
+
+.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.wp-block-file .wp-block-file__button:hover,
+.wp-block-file .wp-block-file__button:active {
+ background-color: transparent;
+ border-color: currentColor;
+ color: inherit;
+}
+
+.wp-block-file .wp-block-file__button:focus {
+ outline-offset: -6px;
+ outline: 2px dotted currentColor;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white-50);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: var(--global--color-white-50);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -882,9 +928,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--button--color-text-active);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file .wp-block-file__button:hover {
- color: var(--button--color-text-hover);
- background: transparent;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file .wp-block-file__button:focus {
+ outline-offset: inherit;
+ outline: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-gallery figcaption {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1747,6 +1793,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: calc(var(--global--spacing-vertical) / 3);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__input {
</span><span class="cx" style="display: block; padding: 0 10px"> border: var(--form--border-width) solid var(--form--border-color);
</span><span class="cx" style="display: block; padding: 0 10px"> border-radius: var(--form--border-radius);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1758,58 +1805,63 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: var(--form--spacing-unit);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
</ins><span class="cx" style="display: block; padding: 0 10px"> .is-dark-theme .wp-block-search .wp-block-search__input {
</span><span class="cx" style="display: block; padding: 0 10px"> background: var(--global--color-white-90);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input,
-.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input,
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input,
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input,
-.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input,
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input,
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__input {
- border-color: var(--form--color-text);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
+.has-background .wp-block-search .wp-block-search__input {
+ border-color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
-.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
- border-color: var(--global--color-white);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: var(--button--line-height);
- color: var(--button--color-text);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: var(--button--border-width) solid transparent;
+ border-radius: var(--button--border-radius);
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: var(--button--font-weight);
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: var(--button--font-family);
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--button--font-size);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: var(--button--color-background);
- border-radius: var(--button--border-radius);
- border: var(--button--border-width) solid var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: var(--button--line-height);
+ padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><span class="cx" style="display: block; padding: 0 10px"> box-shadow: none;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+}
+
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--global--color-background);
+}
+
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--local--color-background, var(--global--color-primary));
+}
+
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: var(--global--color-primary);
+}
+
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--global--color-primary);
+}
+
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.wp-block-search .wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button:active {
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: transparent;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: var(--button--color-text-hover);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-color: currentColor;
+ color: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: transparent;
</del><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search .wp-block-search__button:focus {
- color: var(--button--color-background);
-}
-
-.wp-block-search .wp-block-search__button:focus:not(.has-background) {
- color: var(--button--color-text-hover);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white-50);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: var(--global--color-white-50);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1816,13 +1868,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--button--color-text-active);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search .wp-block-search__button:hover {
- color: var(--button--color-text);
- background-color: var(--button--color-background);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button.has-icon {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button.has-icon svg {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1830,119 +1878,50 @@
</span><span class="cx" style="display: block; padding: 0 10px"> height: 40px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search .wp-block-search__button,
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button,
-.has-background.has-black-background-color .wp-block-search .wp-block-search__button {
- color: var(--global--color-white);
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search .wp-block-search__button:hover,
+.has-background .wp-block-search .wp-block-search__button:active {
+ background-color: var(--local--color-background, var(--global--color-background)) !important;
+ color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
- color: var(--global--color-white);
- background-color: var(--button--color-background);
- border-color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-search .wp-block-search__button:hover,
+.has-text-color .wp-block-search .wp-block-search__button:active {
+ color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
- color: var(--button--color-text);
- background-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button:focus {
+ outline-offset: inherit;
+ outline: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
- color: var(--global--color-white);
- background-color: var(--form--border-color);
- border-color: var(--form--border-color);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+ padding: var(--form--border-width);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button,
-.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button,
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button,
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button,
-.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button,
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button,
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button {
- color: var(--form--color-text);
- border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
- color: var(--global--color-white);
- background-color: var(--button--color-text);
- border-color: var(--button--color-text);
-}
-
-.wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-white-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-green-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-blue-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-purple-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-red-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-orange-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-yellow-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
</ins><span class="cx" style="display: block; padding: 0 10px"> border: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover,
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
+ color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
- color: var(--button--color-text);
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button,
+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button {
+ color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover,
+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
+ background-color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-white);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: var(--button--color-text);
- border-color: var(--button--color-text);
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
- color: var(--button--color-text-hover);
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
+ padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
- color: var(--global--color-white);
- background-color: var(--button--color-background);
- border-color: var(--button--color-background);
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
- color: var(--button--color-text);
- border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
- color: var(--global--color-white);
- background-color: var(--button--color-text);
- border-color: var(--button--color-text);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block[data-align=center] > * {
</span><span class="cx" style="display: block; padding: 0 10px"> text-align: center;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2350,42 +2329,92 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-black);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-black-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-black, #000);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-gray-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-gray);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-gray-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-gray, #000);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-dark-gray-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-dark-gray);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-dark-gray-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-dark-gray, #000);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-green-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-green);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-green-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-green, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-blue-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-blue);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-blue-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-blue, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-purple);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-purple-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-purple, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-red-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-red);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-red-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-red, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-orange-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-orange);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-orange-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-orange, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-yellow-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-yellow);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-yellow-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-yellow, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-white-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-white-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-white, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-background a,
</span><span class="cx" style="display: block; padding: 0 10px"> .has-background p,
</span><span class="cx" style="display: block; padding: 0 10px"> .has-background h1,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2401,8 +2430,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-black);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-gray-background-color[class] {
- background-color: var(--global--color-gray);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-black-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-black, #000);
+ background-color: var(--local--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-dark-gray-background-color[class] {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2409,50 +2439,126 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-dark-gray);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-dark-gray-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-dark-gray, #000);
+ background-color: var(--local--color-background);
+}
+
+.has-gray-background-color[class] {
+ background-color: var(--global--color-gray);
+}
+
+.has-gray-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-gray, #000);
+ background-color: var(--local--color-background);
+}
+
+.has-light-gray-background-color[class] {
+ background-color: var(--global--color-light-gray);
+}
+
+.has-light-gray-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-light-gray, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-green-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-green);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-green-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-green, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-blue-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-blue);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-blue-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-blue, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-purple);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-purple-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-purple, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-red-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-red);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-red-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-red, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-orange-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-orange);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-orange-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-orange, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-yellow-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-yellow);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-yellow-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-yellow, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-white-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-black-background-color[class],
-:not(.has-text-color).has-gray-background-color[class],
-:not(.has-text-color).has-dark-gray-background-color[class] {
- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-white-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-white, #fff);
+ background-color: var(--local--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-green-background-color[class],
-:not(.has-text-color).has-blue-background-color[class],
-:not(.has-text-color).has-purple-background-color[class],
-:not(.has-text-color).has-red-background-color[class],
-:not(.has-text-color).has-orange-background-color[class],
-:not(.has-text-color).has-yellow-background-color[class],
-:not(.has-text-color).has-white-background-color[class] {
- color: var(--global--color-dark-gray);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-background, #fff);
+ color: var(--local--color-primary, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-primary, #000);
+}
+
+.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-primary, #000);
+ color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-background, #fff);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-to-yellow-gradient-background {
</span><span class="cx" style="display: block; padding: 0 10px"> background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetssass02toolsmixinsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -20,32 +20,60 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Button style
</span><span class="cx" style="display: block; padding: 0 10px"> // - Applies button styles to blocks and elements that share them.
</span><span class="cx" style="display: block; padding: 0 10px"> @mixin button-style() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: var(--button--line-height);
- color: var(--button--color-text);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: var(--button--border-width) solid transparent;
+ border-radius: var(--button--border-radius);
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: var(--button--font-weight);
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: var(--button--font-family);
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--button--font-size);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: var(--button--color-background);
- border-radius: var(--button--border-radius);
- border: var(--button--border-width) solid var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: var(--button--line-height);
+ padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:focus {
- background: transparent;
- outline-offset: -6px;
- outline: 2px dotted currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Standard Button Color Relationship Logic
+ &:not(:hover):not(:active) {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .is-dark-theme & {
- color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Text colors
+ &:not(.has-text-color) {
+ color: var(--global--color-background);
+
+ // Nested
+ .has-background & {
+ color: var(--local--color-background, var(--global--color-primary));
+
+ &.has-background {
+ color: var(--global--color-primary);
+ }
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Background-colors
</ins><span class="cx" style="display: block; padding: 0 10px"> &:not(.has-background) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: var(--button--color-text-hover);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: var(--global--color-primary);
+
+ // Nested
+ .has-background & {
+ background-color: var(--local--color-primary, var(--global--color-primary));
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Hover Button color should match parent element foreground color
+ &:hover,
+ &:active {
+ background-color: transparent;
+ border-color: currentColor;
+ color: inherit;
+ }
+
+ // Focus Button outline color should always match the current text color
+ &:focus {
+ outline-offset: -6px;
+ outline: 2px dotted currentColor;
+ }
+
+ // Disabled Button colors
</ins><span class="cx" style="display: block; padding: 0 10px"> &:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white-50);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: var(--global--color-white-50);
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetssass05blocksbutton_editorscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -27,83 +27,106 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Target the default and filled button states.
</span><span class="cx" style="display: block; padding: 0 10px"> &:not(.is-style-outline) {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block-button__link {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block-button__link:not(:hover):not(:active) {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:active {
- color: var(--button--color-text-active) !important;
- background: transparent !important;
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Text colors
+ &:not(.has-text-color) {
+ color: var(--global--color-background);
+
+ // Nested
+ .has-background & {
+ color: var(--local--color-background, var(--global--color-background));
+
+ &.has-background {
+ color: var(--global--color-primary);
+ }
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:hover {
- color: var(--button--color-text-hover) !important;
- background: transparent !important;
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Background-colors
+ &:not(.has-background) {
+ background-color: var(--global--color-primary);
+
+ // Nested
+ .has-background & {
+ background-color: var(--local--color-primary, var(--global--color-primary));
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Hover Button color should match parent element foreground color
+ .wp-block-button__link:hover,
+ .wp-block-button__link:active {
+ border-color: currentColor !important;
+ background-color: transparent !important;
+ color: inherit !important;
+ }
+
+ // Remove :focus styles in the editor
+ .wp-block-button__link:focus {
+ outline-offset: inherit;
+ outline: inherit;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Outline Style.
</span><span class="cx" style="display: block; padding: 0 10px"> &.is-style-outline {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block-button__link {
- color: var(--button--color-background);
- background: transparent;
- border: var(--button--border-width) solid currentColor;
- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block-button__link:not(:hover):not(:active) {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:active,
- &:hover {
- background-color: var(--button--color-background);
- color: var(--button--color-text);
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Border colors
+ &:not(.has-text-color),
+ &:not(.has-background),
+ &.has-background {
+ border-color: currentColor;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &.has-background {
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Text colors
+ &:not(.has-text-color) {
+ color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:active,
- &:hover {
- background-color: var(--button--color-background) !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Nested
+ .has-background & {
+ color: var(--local--color-primary, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &.has-background:not(.has-text-color) {
- color: var(--global--color-dark-gray);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ &.has-background {
+ // Nested
+ .has-background &:not(.has-text-color) {
+ color: inherit;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &.has-background.has-gray-background-color:not(.has-text-color),
- &.has-background.has-dark-gray-background-color:not(.has-text-color),
- &.has-background.has-black-background-color:not(.has-text-color) {
- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Background-colors
+ &:not(.has-background) {
+ background-color: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .is-dark-theme & {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Hover Button color should match default button style
+ .wp-block-button__link:hover,
+ .wp-block-button__link:active {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:not(.has-text-color) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: var(--global--color-primary) !important;
+ border-color: transparent !important;
+ color: var(--global--color-background) !important;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &.has-background.has-white-background-color,
- &.has-background.has-green-background-color,
- &.has-background.has-blue-background-color,
- &.has-background.has-purple-background-color,
- &.has-background.has-red-background-color,
- &.has-background.has-orange-background-color,
- &.has-background.has-yellow-background-color {
- color: var(--global--color-dark-gray);
- }
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .has-background & {
+ background-color: var(--local--color-primary, var(--global--color-primary)) !important;
+ color: var(--local--color-background, var(--global--color-background)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &.has-text-color {
- border-color: currentColor;
-
- &:active,
- &:hover {
- color: var(--button--color-text) !important;
- border-color: var(--button--color-background);
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .has-text-color & {
+ color: var(--local--color-background, var(--global--color-background)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Remove :focus styles in the editor
+ .wp-block-button__link:focus {
+ outline-offset: inherit;
+ outline: inherit;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Squared Style
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetssass05blocksbutton_stylescss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4,29 +4,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .site .button,
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="submit"],
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="reset"],
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search__button,
-.wp-block-button .wp-block-button__link {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button,
+.wp-block-button .wp-block-button__link,
+.wp-block-file a.wp-block-file__button {
</ins><span class="cx" style="display: block; padding: 0 10px"> // Extend button style
</span><span class="cx" style="display: block; padding: 0 10px"> @include button-style();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button,
-input[type="submit"],
-input[type="reset"],
-.wp-block-search .wp-block-search__button,
-.wp-block-file .wp-block-file__button {
-
- &:active {
- color: var(--button--color-text-active);
- background-color: var(--button--color-background-active);
- }
-
- &:hover {
- color: var(--button--color-text-hover);
- background: transparent;
- }
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Block Options
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -35,88 +19,91 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Target the default and filled button states.
</span><span class="cx" style="display: block; padding: 0 10px"> &:not(.is-style-outline) {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block-button__link {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block-button__link:not(:hover):not(:active) {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:active {
- color: var(--button--color-text-active) !important;
- background: transparent !important;
- border-color: var(--button--color-background);
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Text colors
+ &:not(.has-text-color) {
+ color: var(--global--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:hover {
- color: var(--button--color-text-hover) !important;
- background: transparent !important;
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Nested
+ .has-background & {
+ color: var(--local--color-background, var(--global--color-background));
+
+ &.has-background {
+ color: var(--global--color-primary);
+ }
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:focus {
- color: var(--button--color-text) !important;
- background: var(--button--color-background) !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Background-colors
+ &:not(.has-background) {
+ background-color: var(--global--color-primary);
+
+ // Nested
+ .has-background & {
+ background-color: var(--local--color-primary, var(--global--color-primary));
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Hover Button color should match parent element foreground color
+ .wp-block-button__link:hover,
+ .wp-block-button__link:active {
+ border-color: currentColor !important;
+ background-color: transparent !important;
+ color: inherit !important;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Outline Style.
</span><span class="cx" style="display: block; padding: 0 10px"> &.is-style-outline {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block-button__link {
- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block-button__link:not(:hover):not(:active) {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:not(.has-background) {
- background: transparent;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Border colors
+ &:not(.has-text-color),
+ &:not(.has-background),
+ &.has-background {
+ border-color: currentColor;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:not(.has-background):not(.has-text-color) {
- background: transparent;
- color: var(--button--color-background);
- border-color: var(--button--color-background);
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Text colors
+ &:not(.has-text-color) {
+ color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &.has-background:not(.has-text-color) {
- color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Nested
+ .has-background & {
+ color: var(--local--color-primary, var(--global--color-primary));
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &.has-background.has-gray-background-color:not(.has-text-color),
- &.has-background.has-dark-gray-background-color:not(.has-text-color),
- &.has-background.has-black-background-color:not(.has-text-color) {
- color: var(--global--color-white);
- }
-
- .is-dark-theme & {
-
- &:not(.has-text-color) {
-
- &.has-background {
- color: var(--global--color-dark-gray);
- }
-
- &.has-background.has-gray-background-color,
- &.has-background.has-dark-gray-background-color,
- &.has-background.has-black-background-color {
- color: var(--global--color-white);
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ &.has-background {
+ // Nested
+ .has-background &:not(.has-text-color) {
+ color: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &.has-text-color,
- &.has-background.has-text-color {
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Background-colors
+ &:not(.has-background) {
+ background-color: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:active,
- &:hover {
- color: var(--button--color-text) !important;
- background: var(--button--color-background) !important;
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block-button__link:hover,
+ .wp-block-button__link:active {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &.has-text-color {
- border-color: var(--button--color-background);
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-color: transparent !important;
+ background-color: var(--global--color-primary) !important;
+ color: var(--global--color-background) !important;
+
+ .has-background & {
+ background-color: var(--local--color-primary, var(--global--color-primary)) !important;
+ color: var(--local--color-background, var(--global--color-background)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:focus {
- color: var(--button--color-background) !important;
- background: transparent !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .has-text-color & {
+ color: var(--local--color-background, var(--global--color-background)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetssass05blocksfile_editorscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -15,10 +15,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Extend button style
</span><span class="cx" style="display: block; padding: 0 10px"> @include button-style();
</span><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- &:hover {
- color: var(--button--color-text-hover);
- background: transparent;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Remove :focus styles in the editor
+ &:focus {
+ outline-offset: inherit;
+ outline: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetssass05blocksfile_stylescss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4,21 +4,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> a.wp-block-file__button:active,
</span><span class="cx" style="display: block; padding: 0 10px"> a.wp-block-file__button:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> a.wp-block-file__button:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: var(--button--color-text-hover);
</del><span class="cx" style="display: block; padding: 0 10px"> opacity: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- a.wp-block-file__button:visited {
- color: var(--button--color-text);
-
- &:hover {
- color: var(--button--color-text-hover);
- }
- }
-
- .wp-block-file__button {
- // Extend button style
- @include button-style();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ a.wp-block-file__button {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetssass05blockssearch_editorscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,6 +7,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: calc(var(--global--spacing-vertical) / 3);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ &.wp-block-search__button-inside .wp-block-search__inside-wrapper,
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search__input {
</span><span class="cx" style="display: block; padding: 0 10px"> border: var(--form--border-width) solid var(--form--border-color);
</span><span class="cx" style="display: block; padding: 0 10px"> border-radius: var(--form--border-radius);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -21,24 +22,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background: var(--global--color-white-90);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .has-background.has-white-background-color &,
- .has-background.has-green-background-color &,
- .has-background.has-blue-background-color &,
- .has-background.has-purple-background-color &,
- .has-background.has-red-background-color &,
- .has-background.has-orange-background-color &,
- .has-background.has-yellow-background-color & {
-
- .is-dark-theme & {
- border-color: var(--form--color-text);
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .has-background & {
+ border-color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- .has-background.has-gray-background-color &,
- .has-background.has-dark-gray-background-color &,
- .has-background.has-black-background-color & {
- border-color: var(--global--color-white);
- }
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search__button {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -45,16 +31,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> @include button-style();
</span><span class="cx" style="display: block; padding: 0 10px"> box-shadow: none;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: transparent;
- color: var(--button--color-text-hover);
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:hover {
- color: var(--button--color-text);
- background-color: var(--button--color-background);
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> &.has-icon {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> svg {
</span><span class="cx" style="display: block; padding: 0 10px"> width: 40px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -62,109 +42,60 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .has-background.has-gray-background-color &,
- .has-background.has-dark-gray-background-color &,
- .has-background.has-black-background-color & {
- color: var(--global--color-white);
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ &:hover,
+ &:active {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:hover {
- color: var(--global--color-white);
- background-color: var(--button--color-background);
- border-color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .has-background & {
+ background-color: var(--local--color-background, var(--global--color-background)) !important;
+ color: var(--local--color-primary, var(--global--color-primary)) !important;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .is-dark-theme & {
- color: var(--button--color-text);
- background-color: var(--button--color-background);
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .has-text-color & {
+ color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .has-background.has-white-background-color &,
- .has-background.has-green-background-color &,
- .has-background.has-blue-background-color &,
- .has-background.has-purple-background-color &,
- .has-background.has-red-background-color &,
- .has-background.has-orange-background-color &,
- .has-background.has-yellow-background-color & {
-
- &:hover {
- color: var(--global--color-white);
- background-color: var(--form--border-color);
- border-color: var(--form--border-color);
- }
-
- .is-dark-theme & {
- color: var(--form--color-text);
- border-color: currentColor;
-
- &:hover {
- color: var(--global--color-white);
- background-color: var(--button--color-text);
- border-color: var(--button--color-text);
- }
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Remove :focus styles in the editor
+ &:focus {
+ outline-offset: inherit;
+ outline: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> &.wp-block-search__button-inside {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block-search__input,
- .has-background.has-white-background-color & .wp-block-search__input,
- .has-background.has-green-background-color & .wp-block-search__input,
- .has-background.has-blue-background-color & .wp-block-search__input,
- .has-background.has-purple-background-color & .wp-block-search__input,
- .has-background.has-red-background-color & .wp-block-search__input,
- .has-background.has-orange-background-color & .wp-block-search__input,
- .has-background.has-yellow-background-color & .wp-block-search__input {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block-search__inside-wrapper {
+ padding: var(--form--border-width);
+ }
+
+ .wp-block-search__input {
</ins><span class="cx" style="display: block; padding: 0 10px"> border: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &.wp-block-search__text-button {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ &.wp-block-search__text-button,
+ &.wp-block-search__icon-button {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search__button {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Match the text button size with the icon button.
- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
- }
- }
-
- .wp-block-search__button {
-
- .is-dark-theme & {
- color: var(--button--color-text);
- border-color: currentColor;
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Search button always needs black contrast against white form background
</ins><span class="cx" style="display: block; padding: 0 10px"> &:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: var(--global--color-white);
- background-color: var(--button--color-text);
- border-color: var(--button--color-text);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .has-background.has-gray-background-color &,
- .has-background.has-dark-gray-background-color &,
- .has-background.has-black-background-color & {
- color: var(--button--color-text-hover);
- border-color: currentColor;
-
- &:hover {
- color: var(--global--color-white);
- background-color: var(--button--color-background);
- border-color: var(--button--color-background);
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> .is-dark-theme & {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: var(--button--color-text);
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> &:hover {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-white);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: var(--button--color-text);
- border-color: var(--button--color-text);
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ &.wp-block-search__text-button .wp-block-search__button {
+ // Match the text button size with the icon button.
+ padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetssass05blockssearch_stylescss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -28,31 +28,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: var(--form--border-color);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .has-background &,
- [class*="background-color"] &,
- [style*="background-color"] &,
- .wp-block-cover[style*="background-image"] & {
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .has-background & {
+ border-color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- .has-background.has-gray-background-color &,
- .has-background.has-dark-gray-background-color &,
- .has-background.has-black-background-color & {
- border-color: var(--global--color-white);
- }
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> button.wp-block-search__button {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: transparent;
- color: var(--button--color-text-hover);
</del><span class="cx" style="display: block; padding: 0 10px"> line-height: 1;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:hover {
- background-color: var(--button--color-background);
- color: var(--button--color-text);
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> &.has-icon {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 6px calc(0.5 * var(--button--padding-horizontal));
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -63,43 +47,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .has-background.has-gray-background-color &,
- .has-background.has-dark-gray-background-color &,
- .has-background.has-black-background-color & {
- color: var(--global--color-white);
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ &:hover,
+ &:active {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:hover {
- background-color: var(--button--color-background);
- border-color: var(--global--color-white);
- color: var(--global--color-white);
-
- .is-dark-theme & {
- color: var(--button--color-text);
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .has-background & {
+ background-color: var(--local--color-background, var(--global--color-background)) !important;
+ color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .has-background.has-white-background-color &,
- .has-background.has-green-background-color &,
- .has-background.has-blue-background-color &,
- .has-background.has-purple-background-color &,
- .has-background.has-red-background-color &,
- .has-background.has-orange-background-color &,
- .has-background.has-yellow-background-color & {
- border-color: currentColor;
- color: currentColor;
-
- &:hover {
- background-color: var(--form--border-color);
- border-color: var(--form--border-color);
- color: var(--global--color-white);
-
- .is-dark-theme & {
- border-color: var(--button--color-text);
- background-color: var(--button--color-text);
- color: var(--button--color-background);
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .has-text-color & {
+ color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -110,59 +67,44 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> border: var(--form--border-width) solid var(--form--border-color);
</span><span class="cx" style="display: block; padding: 0 10px"> border-radius: var(--form--border-radius);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: var(--form--border-width);
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .has-background & {
+ border-color: var(--local--color-primary, var(--global--color-primary)) !important;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search__input {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-left: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding-left: var(--form--spacing-unit);
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Add outline for focus styles to override default
</ins><span class="cx" style="display: block; padding: 0 10px"> &:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: var(--form--color-text);
+ outline-offset: -2px;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted var(--form--border-color);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- outline-offset: -5px;
-
- .is-dark-theme & {
- outline-color: currentColor;
- }
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &.wp-block-search__text-button {
-
</del><span class="cx" style="display: block; padding: 0 10px"> button.wp-block-search__button {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Match the text button size with the icon button.
</del><span class="cx" style="display: block; padding: 0 10px"> padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }
- }
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- button.wp-block-search__button {
-
- .has-background.has-gray-background-color &,
- .has-background.has-dark-gray-background-color &,
- .has-background.has-black-background-color & {
- border-color: var(--button--color-background);
- color: var(--button--color-background);
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Search button always needs black contrast against white form background
</ins><span class="cx" style="display: block; padding: 0 10px"> &:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .is-dark-theme & {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-color: var(--button--color-text);
- color: var(--button--color-text);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> &:hover {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .is-dark-theme & {
- border-color: var(--button--color-text);
- color: var(--button--color-text);
-
- &:hover {
- border-color: var(--button--color-text);
- background-color: var(--button--color-text);
- color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ &.has-icon {
+ padding: 6px calc(0.5 * var(--button--padding-horizontal));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetssass06componentswidgetsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -117,14 +117,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .search-submit {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: transparent;
- color: var(--button--color-text-hover);
</del><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: calc(0.5 * var(--global--spacing-vertical));
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- &:hover {
- background-color: var(--button--color-background);
- color: var(--button--color-text);
- }
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetssass07utilitiescolorpalettescss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,42 +1,92 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Gutenberg text color options
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-black-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-primary: var(--global--color-black, #000000);
+ color: var(--local--color-primary);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-black);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-gray-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-primary: var(--global--color-gray, #000000);
+ color: var(--local--color-primary);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-gray);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-dark-gray-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-primary: var(--global--color-dark-gray, #000000);
+ color: var(--local--color-primary);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-dark-gray);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-green-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-primary: var(--global--color-green, #FFFFFF);
+ color: var(--local--color-primary);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-green);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-blue-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-primary: var(--global--color-blue, #FFFFFF);
+ color: var(--local--color-primary);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-blue);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-purple-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-primary: var(--global--color-purple, #FFFFFF);
+ color: var(--local--color-primary);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-purple);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-red-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-primary: var(--global--color-red, #FFFFFF);
+ color: var(--local--color-primary);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-red);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-orange-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-primary: var(--global--color-orange, #FFFFFF);
+ color: var(--local--color-primary);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-orange);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-yellow-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-primary: var(--global--color-yellow, #FFFFFF);
+ color: var(--local--color-primary);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-yellow);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-white-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-primary: var(--global--color-white, #FFFFFF);
+ color: var(--local--color-primary);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -56,51 +106,118 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-black-background-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-background: var(--global--color-black, #000000);
+ background-color: var(--local--color-background);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-black);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-dark-gray-background-color[class] {
+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-background: var(--global--color-dark-gray, #000000);
+ background-color: var(--local--color-background);
+ }
+ background-color: var(--global--color-dark-gray);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-gray-background-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-background: var(--global--color-gray, #000000);
+ background-color: var(--local--color-background);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-gray);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-dark-gray-background-color[class] {
- background-color: var(--global--color-dark-gray);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-light-gray-background-color[class] {
+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-background: var(--global--color-light-gray, #FFFFFF);
+ background-color: var(--local--color-background);
+ }
+ background-color: var(--global--color-light-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-green-background-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-background: var(--global--color-green, #FFFFFF);
+ background-color: var(--local--color-background);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-green);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-blue-background-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-background: var(--global--color-blue, #FFFFFF);
+ background-color: var(--local--color-background);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-blue);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-purple-background-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-background: var(--global--color-purple, #FFFFFF);
+ background-color: var(--local--color-background);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-purple);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-red-background-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-background: var(--global--color-red, #FFFFFF);
+ background-color: var(--local--color-background);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-red);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-orange-background-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-background: var(--global--color-orange, #FFFFFF);
+ background-color: var(--local--color-background);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-orange);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-yellow-background-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-background: var(--global--color-yellow, #FFFFFF);
+ background-color: var(--local--color-background);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-yellow);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-white-background-color[class] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-background: var(--global--color-white, #FFFFFF);
+ background-color: var(--local--color-background);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color) {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> &.has-black-background-color[class],
</span><span class="cx" style="display: block; padding: 0 10px"> &.has-gray-background-color[class],
</span><span class="cx" style="display: block; padding: 0 10px"> &.has-dark-gray-background-color[class] {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-primary: var(--global--color-background, #FFFFFF);
+ // Reverse the local foreground color in darkmode
+ .is-dark-theme & {
+ --local--color-primary: var(--global--color-primary, #000000);
+ }
+ color: var(--local--color-primary, var(--global--color-primary));
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> &.has-green-background-color[class],
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -110,7 +227,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> &.has-orange-background-color[class],
</span><span class="cx" style="display: block; padding: 0 10px"> &.has-yellow-background-color[class],
</span><span class="cx" style="display: block; padding: 0 10px"> &.has-white-background-color[class] {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: var(--global--color-dark-gray);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Localize CSS-variables to limit relationship scope
+ [class*="__inner-container"] {
+ --local--color-primary: var(--global--color-primary, #000000);
+ // Reverse the local foreground color in darkmode
+ .is-dark-theme & {
+ --local--color-primary: var(--global--color-background, #FFFFFF);
+ }
+ color: var(--local--color-primary, var(--global--color-primary));
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyonestylertlcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/style-rtl.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/style-rtl.css 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/style-rtl.css 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1707,149 +1707,172 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .site .button,
</span><span class="cx" style="display: block; padding: 0 10px"> input[type=submit],
</span><span class="cx" style="display: block; padding: 0 10px"> input[type=reset],
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search__button,
-.wp-block-button .wp-block-button__link {
- line-height: var(--button--line-height);
- color: var(--button--color-text);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button,
+.wp-block-button .wp-block-button__link,
+.wp-block-file a.wp-block-file__button {
+ border: var(--button--border-width) solid transparent;
+ border-radius: var(--button--border-radius);
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: var(--button--font-weight);
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: var(--button--font-family);
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--button--font-size);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: var(--button--color-background);
- border-radius: var(--button--border-radius);
- border: var(--button--border-width) solid var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: var(--button--line-height);
+ padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button:focus,
-input[type=submit]:focus,
-input[type=reset]:focus,
-.wp-block-search__button:focus,
-.wp-block-button .wp-block-button__link:focus {
- background: transparent;
- outline-offset: -6px;
- outline: 2px dotted currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site .button:not(:hover):not(:active):not(.has-text-color),
+input[type=submit]:not(:hover):not(:active):not(.has-text-color),
+input[type=reset]:not(:hover):not(:active):not(.has-text-color),
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--global--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .site .button:focus,
-.is-dark-theme input[type=submit]:focus,
-.is-dark-theme input[type=reset]:focus,
-.is-dark-theme .wp-block-search__button:focus,
-.is-dark-theme .wp-block-button .wp-block-button__link:focus {
- color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .site .button:not(:hover):not(:active):not(.has-text-color),
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color),
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color),
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--local--color-background, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button:focus:not(.has-background),
-input[type=submit]:focus:not(.has-background),
-input[type=reset]:focus:not(.has-background),
-.wp-block-search__button:focus:not(.has-background),
-.wp-block-button .wp-block-button__link:focus:not(.has-background) {
- color: var(--button--color-text-hover);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button:disabled,
-input[type=submit]:disabled,
-input[type=reset]:disabled,
-.wp-block-search__button:disabled,
-.wp-block-button .wp-block-button__link:disabled {
- background-color: var(--global--color-white-50);
- border-color: var(--global--color-white-50);
- color: var(--button--color-text-active);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site .button:not(:hover):not(:active):not(.has-background),
+input[type=submit]:not(:hover):not(:active):not(.has-background),
+input[type=reset]:not(:hover):not(:active):not(.has-background),
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
+.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button:active,
-input[type=submit]:active,
-input[type=reset]:active,
-.wp-block-search .wp-block-search__button:active,
-.wp-block-file .wp-block-file__button:active {
- color: var(--button--color-text-active);
- background-color: var(--button--color-background-active);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .site .button:not(:hover):not(:active):not(.has-background),
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-background),
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-background),
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--local--color-primary, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .site .button:hover,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site .button:active,
</ins><span class="cx" style="display: block; padding: 0 10px"> input[type=submit]:hover,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+input[type=submit]:active,
</ins><span class="cx" style="display: block; padding: 0 10px"> input[type=reset]:hover,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+input[type=reset]:active,
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button:hover,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file .wp-block-file__button:hover {
- color: var(--button--color-text-hover);
- background: transparent;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button:active,
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:active,
+.wp-block-file a.wp-block-file__button:hover,
+.wp-block-file a.wp-block-file__button:active {
+ background-color: transparent;
+ border-color: currentColor;
+ color: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site .button:focus,
+input[type=submit]:focus,
+input[type=reset]:focus,
+.wp-block-search .wp-block-search__button:focus,
+.wp-block-button .wp-block-button__link:focus,
+.wp-block-file a.wp-block-file__button:focus {
+ outline-offset: -6px;
+ outline: 2px dotted currentColor;
+}
+
+.site .button:disabled,
+input[type=submit]:disabled,
+input[type=reset]:disabled,
+.wp-block-search .wp-block-search__button:disabled,
+.wp-block-button .wp-block-button__link:disabled,
+.wp-block-file a.wp-block-file__button:disabled {
+ background-color: var(--global--color-white-50);
+ border-color: var(--global--color-white-50);
+ color: var(--button--color-text-active);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Block Options
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
- color: var(--button--color-text-active) !important;
- background: transparent !important;
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--global--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
- color: var(--button--color-text-hover) !important;
- background: transparent !important;
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--local--color-background, var(--global--color-background));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
- color: var(--button--color-text) !important;
- background: var(--button--color-background) !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link {
- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
- background: transparent;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--local--color-primary, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
- background: transparent;
- color: var(--button--color-background);
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
+ border-color: currentColor !important;
+ background-color: transparent !important;
+ color: inherit !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
- color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
+ border-color: currentColor;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background {
- color: var(--global--color-dark-gray);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--local--color-primary, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color {
- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
+ color: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color,
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-text-color {
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:active,
-.wp-block-button.is-style-outline .wp-block-button__link:hover {
- color: var(--button--color-text) !important;
- background: var(--button--color-background) !important;
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:hover,
+.wp-block-button.is-style-outline .wp-block-button__link:active {
+ border-color: transparent !important;
+ background-color: var(--global--color-primary) !important;
+ color: var(--global--color-background) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color,
-.wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color {
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
+ background-color: var(--local--color-primary, var(--global--color-primary)) !important;
+ color: var(--local--color-background, var(--global--color-background)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:focus {
- color: var(--button--color-background) !important;
- background: transparent !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
+ color: var(--local--color-background, var(--global--color-background)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button .is-style-squared .wp-block-button__link {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2118,53 +2141,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file a.wp-block-file__button:active,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file a.wp-block-file__button:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file a.wp-block-file__button:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: var(--button--color-text-hover);
</del><span class="cx" style="display: block; padding: 0 10px"> opacity: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file a.wp-block-file__button:visited {
- color: var(--button--color-text);
-}
-
-.wp-block-file a.wp-block-file__button:visited:hover {
- color: var(--button--color-text-hover);
-}
-
-.wp-block-file .wp-block-file__button {
- line-height: var(--button--line-height);
- color: var(--button--color-text);
- cursor: pointer;
- font-weight: var(--button--font-weight);
- font-family: var(--button--font-family);
- font-size: var(--button--font-size);
- background-color: var(--button--color-background);
- border-radius: var(--button--border-radius);
- border: var(--button--border-width) solid var(--button--color-background);
- text-decoration: none;
- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file a.wp-block-file__button {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file .wp-block-file__button:focus {
- background: transparent;
- outline-offset: -6px;
- outline: 2px dotted currentColor;
-}
-
-.is-dark-theme .wp-block-file .wp-block-file__button:focus {
- color: var(--button--color-background);
-}
-
-.wp-block-file .wp-block-file__button:focus:not(.has-background) {
- color: var(--button--color-text-hover);
-}
-
-.wp-block-file .wp-block-file__button:disabled {
- background-color: var(--global--color-white-50);
- border-color: var(--global--color-white-50);
- color: var(--button--color-text-active);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-gallery {
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3266,31 +3249,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: var(--form--border-color);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background .wp-block-search .wp-block-search__input,
-[class*=background-color] .wp-block-search .wp-block-search__input,
-[style*=background-color] .wp-block-search .wp-block-search__input,
-.wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search .wp-block-search__input {
+ border-color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
-.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
- border-color: var(--global--color-white);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search button.wp-block-search__button {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: transparent;
- color: var(--button--color-text-hover);
</del><span class="cx" style="display: block; padding: 0 10px"> line-height: 1;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search button.wp-block-search__button:hover {
- background-color: var(--button--color-background);
- color: var(--button--color-text);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search button.wp-block-search__button.has-icon {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 6px calc(0.5 * var(--button--padding-horizontal));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3301,122 +3268,61 @@
</span><span class="cx" style="display: block; padding: 0 10px"> fill: currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-black-background-color .wp-block-search button.wp-block-search__button {
- color: var(--global--color-white);
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search button.wp-block-search__button:hover,
+.has-background .wp-block-search button.wp-block-search__button:active {
+ background-color: var(--local--color-background, var(--global--color-background)) !important;
+ color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: var(--button--color-background);
- border-color: var(--global--color-white);
- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-search button.wp-block-search__button:hover,
+.has-text-color .wp-block-search button.wp-block-search__button:active {
+ color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
- color: var(--button--color-text);
-}
-
-.has-background.has-white-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-green-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-red-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button {
- border-color: currentColor;
- color: currentColor;
-}
-
-.has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: var(--form--border-color);
- border-color: var(--form--border-color);
- color: var(--global--color-white);
-}
-
-.is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
- border-color: var(--button--color-text);
- background-color: var(--button--color-text);
- color: var(--button--color-background);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> border: var(--form--border-width) solid var(--form--border-color);
</span><span class="cx" style="display: block; padding: 0 10px"> border-radius: var(--form--border-radius);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: var(--form--border-width);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+ border-color: var(--local--color-primary, var(--global--color-primary)) !important;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-right: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding-right: var(--form--spacing-unit);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: var(--form--color-text);
+ outline-offset: -2px;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted var(--form--border-color);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- outline-offset: -5px;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
- outline-color: currentColor;
-}
-
-.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
- border-color: var(--button--color-background);
- color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
+ color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
+ color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
- border-color: var(--button--color-text);
- color: var(--button--color-text);
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
+ background-color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
- border-color: var(--button--color-text);
- color: var(--button--color-text);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon {
+ padding: 6px calc(0.5 * var(--button--padding-horizontal));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
- border-color: var(--button--color-text);
- background-color: var(--button--color-text);
- color: var(--button--color-background);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search__button {
</span><span class="cx" style="display: block; padding: 0 10px"> box-shadow: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5562,16 +5468,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .widget_search > .search-form .search-submit {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: transparent;
- color: var(--button--color-text-hover);
</del><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: calc(0.5 * var(--global--spacing-vertical));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.widget_search > .search-form .search-submit:hover {
- background-color: var(--button--color-background);
- color: var(--button--color-text);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .widget_rss a.rsswidget .rss-widget-icon {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5630,42 +5529,92 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-black);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-black-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-black, #000);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-gray-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-gray);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-gray-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-gray, #000);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-dark-gray-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-dark-gray);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-dark-gray-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-dark-gray, #000);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-green-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-green);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-green-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-green, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-blue-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-blue);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-blue-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-blue, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-purple);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-purple-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-purple, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-red-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-red);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-red-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-red, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-orange-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-orange);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-orange-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-orange, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-yellow-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-yellow);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-yellow-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-yellow, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-white-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-white-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-white, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-background a,
</span><span class="cx" style="display: block; padding: 0 10px"> .has-background p,
</span><span class="cx" style="display: block; padding: 0 10px"> .has-background h1,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5681,8 +5630,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-black);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-gray-background-color[class] {
- background-color: var(--global--color-gray);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-black-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-black, #000);
+ background-color: var(--local--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-dark-gray-background-color[class] {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5689,50 +5639,126 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-dark-gray);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-dark-gray-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-dark-gray, #000);
+ background-color: var(--local--color-background);
+}
+
+.has-gray-background-color[class] {
+ background-color: var(--global--color-gray);
+}
+
+.has-gray-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-gray, #000);
+ background-color: var(--local--color-background);
+}
+
+.has-light-gray-background-color[class] {
+ background-color: var(--global--color-light-gray);
+}
+
+.has-light-gray-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-light-gray, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-green-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-green);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-green-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-green, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-blue-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-blue);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-blue-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-blue, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-purple);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-purple-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-purple, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-red-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-red);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-red-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-red, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-orange-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-orange);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-orange-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-orange, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-yellow-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-yellow);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-yellow-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-yellow, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-white-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-black-background-color[class],
-:not(.has-text-color).has-gray-background-color[class],
-:not(.has-text-color).has-dark-gray-background-color[class] {
- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-white-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-white, #fff);
+ background-color: var(--local--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-green-background-color[class],
-:not(.has-text-color).has-blue-background-color[class],
-:not(.has-text-color).has-purple-background-color[class],
-:not(.has-text-color).has-red-background-color[class],
-:not(.has-text-color).has-orange-background-color[class],
-:not(.has-text-color).has-yellow-background-color[class],
-:not(.has-text-color).has-white-background-color[class] {
- color: var(--global--color-dark-gray);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-background, #fff);
+ color: var(--local--color-primary, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-primary, #000);
+}
+
+.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-primary, #000);
+ color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-background, #fff);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-to-yellow-gradient-background {
</span><span class="cx" style="display: block; padding: 0 10px"> background: linear-gradient(-160deg, var(--global--color-purple), var(--global--color-yellow));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyonestylecss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/style.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/style.css 2021-01-20 04:58:20 UTC (rev 49986)
+++ trunk/src/wp-content/themes/twentytwentyone/style.css 2021-01-20 05:49:28 UTC (rev 49987)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1717,149 +1717,172 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .site .button,
</span><span class="cx" style="display: block; padding: 0 10px"> input[type=submit],
</span><span class="cx" style="display: block; padding: 0 10px"> input[type=reset],
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search__button,
-.wp-block-button .wp-block-button__link {
- line-height: var(--button--line-height);
- color: var(--button--color-text);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button,
+.wp-block-button .wp-block-button__link,
+.wp-block-file a.wp-block-file__button {
+ border: var(--button--border-width) solid transparent;
+ border-radius: var(--button--border-radius);
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-weight: var(--button--font-weight);
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: var(--button--font-family);
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--button--font-size);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: var(--button--color-background);
- border-radius: var(--button--border-radius);
- border: var(--button--border-width) solid var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: var(--button--line-height);
+ padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button:focus,
-input[type=submit]:focus,
-input[type=reset]:focus,
-.wp-block-search__button:focus,
-.wp-block-button .wp-block-button__link:focus {
- background: transparent;
- outline-offset: -6px;
- outline: 2px dotted currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site .button:not(:hover):not(:active):not(.has-text-color),
+input[type=submit]:not(:hover):not(:active):not(.has-text-color),
+input[type=reset]:not(:hover):not(:active):not(.has-text-color),
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--global--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .site .button:focus,
-.is-dark-theme input[type=submit]:focus,
-.is-dark-theme input[type=reset]:focus,
-.is-dark-theme .wp-block-search__button:focus,
-.is-dark-theme .wp-block-button .wp-block-button__link:focus {
- color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .site .button:not(:hover):not(:active):not(.has-text-color),
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color),
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color),
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--local--color-background, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button:focus:not(.has-background),
-input[type=submit]:focus:not(.has-background),
-input[type=reset]:focus:not(.has-background),
-.wp-block-search__button:focus:not(.has-background),
-.wp-block-button .wp-block-button__link:focus:not(.has-background) {
- color: var(--button--color-text-hover);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button:disabled,
-input[type=submit]:disabled,
-input[type=reset]:disabled,
-.wp-block-search__button:disabled,
-.wp-block-button .wp-block-button__link:disabled {
- background-color: var(--global--color-white-50);
- border-color: var(--global--color-white-50);
- color: var(--button--color-text-active);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site .button:not(:hover):not(:active):not(.has-background),
+input[type=submit]:not(:hover):not(:active):not(.has-background),
+input[type=reset]:not(:hover):not(:active):not(.has-background),
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
+.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.site .button:active,
-input[type=submit]:active,
-input[type=reset]:active,
-.wp-block-search .wp-block-search__button:active,
-.wp-block-file .wp-block-file__button:active {
- color: var(--button--color-text-active);
- background-color: var(--button--color-background-active);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .site .button:not(:hover):not(:active):not(.has-background),
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-background),
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-background),
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--local--color-primary, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .site .button:hover,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site .button:active,
</ins><span class="cx" style="display: block; padding: 0 10px"> input[type=submit]:hover,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+input[type=submit]:active,
</ins><span class="cx" style="display: block; padding: 0 10px"> input[type=reset]:hover,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+input[type=reset]:active,
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button:hover,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file .wp-block-file__button:hover {
- color: var(--button--color-text-hover);
- background: transparent;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search .wp-block-search__button:active,
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:active,
+.wp-block-file a.wp-block-file__button:hover,
+.wp-block-file a.wp-block-file__button:active {
+ background-color: transparent;
+ border-color: currentColor;
+ color: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site .button:focus,
+input[type=submit]:focus,
+input[type=reset]:focus,
+.wp-block-search .wp-block-search__button:focus,
+.wp-block-button .wp-block-button__link:focus,
+.wp-block-file a.wp-block-file__button:focus {
+ outline-offset: -6px;
+ outline: 2px dotted currentColor;
+}
+
+.site .button:disabled,
+input[type=submit]:disabled,
+input[type=reset]:disabled,
+.wp-block-search .wp-block-search__button:disabled,
+.wp-block-button .wp-block-button__link:disabled,
+.wp-block-file a.wp-block-file__button:disabled {
+ background-color: var(--global--color-white-50);
+ border-color: var(--global--color-white-50);
+ color: var(--button--color-text-active);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Block Options
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
- color: var(--button--color-text-active) !important;
- background: transparent !important;
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--global--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
- color: var(--button--color-text-hover) !important;
- background: transparent !important;
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--local--color-background, var(--global--color-background));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
- color: var(--button--color-text) !important;
- background: var(--button--color-background) !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+ color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link {
- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
- background: transparent;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: var(--local--color-primary, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
- background: transparent;
- color: var(--button--color-background);
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
+ border-color: currentColor !important;
+ background-color: transparent !important;
+ color: inherit !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
- color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
+ border-color: currentColor;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--global--color-primary);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background {
- color: var(--global--color-dark-gray);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+ color: var(--local--color-primary, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color {
- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
+ color: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color,
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-text-color {
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+ background-color: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:active,
-.wp-block-button.is-style-outline .wp-block-button__link:hover {
- color: var(--button--color-text) !important;
- background: var(--button--color-background) !important;
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-button.is-style-outline .wp-block-button__link:hover,
+.wp-block-button.is-style-outline .wp-block-button__link:active {
+ border-color: transparent !important;
+ background-color: var(--global--color-primary) !important;
+ color: var(--global--color-background) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color,
-.wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color {
- border-color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
+ background-color: var(--local--color-primary, var(--global--color-primary)) !important;
+ color: var(--local--color-background, var(--global--color-background)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:focus {
- color: var(--button--color-background) !important;
- background: transparent !important;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
+ color: var(--local--color-background, var(--global--color-background)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button .is-style-squared .wp-block-button__link {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2128,53 +2151,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file a.wp-block-file__button:active,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file a.wp-block-file__button:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file a.wp-block-file__button:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: var(--button--color-text-hover);
</del><span class="cx" style="display: block; padding: 0 10px"> opacity: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file a.wp-block-file__button:visited {
- color: var(--button--color-text);
-}
-
-.wp-block-file a.wp-block-file__button:visited:hover {
- color: var(--button--color-text-hover);
-}
-
-.wp-block-file .wp-block-file__button {
- line-height: var(--button--line-height);
- color: var(--button--color-text);
- cursor: pointer;
- font-weight: var(--button--font-weight);
- font-family: var(--button--font-family);
- font-size: var(--button--font-size);
- background-color: var(--button--color-background);
- border-radius: var(--button--border-radius);
- border: var(--button--border-width) solid var(--button--color-background);
- text-decoration: none;
- padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file a.wp-block-file__button {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file .wp-block-file__button:focus {
- background: transparent;
- outline-offset: -6px;
- outline: 2px dotted currentColor;
-}
-
-.is-dark-theme .wp-block-file .wp-block-file__button:focus {
- color: var(--button--color-background);
-}
-
-.wp-block-file .wp-block-file__button:focus:not(.has-background) {
- color: var(--button--color-text-hover);
-}
-
-.wp-block-file .wp-block-file__button:disabled {
- background-color: var(--global--color-white-50);
- border-color: var(--global--color-white-50);
- color: var(--button--color-text-active);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-gallery {
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3276,31 +3259,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: var(--form--border-color);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background .wp-block-search .wp-block-search__input,
-[class*=background-color] .wp-block-search .wp-block-search__input,
-[style*=background-color] .wp-block-search .wp-block-search__input,
-.wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search .wp-block-search__input {
+ border-color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
-.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
- border-color: var(--global--color-white);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search button.wp-block-search__button {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: transparent;
- color: var(--button--color-text-hover);
</del><span class="cx" style="display: block; padding: 0 10px"> line-height: 1;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-search button.wp-block-search__button:hover {
- background-color: var(--button--color-background);
- color: var(--button--color-text);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search button.wp-block-search__button.has-icon {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 6px calc(0.5 * var(--button--padding-horizontal));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3311,122 +3278,61 @@
</span><span class="cx" style="display: block; padding: 0 10px"> fill: currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-black-background-color .wp-block-search button.wp-block-search__button {
- color: var(--global--color-white);
- border-color: currentColor;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search button.wp-block-search__button:hover,
+.has-background .wp-block-search button.wp-block-search__button:active {
+ background-color: var(--local--color-background, var(--global--color-background)) !important;
+ color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: var(--button--color-background);
- border-color: var(--global--color-white);
- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-text-color .wp-block-search button.wp-block-search__button:hover,
+.has-text-color .wp-block-search button.wp-block-search__button:active {
+ color: var(--local--color-primary, var(--global--color-primary)) !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
- color: var(--button--color-text);
-}
-
-.has-background.has-white-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-green-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-red-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button {
- border-color: currentColor;
- color: currentColor;
-}
-
-.has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
- background-color: var(--form--border-color);
- border-color: var(--form--border-color);
- color: var(--global--color-white);
-}
-
-.is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
- border-color: var(--button--color-text);
- background-color: var(--button--color-text);
- color: var(--button--color-background);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> border: var(--form--border-width) solid var(--form--border-color);
</span><span class="cx" style="display: block; padding: 0 10px"> border-radius: var(--form--border-radius);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: var(--form--border-width);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+ border-color: var(--local--color-primary, var(--global--color-primary)) !important;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-left: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding-left: var(--form--spacing-unit);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: var(--form--color-text);
+ outline-offset: -2px;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted var(--form--border-color);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- outline-offset: -5px;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
- outline-color: currentColor;
-}
-
-.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
- border-color: var(--button--color-background);
- color: var(--button--color-background);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
+ color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
+ color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
- border-color: var(--button--color-text);
- color: var(--button--color-text);
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
+ background-color: var(--global--color-dark-gray);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
- border-color: var(--button--color-text);
- color: var(--button--color-text);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon {
+ padding: 6px calc(0.5 * var(--button--padding-horizontal));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
- border-color: var(--button--color-text);
- background-color: var(--button--color-text);
- color: var(--button--color-background);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search__button {
</span><span class="cx" style="display: block; padding: 0 10px"> box-shadow: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5598,16 +5504,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .widget_search > .search-form .search-submit {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: transparent;
- color: var(--button--color-text-hover);
</del><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: calc(0.5 * var(--global--spacing-vertical));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.widget_search > .search-form .search-submit:hover {
- background-color: var(--button--color-background);
- color: var(--button--color-text);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .widget_rss a.rsswidget .rss-widget-icon {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5666,42 +5565,92 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-black);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-black-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-black, #000);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-gray-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-gray);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-gray-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-gray, #000);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-dark-gray-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-dark-gray);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-dark-gray-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-dark-gray, #000);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-green-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-green);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-green-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-green, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-blue-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-blue);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-blue-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-blue, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-purple);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-purple-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-purple, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-red-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-red);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-red-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-red, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-orange-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-orange);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-orange-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-orange, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-yellow-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-yellow);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-yellow-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-yellow, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-white-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-white-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-white, #fff);
+ color: var(--local--color-primary);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-background a,
</span><span class="cx" style="display: block; padding: 0 10px"> .has-background p,
</span><span class="cx" style="display: block; padding: 0 10px"> .has-background h1,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5717,8 +5666,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-black);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.has-gray-background-color[class] {
- background-color: var(--global--color-gray);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-black-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-black, #000);
+ background-color: var(--local--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .has-dark-gray-background-color[class] {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5725,50 +5675,126 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-dark-gray);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-dark-gray-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-dark-gray, #000);
+ background-color: var(--local--color-background);
+}
+
+.has-gray-background-color[class] {
+ background-color: var(--global--color-gray);
+}
+
+.has-gray-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-gray, #000);
+ background-color: var(--local--color-background);
+}
+
+.has-light-gray-background-color[class] {
+ background-color: var(--global--color-light-gray);
+}
+
+.has-light-gray-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-light-gray, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-green-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-green);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-green-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-green, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-blue-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-blue);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-blue-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-blue, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-purple);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-purple-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-purple, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-red-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-red);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-red-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-red, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-orange-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-orange);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-orange-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-orange, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-yellow-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-yellow);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-yellow-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-yellow, #fff);
+ background-color: var(--local--color-background);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-white-background-color[class] {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-black-background-color[class],
-:not(.has-text-color).has-gray-background-color[class],
-:not(.has-text-color).has-dark-gray-background-color[class] {
- color: var(--global--color-white);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-white-background-color[class] [class*=__inner-container] {
+ --local--color-background: var(--global--color-white, #fff);
+ background-color: var(--local--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-:not(.has-text-color).has-green-background-color[class],
-:not(.has-text-color).has-blue-background-color[class],
-:not(.has-text-color).has-purple-background-color[class],
-:not(.has-text-color).has-red-background-color[class],
-:not(.has-text-color).has-orange-background-color[class],
-:not(.has-text-color).has-yellow-background-color[class],
-:not(.has-text-color).has-white-background-color[class] {
- color: var(--global--color-dark-gray);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-background, #fff);
+ color: var(--local--color-primary, var(--global--color-primary));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-primary, #000);
+}
+
+.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-primary, #000);
+ color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+ --local--color-primary: var(--global--color-background, #fff);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-purple-to-yellow-gradient-background {
</span><span class="cx" style="display: block; padding: 0 10px"> background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre>
</div>
</div>
</body>
</html>