Spaces:
Sleeping
Sleeping
.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 ; | |
font-size: 18px; | |
z-index: 5; | |
background: #3582c4 ; | |
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: #4f94d4 ; /* matches primary buttons */ | |
} | |
.customize-partial-edit-shortcut button:focus { | |
box-shadow: 0 0 0 2px #4f94d4; | |
} | |
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; | |
} | |
} | |