diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css index e77216365f..92a5a2bd01 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css @@ -384,33 +384,50 @@ a:hover { } .wp-block-button__link { - line-height: 1.5; - color: #d1e4dd; + border: 3px solid transparent; + border-radius: 0; cursor: pointer; + display: block; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; - text-decoration: none; + line-height: 1.5; padding: 15px 30px; + text-decoration: none; +} + +.wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { + color: #d1e4dd; +} + +.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { + color: #28303d; +} + +.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background { + color: #28303d; +} + +.wp-block-button__link:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.wp-block-button__link:hover, +.wp-block-button__link:active { + background-color: transparent; + border-color: currentColor; + color: inherit; } .wp-block-button__link:focus { - background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } -.is-dark-theme .wp-block-button__link:focus { - color: #39414d; -} - -.wp-block-button__link:focus:not(.has-background) { - color: #39414d; -} - .wp-block-button__link:disabled { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); @@ -433,105 +450,93 @@ a:hover { margin-bottom: 30px; } +.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { + color: #d1e4dd; +} + +.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { + color: #d1e4dd; +} + +.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background { + color: #28303d; +} + +.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.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: #39414d !important; - background: transparent !important; - border-color: #39414d; + border-color: currentColor !important; + background-color: transparent !important; + color: inherit !important; } -.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { - color: #39414d !important; - background: transparent !important; - border-color: #39414d; +.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: #39414d; - background: transparent; - border: 3px solid currentColor; - padding: 15px 30px; -} - -.wp-block-button.is-style-outline .wp-block-button__link:active { - background-color: #39414d; - color: #d1e4dd; - border-color: #39414d; -} - -.wp-block-button.is-style-outline .wp-block-button__link:hover { - background-color: #39414d; - color: #d1e4dd; - border-color: #39414d; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background { - border-color: #39414d; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background:active { - background-color: #39414d !important; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background:hover { - background-color: #39414d !important; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) { - color: #28303d; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color) { - color: #fff; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color) { - color: #fff; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) { - color: #fff; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color { - color: #28303d; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color { - color: #28303d; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color { - color: #28303d; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color { - color: #28303d; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color { - color: #28303d; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color { - color: #28303d; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-yellow-background-color { - color: #28303d; -} - -.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 { - color: #d1e4dd !important; - border-color: #39414d; +.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { + color: #28303d; } -.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover { +.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { + color: #28303d; +} + +.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 { + background-color: #28303d !important; + border-color: transparent !important; color: #d1e4dd !important; - border-color: #39414d; +} + +.wp-block-button.is-style-outline .wp-block-button__link:active { + background-color: #28303d !important; + border-color: transparent !important; + color: #d1e4dd !important; +} + +.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover { + background-color: #28303d !important; + color: #d1e4dd !important; +} + +.has-background .wp-block-button.is-style-outline .wp-block-button__link:active { + background-color: #28303d !important; + color: #d1e4dd !important; +} + +.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover { + color: #d1e4dd !important; +} + +.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active { + color: #d1e4dd !important; +} + +.wp-block-button.is-style-outline .wp-block-button__link:focus { + outline-offset: inherit; + outline: inherit; } .wp-block-button.is-style-squared { @@ -878,43 +883,60 @@ a:hover { } .wp-block-file .wp-block-file__button { - line-height: 1.5; - color: #d1e4dd; + border: 3px solid transparent; + border-radius: 0; cursor: pointer; + display: block; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; - text-decoration: none; + line-height: 1.5; padding: 15px 30px; + text-decoration: none; display: inline-block; } +.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) { + color: #d1e4dd; +} + +.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) { + color: #28303d; +} + +.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background { + color: #28303d; +} + +.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.wp-block-file .wp-block-file__button:hover, +.wp-block-file .wp-block-file__button:active { + background-color: transparent; + border-color: currentColor; + color: inherit; +} + .wp-block-file .wp-block-file__button:focus { - background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } -.is-dark-theme .wp-block-file .wp-block-file__button:focus { - color: #39414d; -} - -.wp-block-file .wp-block-file__button:focus:not(.has-background) { - color: #39414d; -} - .wp-block-file .wp-block-file__button:disabled { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); color: #39414d; } -.wp-block-file .wp-block-file__button:hover { - color: #39414d; - background: transparent; +.wp-block-file .wp-block-file__button:focus { + outline-offset: inherit; + outline: inherit; } .wp-block-gallery figcaption { @@ -2245,6 +2267,17 @@ pre.wp-block-preformatted { margin-bottom: 10px; } +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { + border: 3px solid #39414d; + border-radius: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 1.125rem; + line-height: 1.7; + max-width: inherit; + margin-right: -3px; + padding: 10px; +} + .wp-block-search .wp-block-search__input { border: 3px solid #39414d; border-radius: 0; @@ -2256,95 +2289,78 @@ pre.wp-block-preformatted { padding: 10px; } +.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { + background: rgba(255, 255, 255, 0.9); +} + .is-dark-theme .wp-block-search .wp-block-search__input { background: rgba(255, 255, 255, 0.9); } -.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; +.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { + border-color: #28303d !important; } -.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; -} - -.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; -} - -.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; -} - -.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; -} - -.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; -} - -.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; -} - -.has-background.has-gray-background-color .wp-block-search .wp-block-search__input { - border-color: #fff; -} - -.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input { - border-color: #fff; -} - -.has-background.has-black-background-color .wp-block-search .wp-block-search__input { - border-color: #fff; +.has-background .wp-block-search .wp-block-search__input { + border-color: #28303d !important; } .wp-block-search .wp-block-search__button { - line-height: 1.5; - color: #d1e4dd; + border: 3px solid transparent; + border-radius: 0; cursor: pointer; + display: block; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; - text-decoration: none; + line-height: 1.5; padding: 15px 30px; + 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: #d1e4dd; +} + +.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) { + color: #28303d; +} + +.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background { + color: #28303d; +} + +.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.wp-block-search .wp-block-search__button:hover, +.wp-block-search .wp-block-search__button:active { background-color: transparent; - color: #39414d; + 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: #39414d; -} - -.wp-block-search .wp-block-search__button:focus:not(.has-background) { - color: #39414d; -} - .wp-block-search .wp-block-search__button:disabled { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); color: #39414d; } -.wp-block-search .wp-block-search__button:hover { - color: #d1e4dd; - background-color: #39414d; -} - .wp-block-search .wp-block-search__button.has-icon { padding: 30px 15px; + display: inherit; } .wp-block-search .wp-block-search__button.has-icon svg { @@ -2352,265 +2368,67 @@ pre.wp-block-preformatted { height: 40px; } -.has-background.has-gray-background-color .wp-block-search .wp-block-search__button { - color: #fff; - border-color: currentColor; +.has-background .wp-block-search .wp-block-search__button:hover { + background-color: #d1e4dd !important; + color: #28303d !important; } -.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button { - color: #fff; - border-color: currentColor; +.has-background .wp-block-search .wp-block-search__button:active { + background-color: #d1e4dd !important; + color: #28303d !important; } -.has-background.has-black-background-color .wp-block-search .wp-block-search__button { - color: #fff; - border-color: currentColor; +.has-text-color .wp-block-search .wp-block-search__button:hover { + color: #28303d !important; } -.has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #fff; +.has-text-color .wp-block-search .wp-block-search__button:active { + color: #28303d !important; } -.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #fff; +.wp-block-search .wp-block-search__button:focus { + outline-offset: inherit; + outline: inherit; } -.has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #fff; +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { + padding: 3px; } -.is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover { - color: #d1e4dd; - background-color: #39414d; -} - -.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover { - color: #d1e4dd; - background-color: #39414d; -} - -.is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover { - color: #d1e4dd; - background-color: #39414d; -} - -.has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button { - color: #28303d; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button { - color: #28303d; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button { - color: #28303d; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button { - color: #28303d; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button { - color: #28303d; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button { - color: #28303d; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button { - color: #28303d; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.wp-block-search.wp-block-search__button-inside .wp-block-search__input, -.has-background.has-white-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, -.has-background.has-green-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, -.has-background.has-blue-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, -.has-background.has-purple-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, -.has-background.has-red-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, -.has-background.has-orange-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, -.has-background.has-yellow-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input { +.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 { + color: #28303d; +} + +.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover { + color: #28303d; +} + +.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button { + color: #28303d; +} + +.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button { + color: #28303d; +} + +.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover { + background-color: #28303d; + color: #fff; +} + +.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover { + background-color: #28303d; + color: #fff; +} + .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button { padding: 15px 30px; } -.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #d1e4dd; - border-color: currentColor; -} - -.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #39414d; - border-color: currentColor; -} - -.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #39414d; - border-color: currentColor; -} - -.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #39414d; - border-color: currentColor; -} - -.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #d1e4dd; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #d1e4dd; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #d1e4dd; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - .wp-block[data-align=center] > * { text-align: center; } @@ -3260,42 +3078,82 @@ a { color: #000; } +.has-black-color[class] [class*=__inner-container] { + color: #000; +} + .has-gray-color[class] { color: #39414d; } +.has-gray-color[class] [class*=__inner-container] { + color: #39414d; +} + .has-dark-gray-color[class] { color: #28303d; } +.has-dark-gray-color[class] [class*=__inner-container] { + color: #28303d; +} + .has-green-color[class] { color: #d1e4dd; } +.has-green-color[class] [class*=__inner-container] { + color: #d1e4dd; +} + .has-blue-color[class] { color: #d1dfe4; } +.has-blue-color[class] [class*=__inner-container] { + color: #d1dfe4; +} + .has-purple-color[class] { color: #d1d1e4; } +.has-purple-color[class] [class*=__inner-container] { + color: #d1d1e4; +} + .has-red-color[class] { color: #e4d1d1; } +.has-red-color[class] [class*=__inner-container] { + color: #e4d1d1; +} + .has-orange-color[class] { color: #e4dad1; } +.has-orange-color[class] [class*=__inner-container] { + color: #e4dad1; +} + .has-yellow-color[class] { color: #eeeadd; } +.has-yellow-color[class] [class*=__inner-container] { + color: #eeeadd; +} + .has-white-color[class] { color: #fff; } +.has-white-color[class] [class*=__inner-container] { + color: #fff; +} + .has-background a, .has-background p, .has-background h1, @@ -3311,79 +3169,127 @@ a { background-color: #000; } -.has-gray-background-color[class] { - background-color: #39414d; +.has-black-background-color[class] [class*=__inner-container] { + background-color: #000; } .has-dark-gray-background-color[class] { background-color: #28303d; } +.has-dark-gray-background-color[class] [class*=__inner-container] { + background-color: #28303d; +} + +.has-gray-background-color[class] { + background-color: #39414d; +} + +.has-gray-background-color[class] [class*=__inner-container] { + background-color: #39414d; +} + +.has-light-gray-background-color[class] { + background-color: #f0f0f0; +} + +.has-light-gray-background-color[class] [class*=__inner-container] { + background-color: #f0f0f0; +} + .has-green-background-color[class] { background-color: #d1e4dd; } +.has-green-background-color[class] [class*=__inner-container] { + background-color: #d1e4dd; +} + .has-blue-background-color[class] { background-color: #d1dfe4; } +.has-blue-background-color[class] [class*=__inner-container] { + background-color: #d1dfe4; +} + .has-purple-background-color[class] { background-color: #d1d1e4; } +.has-purple-background-color[class] [class*=__inner-container] { + background-color: #d1d1e4; +} + .has-red-background-color[class] { background-color: #e4d1d1; } +.has-red-background-color[class] [class*=__inner-container] { + background-color: #e4d1d1; +} + .has-orange-background-color[class] { background-color: #e4dad1; } +.has-orange-background-color[class] [class*=__inner-container] { + background-color: #e4dad1; +} + .has-yellow-background-color[class] { background-color: #eeeadd; } +.has-yellow-background-color[class] [class*=__inner-container] { + background-color: #eeeadd; +} + .has-white-background-color[class] { background-color: #fff; } -:not(.has-text-color).has-black-background-color[class] { - color: #fff; +.has-white-background-color[class] [class*=__inner-container] { + background-color: #fff; } -:not(.has-text-color).has-gray-background-color[class] { - color: #fff; -} - -:not(.has-text-color).has-dark-gray-background-color[class] { - color: #fff; -} - -:not(.has-text-color).has-green-background-color[class] { +.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container] { color: #28303d; } -:not(.has-text-color).has-blue-background-color[class] { +.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container] { color: #28303d; } -:not(.has-text-color).has-purple-background-color[class] { +.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] { color: #28303d; } -:not(.has-text-color).has-red-background-color[class] { +.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container] { color: #28303d; } -:not(.has-text-color).has-orange-background-color[class] { +.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container] { color: #28303d; } -:not(.has-text-color).has-yellow-background-color[class] { +.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container] { color: #28303d; } -:not(.has-text-color).has-white-background-color[class] { +.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] { + color: #28303d; +} + +.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] { color: #28303d; } diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie.css b/src/wp-content/themes/twentytwentyone/assets/css/ie.css index 96653cebb0..6887591eee 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/ie.css @@ -2244,125 +2244,230 @@ a:hover { * Button */ .site .button { - line-height: 1.5; - color: #d1e4dd; + border: 3px solid transparent; + border-radius: 0; cursor: pointer; + display: block; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; - text-decoration: none; + line-height: 1.5; padding: 15px 30px; + text-decoration: none; } input[type=submit] { - line-height: 1.5; - color: #d1e4dd; + border: 3px solid transparent; + border-radius: 0; cursor: pointer; + display: block; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; - text-decoration: none; + line-height: 1.5; padding: 15px 30px; + text-decoration: none; } input[type=reset] { - line-height: 1.5; - color: #d1e4dd; + border: 3px solid transparent; + border-radius: 0; cursor: pointer; + display: block; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; - text-decoration: none; + line-height: 1.5; padding: 15px 30px; + text-decoration: none; } -.wp-block-search__button { - line-height: 1.5; - color: #d1e4dd; +.wp-block-search .wp-block-search__button { + border: 3px solid transparent; + border-radius: 0; cursor: pointer; + display: block; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; - text-decoration: none; + line-height: 1.5; padding: 15px 30px; + text-decoration: none; } .wp-block-button .wp-block-button__link { - line-height: 1.5; - color: #d1e4dd; + border: 3px solid transparent; + border-radius: 0; cursor: pointer; + display: block; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; - text-decoration: none; + line-height: 1.5; padding: 15px 30px; + text-decoration: none; +} + +.wp-block-file a.wp-block-file__button { + border: 3px solid transparent; + border-radius: 0; + cursor: pointer; + display: block; + font-weight: 500; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 1.25rem; + line-height: 1.5; + padding: 15px 30px; + text-decoration: none; +} + +.site .button:not(:hover):not(:active):not(.has-text-color) { + color: #d1e4dd; +} + +input[type=submit]:not(:hover):not(:active):not(.has-text-color) { + color: #d1e4dd; +} + +input[type=reset]:not(:hover):not(:active):not(.has-text-color) { + color: #d1e4dd; +} + +.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) { + color: #d1e4dd; +} + +.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { + color: #d1e4dd; +} + +.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) { + color: #d1e4dd; +} + +.has-background .site .button:not(:hover):not(:active):not(.has-text-color) { + color: #28303d; +} + +.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color) { + color: #28303d; +} + +.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color) { + color: #28303d; +} + +.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) { + color: #28303d; +} + +.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { + color: #28303d; +} + +.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) { + color: #28303d; +} + +.has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background { + color: #28303d; +} + +.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background { + color: #28303d; +} + +.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background { + color: #28303d; +} + +.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background { + color: #28303d; +} + +.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background { + color: #28303d; +} + +.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background { + color: #28303d; +} + +.site .button:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +input[type=submit]:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +input[type=reset]:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.has-background .site .button:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.has-background input[type=submit]:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.has-background input[type=reset]:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; +} + +.site .button:hover, +.site .button:active, +input[type=submit]:hover, +input[type=submit]:active, +input[type=reset]:hover, +input[type=reset]:active, +.wp-block-search .wp-block-search__button:hover, +.wp-block-search .wp-block-search__button:active, +.wp-block-button .wp-block-button__link:hover, +.wp-block-button .wp-block-button__link:active, +.wp-block-file a.wp-block-file__button:hover, +.wp-block-file a.wp-block-file__button:active { + background-color: transparent; + border-color: currentColor; + color: inherit; } .site .button:focus, input[type=submit]:focus, input[type=reset]:focus, -.wp-block-search__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 { - color: #39414d; -} - -.is-dark-theme input[type=submit]:focus { - color: #39414d; -} - -.is-dark-theme input[type=reset]:focus { - color: #39414d; -} - -.is-dark-theme .wp-block-search__button:focus { - color: #39414d; -} - -.is-dark-theme .wp-block-button .wp-block-button__link:focus { - color: #39414d; -} - -.site .button:focus:not(.has-background) { - color: #39414d; -} - -input[type=submit]:focus:not(.has-background) { - color: #39414d; -} - -input[type=reset]:focus:not(.has-background) { - color: #39414d; -} - -.wp-block-search__button:focus:not(.has-background) { - color: #39414d; -} - -.wp-block-button .wp-block-button__link:focus:not(.has-background) { - color: #39414d; -} - .site .button:disabled { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); @@ -2381,7 +2486,7 @@ input[type=reset]:disabled { color: #39414d; } -.wp-block-search__button:disabled { +.wp-block-search .wp-block-search__button:disabled { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); color: #39414d; @@ -2393,150 +2498,92 @@ input[type=reset]:disabled { color: #39414d; } -.site .button:active { +.wp-block-file a.wp-block-file__button:disabled { + background-color: rgba(255, 255, 255, 0.5); + border-color: rgba(255, 255, 255, 0.5); color: #39414d; - background-color: #d1e4dd; -} - -input[type=submit]:active { - color: #39414d; - background-color: #d1e4dd; -} - -input[type=reset]:active { - color: #39414d; - background-color: #d1e4dd; -} - -.wp-block-search .wp-block-search__button:active { - color: #39414d; - background-color: #d1e4dd; -} - -.wp-block-file .wp-block-file__button:active { - color: #39414d; - background-color: #d1e4dd; -} - -.site .button:hover { - color: #39414d; - background: transparent; -} - -input[type=submit]:hover { - color: #39414d; - background: transparent; -} - -input[type=reset]:hover { - color: #39414d; - background: transparent; -} - -.wp-block-search .wp-block-search__button:hover { - color: #39414d; - background: transparent; -} - -.wp-block-file .wp-block-file__button:hover { - color: #39414d; - background: transparent; } /** * Block Options */ -.wp-block-button:not(.is-style-outline) .wp-block-button__link:active { - color: #39414d !important; - background: transparent !important; - border-color: #39414d; +.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { + color: #d1e4dd; } -.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { - color: #39414d !important; - background: transparent !important; - border-color: #39414d; +.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { + color: #d1e4dd; } -.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus { - color: #d1e4dd !important; - background: #39414d !important; -} - -.wp-block-button.is-style-outline .wp-block-button__link { - padding: 15px 30px; -} - -.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: #39414d; - border-color: #39414d; -} - -.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) { - color: #fff; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color) { - color: #fff; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) { - color: #fff; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background { +.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background { color: #28303d; } -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color { - color: #fff; +.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; } -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color { - color: #fff; +.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) { + background-color: #28303d; } -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color { - color: #fff; +.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, +.wp-block-button:not(.is-style-outline) .wp-block-button__link:active { + border-color: currentColor !important; + background-color: transparent !important; + color: inherit !important; } -.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 { - color: #d1e4dd !important; - background: #39414d !important; - border-color: #39414d; +.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { + color: #28303d; +} + +.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { + color: #28303d; +} + +.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 { + border-color: transparent !important; + background-color: #28303d !important; color: #d1e4dd !important; - background: #39414d !important; - border-color: #39414d; } -.wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color { - border-color: #39414d; +.wp-block-button.is-style-outline .wp-block-button__link:active { + border-color: transparent !important; + background-color: #28303d !important; + color: #d1e4dd !important; } -.wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color { - border-color: #39414d; +.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover { + background-color: #28303d !important; + color: #d1e4dd !important; } -.wp-block-button.is-style-outline .wp-block-button__link:focus { - color: #39414d !important; - background: transparent !important; +.has-background .wp-block-button.is-style-outline .wp-block-button__link:active { + background-color: #28303d !important; + color: #d1e4dd !important; +} + +.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover { + color: #d1e4dd !important; +} + +.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active { + color: #d1e4dd !important; } .wp-block-button .is-style-squared .wp-block-button__link { @@ -2991,64 +3038,16 @@ input[type=reset]:hover { border: 3px solid #28303d; } -.wp-block-file a.wp-block-file__button:active { - color: #39414d; - opacity: inherit; -} - -.wp-block-file a.wp-block-file__button:focus { - color: #39414d; - opacity: inherit; -} - +.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: #39414d; opacity: inherit; } -.wp-block-file a.wp-block-file__button:visited { - color: #d1e4dd; -} - -.wp-block-file a.wp-block-file__button:visited:hover { - color: #39414d; -} - -.wp-block-file .wp-block-file__button { - line-height: 1.5; - color: #d1e4dd; - cursor: pointer; - font-weight: 500; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; - text-decoration: none; - padding: 15px 30px; +.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: #39414d; -} - -.wp-block-file .wp-block-file__button:focus:not(.has-background) { - color: #39414d; -} - -.wp-block-file .wp-block-file__button:disabled { - background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(255, 255, 255, 0.5); - color: #39414d; -} - .wp-block-gallery { margin: 0 auto; } @@ -4557,37 +4556,15 @@ pre.wp-block-preformatted { border-color: #39414d; } -.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 { - border-color: #fff; -} - -.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input { - border-color: #fff; -} - -.has-background.has-black-background-color .wp-block-search .wp-block-search__input { - border-color: #fff; +.has-background .wp-block-search .wp-block-search__input { + border-color: #28303d !important; } .wp-block-search button.wp-block-search__button { margin-left: 0; - background-color: transparent; - color: #39414d; line-height: 1; } -.wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - color: #d1e4dd; -} - .wp-block-search button.wp-block-search__button.has-icon { padding: 6px 15px; } @@ -4598,232 +4575,66 @@ pre.wp-block-preformatted { fill: currentColor; } -.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button { - color: #fff; - border-color: currentColor; +.has-background .wp-block-search button.wp-block-search__button:hover { + background-color: #d1e4dd !important; + color: #28303d !important; } -.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button { - color: #fff; - border-color: currentColor; +.has-background .wp-block-search button.wp-block-search__button:active { + background-color: #d1e4dd !important; + color: #28303d !important; } -.has-background.has-black-background-color .wp-block-search button.wp-block-search__button { - color: #fff; - border-color: currentColor; +.has-text-color .wp-block-search button.wp-block-search__button:hover { + color: #28303d !important; } -.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #fff; - color: #fff; -} - -.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #fff; - color: #fff; -} - -.has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #fff; - color: #fff; -} - -.is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover { - color: #d1e4dd; -} - -.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover { - color: #d1e4dd; -} - -.is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover { - color: #d1e4dd; -} - -.has-background.has-white-background-color .wp-block-search button.wp-block-search__button, -.has-background.has-green-background-color .wp-block-search button.wp-block-search__button, -.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button, -.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button, -.has-background.has-red-background-color .wp-block-search button.wp-block-search__button, -.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button, -.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button { - border-color: currentColor; - color: currentColor; -} - -.has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - -.has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - -.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - -.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - -.has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - -.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - -.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - -.is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; -} - -.is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; -} - -.is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; -} - -.is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; -} - -.is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; -} - -.is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; -} - -.is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; +.has-text-color .wp-block-search button.wp-block-search__button:active { + color: #28303d !important; } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { background-color: #fff; border: 3px solid #39414d; border-radius: 0; + padding: 3px; +} + +.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { + border-color: #28303d !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: 10px; } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { + color: #28303d; + outline-offset: -2px; outline: 2px dotted #39414d; - 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: 15px 30px; } -.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #39414d; - color: #39414d; +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover { + color: #28303d; } -.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #39414d; - color: #39414d; +.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button { + color: #28303d; } -.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #39414d; - color: #39414d; -} - -.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { +.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover { + background-color: #28303d; color: #fff; } -.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { - color: #fff; -} - -.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { - color: #fff; -} - -.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #d1e4dd; - color: #d1e4dd; -} - -.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #d1e4dd; - color: #d1e4dd; -} - -.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #d1e4dd; - color: #d1e4dd; -} - -.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { - color: #fff; -} - -.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { - color: #fff; -} - -.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { - color: #fff; -} - -.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #d1e4dd; - color: #d1e4dd; -} - -.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon { + padding: 6px 15px; } .wp-block-search__button { @@ -7564,16 +7375,9 @@ h1.page-title { .widget_search > .search-form .search-submit { margin-left: 0; - background-color: transparent; - color: #39414d; margin-bottom: 15px; } -.widget_search > .search-form .search-submit:hover { - background-color: #39414d; - color: #d1e4dd; -} - .widget_rss a.rsswidget .rss-widget-icon { display: none; } @@ -7632,42 +7436,82 @@ h1.page-title { color: #000; } +.has-black-color[class] [class*=__inner-container] { + color: #000; +} + .has-gray-color[class] { color: #39414d; } +.has-gray-color[class] [class*=__inner-container] { + color: #39414d; +} + .has-dark-gray-color[class] { color: #28303d; } +.has-dark-gray-color[class] [class*=__inner-container] { + color: #28303d; +} + .has-green-color[class] { color: #d1e4dd; } +.has-green-color[class] [class*=__inner-container] { + color: #d1e4dd; +} + .has-blue-color[class] { color: #d1dfe4; } +.has-blue-color[class] [class*=__inner-container] { + color: #d1dfe4; +} + .has-purple-color[class] { color: #d1d1e4; } +.has-purple-color[class] [class*=__inner-container] { + color: #d1d1e4; +} + .has-red-color[class] { color: #e4d1d1; } +.has-red-color[class] [class*=__inner-container] { + color: #e4d1d1; +} + .has-orange-color[class] { color: #e4dad1; } +.has-orange-color[class] [class*=__inner-container] { + color: #e4dad1; +} + .has-yellow-color[class] { color: #eeeadd; } +.has-yellow-color[class] [class*=__inner-container] { + color: #eeeadd; +} + .has-white-color[class] { color: #fff; } +.has-white-color[class] [class*=__inner-container] { + color: #fff; +} + .has-background a, .has-background p, .has-background h1, @@ -7683,79 +7527,127 @@ h1.page-title { background-color: #000; } -.has-gray-background-color[class] { - background-color: #39414d; +.has-black-background-color[class] [class*=__inner-container] { + background-color: #000; } .has-dark-gray-background-color[class] { background-color: #28303d; } +.has-dark-gray-background-color[class] [class*=__inner-container] { + background-color: #28303d; +} + +.has-gray-background-color[class] { + background-color: #39414d; +} + +.has-gray-background-color[class] [class*=__inner-container] { + background-color: #39414d; +} + +.has-light-gray-background-color[class] { + background-color: #f0f0f0; +} + +.has-light-gray-background-color[class] [class*=__inner-container] { + background-color: #f0f0f0; +} + .has-green-background-color[class] { background-color: #d1e4dd; } +.has-green-background-color[class] [class*=__inner-container] { + background-color: #d1e4dd; +} + .has-blue-background-color[class] { background-color: #d1dfe4; } +.has-blue-background-color[class] [class*=__inner-container] { + background-color: #d1dfe4; +} + .has-purple-background-color[class] { background-color: #d1d1e4; } +.has-purple-background-color[class] [class*=__inner-container] { + background-color: #d1d1e4; +} + .has-red-background-color[class] { background-color: #e4d1d1; } +.has-red-background-color[class] [class*=__inner-container] { + background-color: #e4d1d1; +} + .has-orange-background-color[class] { background-color: #e4dad1; } +.has-orange-background-color[class] [class*=__inner-container] { + background-color: #e4dad1; +} + .has-yellow-background-color[class] { background-color: #eeeadd; } +.has-yellow-background-color[class] [class*=__inner-container] { + background-color: #eeeadd; +} + .has-white-background-color[class] { background-color: #fff; } -:not(.has-text-color).has-black-background-color[class] { - color: #fff; +.has-white-background-color[class] [class*=__inner-container] { + background-color: #fff; } -:not(.has-text-color).has-gray-background-color[class] { - color: #fff; -} - -:not(.has-text-color).has-dark-gray-background-color[class] { - color: #fff; -} - -:not(.has-text-color).has-green-background-color[class] { +.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container] { color: #28303d; } -:not(.has-text-color).has-blue-background-color[class] { +.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container] { color: #28303d; } -:not(.has-text-color).has-purple-background-color[class] { +.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] { color: #28303d; } -:not(.has-text-color).has-red-background-color[class] { +.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container] { color: #28303d; } -:not(.has-text-color).has-orange-background-color[class] { +.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container] { color: #28303d; } -:not(.has-text-color).has-yellow-background-color[class] { +.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container] { color: #28303d; } -:not(.has-text-color).has-white-background-color[class] { +.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] { + color: #28303d; +} + +.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] { color: #28303d; } diff --git a/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css index 58d1859664..96082aaf43 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css @@ -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 { diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss b/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss index a48e532a64..eb4fcc6d3b 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss @@ -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); diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss index 8ab5122b7e..f8ec69e130 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss @@ -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; } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss index 2763994a41..2ef1f2359d 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss @@ -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; } } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss index 4029851e1d..b3a19479a9 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss @@ -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; } } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss index faf7798aab..5426f8a1a1 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss @@ -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; } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss index c895e65a4b..758cd94f24 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss @@ -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); + } } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss index f733715aa1..46899b5f0c 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss @@ -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)); } } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss index 4dd3c3f6e8..2c9e9ccc04 100755 --- a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss @@ -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); - } } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss b/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss index b5e5e24d1b..b681bdb352 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss @@ -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)); + } } } diff --git a/src/wp-content/themes/twentytwentyone/style-rtl.css b/src/wp-content/themes/twentytwentyone/style-rtl.css index bdcdc6c873..321c3733b3 100644 --- a/src/wp-content/themes/twentytwentyone/style-rtl.css +++ b/src/wp-content/themes/twentytwentyone/style-rtl.css @@ -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 { diff --git a/src/wp-content/themes/twentytwentyone/style.css b/src/wp-content/themes/twentytwentyone/style.css index a0ef21ad16..95f818baf2 100644 --- a/src/wp-content/themes/twentytwentyone/style.css +++ b/src/wp-content/themes/twentytwentyone/style.css @@ -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 {