WordPress 4.2
[autoinstalls/wordpress.git] / wp-admin / css / colors / _admin.scss
1
2 @import 'variables';
3 @import 'mixins';
4
5
6 html {
7         background: $body-background;
8 }
9
10
11 /* Links */
12
13 a {
14         color: $link;
15
16         &:hover,
17         &:active,
18         &:focus {
19                 color: $link-focus;
20         }
21 }
22
23 #media-upload a.del-link:hover,
24 div.dashboard-widget-submit input:hover,
25 .subsubsub a:hover,
26 .subsubsub a.current:hover {
27         color: $link-focus;
28 }
29
30
31 /* Forms */
32
33 input[type=checkbox]:checked:before {
34         color: $form-checked;
35 }
36
37 input[type=radio]:checked:before {
38         background: $form-checked;
39 }
40
41 .wp-core-ui input[type="reset"]:hover,
42 .wp-core-ui input[type="reset"]:active {
43         color: $link-focus;
44 }
45
46
47 /* Core UI */
48
49 .wp-core-ui {
50         .button-primary {
51                 @include button( $button-color );
52         }
53
54         .wp-ui-primary {
55                 color: $text-color;
56                 background-color: $base-color;
57         }
58         .wp-ui-text-primary {
59                 color: $base-color;
60         }
61
62         .wp-ui-highlight {
63                 color: $menu-highlight-text;
64                 background-color: $menu-highlight-background;
65         }
66         .wp-ui-text-highlight {
67                 color: $menu-highlight-background;
68         }
69
70         .wp-ui-notification {
71                 color: $menu-bubble-text;
72                 background-color: $menu-bubble-background;
73         }
74         .wp-ui-text-notification {
75                 color: $menu-bubble-background;
76         }
77
78         .wp-ui-text-icon {
79                 color: $menu-icon;
80         }
81 }
82
83
84 /* List tables */
85
86 .wrap .add-new-h2:hover,
87 #add-new-comment a:hover,
88 .tablenav .tablenav-pages a:hover,
89 .tablenav .tablenav-pages a:focus {
90         color: $menu-text;
91         background-color: $menu-background;
92 }
93
94 .view-switch a.current:before {
95         color: $menu-background;
96 }
97
98 .view-switch a:hover:before {
99         color: $menu-bubble-background;
100 }
101
102 .post-com-count:hover:after {
103         border-top-color: $menu-background;
104 }
105 .post-com-count:hover span {
106         color: $menu-text;
107         background-color: $menu-background;
108 }
109
110 strong .post-com-count:after {
111         border-top-color: $menu-bubble-background;
112 }
113 strong .post-com-count span {
114         background-color: $menu-bubble-background;
115 }
116
117
118 /* Admin Menu */
119
120 #adminmenuback,
121 #adminmenuwrap,
122 #adminmenu {
123         background: $menu-background;
124 }
125
126 #adminmenu a {
127         color: $menu-text;
128 }
129
130 #adminmenu div.wp-menu-image:before {
131         color: $menu-icon;
132 }
133
134 #adminmenu a:hover,
135 #adminmenu li.menu-top:hover,
136 #adminmenu li.opensub > a.menu-top,
137 #adminmenu li > a.menu-top:focus {
138         color: $menu-highlight-text;
139         background-color: $menu-highlight-background;
140 }
141
142 #adminmenu li.menu-top:hover div.wp-menu-image:before,
143 #adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
144         color: $menu-highlight-icon;
145 }
146
147
148 /* Active tabs use a bottom border color that matches the page background color. */
149
150 .about-wrap h2 .nav-tab-active,
151 .nav-tab-active,
152 .nav-tab-active:hover {
153         background-color: $body-background;
154         border-bottom-color: $body-background;
155 }
156
157
158 /* Admin Menu: submenu */
159
160 #adminmenu .wp-submenu,
161 #adminmenu .wp-has-current-submenu .wp-submenu,
162 #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
163 .folded #adminmenu .wp-has-current-submenu .wp-submenu,
164 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
165         background: $menu-submenu-background;
166 }
167
168 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
169         border-right-color: $menu-submenu-background;
170 }
171
172 #adminmenu .wp-submenu .wp-submenu-head {
173         color: $menu-submenu-text;
174 }
175
176 #adminmenu .wp-submenu a,
177 #adminmenu .wp-has-current-submenu .wp-submenu a,
178 .folded #adminmenu .wp-has-current-submenu .wp-submenu a,
179 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
180 #adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
181         color: $menu-submenu-text;
182
183         &:focus, &:hover {
184                 color: $menu-submenu-focus-text;
185         }
186 }
187
188
189 /* Admin Menu: current */
190
191 #adminmenu .wp-submenu li.current a,
192 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
193 #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
194         color: $menu-submenu-current-text;
195
196         &:hover, &:focus {
197                 color: $menu-submenu-focus-text;
198         }
199 }
200
201 ul#adminmenu a.wp-has-current-submenu:after,
202 ul#adminmenu > li.current > a.current:after {
203     border-right-color: $body-background;
204 }
205
206 #adminmenu li.current a.menu-top,
207 #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
208 #adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
209 .folded #adminmenu li.current.menu-top {
210         color: $menu-current-text;
211         background: $menu-current-background;
212 }
213
214 #adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
215 #adminmenu a.current:hover div.wp-menu-image:before,
216 #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
217 #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
218 #adminmenu li:hover div.wp-menu-image:before,
219 #adminmenu li a:focus div.wp-menu-image:before,
220 #adminmenu li.opensub div.wp-menu-image:before,
221 .ie8 #adminmenu li.opensub div.wp-menu-image:before {
222         color: $menu-current-icon;
223 }
224
225
226 /* Admin Menu: bubble */
227
228 #adminmenu .awaiting-mod,
229 #adminmenu .update-plugins {
230         color: $menu-bubble-text;
231         background: $menu-bubble-background;
232 }
233
234 #adminmenu li.current a .awaiting-mod,
235 #adminmenu li a.wp-has-current-submenu .update-plugins,
236 #adminmenu li:hover a .awaiting-mod,
237 #adminmenu li.menu-top:hover > a .update-plugins {
238         color: $menu-bubble-current-text;
239         background: $menu-bubble-current-background;
240 }
241
242
243 /* Admin Menu: collapse button */
244
245 #collapse-menu {
246     color: $menu-collapse-text;
247 }
248
249 #collapse-menu:hover {
250     color: $menu-collapse-focus-text;
251 }
252
253 #collapse-button div:after {
254     color: $menu-collapse-icon;
255 }
256
257 #collapse-menu:hover #collapse-button div:after {
258     color: $menu-collapse-focus-icon;
259 }
260
261
262 /* Admin Bar */
263
264 #wpadminbar {
265         color: $menu-text;
266         background: $menu-background;
267 }
268
269 #wpadminbar .ab-item,
270 #wpadminbar a.ab-item,
271 #wpadminbar > #wp-toolbar span.ab-label,
272 #wpadminbar > #wp-toolbar span.noticon {
273         color: $menu-text;
274 }
275
276 #wpadminbar .ab-icon,
277 #wpadminbar .ab-icon:before,
278 #wpadminbar .ab-item:before,
279 #wpadminbar .ab-item:after {
280         color: $menu-icon;
281 }
282
283 #wpadminbar .ab-top-menu > li:hover > .ab-item,
284 #wpadminbar .ab-top-menu > li.hover > .ab-item,
285 #wpadminbar .ab-top-menu > li > .ab-item:focus,
286 #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
287 #wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item,
288 #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
289         color: $menu-submenu-focus-text;
290         background: $menu-submenu-background;
291 }
292
293 #wpadminbar > #wp-toolbar li:hover span.ab-label,
294 #wpadminbar > #wp-toolbar li.hover span.ab-label,
295 #wpadminbar > #wp-toolbar a:focus span.ab-label {
296         color: $menu-submenu-focus-text;
297 }
298
299 #wpadminbar li:hover .ab-icon:before,
300 #wpadminbar li:hover .ab-item:before,
301 #wpadminbar li:hover .ab-item:after,
302 #wpadminbar li:hover #adminbarsearch:before {
303         color: $menu-highlight-icon;
304 }
305
306
307 /* Admin Bar: submenu */
308
309 #wpadminbar .menupop .ab-sub-wrapper {
310         background: $menu-submenu-background;
311 }
312
313 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
314 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
315         background: $menu-submenu-background-alt;
316 }
317
318 #wpadminbar .ab-submenu .ab-item,
319 #wpadminbar .quicklinks .menupop ul li a,
320 #wpadminbar .quicklinks .menupop.hover ul li a,
321 #wpadminbar-nojs .quicklinks .menupop:hover ul li a {
322         color: $menu-submenu-text;
323 }
324
325 #wpadminbar .quicklinks li .blavatar,
326 #wpadminbar .menupop .menupop > .ab-item:before {
327         color: $menu-icon;
328 }
329
330 #wpadminbar .quicklinks .menupop ul li a:hover,
331 #wpadminbar .quicklinks .menupop ul li a:focus,
332 #wpadminbar .quicklinks .menupop ul li a:hover strong,
333 #wpadminbar .quicklinks .menupop ul li a:focus strong,
334 #wpadminbar .quicklinks .menupop.hover ul li a:hover,
335 #wpadminbar .quicklinks .menupop.hover ul li a:focus,
336 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
337 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
338 #wpadminbar li:hover .ab-icon:before,
339 #wpadminbar li:hover .ab-item:before,
340 #wpadminbar li a:focus .ab-icon:before,
341 #wpadminbar li .ab-item:focus:before,
342 #wpadminbar li.hover .ab-icon:before,
343 #wpadminbar li.hover .ab-item:before,
344 #wpadminbar li:hover .ab-item:after,
345 #wpadminbar li.hover .ab-item:after,
346 #wpadminbar li:hover #adminbarsearch:before {
347         color: $menu-submenu-focus-text;
348 }
349
350 #wpadminbar .quicklinks li a:hover .blavatar,
351 #wpadminbar .menupop .menupop > .ab-item:hover:before {
352         color: $menu-submenu-focus-text;
353 }
354
355
356 /* Admin Bar: search */
357
358 #wpadminbar #adminbarsearch:before {
359         color: $menu-icon;
360 }
361
362 #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
363         color: $menu-text;
364         background: $adminbar-input-background;
365 }
366
367 #wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder { color: $menu-text; opacity: 0.7; }
368 #wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder { color: $menu-text; opacity: 0.7; }
369 #wpadminbar #adminbarsearch .adminbar-input::-moz-placeholder { color: $menu-text; opacity: 0.7; }
370 #wpadminbar #adminbarsearch .adminbar-input:-ms-input-placeholder { color: $menu-text; opacity: 0.7; }
371
372
373 /* Admin Bar: my account */
374
375 #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
376         border-color: $adminbar-avatar-frame;
377         background-color: $adminbar-avatar-frame;
378 }
379
380 #wpadminbar #wp-admin-bar-user-info .display-name {
381         color: $menu-text;
382 }
383
384 #wpadminbar #wp-admin-bar-user-info a:hover .display-name {
385         color: $menu-submenu-focus-text;
386 }
387
388 #wpadminbar #wp-admin-bar-user-info .username {
389         color: $menu-submenu-text;
390 }
391
392
393 /* Pointers */
394
395 .wp-pointer .wp-pointer-content h3 {
396         background-color: $highlight-color;
397         border-color: darken( $highlight-color, 5% );
398 }
399
400 .wp-pointer .wp-pointer-content h3:before {
401         color: $highlight-color;
402 }
403
404 .wp-pointer.wp-pointer-top .wp-pointer-arrow,
405 .wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,
406 .wp-pointer.wp-pointer-undefined .wp-pointer-arrow,
407 .wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner {
408         border-bottom-color: $highlight-color;
409 }
410
411
412 /* Media */
413
414 .media-item .bar,
415 .media-progress-bar div {
416         background-color: $highlight-color;
417 }
418
419 .details.attachment {
420         box-shadow:
421                 inset 0 0 0 3px #fff,
422                 inset 0 0 0 7px $highlight-color;
423 }
424
425 .attachment.details .check {
426         background-color: $highlight-color;
427         box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color;
428 }
429
430 .media-selection .attachment.selection.details .thumbnail {
431         -webkit-box-shadow:
432                 0px 0px 0px 1px #fff,
433                 0px 0px 0px 3px $highlight-color;
434         box-shadow:
435                 0px 0px 0px 1px #fff,
436                 0px 0px 0px 3px $highlight-color;
437 }
438
439
440 /* Themes */
441
442 .theme-browser .theme.active .theme-name,
443 .theme-browser .theme.add-new-theme a:hover:after,
444 .theme-browser .theme.add-new-theme a:focus:after {
445         background: $highlight-color;
446 }
447
448 .theme-browser .theme.add-new-theme a:hover span:after,
449 .theme-browser .theme.add-new-theme a:focus span:after {
450         color: $highlight-color;
451 }
452
453 .theme-section.current,
454 .theme-filter.current {
455         border-bottom-color: $menu-background;
456 }
457
458 body.more-filters-opened .more-filters {
459         color: $menu-text;
460         background-color: $menu-background;
461 }
462
463 body.more-filters-opened .more-filters:before {
464         color: $menu-text;
465 }
466
467 body.more-filters-opened .more-filters:hover,
468 body.more-filters-opened .more-filters:focus {
469         background-color: $menu-highlight-background;
470         color: $menu-highlight-text;
471 }
472
473 body.more-filters-opened .more-filters:hover:before,
474 body.more-filters-opened .more-filters:focus:before {
475         color: $menu-highlight-text;
476 }
477
478 /* Widgets */
479
480 .widgets-chooser li.widgets-chooser-selected {
481         background-color: $menu-highlight-background;
482         color: $menu-highlight-text;
483 }
484
485 .widgets-chooser li.widgets-chooser-selected:before,
486 .widgets-chooser li.widgets-chooser-selected:focus:before {
487         color: $menu-highlight-text;
488 }
489
490 /* Customize */
491
492 #customize-theme-controls .widget-area-select .selected {
493         background-color: $menu-highlight-background;
494         color: $menu-highlight-text;
495 }
496
497 /* jQuery UI Slider */
498
499 .wp-slider .ui-slider-handle,
500 .wp-slider .ui-slider-handle.ui-state-hover,
501 .wp-slider .ui-slider-handle.focus {
502         background: $button-color;
503         border-color: darken( $button-color, 10% );
504         box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
505 }
506
507 /* Responsive Component */
508
509 div#wp-responsive-toggle a:before {
510         color: $menu-icon;
511 }
512
513 .wp-responsive-open div#wp-responsive-toggle a {
514         // ToDo: make inset border
515         border-color: transparent;
516         background: $menu-highlight-background;
517 }
518
519 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
520         background: $menu-submenu-background;
521 }