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