|
1 .customize-partial-refreshing { |
|
2 opacity: 0.25; |
|
3 transition: opacity 0.25s; |
|
4 cursor: progress; |
|
5 } |
|
6 |
|
7 /* Override highlight when refreshing */ |
|
8 .customize-partial-refreshing.widget-customizer-highlighted-widget { |
|
9 box-shadow: none; |
|
10 } |
|
11 |
|
12 /* Make shortcut buttons essentially invisible */ |
|
13 .widget .customize-partial-edit-shortcut, |
|
14 .customize-partial-edit-shortcut { |
|
15 position: absolute; |
|
16 float: left; |
|
17 width: 1px; /* required to have a size to be focusable in Safari */ |
|
18 height: 1px; |
|
19 padding: 0; |
|
20 margin: -1px 0 0 -1px; |
|
21 border: 0; |
|
22 background: transparent; |
|
23 color: transparent; |
|
24 box-shadow: none; |
|
25 outline: none; |
|
26 z-index: 5; |
|
27 } |
|
28 |
|
29 /** |
|
30 * Styles for the actual shortcut |
|
31 * |
|
32 * Note that some properties are overly verbose to prevent theme interference. |
|
33 */ |
|
34 .widget .customize-partial-edit-shortcut button, |
|
35 .customize-partial-edit-shortcut button { |
|
36 position: absolute; |
|
37 left: -30px; |
|
38 top: 2px; |
|
39 color: #fff; |
|
40 width: 30px; |
|
41 height: 30px; |
|
42 min-width: 30px; |
|
43 min-height: 30px; |
|
44 line-height: 1em !important; |
|
45 font-size: 18px; |
|
46 z-index: 5; |
|
47 background: #0085ba !important; |
|
48 border-radius: 50%; |
|
49 border: 2px solid #fff; |
|
50 box-shadow: 0 2px 1px rgba(46,68,83,0.15); |
|
51 text-align: center; |
|
52 cursor: pointer; |
|
53 box-sizing: border-box; |
|
54 padding: 3px; |
|
55 -webkit-animation-fill-mode: both; |
|
56 animation-fill-mode: both; |
|
57 -webkit-animation-duration: .4s; |
|
58 animation-duration: .4s; |
|
59 opacity: 0; |
|
60 pointer-events: none; |
|
61 text-shadow: 0 -1px 1px #006799, |
|
62 1px 0 1px #006799, |
|
63 0 1px 1px #006799, |
|
64 -1px 0 1px #006799; |
|
65 } |
|
66 .wp-custom-header .customize-partial-edit-shortcut button { |
|
67 left: 2px |
|
68 } |
|
69 |
|
70 .customize-partial-edit-shortcut button svg { |
|
71 fill: #fff; |
|
72 min-width: 20px; |
|
73 min-height: 20px; |
|
74 width: 20px; |
|
75 height: 20px; |
|
76 margin: auto; |
|
77 } |
|
78 |
|
79 .customize-partial-edit-shortcut button:hover { |
|
80 background: #008ec2 !important; /* matches primary buttons */ |
|
81 } |
|
82 |
|
83 .customize-partial-edit-shortcut button:focus { |
|
84 box-shadow: 0 0 0 2px #008ec2; |
|
85 } |
|
86 |
|
87 body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button { |
|
88 -webkit-animation-name: customize-partial-edit-shortcut-bounce-appear; |
|
89 animation-name: customize-partial-edit-shortcut-bounce-appear; |
|
90 pointer-events: auto; |
|
91 } |
|
92 body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button { |
|
93 -webkit-animation-name: customize-partial-edit-shortcut-bounce-disappear; |
|
94 animation-name: customize-partial-edit-shortcut-bounce-disappear; |
|
95 pointer-events: none; |
|
96 } |
|
97 |
|
98 .page-sidebar-collapsed .customize-partial-edit-shortcut button, |
|
99 .customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button { |
|
100 visibility: hidden; |
|
101 } |
|
102 |
|
103 @-webkit-keyframes customize-partial-edit-shortcut-bounce-appear { |
|
104 from, 20%, 40%, 60%, 80%, to { |
|
105 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
106 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
107 } |
|
108 0% { |
|
109 opacity: 0; |
|
110 -webkit-transform: scale3d(.3, .3, .3); |
|
111 transform: scale3d(.3, .3, .3); |
|
112 } |
|
113 20% { |
|
114 -webkit-transform: scale3d(1.1, 1.1, 1.1); |
|
115 transform: scale3d(1.1, 1.1, 1.1); |
|
116 } |
|
117 40% { |
|
118 -webkit-transform: scale3d(.9, .9, .9); |
|
119 transform: scale3d(.9, .9, .9); |
|
120 } |
|
121 60% { |
|
122 opacity: 1; |
|
123 -webkit-transform: scale3d(1.03, 1.03, 1.03); |
|
124 transform: scale3d(1.03, 1.03, 1.03); |
|
125 } |
|
126 80% { |
|
127 -webkit-transform: scale3d(.97, .97, .97); |
|
128 transform: scale3d(.97, .97, .97); |
|
129 } |
|
130 to { |
|
131 opacity: 1; |
|
132 -webkit-transform: scale3d(1, 1, 1); |
|
133 transform: scale3d(1, 1, 1); |
|
134 } |
|
135 } |
|
136 |
|
137 @keyframes customize-partial-edit-shortcut-bounce-appear { |
|
138 from, 20%, 40%, 60%, 80%, to { |
|
139 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
140 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
141 } |
|
142 0% { |
|
143 opacity: 0; |
|
144 -webkit-transform: scale3d(.3, .3, .3); |
|
145 transform: scale3d(.3, .3, .3); |
|
146 } |
|
147 20% { |
|
148 -webkit-transform: scale3d(1.1, 1.1, 1.1); |
|
149 transform: scale3d(1.1, 1.1, 1.1); |
|
150 } |
|
151 40% { |
|
152 -webkit-transform: scale3d(.9, .9, .9); |
|
153 transform: scale3d(.9, .9, .9); |
|
154 } |
|
155 60% { |
|
156 opacity: 1; |
|
157 -webkit-transform: scale3d(1.03, 1.03, 1.03); |
|
158 transform: scale3d(1.03, 1.03, 1.03); |
|
159 } |
|
160 80% { |
|
161 -webkit-transform: scale3d(.97, .97, .97); |
|
162 transform: scale3d(.97, .97, .97); |
|
163 } |
|
164 to { |
|
165 opacity: 1; |
|
166 -webkit-transform: scale3d(1, 1, 1); |
|
167 transform: scale3d(1, 1, 1); |
|
168 } |
|
169 } |
|
170 |
|
171 @-webkit-keyframes customize-partial-edit-shortcut-bounce-disappear { |
|
172 from, 20%, 40%, 60%, 80%, to { |
|
173 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
174 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
175 } |
|
176 0% { |
|
177 opacity: 1; |
|
178 -webkit-transform: scale3d(1, 1, 1); |
|
179 transform: scale3d(1, 1, 1); |
|
180 } |
|
181 20% { |
|
182 -webkit-transform: scale3d(.97, .97, .97); |
|
183 transform: scale3d(.97, .97, .97); |
|
184 } |
|
185 40% { |
|
186 opacity: 1; |
|
187 -webkit-transform: scale3d(1.03, 1.03, 1.03); |
|
188 transform: scale3d(1.03, 1.03, 1.03); |
|
189 } |
|
190 60% { |
|
191 -webkit-transform: scale3d(.9, .9, .9); |
|
192 transform: scale3d(.9, .9, .9); |
|
193 } |
|
194 80% { |
|
195 -webkit-transform: scale3d(1.1, 1.1, 1.1); |
|
196 transform: scale3d(1.1, 1.1, 1.1); |
|
197 } |
|
198 to { |
|
199 opacity: 0; |
|
200 -webkit-transform: scale3d(.3, .3, .3); |
|
201 transform: scale3d(.3, .3, .3); |
|
202 } |
|
203 } |
|
204 |
|
205 @keyframes customize-partial-edit-shortcut-bounce-disappear { |
|
206 from, 20%, 40%, 60%, 80%, to { |
|
207 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
208 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
209 } |
|
210 0% { |
|
211 opacity: 1; |
|
212 -webkit-transform: scale3d(1, 1, 1); |
|
213 transform: scale3d(1, 1, 1); |
|
214 } |
|
215 20% { |
|
216 -webkit-transform: scale3d(.97, .97, .97); |
|
217 transform: scale3d(.97, .97, .97); |
|
218 } |
|
219 40% { |
|
220 opacity: 1; |
|
221 -webkit-transform: scale3d(1.03, 1.03, 1.03); |
|
222 transform: scale3d(1.03, 1.03, 1.03); |
|
223 } |
|
224 60% { |
|
225 -webkit-transform: scale3d(.9, .9, .9); |
|
226 transform: scale3d(.9, .9, .9); |
|
227 } |
|
228 80% { |
|
229 -webkit-transform: scale3d(1.1, 1.1, 1.1); |
|
230 transform: scale3d(1.1, 1.1, 1.1); |
|
231 } |
|
232 to { |
|
233 opacity: 0; |
|
234 -webkit-transform: scale3d(.3, .3, .3); |
|
235 transform: scale3d(.3, .3, .3); |
|
236 } |
|
237 } |
|
238 |
|
239 @media screen and (max-width:800px) { |
|
240 .widget .customize-partial-edit-shortcut button, |
|
241 .customize-partial-edit-shortcut button { |
|
242 left: -32px; |
|
243 } |
|
244 } |
|
245 |
|
246 @media screen and (max-width:320px) { |
|
247 .widget .customize-partial-edit-shortcut button, |
|
248 .customize-partial-edit-shortcut button { |
|
249 left: -30px; |
|
250 } |
|
251 } |