Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-26 06:13:07 +02:00
Code Issues Projects Releases Wiki Activity

Twenty Twenty-One: Clean up Button styles.

Browse Source 
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 #51927.
Built from https://develop.svn.wordpress.org/trunk@49987


git-svn-id: http://core.svn.wordpress.org/trunk@49688 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2021-01-20 05:51:02 +00:00
parent ce5a508734
commit b3bb99b3d7
15 changed files with 2046 additions and 2071 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

780
wp-content/themes/twentytwentyone/assets/css/ie-editor.css
View File

File diff suppressed because it is too large Load Diff

856
wp-content/themes/twentytwentyone/assets/css/ie.css
View File

File diff suppressed because it is too large Load Diff

576
wp-content/themes/twentytwentyone/assets/css/style-editor.css
View File

@ -524,33 +524,50 @@ a:hover {
}
.wp-block-button__link {
line-height: var(--button--line-height);
color: var(--button--color-text);
border: var(--button--border-width) solid transparent;
border-radius: var(--button--border-radius);
cursor: pointer;
display: block;
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;
line-height: var(--button--line-height);
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
text-decoration: none;
}
.wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-background);
}
.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--local--color-background, var(--global--color-primary));
}
.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
color: var(--global--color-primary);
}
.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 {
background: transparent;
outline-offset: -6px;
outline: 2px dotted currentColor;
}
.is-dark-theme .wp-block-button__link:focus {
color: var(--button--color-background);
}
.wp-block-button__link:focus:not(.has-background) {
color: var(--button--color-text-hover);
}
.wp-block-button__link:disabled {
background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50);
@ -573,69 +590,81 @@ a:hover {
margin-bottom: var(--global--spacing-vertical);
}
.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,
.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);
border-color: currentColor !important;
background-color: transparent !important;
color: inherit !important;
}
.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);
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
outline-offset: inherit;
outline: inherit;
}
.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);
}
.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);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-background {
border-color: var(--button--color-background);
}
.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;
}
.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
color: var(--global--color-dark-gray);
}
.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);
}
.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);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
.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;
}
.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);
.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-primary);
}
.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));
}
.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
color: inherit;
}
.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: transparent;
}
.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;
}
.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;
}
.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;
}
.wp-block-button.is-style-outline .wp-block-button__link:focus {
outline-offset: inherit;
outline: inherit;
}
.wp-block-button.is-style-squared {
@ -848,43 +877,60 @@ a:hover {
}
.wp-block-file .wp-block-file__button {
line-height: var(--button--line-height);
color: var(--button--color-text);
border: var(--button--border-width) solid transparent;
border-radius: var(--button--border-radius);
cursor: pointer;
display: block;
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;
line-height: var(--button--line-height);
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
text-decoration: none;
display: inline-block;
}
.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-background);
}
.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));
}
.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
color: var(--global--color-primary);
}
.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 {
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);
}
.wp-block-file .wp-block-file__button:hover {
color: var(--button--color-text-hover);
background: transparent;
.wp-block-file .wp-block-file__button:focus {
outline-offset: inherit;
outline: inherit;
}
.wp-block-gallery figcaption {
@ -1747,6 +1793,7 @@ pre.wp-block-preformatted {
margin-bottom: calc(var(--global--spacing-vertical) / 3);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.wp-block-search .wp-block-search__input {
border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius);
@ -1758,71 +1805,72 @@ pre.wp-block-preformatted {
padding: var(--form--spacing-unit);
}
.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.is-dark-theme .wp-block-search .wp-block-search__input {
background: var(--global--color-white-90);
}
.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);
}
.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);
.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;
}
.wp-block-search .wp-block-search__button {
line-height: var(--button--line-height);
color: var(--button--color-text);
border: var(--button--border-width) solid transparent;
border-radius: var(--button--border-radius);
cursor: pointer;
display: block;
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;
line-height: var(--button--line-height);
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
text-decoration: none;
box-shadow: none;
margin-left: 0;
}
.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 {
background-color: transparent;
color: var(--button--color-text-hover);
border-color: currentColor;
color: inherit;
}
.wp-block-search .wp-block-search__button:focus {
background: transparent;
outline-offset: -6px;
outline: 2px dotted currentColor;
}
.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);
}
.wp-block-search .wp-block-search__button:disabled {
background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50);
color: var(--button--color-text-active);
}
.wp-block-search .wp-block-search__button:hover {
color: var(--button--color-text);
background-color: var(--button--color-background);
}
.wp-block-search .wp-block-search__button.has-icon {
padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
display: inherit;
}
.wp-block-search .wp-block-search__button.has-icon svg {
@ -1830,119 +1878,50 @@ pre.wp-block-preformatted {
height: 40px;
}
.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;
.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;
}
.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);
.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;
}
.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);
.wp-block-search .wp-block-search__button:focus {
outline-offset: inherit;
outline: inherit;
}
.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);
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
padding: var(--form--border-width);
}
.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 {
.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
border: none;
}
.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);
}
.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);
}
.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);
color: var(--global--color-white);
}
.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);
}
.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
color: var(--button--color-text);
border-color: currentColor;
}
.is-dark-theme .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);
}
.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;
}
.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);
}
.wp-block[data-align=center] > * {
text-align: center;
}
@ -2350,42 +2329,92 @@ a {
color: var(--global--color-black);
}
.has-black-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-black, #000);
color: var(--local--color-primary);
}
.has-gray-color[class] {
color: var(--global--color-gray);
}
.has-gray-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-gray, #000);
color: var(--local--color-primary);
}
.has-dark-gray-color[class] {
color: var(--global--color-dark-gray);
}
.has-dark-gray-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-dark-gray, #000);
color: var(--local--color-primary);
}
.has-green-color[class] {
color: var(--global--color-green);
}
.has-green-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-green, #fff);
color: var(--local--color-primary);
}
.has-blue-color[class] {
color: var(--global--color-blue);
}
.has-blue-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-blue, #fff);
color: var(--local--color-primary);
}
.has-purple-color[class] {
color: var(--global--color-purple);
}
.has-purple-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-purple, #fff);
color: var(--local--color-primary);
}
.has-red-color[class] {
color: var(--global--color-red);
}
.has-red-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-red, #fff);
color: var(--local--color-primary);
}
.has-orange-color[class] {
color: var(--global--color-orange);
}
.has-orange-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-orange, #fff);
color: var(--local--color-primary);
}
.has-yellow-color[class] {
color: var(--global--color-yellow);
}
.has-yellow-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-yellow, #fff);
color: var(--local--color-primary);
}
.has-white-color[class] {
color: var(--global--color-white);
}
.has-white-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-white, #fff);
color: var(--local--color-primary);
}
.has-background a,
.has-background p,
.has-background h1,
@ -2401,56 +2430,133 @@ a {
background-color: var(--global--color-black);
}
.has-gray-background-color[class] {
background-color: var(--global--color-gray);
.has-black-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-black, #000);
background-color: var(--local--color-background);
}
.has-dark-gray-background-color[class] {
background-color: var(--global--color-dark-gray);
}
.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);
}
.has-green-background-color[class] {
background-color: var(--global--color-green);
}
.has-green-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-green, #fff);
background-color: var(--local--color-background);
}
.has-blue-background-color[class] {
background-color: var(--global--color-blue);
}
.has-blue-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-blue, #fff);
background-color: var(--local--color-background);
}
.has-purple-background-color[class] {
background-color: var(--global--color-purple);
}
.has-purple-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-purple, #fff);
background-color: var(--local--color-background);
}
.has-red-background-color[class] {
background-color: var(--global--color-red);
}
.has-red-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-red, #fff);
background-color: var(--local--color-background);
}
.has-orange-background-color[class] {
background-color: var(--global--color-orange);
}
.has-orange-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-orange, #fff);
background-color: var(--local--color-background);
}
.has-yellow-background-color[class] {
background-color: var(--global--color-yellow);
}
.has-yellow-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-yellow, #fff);
background-color: var(--local--color-background);
}
.has-white-background-color[class] {
background-color: var(--global--color-white);
}
: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);
.has-white-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-white, #fff);
background-color: var(--local--color-background);
}
: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);
.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));
}
.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);
}
.has-purple-to-yellow-gradient-background {

54
wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss
View File

@ -20,32 +20,60 @@
// Button style
// - Applies button styles to blocks and elements that share them.
@mixin button-style() {
line-height: var(--button--line-height);
color: var(--button--color-text);
border: var(--button--border-width) solid transparent;
border-radius: var(--button--border-radius);
cursor: pointer;
display: block;
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;
line-height: var(--button--line-height);
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
text-decoration: none;
&:focus {
background: transparent;
outline-offset: -6px;
outline: 2px dotted currentColor;
// Standard Button Color Relationship Logic
&:not(:hover):not(:active) {
.is-dark-theme & {
color: var(--button--color-background);
// 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);
}
}
}
// Background-colors
&:not(.has-background) {
color: var(--button--color-text-hover);
background-color: var(--global--color-primary);
// Nested
.has-background & {
background-color: var(--local--color-primary, var(--global--color-primary));
}
}
}
// 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
&:disabled {
background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50);

133
wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss
View File

@ -27,82 +27,105 @@
// Target the default and filled button states.
&:not(.is-style-outline) {
.wp-block-button__link {
.wp-block-button__link:not(:hover):not(:active) {
&:active {
color: var(--button--color-text-active) !important;
background: transparent !important;
border-color: var(--button--color-background);
// 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);
}
}
}
&:hover {
color: var(--button--color-text-hover) !important;
background: transparent !important;
border-color: var(--button--color-background);
// Background-colors
&:not(.has-background) {
background-color: var(--global--color-primary);
// Nested
.has-background & {
background-color: var(--local--color-primary, var(--global--color-primary));
}
}
}
// 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;
}
}
// Outline Style.
&.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);
.wp-block-button__link:not(:hover):not(:active) {
&:active,
&:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
border-color: var(--button--color-background);
// Border colors
&:not(.has-text-color),
&:not(.has-background),
&.has-background {
border-color: currentColor;
}
// Text colors
&:not(.has-text-color) {
color: var(--global--color-primary);
// Nested
.has-background & {
color: var(--local--color-primary, var(--global--color-primary));
}
}
&.has-background {
border-color: var(--button--color-background);
&:active,
&:hover {
background-color: var(--button--color-background) !important;
// Nested
.has-background &:not(.has-text-color) {
color: inherit;
}
}
&.has-background:not(.has-text-color) {
color: var(--global--color-dark-gray);
// Background-colors
&:not(.has-background) {
background-color: transparent;
}
}
// Hover Button color should match default button style
.wp-block-button__link:hover,
.wp-block-button__link:active {
background-color: var(--global--color-primary) !important;
border-color: transparent !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;
}
&.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);
.has-text-color & {
color: var(--local--color-background, var(--global--color-background)) !important;
}
}
.is-dark-theme & {
&:not(.has-text-color) {
&.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);
}
}
}
&.has-text-color {
border-color: currentColor;
&:active,
&:hover {
color: var(--button--color-text) !important;
border-color: var(--button--color-background);
}
}
// Remove :focus styles in the editor
.wp-block-button__link:focus {
outline-offset: inherit;
outline: inherit;
}
}

