: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
.customize-control-header .header-view.button.selected {
/* Header control: overlay "close" button */
.customize-control-header .uploaded .header-view .close {
background: rgba(0, 0, 0, 0.5);
.customize-control-header .header-view:hover .close,
.customize-control-header .header-view .close:focus {
.customize-control-header .header-view .close:focus {
outline: 1px solid #4f94d4;
/* Header control: randomiz(s)er */
.customize-control-header .random.placeholder {
.customize-control-header button.random {
.customize-control-header button.random .dice {
.customize-control-header .placeholder:hover .dice,
.customize-control-header .header-view:hover > button.random .dice {
animation: dice-color-change 3s infinite;
transform-origin: center bottom;
from, 20%, 53%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -12px, 0);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -6px, 0);
transform: translate3d(0,-1px,0);
.customize-control-header .choice {
.customize-control-header .choice:focus {
box-shadow: 0 0 0 2px #2271b1;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
.customize-control-header .uploaded div:last-child > .choice {
.customize-control .attachment-media-view .thumbnail-image img,
.customize-control-header img {
.customize-control .attachment-media-view .remove-button,
.customize-control .attachment-media-view .default-button,
.customize-control-header .remove {
/* Background position control */
.customize-control-background_position .background-position-control .button-group {
* Code Editor Control and Custom CSS Section
* Modifications to the Section Container to make the textarea full-width and
* full-height, if the control is the only control in the section.
.customize-control-code_editor textarea {
font-family: Consolas, Monaco, monospace;
.customize-control-code_editor textarea,
.customize-control-code_editor .CodeMirror {
#customize-controls .customize-section-description-container.section-meta.customize-info {
#sub-accordion-section-custom_css .customize-control-notifications-container {
#customize-control-custom_css textarea {
.customize-section-description-container + #customize-control-custom_css .customize-control-title {
.customize-section-description-container + #customize-control-custom_css:last-child textarea {
height: calc( 100vh - 185px );
.customize-section-description-container + #customize-control-custom_css:last-child {
width: calc( 100% + 24px );
.customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
height: calc( 100vh - 185px );
.CodeMirror-lint-tooltip,
z-index: 500000 !important;
.customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container {
.theme-browser .theme.active .theme-actions,
.wp-customizer .theme-browser .theme .theme-actions {
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
@media screen and (max-width: 640px) {
.customize-section-description-container + #customize-control-custom_css:last-child {
.customize-section-description-container + #customize-control-custom_css:last-child textarea {
height: calc( 100vh - 140px );
#customize-theme-controls .control-panel-themes {
#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
#customize-theme-controls .control-panel-themes > .accordion-section-title {
border-top: 1px solid #dcdcde;
border-bottom: 1px solid #dcdcde;
padding-left: 100px; /* Space for the button */
#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
#customize-theme-controls .control-section-themes > .accordion-section-title {
#customize-controls .customize-themes-panel .accordion-section-title:hover,
#customize-controls .customize-themes-panel .accordion-section-title {
#customize-controls .control-section-themes .accordion-section-title,
#customize-controls .customize-themes-panel .accordion-section-title {
padding-left: 100px; /* Space for the button */
.control-panel-themes .accordion-section-title span.customize-action,
#customize-controls .customize-section-title span.customize-action,
#customize-controls .control-section-themes .accordion-section-title span.customize-action,
#customize-controls .customize-section-title span.customize-action {
#customize-theme-controls .control-panel-themes .accordion-section-title .change-theme {
#customize-notifications-area .notification-message button.switch-to-editor {
#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
.control-panel-themes .customize-themes-full-container {
transition: .18s right ease-in-out;
width: calc(100% - 300px);
height: calc(100% - 96px);
@media (prefers-reduced-motion: reduce) {
.control-panel-themes .customize-themes-full-container {
@media screen and (min-width: 1670px) {
.control-panel-themes .customize-themes-full-container {
.modal-open .control-panel-themes .customize-themes-full-container {
/* Animations for opening the themes panel */
#customize-save-button-wrapper,
#customize-header-actions .spinner,
#customize-header-actions .customize-controls-preview-toggle {
transition: .18s margin ease-in-out;
#customize-footer-actions,
#customize-footer-actions .collapse-sidebar {
transition: .18s bottom ease-in-out;
.in-themes-panel:not(.animating) #customize-header-actions .spinner,
.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
.in-themes-panel:not(.animating) #customize-preview,
.in-themes-panel:not(.animating) #customize-footer-actions {
.wp-full-overlay.in-themes-panel {
background: #f0f0f1; /* Prevents a black flash when fading in the panel */
.in-themes-panel #customize-save-button-wrapper,
.in-themes-panel #customize-header-actions .spinner,
.in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
margin-top: -46px; /* Height of header actions bar */
.in-themes-panel #customize-footer-actions,
.in-themes-panel #customize-footer-actions .collapse-sidebar {
/* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
.in-themes-panel.animating .control-panel-themes .filter-themes-count {
.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
.themes-filter-bar .feature-filter-toggle:before {
font: normal 16px/1 dashicons;
vertical-align: text-bottom;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.themes-filter-bar .feature-filter-toggle.open {
box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
.themes-filter-bar .feature-filter-toggle .filter-count-filters {
padding: 25px 25px 25px 0;
border-bottom: 1px solid #dcdcde;
.filter-drawer .filter-group {
width: calc( (100% - 75px) / 3);
/* Adds a delay before fading in to avoid it "jumping" */
@keyframes themes-fade-in {
.control-panel-themes .customize-themes-full-container.animate {
animation: .6s themes-fade-in 1;
.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
animation: .6s themes-fade-in 1;
.control-panel-themes .filter-themes-count .themes-displayed {
.customize-themes-notifications {
.control-panel-themes .customize-themes-notifications .notice {
.customize-themes-full-container .customize-themes-section {
display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
.customize-themes-full-container .customize-themes-section.current-section {
display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
.control-section .customize-section-text-before {
border-bottom: 1px solid #dcdcde;
.control-panel-themes .customize-themes-section-title {
border-bottom: 1px solid #dcdcde;
border-right: 4px solid #fff;
.control-panel-themes #accordion-section-installed_themes {
border-top: 1px solid #dcdcde;
.control-panel-themes .theme-section {
.control-panel-themes .customize-themes-section-title:focus,
.control-panel-themes .customize-themes-section-title:hover {
border-right-color: #2271b1;
.customize-themes-section-title:not(.selected):after {
border: 1px solid #c3c4c7;
.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
padding: 3px 1px 1px 3px; /* Re-align the icon to the smaller grid */
.control-panel-themes .customize-themes-section-title.selected {
#customize-theme-controls .themes.accordion-section-content {