114 2.0 - Default Button Style |
114 2.0 - Default Button Style |
115 ---------------------------------------------------------------------------- */ |
115 ---------------------------------------------------------------------------- */ |
116 |
116 |
117 .wp-core-ui .button, |
117 .wp-core-ui .button, |
118 .wp-core-ui .button-secondary { |
118 .wp-core-ui .button-secondary { |
119 color: #0071a1; |
119 color: #2271b1; |
120 border-color: #0071a1; |
120 border-color: #2271b1; |
121 background: #f3f5f6; |
121 background: #f6f7f7; |
122 vertical-align: top; |
122 vertical-align: top; |
123 } |
123 } |
124 |
124 |
125 .wp-core-ui p .button { |
125 .wp-core-ui p .button { |
126 vertical-align: baseline; |
126 vertical-align: baseline; |
127 } |
127 } |
128 |
128 |
129 .wp-core-ui .button.hover, |
129 .wp-core-ui .button.hover, |
130 .wp-core-ui .button:hover, |
130 .wp-core-ui .button:hover, |
131 .wp-core-ui .button-secondary:hover{ |
131 .wp-core-ui .button-secondary:hover{ |
132 background: #f1f1f1; |
132 background: #f0f0f1; |
133 border-color: #016087; |
133 border-color: #0a4b78; |
134 color: #016087; |
134 color: #0a4b78; |
135 } |
135 } |
136 |
136 |
137 .wp-core-ui .button.focus, |
137 .wp-core-ui .button.focus, |
138 .wp-core-ui .button:focus, |
138 .wp-core-ui .button:focus, |
139 .wp-core-ui .button-secondary:focus { |
139 .wp-core-ui .button-secondary:focus { |
140 background: #f3f5f6; |
140 background: #f6f7f7; |
141 border-color: #007cba; |
141 border-color: #3582c4; |
142 color: #016087; |
142 color: #0a4b78; |
143 box-shadow: 0 0 0 1px #007cba; |
143 box-shadow: 0 0 0 1px #3582c4; |
144 /* Only visible in Windows High Contrast mode */ |
144 /* Only visible in Windows High Contrast mode */ |
145 outline: 2px solid transparent; |
145 outline: 2px solid transparent; |
146 /* Reset inherited offset from Gutenberg */ |
146 /* Reset inherited offset from Gutenberg */ |
147 outline-offset: 0; |
147 outline-offset: 0; |
148 } |
148 } |
149 |
149 |
150 /* :active state */ |
150 /* :active state */ |
151 .wp-core-ui .button:active, |
151 .wp-core-ui .button:active, |
152 .wp-core-ui .button-secondary:active { |
152 .wp-core-ui .button-secondary:active { |
153 background: #f3f5f6; |
153 background: #f6f7f7; |
154 border-color: #7e8993; |
154 border-color: #8c8f94; |
155 box-shadow: none; |
155 box-shadow: none; |
156 } |
156 } |
157 |
157 |
158 /* pressed state e.g. a selected setting */ |
158 /* pressed state e.g. a selected setting */ |
159 .wp-core-ui .button.active, |
159 .wp-core-ui .button.active, |
160 .wp-core-ui .button.active:hover { |
160 .wp-core-ui .button.active:hover { |
161 background-color: #e2e4e7; |
161 background-color: #dcdcde; |
162 color: #00669b; |
162 color: #135e96; |
163 border-color: #016087; |
163 border-color: #0a4b78; |
164 box-shadow: inset 0 2px 5px -3px #016087; |
164 box-shadow: inset 0 2px 5px -3px #0a4b78; |
165 } |
165 } |
166 |
166 |
167 .wp-core-ui .button.active:focus { |
167 .wp-core-ui .button.active:focus { |
168 border-color: #007cba; |
168 border-color: #3582c4; |
169 box-shadow: |
169 box-shadow: |
170 inset 0 2px 5px -3px #016087, |
170 inset 0 2px 5px -3px #0a4b78, |
171 0 0 0 1px #007cba; |
171 0 0 0 1px #3582c4; |
172 } |
172 } |
173 |
173 |
174 .wp-core-ui .button[disabled], |
174 .wp-core-ui .button[disabled], |
175 .wp-core-ui .button:disabled, |
175 .wp-core-ui .button:disabled, |
176 .wp-core-ui .button.disabled, |
176 .wp-core-ui .button.disabled, |
177 .wp-core-ui .button-secondary[disabled], |
177 .wp-core-ui .button-secondary[disabled], |
178 .wp-core-ui .button-secondary:disabled, |
178 .wp-core-ui .button-secondary:disabled, |
179 .wp-core-ui .button-secondary.disabled, |
179 .wp-core-ui .button-secondary.disabled, |
180 .wp-core-ui .button-disabled { |
180 .wp-core-ui .button-disabled { |
181 color: #a0a5aa !important; |
181 color: #a7aaad !important; |
182 border-color: #ddd !important; |
182 border-color: #dcdcde !important; |
183 background: #f7f7f7 !important; |
183 background: #f6f7f7 !important; |
184 box-shadow: none !important; |
184 box-shadow: none !important; |
185 cursor: default; |
185 cursor: default; |
186 transform: none !important; |
186 transform: none !important; |
187 } |
187 } |
188 |
188 |
195 border-radius: 0; |
195 border-radius: 0; |
196 background: none; |
196 background: none; |
197 cursor: pointer; |
197 cursor: pointer; |
198 text-align: right; |
198 text-align: right; |
199 /* Mimics the default link style in common.css */ |
199 /* Mimics the default link style in common.css */ |
200 color: #0073aa; |
200 color: #2271b1; |
201 text-decoration: underline; |
201 text-decoration: underline; |
202 transition-property: border, background, color; |
202 transition-property: border, background, color; |
203 transition-duration: .05s; |
203 transition-duration: .05s; |
204 transition-timing-function: ease-in-out; |
204 transition-timing-function: ease-in-out; |
205 } |
205 } |
206 |
206 |
207 .wp-core-ui .button-link:hover, |
207 .wp-core-ui .button-link:hover, |
208 .wp-core-ui .button-link:active { |
208 .wp-core-ui .button-link:active { |
209 color: #006799; |
209 color: #135e96; |
210 } |
210 } |
211 |
211 |
212 .wp-core-ui .button-link:focus { |
212 .wp-core-ui .button-link:focus { |
213 color: #124964; |
213 color: #043959; |
214 box-shadow: |
214 box-shadow: |
215 0 0 0 1px #5b9dd9, |
215 0 0 0 1px #4f94d4, |
216 0 0 2px 1px rgba(30, 140, 190, 0.8); |
216 0 0 2px 1px rgba(79, 148, 212, 0.8); |
217 /* Only visible in Windows High Contrast mode */ |
217 /* Only visible in Windows High Contrast mode */ |
218 outline: 1px solid transparent; |
218 outline: 1px solid transparent; |
219 } |
219 } |
220 |
220 |
221 .wp-core-ui .button-link-delete { |
221 .wp-core-ui .button-link-delete { |
222 color: #a00; |
222 color: #d63638; |
223 } |
223 } |
224 |
224 |
225 .wp-core-ui .button-link-delete:hover, |
225 .wp-core-ui .button-link-delete:hover, |
226 .wp-core-ui .button-link-delete:focus { |
226 .wp-core-ui .button-link-delete:focus { |
227 color: #dc3232; |
227 color: #d63638; |
228 background: transparent; |
228 background: transparent; |
229 } |
229 } |
230 |
230 |
231 .wp-core-ui .button-link-delete:disabled { |
231 .wp-core-ui .button-link-delete:disabled { |
232 /* overrides the default buttons disabled background */ |
232 /* overrides the default buttons disabled background */ |
237 /* ---------------------------------------------------------------------------- |
237 /* ---------------------------------------------------------------------------- |
238 3.0 - Primary Button Style |
238 3.0 - Primary Button Style |
239 ---------------------------------------------------------------------------- */ |
239 ---------------------------------------------------------------------------- */ |
240 |
240 |
241 .wp-core-ui .button-primary { |
241 .wp-core-ui .button-primary { |
242 background: #007cba; |
242 background: #2271b1; |
243 border-color: #007cba; |
243 border-color: #2271b1; |
244 color: #fff; |
244 color: #fff; |
245 text-decoration: none; |
245 text-decoration: none; |
246 text-shadow: none; |
246 text-shadow: none; |
247 } |
247 } |
248 |
248 |
249 .wp-core-ui .button-primary.hover, |
249 .wp-core-ui .button-primary.hover, |
250 .wp-core-ui .button-primary:hover, |
250 .wp-core-ui .button-primary:hover, |
251 .wp-core-ui .button-primary.focus, |
251 .wp-core-ui .button-primary.focus, |
252 .wp-core-ui .button-primary:focus { |
252 .wp-core-ui .button-primary:focus { |
253 background: #0071a1; |
253 background: #135e96; |
254 border-color: #0071a1; |
254 border-color: #135e96; |
255 color: #fff; |
255 color: #fff; |
256 } |
256 } |
257 |
257 |
258 .wp-core-ui .button-primary.focus, |
258 .wp-core-ui .button-primary.focus, |
259 .wp-core-ui .button-primary:focus { |
259 .wp-core-ui .button-primary:focus { |
260 box-shadow: |
260 box-shadow: |
261 0 0 0 1px #fff, |
261 0 0 0 1px #fff, |
262 0 0 0 3px #007cba; |
262 0 0 0 3px #2271b1; |
263 } |
263 } |
264 |
264 |
265 .wp-core-ui .button-primary.active, |
265 .wp-core-ui .button-primary.active, |
266 .wp-core-ui .button-primary.active:hover, |
266 .wp-core-ui .button-primary.active:hover, |
267 .wp-core-ui .button-primary.active:focus, |
267 .wp-core-ui .button-primary.active:focus, |
268 .wp-core-ui .button-primary:active { |
268 .wp-core-ui .button-primary:active { |
269 background: #00669b; |
269 background: #135e96; |
270 border-color: #00669b; |
270 border-color: #135e96; |
271 box-shadow: none; |
271 box-shadow: none; |
272 color: #fff; |
272 color: #fff; |
273 } |
273 } |
274 |
274 |
275 .wp-core-ui .button-primary[disabled], |
275 .wp-core-ui .button-primary[disabled], |
276 .wp-core-ui .button-primary:disabled, |
276 .wp-core-ui .button-primary:disabled, |
277 .wp-core-ui .button-primary-disabled, |
277 .wp-core-ui .button-primary-disabled, |
278 .wp-core-ui .button-primary.disabled { |
278 .wp-core-ui .button-primary.disabled { |
279 color: #a0a5aa !important; |
279 color: #a7aaad !important; |
280 background: #f7f7f7 !important; |
280 background: #f6f7f7 !important; |
281 border-color: #ddd !important; |
281 border-color: #dcdcde !important; |
282 box-shadow: none !important; |
282 box-shadow: none !important; |
283 text-shadow: none !important; |
283 text-shadow: none !important; |
284 cursor: default; |
284 cursor: default; |
285 } |
285 } |
286 |
286 |
319 z-index: 1; |
319 z-index: 1; |
320 } |
320 } |
321 |
321 |
322 /* pressed state e.g. a selected setting */ |
322 /* pressed state e.g. a selected setting */ |
323 .wp-core-ui .button-group > .button.active { |
323 .wp-core-ui .button-group > .button.active { |
324 background-color: #e2e4e7; |
324 background-color: #dcdcde; |
325 color: #00669b; |
325 color: #135e96; |
326 border-color: #016087; |
326 border-color: #0a4b78; |
327 box-shadow: inset 0 2px 5px -3px #016087; |
327 box-shadow: inset 0 2px 5px -3px #0a4b78; |
328 } |
328 } |
329 |
329 |
330 .wp-core-ui .button-group > .button.active:focus { |
330 .wp-core-ui .button-group > .button.active:focus { |
331 border-color: #007cba; |
331 border-color: #3582c4; |
332 box-shadow: |
332 box-shadow: |
333 inset 0 2px 5px -3px #016087, |
333 inset 0 2px 5px -3px #0a4b78, |
334 0 0 0 1px #007cba; |
334 0 0 0 1px #3582c4; |
335 } |
335 } |
336 |
336 |
337 /* ---------------------------------------------------------------------------- |
337 /* ---------------------------------------------------------------------------- |
338 5.0 - Responsive Button Styles |
338 5.0 - Responsive Button Styles |
339 ---------------------------------------------------------------------------- */ |
339 ---------------------------------------------------------------------------- */ |