vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-04-07 14:14:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Twenty Twenty-One: Correct inner container background color for Cover Blocks.

Browse Source 
Adjust the background color palette rules so they don't show up on inner containers when they're not supposed to:
- When an inner container block is present, it only applies them to direct children of the block with the background color assigned.
- Since the background color should only be applied to the Cover block's overlay, not to the inner container, it opts that specific block out of this rule.

Props dianeco, kjellr, paaljoachim.
Fixes #52676.



git-svn-id: https://develop.svn.wordpress.org/trunk@50466 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Kelly Choyce-Dwan
2021-03-01 23:24:13 +00:00
parent 95e79ab35a
commit 7d0cb86544
13 changed files with 256 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -748,6 +748,11 @@ a:hover {
border: 3px solid #28303d;
}
.wp-block-cover[class*=-background-color][class] .wp-block-cover__inner-container,
.wp-block-cover-image[class*=-background-color][class] .wp-block-cover__inner-container {
background-color: unset;
}
.wp-block-columns:not(.alignwide):not(.alignfull) {
clear: both;
}
@@ -3080,7 +3085,7 @@ a {
color: #000;
}
.has-black-color[class] [class*=__inner-container] {
.has-black-color[class] > [class*=__inner-container] {
color: #000;
}
@@ -3088,7 +3093,7 @@ a {
color: #39414d;
}
.has-gray-color[class] [class*=__inner-container] {
.has-gray-color[class] > [class*=__inner-container] {
color: #39414d;
}
@@ -3096,7 +3101,7 @@ a {
color: #28303d;
}
.has-dark-gray-color[class] [class*=__inner-container] {
.has-dark-gray-color[class] > [class*=__inner-container] {
color: #28303d;
}
@@ -3104,7 +3109,7 @@ a {
color: #d1e4dd;
}
.has-green-color[class] [class*=__inner-container] {
.has-green-color[class] > [class*=__inner-container] {
color: #d1e4dd;
}
@@ -3112,7 +3117,7 @@ a {
color: #d1dfe4;
}
.has-blue-color[class] [class*=__inner-container] {
.has-blue-color[class] > [class*=__inner-container] {
color: #d1dfe4;
}
@@ -3120,7 +3125,7 @@ a {
color: #d1d1e4;
}
.has-purple-color[class] [class*=__inner-container] {
.has-purple-color[class] > [class*=__inner-container] {
color: #d1d1e4;
}
@@ -3128,7 +3133,7 @@ a {
color: #e4d1d1;
}
.has-red-color[class] [class*=__inner-container] {
.has-red-color[class] > [class*=__inner-container] {
color: #e4d1d1;
}
@@ -3136,7 +3141,7 @@ a {
color: #e4dad1;
}
.has-orange-color[class] [class*=__inner-container] {
.has-orange-color[class] > [class*=__inner-container] {
color: #e4dad1;
}
@@ -3144,7 +3149,7 @@ a {
color: #eeeadd;
}
.has-yellow-color[class] [class*=__inner-container] {
.has-yellow-color[class] > [class*=__inner-container] {
color: #eeeadd;
}
@@ -3152,7 +3157,7 @@ a {
color: #fff;
}
.has-white-color[class] [class*=__inner-container] {
.has-white-color[class] > [class*=__inner-container] {
color: #fff;
}
@@ -3171,7 +3176,7 @@ a {
background-color: #000;
}
.has-black-background-color[class] [class*=__inner-container] {
.has-black-background-color[class] > [class*=__inner-container] {
background-color: #000;
}
@@ -3179,7 +3184,7 @@ a {
background-color: #28303d;
}
.has-dark-gray-background-color[class] [class*=__inner-container] {
.has-dark-gray-background-color[class] > [class*=__inner-container] {
background-color: #28303d;
}
@@ -3187,7 +3192,7 @@ a {
background-color: #39414d;
}
.has-gray-background-color[class] [class*=__inner-container] {
.has-gray-background-color[class] > [class*=__inner-container] {
background-color: #39414d;
}
@@ -3195,7 +3200,7 @@ a {
background-color: #f0f0f0;
}
.has-light-gray-background-color[class] [class*=__inner-container] {
.has-light-gray-background-color[class] > [class*=__inner-container] {
background-color: #f0f0f0;
}
@@ -3203,7 +3208,7 @@ a {
background-color: #d1e4dd;
}
.has-green-background-color[class] [class*=__inner-container] {
.has-green-background-color[class] > [class*=__inner-container] {
background-color: #d1e4dd;
}
@@ -3211,7 +3216,7 @@ a {
background-color: #d1dfe4;
}
.has-blue-background-color[class] [class*=__inner-container] {
.has-blue-background-color[class] > [class*=__inner-container] {
background-color: #d1dfe4;
}
@@ -3219,7 +3224,7 @@ a {
background-color: #d1d1e4;
}
.has-purple-background-color[class] [class*=__inner-container] {
.has-purple-background-color[class] > [class*=__inner-container] {
background-color: #d1d1e4;
}
@@ -3227,7 +3232,7 @@ a {
background-color: #e4d1d1;
}
.has-red-background-color[class] [class*=__inner-container] {
.has-red-background-color[class] > [class*=__inner-container] {
background-color: #e4d1d1;
}
@@ -3235,7 +3240,7 @@ a {
background-color: #e4dad1;
}
.has-orange-background-color[class] [class*=__inner-container] {
.has-orange-background-color[class] > [class*=__inner-container] {
background-color: #e4dad1;
}
@@ -3243,7 +3248,7 @@ a {
background-color: #eeeadd;
}
.has-yellow-background-color[class] [class*=__inner-container] {
.has-yellow-background-color[class] > [class*=__inner-container] {
background-color: #eeeadd;
}
@@ -3251,47 +3256,47 @@ a {
background-color: #fff;
}
.has-white-background-color[class] [class*=__inner-container] {
.has-white-background-color[class] > [class*=__inner-container] {
background-color: #fff;
}
.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] {
color: #28303d;
}

2
src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css.map
View File

File diff suppressed because one or more lines are too long

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

@@ -2818,6 +2818,8 @@ input[type=reset]:disabled {
/* Treating H2 separately to account for legacy /core styles */
/* Block Styles */
/* The background color class is used just for the overlay, and does not need to be applied to the inner container. */
}
.wp-block-cover-image {
@@ -2831,6 +2833,8 @@ input[type=reset]:disabled {
/* Treating H2 separately to account for legacy /core styles */
/* Block Styles */
/* The background color class is used just for the overlay, and does not need to be applied to the inner container. */
}
.wp-block-cover:not(.alignwide):not(.alignfull),
@@ -3076,6 +3080,11 @@ input[type=reset]:disabled {
border: 3px solid #28303d;
}
.wp-block-cover[class*=-background-color][class] .wp-block-cover__inner-container,
.wp-block-cover-image[class*=-background-color][class] .wp-block-cover__inner-container {
background-color: unset;
}
.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 {
@@ -7465,7 +7474,7 @@ h1.page-title {
color: #000;
}
.has-black-color[class] [class*=__inner-container] {
.has-black-color[class] > [class*=__inner-container] {
color: #000;
}
@@ -7473,7 +7482,7 @@ h1.page-title {
color: #39414d;
}
.has-gray-color[class] [class*=__inner-container] {
.has-gray-color[class] > [class*=__inner-container] {
color: #39414d;
}
@@ -7481,7 +7490,7 @@ h1.page-title {
color: #28303d;
}
.has-dark-gray-color[class] [class*=__inner-container] {
.has-dark-gray-color[class] > [class*=__inner-container] {
color: #28303d;
}
@@ -7489,7 +7498,7 @@ h1.page-title {
color: #d1e4dd;
}
.has-green-color[class] [class*=__inner-container] {
.has-green-color[class] > [class*=__inner-container] {
color: #d1e4dd;
}
@@ -7497,7 +7506,7 @@ h1.page-title {
color: #d1dfe4;
}
.has-blue-color[class] [class*=__inner-container] {
.has-blue-color[class] > [class*=__inner-container] {
color: #d1dfe4;
}
@@ -7505,7 +7514,7 @@ h1.page-title {
color: #d1d1e4;
}
.has-purple-color[class] [class*=__inner-container] {
.has-purple-color[class] > [class*=__inner-container] {
color: #d1d1e4;
}
@@ -7513,7 +7522,7 @@ h1.page-title {
color: #e4d1d1;
}
.has-red-color[class] [class*=__inner-container] {
.has-red-color[class] > [class*=__inner-container] {
color: #e4d1d1;
}
@@ -7521,7 +7530,7 @@ h1.page-title {
color: #e4dad1;
}
.has-orange-color[class] [class*=__inner-container] {
.has-orange-color[class] > [class*=__inner-container] {
color: #e4dad1;
}
@@ -7529,7 +7538,7 @@ h1.page-title {
color: #eeeadd;
}
.has-yellow-color[class] [class*=__inner-container] {
.has-yellow-color[class] > [class*=__inner-container] {
color: #eeeadd;
}
@@ -7537,7 +7546,7 @@ h1.page-title {
color: #fff;
}
.has-white-color[class] [class*=__inner-container] {
.has-white-color[class] > [class*=__inner-container] {
color: #fff;
}
@@ -7556,7 +7565,7 @@ h1.page-title {
background-color: #000;
}
.has-black-background-color[class] [class*=__inner-container] {
.has-black-background-color[class] > [class*=__inner-container] {
background-color: #000;
}
@@ -7564,7 +7573,7 @@ h1.page-title {
background-color: #28303d;
}
.has-dark-gray-background-color[class] [class*=__inner-container] {
.has-dark-gray-background-color[class] > [class*=__inner-container] {
background-color: #28303d;
}
@@ -7572,7 +7581,7 @@ h1.page-title {
background-color: #39414d;
}
.has-gray-background-color[class] [class*=__inner-container] {
.has-gray-background-color[class] > [class*=__inner-container] {
background-color: #39414d;
}
@@ -7580,7 +7589,7 @@ h1.page-title {
background-color: #f0f0f0;
}
.has-light-gray-background-color[class] [class*=__inner-container] {
.has-light-gray-background-color[class] > [class*=__inner-container] {
background-color: #f0f0f0;
}
@@ -7588,7 +7597,7 @@ h1.page-title {
background-color: #d1e4dd;
}
.has-green-background-color[class] [class*=__inner-container] {
.has-green-background-color[class] > [class*=__inner-container] {
background-color: #d1e4dd;
}
@@ -7596,7 +7605,7 @@ h1.page-title {
background-color: #d1dfe4;
}
.has-blue-background-color[class] [class*=__inner-container] {
.has-blue-background-color[class] > [class*=__inner-container] {
background-color: #d1dfe4;
}
@@ -7604,7 +7613,7 @@ h1.page-title {
background-color: #d1d1e4;
}
.has-purple-background-color[class] [class*=__inner-container] {
.has-purple-background-color[class] > [class*=__inner-container] {
background-color: #d1d1e4;
}
@@ -7612,7 +7621,7 @@ h1.page-title {
background-color: #e4d1d1;
}
.has-red-background-color[class] [class*=__inner-container] {
.has-red-background-color[class] > [class*=__inner-container] {
background-color: #e4d1d1;
}
@@ -7620,7 +7629,7 @@ h1.page-title {
background-color: #e4dad1;
}
.has-orange-background-color[class] [class*=__inner-container] {
.has-orange-background-color[class] > [class*=__inner-container] {
background-color: #e4dad1;
}
@@ -7628,7 +7637,7 @@ h1.page-title {
background-color: #eeeadd;
}
.has-yellow-background-color[class] [class*=__inner-container] {
.has-yellow-background-color[class] > [class*=__inner-container] {
background-color: #eeeadd;
}
@@ -7636,47 +7645,47 @@ h1.page-title {
background-color: #fff;
}
.has-white-background-color[class] [class*=__inner-container] {
.has-white-background-color[class] > [class*=__inner-container] {
background-color: #fff;
}
.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] {
color: #28303d;
}

2
src/wp-content/themes/twentytwentyone/assets/css/ie.css.map
View File

File diff suppressed because one or more lines are too long

2
src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass/style-dark-mode.scss"],"names":[],"mappings":"AAAA;AACA;EAEC;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAEA;IACA;IACA;;EAEA;AAAA;IAEC;IACA;IACA;;EAIC;AAAA;IACC;;EAKH;IACC;;;EAIF;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAGD;IACC;IACA;IACA;IACA;;EAEA;IACC;;EAIF;IACC;IACA;IACA;IACA;;EAEA;IACC;;;AAEA;EAHD;IAIE;;;AAGD;EAPD;IAQE;;;AAOA;EADD;IAEE;;;AA5FN;EAkGE;IACC;;;AAnGH;EAsGE;IAEC;IACA;IACA;;;AA1GH;EA6GE;IACC","file":"style-dark-mode.css"}
{"version":3,"sourceRoot":"","sources":["../sass/style-dark-mode.scss"],"names":[],"mappings":"AAAA;AACA;EAEC;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;AAEA;IACA;IACA;;EAEA;IACC;;;EAIF;IACC;;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;;EAGD;IACC;IACA;IACA;IACA;;EAEA;IACC;;EAIF;IACC;IACA;IACA;IACA;;EAEA;IACC;;;AAEA;EAHD;IAIE;;;AAGD;EAPD;IAQE;;;AAOA;EADD;IAEE;;;AA9EN;EAoFE;IACC;;;AArFH;EAwFE;IAEC;IACA;IACA;;;AA5FH;EA+FE;IACC","file":"style-dark-mode.css"}

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

@@ -808,6 +808,11 @@ a:hover {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
.wp-block-cover[class*=-background-color][class] .wp-block-cover__inner-container,
.wp-block-cover-image[class*=-background-color][class] .wp-block-cover__inner-container {
background-color: unset;
}
.wp-block-columns:not(.alignwide):not(.alignfull) {
clear: both;
}
@@ -2334,7 +2339,7 @@ a {
color: var(--global--color-black);
}
.has-black-color[class] [class*=__inner-container] {
.has-black-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-black, #000);
color: var(--local--color-primary);
}
@@ -2343,7 +2348,7 @@ a {
color: var(--global--color-gray);
}
.has-gray-color[class] [class*=__inner-container] {
.has-gray-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-gray, #000);
color: var(--local--color-primary);
}
@@ -2352,7 +2357,7 @@ a {
color: var(--global--color-dark-gray);
}
.has-dark-gray-color[class] [class*=__inner-container] {
.has-dark-gray-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-dark-gray, #000);
color: var(--local--color-primary);
}
@@ -2361,7 +2366,7 @@ a {
color: var(--global--color-green);
}
.has-green-color[class] [class*=__inner-container] {
.has-green-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-green, #fff);
color: var(--local--color-primary);
}
@@ -2370,7 +2375,7 @@ a {
color: var(--global--color-blue);
}
.has-blue-color[class] [class*=__inner-container] {
.has-blue-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-blue, #fff);
color: var(--local--color-primary);
}
@@ -2379,7 +2384,7 @@ a {
color: var(--global--color-purple);
}
.has-purple-color[class] [class*=__inner-container] {
.has-purple-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-purple, #fff);
color: var(--local--color-primary);
}
@@ -2388,7 +2393,7 @@ a {
color: var(--global--color-red);
}
.has-red-color[class] [class*=__inner-container] {
.has-red-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-red, #fff);
color: var(--local--color-primary);
}
@@ -2397,7 +2402,7 @@ a {
color: var(--global--color-orange);
}
.has-orange-color[class] [class*=__inner-container] {
.has-orange-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-orange, #fff);
color: var(--local--color-primary);
}
@@ -2406,7 +2411,7 @@ a {
color: var(--global--color-yellow);
}
.has-yellow-color[class] [class*=__inner-container] {
.has-yellow-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-yellow, #fff);
color: var(--local--color-primary);
}
@@ -2415,7 +2420,7 @@ a {
color: var(--global--color-white);
}
.has-white-color[class] [class*=__inner-container] {
.has-white-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-white, #fff);
color: var(--local--color-primary);
}
@@ -2435,7 +2440,7 @@ a {
background-color: var(--global--color-black);
}
.has-black-background-color[class] [class*=__inner-container] {
.has-black-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-black, #000);
background-color: var(--local--color-background);
}
@@ -2444,7 +2449,7 @@ a {
background-color: var(--global--color-dark-gray);
}
.has-dark-gray-background-color[class] [class*=__inner-container] {
.has-dark-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-dark-gray, #000);
background-color: var(--local--color-background);
}
@@ -2453,7 +2458,7 @@ a {
background-color: var(--global--color-gray);
}
.has-gray-background-color[class] [class*=__inner-container] {
.has-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-gray, #000);
background-color: var(--local--color-background);
}
@@ -2462,7 +2467,7 @@ a {
background-color: var(--global--color-light-gray);
}
.has-light-gray-background-color[class] [class*=__inner-container] {
.has-light-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-light-gray, #fff);
background-color: var(--local--color-background);
}
@@ -2471,7 +2476,7 @@ a {
background-color: var(--global--color-green);
}
.has-green-background-color[class] [class*=__inner-container] {
.has-green-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-green, #fff);
background-color: var(--local--color-background);
}
@@ -2480,7 +2485,7 @@ a {
background-color: var(--global--color-blue);
}
.has-blue-background-color[class] [class*=__inner-container] {
.has-blue-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-blue, #fff);
background-color: var(--local--color-background);
}
@@ -2489,7 +2494,7 @@ a {
background-color: var(--global--color-purple);
}
.has-purple-background-color[class] [class*=__inner-container] {
.has-purple-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-purple, #fff);
background-color: var(--local--color-background);
}
@@ -2498,7 +2503,7 @@ a {
background-color: var(--global--color-red);
}
.has-red-background-color[class] [class*=__inner-container] {
.has-red-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-red, #fff);
background-color: var(--local--color-background);
}
@@ -2507,7 +2512,7 @@ a {
background-color: var(--global--color-orange);
}
.has-orange-background-color[class] [class*=__inner-container] {
.has-orange-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-orange, #fff);
background-color: var(--local--color-background);
}
@@ -2516,7 +2521,7 @@ a {
background-color: var(--global--color-yellow);
}
.has-yellow-background-color[class] [class*=__inner-container] {
.has-yellow-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-yellow, #fff);
background-color: var(--local--color-background);
}
@@ -2525,42 +2530,42 @@ a {
background-color: var(--global--color-white);
}
.has-white-background-color[class] [class*=__inner-container] {
.has-white-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-white, #fff);
background-color: var(--local--color-background);
}
.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] {
.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] {
.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] {
.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] {
.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);
}

2
src/wp-content/themes/twentytwentyone/assets/css/style-editor.css.map
View File

File diff suppressed because one or more lines are too long

5
src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss
View File

@@ -69,4 +69,9 @@
&.is-style-twentytwentyone-border {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
// The background color class is used just for the overlay, and does not need to be applied to the inner container.
&[class*="-background-color"][class] .wp-block-cover__inner-container {
background-color: unset;
}
}

5
src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss
View File

@@ -108,4 +108,9 @@
&.is-style-twentytwentyone-border {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
/* The background color class is used just for the overlay, and does not need to be applied to the inner container. */
&[class*="-background-color"][class] .wp-block-cover__inner-container {
background-color: unset;
}
}

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

@@ -2,7 +2,7 @@
.has-black-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-black, #000000);
color: var(--local--color-primary);
}
@@ -11,7 +11,7 @@
.has-gray-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-gray, #000000);
color: var(--local--color-primary);
}
@@ -20,7 +20,7 @@
.has-dark-gray-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-dark-gray, #000000);
color: var(--local--color-primary);
}
@@ -29,7 +29,7 @@
.has-green-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-green, #FFFFFF);
color: var(--local--color-primary);
}
@@ -38,7 +38,7 @@
.has-blue-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-blue, #FFFFFF);
color: var(--local--color-primary);
}
@@ -47,7 +47,7 @@
.has-purple-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-purple, #FFFFFF);
color: var(--local--color-primary);
}
@@ -56,7 +56,7 @@
.has-red-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-red, #FFFFFF);
color: var(--local--color-primary);
}
@@ -65,7 +65,7 @@
.has-orange-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-orange, #FFFFFF);
color: var(--local--color-primary);
}
@@ -74,7 +74,7 @@
.has-yellow-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-yellow, #FFFFFF);
color: var(--local--color-primary);
}
@@ -83,7 +83,7 @@
.has-white-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-white, #FFFFFF);
color: var(--local--color-primary);
}
@@ -107,7 +107,7 @@
.has-black-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-black, #000000);
background-color: var(--local--color-background);
}
@@ -116,7 +116,7 @@
.has-dark-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-dark-gray, #000000);
background-color: var(--local--color-background);
}
@@ -125,7 +125,7 @@
.has-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-gray, #000000);
background-color: var(--local--color-background);
}
@@ -134,7 +134,7 @@
.has-light-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-light-gray, #FFFFFF);
background-color: var(--local--color-background);
}
@@ -143,7 +143,7 @@
.has-green-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-green, #FFFFFF);
background-color: var(--local--color-background);
}
@@ -152,7 +152,7 @@
.has-blue-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-blue, #FFFFFF);
background-color: var(--local--color-background);
}
@@ -161,7 +161,7 @@
.has-purple-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-purple, #FFFFFF);
background-color: var(--local--color-background);
}
@@ -170,7 +170,7 @@
.has-red-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-red, #FFFFFF);
background-color: var(--local--color-background);
}
@@ -179,7 +179,7 @@
.has-orange-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-orange, #FFFFFF);
background-color: var(--local--color-background);
}
@@ -188,7 +188,7 @@
.has-yellow-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-yellow, #FFFFFF);
background-color: var(--local--color-background);
}
@@ -197,7 +197,7 @@
.has-white-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-white, #FFFFFF);
background-color: var(--local--color-background);
}
@@ -210,7 +210,7 @@
&.has-gray-background-color[class],
&.has-dark-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-background, #FFFFFF);
// Reverse the local foreground color in darkmode
.is-dark-theme & {
@@ -228,7 +228,7 @@
&.has-yellow-background-color[class],
&.has-white-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-primary, #000000);
// Reverse the local foreground color in darkmode
.is-dark-theme & {

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

@@ -2020,6 +2020,8 @@ input[type=reset]:disabled,
/* Treating H2 separately to account for legacy /core styles */
/* Block Styles */
/* The background color class is used just for the overlay, and does not need to be applied to the inner container. */
}
.wp-block-cover:not(.alignwide):not(.alignfull),
@@ -2155,6 +2157,11 @@ input[type=reset]:disabled,
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
.wp-block-cover[class*=-background-color][class] .wp-block-cover__inner-container,
.wp-block-cover-image[class*=-background-color][class] .wp-block-cover__inner-container {
background-color: unset;
}
.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 {
@@ -5537,7 +5544,7 @@ h1.page-title {
color: var(--global--color-black);
}
.has-black-color[class] [class*=__inner-container] {
.has-black-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-black, #000);
color: var(--local--color-primary);
}
@@ -5546,7 +5553,7 @@ h1.page-title {
color: var(--global--color-gray);
}
.has-gray-color[class] [class*=__inner-container] {
.has-gray-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-gray, #000);
color: var(--local--color-primary);
}
@@ -5555,7 +5562,7 @@ h1.page-title {
color: var(--global--color-dark-gray);
}
.has-dark-gray-color[class] [class*=__inner-container] {
.has-dark-gray-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-dark-gray, #000);
color: var(--local--color-primary);
}
@@ -5564,7 +5571,7 @@ h1.page-title {
color: var(--global--color-green);
}
.has-green-color[class] [class*=__inner-container] {
.has-green-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-green, #fff);
color: var(--local--color-primary);
}
@@ -5573,7 +5580,7 @@ h1.page-title {
color: var(--global--color-blue);
}
.has-blue-color[class] [class*=__inner-container] {
.has-blue-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-blue, #fff);
color: var(--local--color-primary);
}
@@ -5582,7 +5589,7 @@ h1.page-title {
color: var(--global--color-purple);
}
.has-purple-color[class] [class*=__inner-container] {
.has-purple-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-purple, #fff);
color: var(--local--color-primary);
}
@@ -5591,7 +5598,7 @@ h1.page-title {
color: var(--global--color-red);
}
.has-red-color[class] [class*=__inner-container] {
.has-red-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-red, #fff);
color: var(--local--color-primary);
}
@@ -5600,7 +5607,7 @@ h1.page-title {
color: var(--global--color-orange);
}
.has-orange-color[class] [class*=__inner-container] {
.has-orange-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-orange, #fff);
color: var(--local--color-primary);
}
@@ -5609,7 +5616,7 @@ h1.page-title {
color: var(--global--color-yellow);
}
.has-yellow-color[class] [class*=__inner-container] {
.has-yellow-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-yellow, #fff);
color: var(--local--color-primary);
}
@@ -5618,7 +5625,7 @@ h1.page-title {
color: var(--global--color-white);
}
.has-white-color[class] [class*=__inner-container] {
.has-white-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-white, #fff);
color: var(--local--color-primary);
}
@@ -5638,7 +5645,7 @@ h1.page-title {
background-color: var(--global--color-black);
}
.has-black-background-color[class] [class*=__inner-container] {
.has-black-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-black, #000);
background-color: var(--local--color-background);
}
@@ -5647,7 +5654,7 @@ h1.page-title {
background-color: var(--global--color-dark-gray);
}
.has-dark-gray-background-color[class] [class*=__inner-container] {
.has-dark-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-dark-gray, #000);
background-color: var(--local--color-background);
}
@@ -5656,7 +5663,7 @@ h1.page-title {
background-color: var(--global--color-gray);
}
.has-gray-background-color[class] [class*=__inner-container] {
.has-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-gray, #000);
background-color: var(--local--color-background);
}
@@ -5665,7 +5672,7 @@ h1.page-title {
background-color: var(--global--color-light-gray);
}
.has-light-gray-background-color[class] [class*=__inner-container] {
.has-light-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-light-gray, #fff);
background-color: var(--local--color-background);
}
@@ -5674,7 +5681,7 @@ h1.page-title {
background-color: var(--global--color-green);
}
.has-green-background-color[class] [class*=__inner-container] {
.has-green-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-green, #fff);
background-color: var(--local--color-background);
}
@@ -5683,7 +5690,7 @@ h1.page-title {
background-color: var(--global--color-blue);
}
.has-blue-background-color[class] [class*=__inner-container] {
.has-blue-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-blue, #fff);
background-color: var(--local--color-background);
}
@@ -5692,7 +5699,7 @@ h1.page-title {
background-color: var(--global--color-purple);
}
.has-purple-background-color[class] [class*=__inner-container] {
.has-purple-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-purple, #fff);
background-color: var(--local--color-background);
}
@@ -5701,7 +5708,7 @@ h1.page-title {
background-color: var(--global--color-red);
}
.has-red-background-color[class] [class*=__inner-container] {
.has-red-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-red, #fff);
background-color: var(--local--color-background);
}
@@ -5710,7 +5717,7 @@ h1.page-title {
background-color: var(--global--color-orange);
}
.has-orange-background-color[class] [class*=__inner-container] {
.has-orange-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-orange, #fff);
background-color: var(--local--color-background);
}
@@ -5719,7 +5726,7 @@ h1.page-title {
background-color: var(--global--color-yellow);
}
.has-yellow-background-color[class] [class*=__inner-container] {
.has-yellow-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-yellow, #fff);
background-color: var(--local--color-background);
}
@@ -5728,42 +5735,42 @@ h1.page-title {
background-color: var(--global--color-white);
}
.has-white-background-color[class] [class*=__inner-container] {
.has-white-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-white, #fff);
background-color: var(--local--color-background);
}
.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] {
.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] {
.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] {
.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] {
.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);
}

89
src/wp-content/themes/twentytwentyone/style.css
View File

@@ -2030,6 +2030,8 @@ input[type=reset]:disabled,
/* Treating H2 separately to account for legacy /core styles */
/* Block Styles */
/* The background color class is used just for the overlay, and does not need to be applied to the inner container. */
}
.wp-block-cover:not(.alignwide):not(.alignfull),
@@ -2165,6 +2167,11 @@ input[type=reset]:disabled,
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
.wp-block-cover[class*=-background-color][class] .wp-block-cover__inner-container,
.wp-block-cover-image[class*=-background-color][class] .wp-block-cover__inner-container {
background-color: unset;
}
.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 {
@@ -5573,7 +5580,7 @@ h1.page-title {
color: var(--global--color-black);
}
.has-black-color[class] [class*=__inner-container] {
.has-black-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-black, #000);
color: var(--local--color-primary);
}
@@ -5582,7 +5589,7 @@ h1.page-title {
color: var(--global--color-gray);
}
.has-gray-color[class] [class*=__inner-container] {
.has-gray-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-gray, #000);
color: var(--local--color-primary);
}
@@ -5591,7 +5598,7 @@ h1.page-title {
color: var(--global--color-dark-gray);
}
.has-dark-gray-color[class] [class*=__inner-container] {
.has-dark-gray-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-dark-gray, #000);
color: var(--local--color-primary);
}
@@ -5600,7 +5607,7 @@ h1.page-title {
color: var(--global--color-green);
}
.has-green-color[class] [class*=__inner-container] {
.has-green-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-green, #fff);
color: var(--local--color-primary);
}
@@ -5609,7 +5616,7 @@ h1.page-title {
color: var(--global--color-blue);
}
.has-blue-color[class] [class*=__inner-container] {
.has-blue-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-blue, #fff);
color: var(--local--color-primary);
}
@@ -5618,7 +5625,7 @@ h1.page-title {
color: var(--global--color-purple);
}
.has-purple-color[class] [class*=__inner-container] {
.has-purple-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-purple, #fff);
color: var(--local--color-primary);
}
@@ -5627,7 +5634,7 @@ h1.page-title {
color: var(--global--color-red);
}
.has-red-color[class] [class*=__inner-container] {
.has-red-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-red, #fff);
color: var(--local--color-primary);
}
@@ -5636,7 +5643,7 @@ h1.page-title {
color: var(--global--color-orange);
}
.has-orange-color[class] [class*=__inner-container] {
.has-orange-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-orange, #fff);
color: var(--local--color-primary);
}
@@ -5645,7 +5652,7 @@ h1.page-title {
color: var(--global--color-yellow);
}
.has-yellow-color[class] [class*=__inner-container] {
.has-yellow-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-yellow, #fff);
color: var(--local--color-primary);
}
@@ -5654,7 +5661,7 @@ h1.page-title {
color: var(--global--color-white);
}
.has-white-color[class] [class*=__inner-container] {
.has-white-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-white, #fff);
color: var(--local--color-primary);
}
@@ -5674,7 +5681,7 @@ h1.page-title {
background-color: var(--global--color-black);
}
.has-black-background-color[class] [class*=__inner-container] {
.has-black-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-black, #000);
background-color: var(--local--color-background);
}
@@ -5683,7 +5690,7 @@ h1.page-title {
background-color: var(--global--color-dark-gray);
}
.has-dark-gray-background-color[class] [class*=__inner-container] {
.has-dark-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-dark-gray, #000);
background-color: var(--local--color-background);
}
@@ -5692,7 +5699,7 @@ h1.page-title {
background-color: var(--global--color-gray);
}
.has-gray-background-color[class] [class*=__inner-container] {
.has-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-gray, #000);
background-color: var(--local--color-background);
}
@@ -5701,7 +5708,7 @@ h1.page-title {
background-color: var(--global--color-light-gray);
}
.has-light-gray-background-color[class] [class*=__inner-container] {
.has-light-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-light-gray, #fff);
background-color: var(--local--color-background);
}
@@ -5710,7 +5717,7 @@ h1.page-title {
background-color: var(--global--color-green);
}
.has-green-background-color[class] [class*=__inner-container] {
.has-green-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-green, #fff);
background-color: var(--local--color-background);
}
@@ -5719,7 +5726,7 @@ h1.page-title {
background-color: var(--global--color-blue);
}
.has-blue-background-color[class] [class*=__inner-container] {
.has-blue-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-blue, #fff);
background-color: var(--local--color-background);
}
@@ -5728,7 +5735,7 @@ h1.page-title {
background-color: var(--global--color-purple);
}
.has-purple-background-color[class] [class*=__inner-container] {
.has-purple-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-purple, #fff);
background-color: var(--local--color-background);
}
@@ -5737,7 +5744,7 @@ h1.page-title {
background-color: var(--global--color-red);
}
.has-red-background-color[class] [class*=__inner-container] {
.has-red-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-red, #fff);
background-color: var(--local--color-background);
}
@@ -5746,7 +5753,7 @@ h1.page-title {
background-color: var(--global--color-orange);
}
.has-orange-background-color[class] [class*=__inner-container] {
.has-orange-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-orange, #fff);
background-color: var(--local--color-background);
}
@@ -5755,7 +5762,7 @@ h1.page-title {
background-color: var(--global--color-yellow);
}
.has-yellow-background-color[class] [class*=__inner-container] {
.has-yellow-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-yellow, #fff);
background-color: var(--local--color-background);
}
@@ -5764,42 +5771,42 @@ h1.page-title {
background-color: var(--global--color-white);
}
.has-white-background-color[class] [class*=__inner-container] {
.has-white-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-white, #fff);
background-color: var(--local--color-background);
}
.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] {
.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] {
.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] {
.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] {
.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);
}

2
src/wp-content/themes/twentytwentyone/style.css.map
View File

File diff suppressed because one or more lines are too long