151
wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss
View File

@ -4,29 +4,13 @@
.site .button,
input[type="submit"],
input[type="reset"],
.wp-block-search__button,
.wp-block-button .wp-block-button__link {
.wp-block-search .wp-block-search__button,
.wp-block-button .wp-block-button__link,
.wp-block-file a.wp-block-file__button {
// Extend button style
@include button-style();
}
.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;
}
}
/**
* Block Options
*/
@ -35,88 +19,91 @@ input[type="reset"],
// Target the default and filled button states.
&:not(.is-style-outline) {
.wp-block-button__link {
.wp-block-button__link:not(:hover):not(:active) {
&:active {
color: var(--button--color-text-active) !important;
background: transparent !important;
border-color: var(--button--color-background);
// 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);
}
}
}
&:hover {
color: var(--button--color-text-hover) !important;
background: transparent !important;
border-color: var(--button--color-background);
}
// Background-colors
&:not(.has-background) {
background-color: var(--global--color-primary);
&:focus {
color: var(--button--color-text) !important;
background: var(--button--color-background) !important;
// Nested
.has-background & {
background-color: var(--local--color-primary, var(--global--color-primary));
}
}
}
// 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;
}
}
// Outline Style.
&.is-style-outline {
.wp-block-button__link {
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
.wp-block-button__link:not(:hover):not(:active) {
&:not(.has-background) {
background: transparent;
}
&:not(.has-background):not(.has-text-color) {
background: transparent;
color: var(--button--color-background);
border-color: var(--button--color-background);
}
&.has-background:not(.has-text-color) {
color: currentColor;
}
&.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);
}
}
}
&.has-text-color,
&.has-background.has-text-color {
// Border colors
&:not(.has-text-color),
&:not(.has-background),
&.has-background {
border-color: currentColor;
}
&:active,
&:hover {
color: var(--button--color-text) !important;
background: var(--button--color-background) !important;
border-color: var(--button--color-background);
// Text colors
&:not(.has-text-color) {
color: var(--global--color-primary);
&.has-text-color {
border-color: var(--button--color-background);
// Nested
.has-background & {
color: var(--local--color-primary, var(--global--color-primary));
}
}
&:focus {
color: var(--button--color-background) !important;
background: transparent !important;
&.has-background {
// Nested
.has-background &:not(.has-text-color) {
color: inherit;
}
}
// Background-colors
&:not(.has-background) {
background-color: transparent;
}
}
.wp-block-button__link:hover,
.wp-block-button__link:active {
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;
}
.has-text-color & {
color: var(--local--color-background, var(--global--color-background)) !important;
}
}
}

9
wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss
View File

@ -15,10 +15,11 @@
// Extend button style
@include button-style();
display: inline-block;
&:hover {
color: var(--button--color-text-hover);
background: transparent;
// Remove :focus styles in the editor
&:focus {
outline-offset: inherit;
outline: inherit;
}
}
}

