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