WordPress 4.3
[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, /* deprecated */
87 .wrap .page-title-action: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
103 /* Admin Menu */
104
105 #adminmenuback,
106 #adminmenuwrap,
107 #adminmenu {
108         background: $menu-background;
109 }
110
111 #adminmenu a {
112         color: $menu-text;
113 }
114
115 #adminmenu div.wp-menu-image:before {
116         color: $menu-icon;
117 }
118
119 #adminmenu a:hover,
120 #adminmenu li.menu-top:hover,
121 #adminmenu li.opensub > a.menu-top,
122 #adminmenu li > a.menu-top:focus {
123         color: $menu-highlight-text;
124         background-color: $menu-highlight-background;
125 }
126
127 #adminmenu li.menu-top:hover div.wp-menu-image:before,
128 #adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
129         color: $menu-highlight-icon;
130 }
131
132
133 /* Active tabs use a bottom border color that matches the page background color. */
134
135 .about-wrap h2 .nav-tab-active,
136 .nav-tab-active,
137 .nav-tab-active:hover {
138         background-color: $body-background;
139         border-bottom-color: $body-background;
140 }
141
142
143 /* Admin Menu: submenu */
144
145 #adminmenu .wp-submenu,
146 #adminmenu .wp-has-current-submenu .wp-submenu,
147 #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
148 .folded #adminmenu .wp-has-current-submenu .wp-submenu,
149 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
150         background: $menu-submenu-background;
151 }
152
153 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
154         border-right-color: $menu-submenu-background;
155 }
156
157 #adminmenu .wp-submenu .wp-submenu-head {
158         color: $menu-submenu-text;
159 }
160
161 #adminmenu .wp-submenu a,
162 #adminmenu .wp-has-current-submenu .wp-submenu a,
163 .folded #adminmenu .wp-has-current-submenu .wp-submenu a,
164 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
165 #adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
166         color: $menu-submenu-text;
167
168         &:focus, &:hover {
169                 color: $menu-submenu-focus-text;
170         }
171 }
172
173
174 /* Admin Menu: current */
175
176 #adminmenu .wp-submenu li.current a,
177 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
178 #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
179         color: $menu-submenu-current-text;
180
181         &:hover, &:focus {
182                 color: $menu-submenu-focus-text;
183         }
184 }
185
186 ul#adminmenu a.wp-has-current-submenu:after,
187 ul#adminmenu > li.current > a.current:after {
188     border-right-color: $body-background;
189 }
190
191 #adminmenu li.current a.menu-top,
192 #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
193 #adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
194 .folded #adminmenu li.current.menu-top {
195         color: $menu-current-text;
196         background: $menu-current-background;
197 }
198
199 #adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
200 #adminmenu a.current:hover div.wp-menu-image:before,
201 #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
202 #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
203 #adminmenu li:hover div.wp-menu-image:before,
204 #adminmenu li a:focus div.wp-menu-image:before,
205 #adminmenu li.opensub div.wp-menu-image:before,
206 .ie8 #adminmenu li.opensub div.wp-menu-image:before {
207         color: $menu-current-icon;
208 }
209
210
211 /* Admin Menu: bubble */
212
213 #adminmenu .awaiting-mod,
214 #adminmenu .update-plugins {
215         color: $menu-bubble-text;
216         background: $menu-bubble-background;
217 }
218
219 #adminmenu li.current a .awaiting-mod,
220 #adminmenu li a.wp-has-current-submenu .update-plugins,
221 #adminmenu li:hover a .awaiting-mod,
222 #adminmenu li.menu-top:hover > a .update-plugins {
223         color: $menu-bubble-current-text;
224         background: $menu-bubble-current-background;
225 }
226
227
228 /* Admin Menu: collapse button */
229
230 #collapse-menu {
231     color: $menu-collapse-text;
232 }
233
234 #collapse-menu:hover {
235     color: $menu-collapse-focus-text;
236 }
237
238 #collapse-button div:after {
239     color: $menu-collapse-icon;
240 }
241
242 #collapse-menu:hover #collapse-button div:after {
243     color: $menu-collapse-focus-icon;
244 }
245
246
247 /* Admin Bar */
248
249 #wpadminbar {
250         color: $menu-text;
251         background: $menu-background;
252 }
253
254 #wpadminbar .ab-item,
255 #wpadminbar a.ab-item,
256 #wpadminbar > #wp-toolbar span.ab-label,
257 #wpadminbar > #wp-toolbar span.noticon {
258         color: $menu-text;
259 }
260
261 #wpadminbar .ab-icon,
262 #wpadminbar .ab-icon:before,
263 #wpadminbar .ab-item:before,
264 #wpadminbar .ab-item:after {
265         color: $menu-icon;
266 }
267
268 #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
269 #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
270 #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
271 #wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
272 #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
273         color: $menu-submenu-focus-text;
274         background: $menu-submenu-background;
275 }
276
277 #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
278 #wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
279 #wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
280         color: $menu-submenu-focus-text;
281 }
282
283 #wpadminbar:not(.mobile) li:hover .ab-icon:before,
284 #wpadminbar:not(.mobile) li:hover .ab-item:before,
285 #wpadminbar:not(.mobile) li:hover .ab-item:after,
286 #wpadminbar:not(.mobile) li:hover #adminbarsearch:before {
287         color: $menu-highlight-icon;
288 }
289
290
291 /* Admin Bar: submenu */
292
293 #wpadminbar .menupop .ab-sub-wrapper {
294         background: $menu-submenu-background;
295 }
296
297 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
298 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
299         background: $menu-submenu-background-alt;
300 }
301
302 #wpadminbar .ab-submenu .ab-item,
303 #wpadminbar .quicklinks .menupop ul li a,
304 #wpadminbar .quicklinks .menupop.hover ul li a,
305 #wpadminbar.nojs .quicklinks .menupop:hover ul li a {
306         color: $menu-submenu-text;
307 }
308
309 #wpadminbar .quicklinks li .blavatar,
310 #wpadminbar .menupop .menupop > .ab-item:before {
311         color: $menu-icon;
312 }
313
314 #wpadminbar .quicklinks .menupop ul li a:hover,
315 #wpadminbar .quicklinks .menupop ul li a:focus,
316 #wpadminbar .quicklinks .menupop ul li a:hover strong,
317 #wpadminbar .quicklinks .menupop ul li a:focus strong,
318 #wpadminbar .quicklinks .menupop.hover ul li a:hover,
319 #wpadminbar .quicklinks .menupop.hover ul li a:focus,
320 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
321 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
322 #wpadminbar li:hover .ab-icon:before,
323 #wpadminbar li:hover .ab-item:before,
324 #wpadminbar li a:focus .ab-icon:before,
325 #wpadminbar li .ab-item:focus:before,
326 #wpadminbar li.hover .ab-icon:before,
327 #wpadminbar li.hover .ab-item:before,
328 #wpadminbar li:hover #adminbarsearch:before,
329 #wpadminbar li #adminbarsearch.adminbar-focused:before {
330         color: $menu-submenu-focus-text;
331 }
332
333 #wpadminbar .quicklinks li a:hover .blavatar,
334 #wpadminbar .menupop .menupop > .ab-item:hover:before,
335 #wpadminbar.mobile .quicklinks .ab-icon:before,
336 #wpadminbar.mobile .quicklinks .ab-item:before {
337         color: $menu-submenu-focus-text;
338 }
339
340 #wpadminbar.mobile .quicklinks .hover .ab-icon:before,
341 #wpadminbar.mobile .quicklinks .hover .ab-item:before {
342         color: $menu-icon;
343 }
344
345
346 /* Admin Bar: search */
347
348 #wpadminbar #adminbarsearch:before {
349         color: $menu-icon;
350 }
351
352 #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
353         color: $menu-text;
354         background: $adminbar-input-background;
355 }
356
357 #wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder { color: $menu-text; opacity: 0.7; }
358 #wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder { color: $menu-text; opacity: 0.7; }
359 #wpadminbar #adminbarsearch .adminbar-input::-moz-placeholder { color: $menu-text; opacity: 0.7; }
360 #wpadminbar #adminbarsearch .adminbar-input:-ms-input-placeholder { color: $menu-text; opacity: 0.7; }
361
362
363 /* Admin Bar: my account */
364
365 #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
366         border-color: $adminbar-avatar-frame;
367         background-color: $adminbar-avatar-frame;
368 }
369
370 #wpadminbar #wp-admin-bar-user-info .display-name {
371         color: $menu-text;
372 }
373
374 #wpadminbar #wp-admin-bar-user-info a:hover .display-name {
375         color: $menu-submenu-focus-text;
376 }
377
378 #wpadminbar #wp-admin-bar-user-info .username {
379         color: $menu-submenu-text;
380 }
381
382
383 /* Pointers */
384
385 .wp-pointer .wp-pointer-content h3 {
386         background-color: $highlight-color;
387         border-color: darken( $highlight-color, 5% );
388 }
389
390 .wp-pointer .wp-pointer-content h3:before {
391         color: $highlight-color;
392 }
393
394 .wp-pointer.wp-pointer-top .wp-pointer-arrow,
395 .wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,
396 .wp-pointer.wp-pointer-undefined .wp-pointer-arrow,
397 .wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner {
398         border-bottom-color: $highlight-color;
399 }
400
401
402 /* Media */
403
404 .media-item .bar,
405 .media-progress-bar div {
406         background-color: $highlight-color;
407 }
408
409 .details.attachment {
410         box-shadow:
411                 inset 0 0 0 3px #fff,
412                 inset 0 0 0 7px $highlight-color;
413 }
414
415 .attachment.details .check {
416         background-color: $highlight-color;
417         box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color;
418 }
419
420 .media-selection .attachment.selection.details .thumbnail {
421         -webkit-box-shadow:
422                 0px 0px 0px 1px #fff,
423                 0px 0px 0px 3px $highlight-color;
424         box-shadow:
425                 0px 0px 0px 1px #fff,
426                 0px 0px 0px 3px $highlight-color;
427 }
428
429
430 /* Themes */
431
432 .theme-browser .theme.active .theme-name,
433 .theme-browser .theme.add-new-theme a:hover:after,
434 .theme-browser .theme.add-new-theme a:focus:after {
435         background: $highlight-color;
436 }
437
438 .theme-browser .theme.add-new-theme a:hover span:after,
439 .theme-browser .theme.add-new-theme a:focus span:after {
440         color: $highlight-color;
441 }
442
443 .theme-section.current,
444 .theme-filter.current {
445         border-bottom-color: $menu-background;
446 }
447
448 body.more-filters-opened .more-filters {
449         color: $menu-text;
450         background-color: $menu-background;
451 }
452
453 body.more-filters-opened .more-filters:before {
454         color: $menu-text;
455 }
456
457 body.more-filters-opened .more-filters:hover,
458 body.more-filters-opened .more-filters:focus {
459         background-color: $menu-highlight-background;
460         color: $menu-highlight-text;
461 }
462
463 body.more-filters-opened .more-filters:hover:before,
464 body.more-filters-opened .more-filters:focus:before {
465         color: $menu-highlight-text;
466 }
467
468 /* Widgets */
469
470 .widgets-chooser li.widgets-chooser-selected {
471         background-color: $menu-highlight-background;
472         color: $menu-highlight-text;
473 }
474
475 .widgets-chooser li.widgets-chooser-selected:before,
476 .widgets-chooser li.widgets-chooser-selected:focus:before {
477         color: $menu-highlight-text;
478 }
479
480 /* Customize */
481
482 #customize-theme-controls .widget-area-select .selected {
483         background-color: $menu-highlight-background;
484         color: $menu-highlight-text;
485 }
486
487 /* jQuery UI Slider */
488
489 .wp-slider .ui-slider-handle,
490 .wp-slider .ui-slider-handle.ui-state-hover,
491 .wp-slider .ui-slider-handle.focus {
492         background: $button-color;
493         border-color: darken( $button-color, 10% );
494         box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
495 }
496
497 /* Responsive Component */
498
499 div#wp-responsive-toggle a:before {
500         color: $menu-icon;
501 }
502
503 .wp-responsive-open div#wp-responsive-toggle a {
504         // ToDo: make inset border
505         border-color: transparent;
506         background: $menu-highlight-background;
507 }
508
509 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
510         background: $menu-submenu-background;
511 }
512
513 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
514         color: $menu-icon;
515 }
516
517 /* TinyMCE */
518
519 .mce-container.mce-menu .mce-menu-item:hover,
520 .mce-container.mce-menu .mce-menu-item.mce-selected,
521 .mce-container.mce-menu .mce-menu-item:focus,
522 .mce-container.mce-menu .mce-menu-item-normal.mce-active,
523 .mce-container.mce-menu .mce-menu-item-preview.mce-active {
524         background: $highlight-color;
525 }