13
wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss
View File

@ -4,21 +4,10 @@
a.wp-block-file__button:active,
a.wp-block-file__button:focus,
a.wp-block-file__button:hover {
color: var(--button--color-text-hover);
opacity: inherit;
}
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();
a.wp-block-file__button {
display: inline-block;
}
}

133
wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss
View File

@ -7,6 +7,7 @@
margin-bottom: calc(var(--global--spacing-vertical) / 3);
}
&.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.wp-block-search__input {
border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius);
@ -21,23 +22,8 @@
background: var(--global--color-white-90);
}
.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);
}
}
.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);
.has-background & {
border-color: var(--local--color-primary, var(--global--color-primary)) !important;
}
}
@ -45,16 +31,10 @@
@include button-style();
box-shadow: none;
margin-left: 0;
background-color: transparent;
color: var(--button--color-text-hover);
&:hover {
color: var(--button--color-text);
background-color: var(--button--color-background);
}
&.has-icon {
padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
display: inherit;
svg {
width: 40px;
@ -62,109 +42,60 @@
}
}
.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;
&:hover,
&:active {
&:hover {
color: var(--global--color-white);
background-color: var(--button--color-background);
border-color: var(--global--color-white);
.has-background & {
background-color: var(--local--color-background, var(--global--color-background)) !important;
color: var(--local--color-primary, var(--global--color-primary)) !important;
}
.is-dark-theme & {
color: var(--button--color-text);
background-color: var(--button--color-background);
}
.has-text-color & {
color: var(--local--color-primary, var(--global--color-primary)) !important;
}
}
.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);
}
}
// Remove :focus styles in the editor
&:focus {
outline-offset: inherit;
outline: inherit;
}
}
&.wp-block-search__button-inside {
.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 {
.wp-block-search__inside-wrapper {
padding: var(--form--border-width);
}
.wp-block-search__input {
border: none;
}
&.wp-block-search__text-button {
&.wp-block-search__text-button,
&.wp-block-search__icon-button {
.wp-block-search__button {
// 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;
// Search button always needs black contrast against white form background
&:hover {
color: var(--global--color-white);
background-color: var(--button--color-text);
border-color: var(--button--color-text);
}
}
.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);
color: var(--global--color-dark-gray);
}
.is-dark-theme & {
color: var(--button--color-text);
border-color: currentColor;
color: var(--global--color-dark-gray);
&:hover {
background-color: var(--global--color-dark-gray);
color: var(--global--color-white);
background-color: var(--button--color-text);
border-color: var(--button--color-text);
}
}
}
}
&.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);
}
}
}

