1 .customize-partial-refreshing {
3 -webkit-transition: opacity 0.25s;
4 transition: opacity 0.25s;
8 /* Override highlight when refreshing */
9 .customize-partial-refreshing.widget-customizer-highlighted-widget {
10 -webkit-box-shadow: none;
14 /* Make shortcut buttons essentially invisible */
15 .widget .customize-partial-edit-shortcut,
16 .customize-partial-edit-shortcut {
19 width: 1px; /* required to have a size to be focusable in Safari */
22 margin: -1px 0 0 -1px;
24 background: transparent;
26 -webkit-box-shadow: none;
33 * Styles for the actual shortcut
35 * Note that some properties are overly verbose to prevent theme interference.
37 .widget .customize-partial-edit-shortcut button,
38 .customize-partial-edit-shortcut button {
47 line-height: 1em !important;
50 background: #0085ba !important;
51 -webkit-border-radius: 50%;
53 border: 2px solid #fff;
54 -webkit-box-shadow: 0 2px 1px rgba(46,68,83,0.15);
55 box-shadow: 0 2px 1px rgba(46,68,83,0.15);
58 -webkit-box-sizing: border-box;
59 -moz-box-sizing: border-box;
60 box-sizing: border-box;
62 -webkit-animation-fill-mode: both;
63 animation-fill-mode: both;
64 -webkit-animation-duration: .4s;
65 animation-duration: .4s;
68 text-shadow: 0 -1px 1px #006799,
73 .wp-custom-header .customize-partial-edit-shortcut button {
77 .customize-partial-edit-shortcut button svg {
86 .customize-partial-edit-shortcut button:hover {
87 background: #008ec2 !important; /* matches primary buttons */
90 .customize-partial-edit-shortcut button:focus {
91 -webkit-box-shadow: 0 0 0 2px #008ec2;
92 box-shadow: 0 0 0 2px #008ec2;
95 body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
96 -webkit-animation-name: customize-partial-edit-shortcut-bounce-appear;
97 animation-name: customize-partial-edit-shortcut-bounce-appear;
100 body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
101 -webkit-animation-name: customize-partial-edit-shortcut-bounce-disappear;
102 animation-name: customize-partial-edit-shortcut-bounce-disappear;
103 pointer-events: none;
106 .page-sidebar-collapsed .customize-partial-edit-shortcut button,
107 .customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
111 @-webkit-keyframes customize-partial-edit-shortcut-bounce-appear {
112 from, 20%, 40%, 60%, 80%, to {
113 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
114 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
118 -webkit-transform: scale3d(.3, .3, .3);
119 transform: scale3d(.3, .3, .3);
122 -webkit-transform: scale3d(1.1, 1.1, 1.1);
123 transform: scale3d(1.1, 1.1, 1.1);
126 -webkit-transform: scale3d(.9, .9, .9);
127 transform: scale3d(.9, .9, .9);
131 -webkit-transform: scale3d(1.03, 1.03, 1.03);
132 transform: scale3d(1.03, 1.03, 1.03);
135 -webkit-transform: scale3d(.97, .97, .97);
136 transform: scale3d(.97, .97, .97);
140 -webkit-transform: scale3d(1, 1, 1);
141 transform: scale3d(1, 1, 1);
145 @keyframes customize-partial-edit-shortcut-bounce-appear {
146 from, 20%, 40%, 60%, 80%, to {
147 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
148 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
152 -webkit-transform: scale3d(.3, .3, .3);
153 transform: scale3d(.3, .3, .3);
156 -webkit-transform: scale3d(1.1, 1.1, 1.1);
157 transform: scale3d(1.1, 1.1, 1.1);
160 -webkit-transform: scale3d(.9, .9, .9);
161 transform: scale3d(.9, .9, .9);
165 -webkit-transform: scale3d(1.03, 1.03, 1.03);
166 transform: scale3d(1.03, 1.03, 1.03);
169 -webkit-transform: scale3d(.97, .97, .97);
170 transform: scale3d(.97, .97, .97);
174 -webkit-transform: scale3d(1, 1, 1);
175 transform: scale3d(1, 1, 1);
179 @-webkit-keyframes customize-partial-edit-shortcut-bounce-disappear {
180 from, 20%, 40%, 60%, 80%, to {
181 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
182 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
186 -webkit-transform: scale3d(1, 1, 1);
187 transform: scale3d(1, 1, 1);
190 -webkit-transform: scale3d(.97, .97, .97);
191 transform: scale3d(.97, .97, .97);
195 -webkit-transform: scale3d(1.03, 1.03, 1.03);
196 transform: scale3d(1.03, 1.03, 1.03);
199 -webkit-transform: scale3d(.9, .9, .9);
200 transform: scale3d(.9, .9, .9);
203 -webkit-transform: scale3d(1.1, 1.1, 1.1);
204 transform: scale3d(1.1, 1.1, 1.1);
208 -webkit-transform: scale3d(.3, .3, .3);
209 transform: scale3d(.3, .3, .3);
213 @keyframes customize-partial-edit-shortcut-bounce-disappear {
214 from, 20%, 40%, 60%, 80%, to {
215 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
216 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
220 -webkit-transform: scale3d(1, 1, 1);
221 transform: scale3d(1, 1, 1);
224 -webkit-transform: scale3d(.97, .97, .97);
225 transform: scale3d(.97, .97, .97);
229 -webkit-transform: scale3d(1.03, 1.03, 1.03);
230 transform: scale3d(1.03, 1.03, 1.03);
233 -webkit-transform: scale3d(.9, .9, .9);
234 transform: scale3d(.9, .9, .9);
237 -webkit-transform: scale3d(1.1, 1.1, 1.1);
238 transform: scale3d(1.1, 1.1, 1.1);
242 -webkit-transform: scale3d(.3, .3, .3);
243 transform: scale3d(.3, .3, .3);
247 @media screen and (max-width:800px) {
248 .widget .customize-partial-edit-shortcut button,
249 .customize-partial-edit-shortcut button {
254 @media screen and (max-width:320px) {
255 .widget .customize-partial-edit-shortcut button,
256 .customize-partial-edit-shortcut button {