Files
wordpress/wp-includes/css/customize-preview.css
joedolson 4a1eb234a6 Customizer: Set more colors to inherit from admin theme.
Remove color overrides in customizer CSS that are already set in admin theme colors. Set colors to admin theme colors where currently hard coded.

Props madhavishah01, noruzzaman, shailu25, joedolson.
Fixes #64731.
Built from https://develop.svn.wordpress.org/trunk@61860


git-svn-id: http://core.svn.wordpress.org/trunk@61147 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2026-03-06 23:22:41 +00:00

167 lines
3.7 KiB
CSS

.customize-partial-refreshing {
opacity: 0.25;
transition: opacity 0.25s;
cursor: progress;
}
/* Override highlight when refreshing */
.customize-partial-refreshing.widget-customizer-highlighted-widget {
box-shadow: none;
}
/* Make shortcut buttons essentially invisible */
.widget .customize-partial-edit-shortcut,
.customize-partial-edit-shortcut {
position: absolute;
float: left;
width: 1px; /* required to have a size to be focusable in Safari */
height: 1px;
padding: 0;
margin: -1px 0 0 -1px;
border: 0;
background: transparent;
color: transparent;
box-shadow: none;
outline: none;
z-index: 5;
}
/**
* Styles for the actual shortcut
*
* Note that some properties are overly verbose to prevent theme interference.
*/
.widget .customize-partial-edit-shortcut button,
.customize-partial-edit-shortcut button {
position: absolute;
left: -30px;
top: 2px;
color: #fff;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
line-height: 1 !important;
font-size: 18px;
z-index: 5;
background: var( --wp-admin-theme-color, #3858e9 );
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 2px 1px rgba(60, 67, 74, 0.15);
text-align: center;
cursor: pointer;
box-sizing: border-box;
padding: 3px;
animation-fill-mode: both;
animation-duration: .4s;
opacity: 0;
pointer-events: none;
text-shadow:
0 -1px 1px #135e96,
1px 0 1px #135e96,
0 1px 1px #135e96,
-1px 0 1px #135e96;
}
.wp-custom-header .customize-partial-edit-shortcut button {
left: 2px
}
.customize-partial-edit-shortcut button svg {
fill: #fff;
min-width: 20px;
min-height: 20px;
width: 20px;
height: 20px;
margin: auto;
}
.customize-partial-edit-shortcut button:hover {
background: var( --wp-admin-theme-color-darker-10, #2145e6 ) !important; /* matches primary buttons */
}
.customize-partial-edit-shortcut button:focus {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px ) var(--wp-admin-theme-color, #3858e9);
}
body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
animation-name: customize-partial-edit-shortcut-bounce-appear;
pointer-events: auto;
}
body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
animation-name: customize-partial-edit-shortcut-bounce-disappear;
pointer-events: none;
}
.page-sidebar-collapsed .customize-partial-edit-shortcut button,
.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
visibility: hidden;
}
@keyframes customize-partial-edit-shortcut-bounce-appear {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes customize-partial-edit-shortcut-bounce-disappear {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
20% {
transform: scale3d(.97, .97, .97);
}
40% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
60% {
transform: scale3d(.9, .9, .9);
}
80% {
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
}
@media screen and (max-width: 800px) {
.widget .customize-partial-edit-shortcut button,
.customize-partial-edit-shortcut button {
left: -32px;
}
}
@media screen and (max-width: 320px) {
.widget .customize-partial-edit-shortcut button,
.customize-partial-edit-shortcut button {
left: -30px;
}
}