1 .wp-pointer { |
|
2 } |
|
3 |
|
4 .wp-pointer-content { |
1 .wp-pointer-content { |
5 padding: 0 0 10px; |
2 padding: 0 0 10px; |
6 position: relative; |
3 position: relative; |
7 font-size: 13px; |
4 font-size: 13px; |
8 |
|
9 background: #fff; |
5 background: #fff; |
10 border-style: solid; |
6 border: 1px solid #dfdfdf; |
11 border-width: 1px; |
7 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.075); |
12 /* Fallback for non-rgba-compliant browsers */ |
8 box-shadow: 0 3px 6px rgba(0,0,0,0.075); |
13 border-color: #dfdfdf; |
|
14 /* Use rgba to look better against non-white backgrounds. */ |
|
15 border-color: rgba(0,0,0,.125); |
|
16 -webkit-border-radius: 3px; |
|
17 border-radius: 3px; |
|
18 |
|
19 -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.19); |
|
20 box-shadow: 0 2px 4px rgba(0,0,0,.19); |
|
21 } |
9 } |
22 |
10 |
23 .wp-pointer-content h3 { |
11 .wp-pointer-content h3 { |
24 position: relative; |
12 position: relative; |
25 margin: 0 0 5px; |
13 margin: -1px -1px 5px; |
26 padding: 15px 18px 14px 60px; |
14 padding: 15px 18px 14px 60px; |
|
15 border: 1px solid #3592b6; |
|
16 border-bottom: none; |
27 line-height: 1.4em; |
17 line-height: 1.4em; |
28 font-size: 14px; |
18 font-size: 14px; |
29 color: #fff; |
19 color: #fff; |
30 border-radius: 3px 3px 0 0; |
20 background: #00a0d2; |
31 text-shadow: 0 -1px 0 rgba(0,0,0,0.3); |
|
32 background: #8cc1e9; |
|
33 background-image: -webkit-gradient(linear, left bottom, left top, from(#72a7cf), to(#8cc1e9)); |
|
34 background-image: -webkit-linear-gradient(bottom, #72a7cf, #8cc1e9); |
|
35 background-image: -moz-linear-gradient(bottom, #72a7cf, #8cc1e9); |
|
36 background-image: -o-linear-gradient(bottom, #72a7cf, #8cc1e9); |
|
37 background-image: linear-gradient(to top, #72a7cf, #8cc1e9); |
|
38 } |
21 } |
39 |
22 |
40 .wp-pointer-content h3:before { |
23 .wp-pointer-content h3:before { |
|
24 background: #fff; |
|
25 -webkit-border-radius: 50%; |
|
26 border-radius: 50%; |
|
27 color: #00a0d2; |
|
28 content: '\f227'; |
|
29 font: normal 20px/1.6 'dashicons'; |
41 position: absolute; |
30 position: absolute; |
42 top: 0; |
31 top: 8px; |
43 left: 15px; |
32 left: 15px; |
44 content: ' '; |
33 speak: none; |
45 width: 36px; |
34 text-align: center; |
46 height: 100%; |
35 width: 32px; |
47 background: url('../images/icon-pointer-flag.png') 0 50% no-repeat; |
36 height: 32px; |
|
37 -webkit-font-smoothing: antialiased; |
|
38 -moz-osx-font-smoothing: grayscale; |
48 } |
39 } |
49 |
40 |
50 .wp-pointer-content p { |
41 .wp-pointer-content p { |
51 padding: 0 15px; |
42 padding: 0 15px; |
52 } |
43 } |
62 display: inline-block; |
53 display: inline-block; |
63 text-decoration: none; |
54 text-decoration: none; |
64 } |
55 } |
65 |
56 |
66 .wp-pointer-buttons a.close { |
57 .wp-pointer-buttons a.close { |
67 padding-left:3px; |
58 padding-left: 3px; |
68 position: relative; |
59 position: relative; |
69 } |
60 } |
70 |
61 |
71 .wp-pointer-buttons a.close:before { |
62 .wp-pointer-buttons a.close:before { |
72 content: ' '; |
63 background: none; |
73 width:10px; |
64 color: #b4b9be; |
74 height:100%; |
65 content: '\f153'; |
75 position:absolute; |
66 display: block !important; |
76 left:-10px; |
67 font: normal 16px/1 'dashicons'; |
77 background:url('../images/xit.gif') 0 50% no-repeat; |
68 speak: none; |
|
69 margin: 1px 0; |
|
70 text-align: center; |
|
71 -webkit-font-smoothing: antialiased !important; |
|
72 width: 10px; |
|
73 height: 100%; |
|
74 position: absolute; |
|
75 left: -15px; |
|
76 top: 1px; |
78 } |
77 } |
79 |
78 |
80 .wp-pointer-buttons a.close:hover:before { |
79 .wp-pointer-buttons a.close:hover:before { |
81 background-position:100% 50%; |
80 color: #c00; |
82 } |
81 } |
83 |
82 |
84 /* The arrow base class must take up no space, even with transparent borders. */ |
83 /* The arrow base class must take up no space, even with transparent borders. */ |
85 .wp-pointer-arrow, |
84 .wp-pointer-arrow, |
86 .wp-pointer-arrow-inner { |
85 .wp-pointer-arrow-inner { |
103 .wp-pointer-undefined { |
104 .wp-pointer-undefined { |
104 padding-top: 13px; |
105 padding-top: 13px; |
105 } |
106 } |
106 |
107 |
107 .wp-pointer-bottom { |
108 .wp-pointer-bottom { |
|
109 margin-top: -13px; |
108 padding-bottom: 13px; |
110 padding-bottom: 13px; |
109 } |
111 } |
110 |
112 |
|
113 /* rtl:ignore */ |
111 .wp-pointer-left { |
114 .wp-pointer-left { |
112 padding-left: 13px; |
115 padding-left: 13px; |
113 } |
116 } |
114 |
117 /* rtl:ignore */ |
115 .wp-pointer-right { |
118 .wp-pointer-right { |
|
119 margin-left: -13px; |
116 padding-right: 13px; |
120 padding-right: 13px; |
117 } |
121 } |
118 |
122 |
119 /* Base Size & Positioning */ |
123 /* Base Size & Positioning */ |
120 .wp-pointer-top .wp-pointer-arrow, |
124 .wp-pointer-top .wp-pointer-arrow, |
121 .wp-pointer-bottom .wp-pointer-arrow, |
125 .wp-pointer-bottom .wp-pointer-arrow, |
122 .wp-pointer-undefined .wp-pointer-arrow { |
126 .wp-pointer-undefined .wp-pointer-arrow { |
123 left: 50px; |
127 left: 50px; |
124 width: 30px; |
|
125 height: 14px; |
|
126 } |
128 } |
127 |
129 |
128 .wp-pointer-left .wp-pointer-arrow, |
130 .wp-pointer-left .wp-pointer-arrow, |
129 .wp-pointer-right .wp-pointer-arrow { |
131 .wp-pointer-right .wp-pointer-arrow { |
130 top: 50%; |
132 top: 50%; |
131 margin-top: -15px; |
133 margin-top: -15px; |
132 width: 14px; |
|
133 height: 30px; |
|
134 } |
134 } |
135 |
135 |
136 /* Arrow Sprite */ |
136 /* Arrow Sprite */ |
137 .wp-pointer-top .wp-pointer-arrow, |
137 .wp-pointer-top .wp-pointer-arrow, |
138 .wp-pointer-undefined .wp-pointer-arrow { |
138 .wp-pointer-undefined .wp-pointer-arrow { |
139 top: 0; |
139 top: 0; |
140 background-position: 0 0; |
140 border-width: 0 13px 13px 13px; |
|
141 border-bottom-color: #3592b6; |
|
142 } |
|
143 |
|
144 .wp-pointer-top .wp-pointer-arrow-inner, |
|
145 .wp-pointer-undefined .wp-pointer-arrow-inner { |
|
146 top: 1px; |
|
147 margin-left: -13px; |
|
148 margin-top: -13px; |
|
149 border: 13px solid transparent; |
|
150 border-bottom-color: #00a0d2; |
|
151 display: block; |
|
152 content: ' '; |
141 } |
153 } |
142 |
154 |
143 .wp-pointer-bottom .wp-pointer-arrow { |
155 .wp-pointer-bottom .wp-pointer-arrow { |
144 bottom: 0; |
156 bottom: 0; |
145 background-position: 0 -46px; |
157 border-width: 13px 13px 0 13px; |
146 } |
158 border-top-color: #ccc; |
147 |
159 } |
|
160 |
|
161 .wp-pointer-bottom .wp-pointer-arrow-inner { |
|
162 bottom: 1px; |
|
163 margin-left: -13px; |
|
164 margin-bottom: -13px; |
|
165 border: 13px solid transparent; |
|
166 border-top-color: #fff; |
|
167 display: block; |
|
168 content: ' '; |
|
169 } |
|
170 |
|
171 /* rtl:ignore */ |
148 .wp-pointer-left .wp-pointer-arrow { |
172 .wp-pointer-left .wp-pointer-arrow { |
149 left: 0; |
173 left: 0; |
150 background-position: 0 -15px; |
174 border-width: 13px 13px 13px 0; |
151 } |
175 border-right-color: #ccc; |
152 |
176 } |
|
177 |
|
178 /* rtl:ignore */ |
|
179 .wp-pointer-left .wp-pointer-arrow-inner { |
|
180 left: 1px; |
|
181 margin-left: -13px; |
|
182 margin-top: -13px; |
|
183 border: 13px solid transparent; |
|
184 border-right-color: #fff; |
|
185 display: block; |
|
186 content: ' '; |
|
187 } |
|
188 |
|
189 /* rtl:ignore */ |
153 .wp-pointer-right .wp-pointer-arrow { |
190 .wp-pointer-right .wp-pointer-arrow { |
154 right:0; |
191 right: 0; |
155 background-position:-16px -15px; |
192 border-width: 13px 0 13px 13px; |
156 } |
193 border-left-color: #ccc; |
157 |
194 } |
158 /* - RTL |
195 |
159 ------------------------------------------------------------------------------*/ |
196 /* rtl:ignore */ |
160 |
197 .wp-pointer-right .wp-pointer-arrow-inner { |
161 .rtl .wp-pointer-content h3 { |
198 right: 1px; |
162 padding-right: 60px; |
199 margin-right: -13px; |
163 padding-left: 18px; |
200 margin-top: -13px; |
164 } |
201 border: 13px solid transparent; |
165 |
202 border-left-color: #fff; |
166 .rtl .wp-pointer-content h3:before { |
203 display: block; |
167 right: 15px; |
204 content: ' '; |
168 } |
205 } |
169 |
206 |
170 .rtl .wp-pointer-buttons a { |
207 /* Disable pointers at responsive sizes */ |
171 float: left; |
208 @media screen and ( max-width: 782px ) { |
172 } |
209 .wp-pointer { |
173 |
210 display: none; |
174 .rtl .wp-pointer-buttons a.close { |
|
175 padding-right:3px; |
|
176 padding-left: 0; |
|
177 } |
|
178 |
|
179 .rtl .wp-pointer-buttons a.close:before { |
|
180 right:-10px; |
|
181 } |
|
182 |
|
183 .rtl .wp-pointer-top .wp-pointer-arrow, |
|
184 .rtl .wp-pointer-bottom .wp-pointer-arrow, |
|
185 .rtl .wp-pointer-undefined .wp-pointer-arrow { |
|
186 right: 50px; |
|
187 } |
|
188 |
|
189 /** |
|
190 * HiDPI Displays |
|
191 */ |
|
192 @media print, |
|
193 (-o-min-device-pixel-ratio: 5/4), |
|
194 (-webkit-min-device-pixel-ratio: 1.25), |
|
195 (min-resolution: 120dpi) { |
|
196 |
|
197 .wp-pointer-buttons a.close:before { |
|
198 background-image: url('../images/xit-2x.gif'); |
|
199 background-size: 20px auto; |
|
200 } |
211 } |
201 |
212 } |
202 .wp-pointer-content h3:before { |
|
203 background-image: url('../images/icon-pointer-flag-2x.png'); |
|
204 background-size: 36px auto; |
|
205 } |
|
206 |
|
207 .wp-pointer-arrow { |
|
208 background: url('../images/arrow-pointer-blue-2x.png') 0 0 no-repeat; |
|
209 background-size: 30px 60px; |
|
210 } |
|
211 |
|
212 .wp-pointer-top .wp-pointer-arrow, |
|
213 .wp-pointer-undefined .wp-pointer-arrow { |
|
214 background-position: 0 1px; |
|
215 } |
|
216 |
|
217 .wp-pointer-bottom .wp-pointer-arrow { |
|
218 background-position: 0 -47px; |
|
219 } |
|
220 |
|
221 .wp-pointer-left .wp-pointer-arrow { |
|
222 background-position: 1px -15px; |
|
223 } |
|
224 |
|
225 .wp-pointer-right .wp-pointer-arrow { |
|
226 background-position:-17px -15px; |
|
227 } |
|
228 } |
|