108
wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss
View File

@ -28,31 +28,15 @@
border-color: var(--form--border-color);
}
.has-background &,
[class*="background-color"] &,
[style*="background-color"] &,
.wp-block-cover[style*="background-image"] & {
border-color: currentColor;
}
.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);
.has-background & {
border-color: var(--local--color-primary, var(--global--color-primary)) !important;
}
}
button.wp-block-search__button {
margin-left: 0;
background-color: transparent;
color: var(--button--color-text-hover);
line-height: 1;
&:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
}
&.has-icon {
padding: 6px calc(0.5 * var(--button--padding-horizontal));
@ -63,43 +47,16 @@
}
}
.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;
&:hover,
&:active {
&: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);
}
.has-background & {
background-color: var(--local--color-background, var(--global--color-background)) !important;
color: var(--local--color-primary, var(--global--color-primary)) !important;
}
}
.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);
}
.has-text-color & {
color: var(--local--color-primary, var(--global--color-primary)) !important;
}
}
}
@ -110,59 +67,44 @@
background-color: var(--global--color-white);
border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius);
padding: var(--form--border-width);
.has-background & {
border-color: var(--local--color-primary, var(--global--color-primary)) !important;
}
.wp-block-search__input {
margin-left: 0;
margin-right: 0;
padding-left: var(--form--spacing-unit);
// Add outline for focus styles to override default
&:focus {
color: var(--form--color-text);
outline-offset: -2px;
outline: 2px dotted var(--form--border-color);
outline-offset: -5px;
.is-dark-theme & {
outline-color: currentColor;
}
}
}
}
&.wp-block-search__text-button {
button.wp-block-search__button {
// Match the text button size with the icon button.
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
}
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);
// Search button always needs black contrast against white form background
&:hover {
color: var(--global--color-white);
color: var(--global--color-dark-gray);
}
.is-dark-theme & {
border-color: var(--button--color-text);
color: var(--button--color-text);
color: var(--global--color-dark-gray);
&:hover {
background-color: var(--global--color-dark-gray);
color: var(--global--color-white);
}
}
}
.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);
&.has-icon {
padding: 6px calc(0.5 * var(--button--padding-horizontal));
}
}
}

7
wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss
View File

@ -117,14 +117,7 @@
.search-submit {
margin-left: 0;
background-color: transparent;
color: var(--button--color-text-hover);
margin-bottom: calc(0.5 * var(--global--spacing-vertical));
&:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
}
}
}

139
wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss
View File

@ -1,42 +1,92 @@
// Gutenberg text color options
.has-black-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-black, #000000);
color: var(--local--color-primary);
}
color: var(--global--color-black);
}
.has-gray-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-gray, #000000);
color: var(--local--color-primary);
}
color: var(--global--color-gray);
}
.has-dark-gray-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-dark-gray, #000000);
color: var(--local--color-primary);
}
color: var(--global--color-dark-gray);
}
.has-green-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-green, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-green);
}
.has-blue-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-blue, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-blue);
}
.has-purple-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-purple, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-purple);
}
.has-red-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-red, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-red);
}
.has-orange-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-orange, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-orange);
}
.has-yellow-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-yellow, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-yellow);
}
.has-white-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-white, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-white);
}
@ -56,51 +106,118 @@
}
.has-black-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-black, #000000);
background-color: var(--local--color-background);
}
background-color: var(--global--color-black);
}
.has-gray-background-color[class] {
background-color: var(--global--color-gray);
}
.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);
}
.has-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-gray, #000000);
background-color: var(--local--color-background);
}
background-color: var(--global--color-gray);
}
.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);
}
.has-green-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-green, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-green);
}
.has-blue-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-blue, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-blue);
}
.has-purple-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-purple, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-purple);
}
.has-red-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-red, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-red);
}
.has-orange-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-orange, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-orange);
}
.has-yellow-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-yellow, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-yellow);
}
.has-white-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-white, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-white);
}
:not(.has-text-color) {
.has-background:not(.has-text-color) {
&.has-black-background-color[class],
&.has-gray-background-color[class],
&.has-dark-gray-background-color[class] {
color: var(--global--color-white);
// 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));
}
}
&.has-green-background-color[class],
@ -110,7 +227,15 @@
&.has-orange-background-color[class],
&.has-yellow-background-color[class],
&.has-white-background-color[class] {
color: var(--global--color-dark-gray);
// 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));
}
}
}

578
wp-content/themes/twentytwentyone/style-rtl.css
View File

@ -1707,149 +1707,172 @@ a:hover {
.site .button,
input[type=submit],
input[type=reset],
.wp-block-search__button,
.wp-block-button .wp-block-button__link {
line-height: var(--button--line-height);
color: var(--button--color-text);
.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);
cursor: pointer;
display: block;
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;
line-height: var(--button--line-height);
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
text-decoration: none;
}
.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);
}
.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));
}
.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);
}
.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);
}
.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));
}
.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__button:focus,
.wp-block-button .wp-block-button__link:focus {
background: transparent;
.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;
}
.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);
}
.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);
}
.site .button:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled,
.wp-block-search__button:disabled,
.wp-block-button .wp-block-button__link: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);
}
.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);
}
.site .button:hover,
input[type=submit]:hover,
input[type=reset]:hover,
.wp-block-search .wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover {
color: var(--button--color-text-hover);
background: transparent;
}
/**
* Block Options
*/
.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,
.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);
border-color: currentColor !important;
background-color: transparent !important;
color: inherit !important;
}
.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);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
color: var(--button--color-text) !important;
background: var(--button--color-background) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
background: transparent;
}
.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);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
color: currentColor;
}
.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);
}
.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);
}
.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);
}
.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 {
.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;
}
.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);
.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-primary);
}
.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);
.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));
}
.wp-block-button.is-style-outline .wp-block-button__link:focus {
color: var(--button--color-background) !important;
background: transparent !important;
.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
color: inherit;
}
.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: transparent;
}
.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;
}
.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;
}
.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;
}
.wp-block-button .is-style-squared .wp-block-button__link {
@ -2118,53 +2141,13 @@ input[type=reset]:hover,
.wp-block-file a.wp-block-file__button:active,
.wp-block-file a.wp-block-file__button:focus,
.wp-block-file a.wp-block-file__button:hover {
color: var(--button--color-text-hover);
opacity: inherit;
}
.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);
.wp-block-file a.wp-block-file__button {
display: inline-block;
}
.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);
}
.wp-block-gallery {
margin: 0 auto;
}
@ -3266,31 +3249,15 @@ pre.wp-block-preformatted {
border-color: var(--form--border-color);
}
.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;
}
.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);
.has-background .wp-block-search .wp-block-search__input {
border-color: var(--local--color-primary, var(--global--color-primary)) !important;
}
.wp-block-search button.wp-block-search__button {
margin-right: 0;
background-color: transparent;
color: var(--button--color-text-hover);
line-height: 1;
}
.wp-block-search button.wp-block-search__button:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
}
.wp-block-search button.wp-block-search__button.has-icon {
padding: 6px calc(0.5 * var(--button--padding-horizontal));
}
@ -3301,120 +3268,59 @@ pre.wp-block-preformatted {
fill: currentColor;
}
.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;
.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;
}
.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);
}
.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);
.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;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
background-color: var(--global--color-white);
border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius);
padding: var(--form--border-width);
}
.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;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
margin-right: 0;
margin-left: 0;
padding-right: var(--form--spacing-unit);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
color: var(--form--color-text);
outline-offset: -2px;
outline: 2px dotted var(--form--border-color);
outline-offset: -5px;
}
.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 {
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
.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);
.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);
}
.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 {
.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);
}
.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);
color: var(--global--color-white);
}
.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 {
color: var(--global--color-white);
}
.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);
}
.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);
.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));
}
.wp-block-search__button {
@ -5562,16 +5468,9 @@ h1.page-title {
.widget_search > .search-form .search-submit {
margin-right: 0;
background-color: transparent;
color: var(--button--color-text-hover);
margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}
.widget_search > .search-form .search-submit:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
}
.widget_rss a.rsswidget .rss-widget-icon {
display: none;
}
@ -5630,42 +5529,92 @@ h1.page-title {
color: var(--global--color-black);
}
.has-black-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-black, #000);
color: var(--local--color-primary);
}
.has-gray-color[class] {
color: var(--global--color-gray);
}
.has-gray-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-gray, #000);
color: var(--local--color-primary);
}
.has-dark-gray-color[class] {
color: var(--global--color-dark-gray);
}
.has-dark-gray-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-dark-gray, #000);
color: var(--local--color-primary);
}
.has-green-color[class] {
color: var(--global--color-green);
}
.has-green-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-green, #fff);
color: var(--local--color-primary);
}
.has-blue-color[class] {
color: var(--global--color-blue);
}
.has-blue-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-blue, #fff);
color: var(--local--color-primary);
}
.has-purple-color[class] {
color: var(--global--color-purple);
}
.has-purple-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-purple, #fff);
color: var(--local--color-primary);
}
.has-red-color[class] {
color: var(--global--color-red);
}
.has-red-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-red, #fff);
color: var(--local--color-primary);
}
.has-orange-color[class] {
color: var(--global--color-orange);
}
.has-orange-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-orange, #fff);
color: var(--local--color-primary);
}
.has-yellow-color[class] {
color: var(--global--color-yellow);
}
.has-yellow-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-yellow, #fff);
color: var(--local--color-primary);
}
.has-white-color[class] {
color: var(--global--color-white);
}
.has-white-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-white, #fff);
color: var(--local--color-primary);
}
.has-background a,
.has-background p,
.has-background h1,
@ -5681,56 +5630,133 @@ h1.page-title {
background-color: var(--global--color-black);
}
.has-gray-background-color[class] {
background-color: var(--global--color-gray);
.has-black-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-black, #000);
background-color: var(--local--color-background);
}
.has-dark-gray-background-color[class] {
background-color: var(--global--color-dark-gray);
}
.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);
}
.has-green-background-color[class] {
background-color: var(--global--color-green);
}
.has-green-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-green, #fff);
background-color: var(--local--color-background);
}
.has-blue-background-color[class] {
background-color: var(--global--color-blue);
}
.has-blue-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-blue, #fff);
background-color: var(--local--color-background);
}
.has-purple-background-color[class] {
background-color: var(--global--color-purple);
}
.has-purple-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-purple, #fff);
background-color: var(--local--color-background);
}
.has-red-background-color[class] {
background-color: var(--global--color-red);
}
.has-red-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-red, #fff);
background-color: var(--local--color-background);
}
.has-orange-background-color[class] {
background-color: var(--global--color-orange);
}
.has-orange-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-orange, #fff);
background-color: var(--local--color-background);
}
.has-yellow-background-color[class] {
background-color: var(--global--color-yellow);
}
.has-yellow-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-yellow, #fff);
background-color: var(--local--color-background);
}
.has-white-background-color[class] {
background-color: var(--global--color-white);
}
: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);
.has-white-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-white, #fff);
background-color: var(--local--color-background);
}
: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);
.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));
}
.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);
}
.has-purple-to-yellow-gradient-background {

578
wp-content/themes/twentytwentyone/style.css
View File

@ -1717,149 +1717,172 @@ a:hover {
.site .button,
input[type=submit],
input[type=reset],
.wp-block-search__button,
.wp-block-button .wp-block-button__link {
line-height: var(--button--line-height);
color: var(--button--color-text);
.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);
cursor: pointer;
display: block;
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;
line-height: var(--button--line-height);
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
text-decoration: none;
}
.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);
}
.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));
}
.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);
}
.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);
}
.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));
}
.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__button:focus,
.wp-block-button .wp-block-button__link:focus {
background: transparent;
.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;
}
.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);
}
.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);
}
.site .button:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled,
.wp-block-search__button:disabled,
.wp-block-button .wp-block-button__link: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);
}
.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);
}
.site .button:hover,
input[type=submit]:hover,
input[type=reset]:hover,
.wp-block-search .wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover {
color: var(--button--color-text-hover);
background: transparent;
}
/**
* Block Options
*/
.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,
.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);
border-color: currentColor !important;
background-color: transparent !important;
color: inherit !important;
}
.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);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
color: var(--button--color-text) !important;
background: var(--button--color-background) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
background: transparent;
}
.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);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
color: currentColor;
}
.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);
}
.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);
}
.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);
}
.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 {
.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;
}
.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);
.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-primary);
}
.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);
.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));
}
.wp-block-button.is-style-outline .wp-block-button__link:focus {
color: var(--button--color-background) !important;
background: transparent !important;
.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
color: inherit;
}
.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: transparent;
}
.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;
}
.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;
}
.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;
}
.wp-block-button .is-style-squared .wp-block-button__link {
@ -2128,53 +2151,13 @@ input[type=reset]:hover,
.wp-block-file a.wp-block-file__button:active,
.wp-block-file a.wp-block-file__button:focus,
.wp-block-file a.wp-block-file__button:hover {
color: var(--button--color-text-hover);
opacity: inherit;
}
.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);
.wp-block-file a.wp-block-file__button {
display: inline-block;
}
.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);
}
.wp-block-gallery {
margin: 0 auto;
}
@ -3276,31 +3259,15 @@ pre.wp-block-preformatted {
border-color: var(--form--border-color);
}
.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;
}
.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);
.has-background .wp-block-search .wp-block-search__input {
border-color: var(--local--color-primary, var(--global--color-primary)) !important;
}
.wp-block-search button.wp-block-search__button {
margin-left: 0;
background-color: transparent;
color: var(--button--color-text-hover);
line-height: 1;
}
.wp-block-search button.wp-block-search__button:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
}
.wp-block-search button.wp-block-search__button.has-icon {
padding: 6px calc(0.5 * var(--button--padding-horizontal));
}
@ -3311,120 +3278,59 @@ pre.wp-block-preformatted {
fill: currentColor;
}
.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;
.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;
}
.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);
}
.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);
.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;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
background-color: var(--global--color-white);
border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius);
padding: var(--form--border-width);
}
.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;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
margin-left: 0;
margin-right: 0;
padding-left: var(--form--spacing-unit);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
color: var(--form--color-text);
outline-offset: -2px;
outline: 2px dotted var(--form--border-color);
outline-offset: -5px;
}
.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 {
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
.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);
.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);
}
.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 {
.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);
}
.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);
color: var(--global--color-white);
}
.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 {
color: var(--global--color-white);
}
.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);
}
.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);
.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));
}
.wp-block-search__button {
@ -5598,16 +5504,9 @@ h1.page-title {
.widget_search > .search-form .search-submit {
margin-left: 0;
background-color: transparent;
color: var(--button--color-text-hover);
margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}
.widget_search > .search-form .search-submit:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
}
.widget_rss a.rsswidget .rss-widget-icon {
display: none;
}
@ -5666,42 +5565,92 @@ h1.page-title {
color: var(--global--color-black);
}
.has-black-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-black, #000);
color: var(--local--color-primary);
}
.has-gray-color[class] {
color: var(--global--color-gray);
}
.has-gray-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-gray, #000);
color: var(--local--color-primary);
}
.has-dark-gray-color[class] {
color: var(--global--color-dark-gray);
}
.has-dark-gray-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-dark-gray, #000);
color: var(--local--color-primary);
}
.has-green-color[class] {
color: var(--global--color-green);
}
.has-green-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-green, #fff);
color: var(--local--color-primary);
}
.has-blue-color[class] {
color: var(--global--color-blue);
}
.has-blue-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-blue, #fff);
color: var(--local--color-primary);
}
.has-purple-color[class] {
color: var(--global--color-purple);
}
.has-purple-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-purple, #fff);
color: var(--local--color-primary);
}
.has-red-color[class] {
color: var(--global--color-red);
}
.has-red-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-red, #fff);
color: var(--local--color-primary);
}
.has-orange-color[class] {
color: var(--global--color-orange);
}
.has-orange-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-orange, #fff);
color: var(--local--color-primary);
}
.has-yellow-color[class] {
color: var(--global--color-yellow);
}
.has-yellow-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-yellow, #fff);
color: var(--local--color-primary);
}
.has-white-color[class] {
color: var(--global--color-white);
}
.has-white-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-white, #fff);
color: var(--local--color-primary);
}
.has-background a,
.has-background p,
.has-background h1,
@ -5717,56 +5666,133 @@ h1.page-title {
background-color: var(--global--color-black);
}
.has-gray-background-color[class] {
background-color: var(--global--color-gray);
.has-black-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-black, #000);
background-color: var(--local--color-background);
}
.has-dark-gray-background-color[class] {
background-color: var(--global--color-dark-gray);
}
.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);
}
.has-green-background-color[class] {
background-color: var(--global--color-green);
}
.has-green-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-green, #fff);
background-color: var(--local--color-background);
}
.has-blue-background-color[class] {
background-color: var(--global--color-blue);
}
.has-blue-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-blue, #fff);
background-color: var(--local--color-background);
}
.has-purple-background-color[class] {
background-color: var(--global--color-purple);
}
.has-purple-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-purple, #fff);
background-color: var(--local--color-background);
}
.has-red-background-color[class] {
background-color: var(--global--color-red);
}
.has-red-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-red, #fff);
background-color: var(--local--color-background);
}
.has-orange-background-color[class] {
background-color: var(--global--color-orange);
}
.has-orange-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-orange, #fff);
background-color: var(--local--color-background);
}
.has-yellow-background-color[class] {
background-color: var(--global--color-yellow);
}
.has-yellow-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-yellow, #fff);
background-color: var(--local--color-background);
}
.has-white-background-color[class] {
background-color: var(--global--color-white);
}
: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);
.has-white-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-white, #fff);
background-color: var(--local--color-background);
}
: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);
.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));
}
.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);
}
.has-purple-to-yellow-gradient-background {

2
wp-includes/version.php
View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.7-alpha-49986';
$wp_version = '5.7-alpha-49987';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.