← Back to branch summary

~canonical-sysadmins/wordpress/4.7.2

« back to all changes in this revision

Viewing changes to wp-admin/css/colors/_admin.scss

  • Committer: Jacek Nykis
  • Date: 2015-01-05 16:17:05 UTC
  • Revision ID: jacek.nykis@canonical.com-20150105161705-w544l1h5mcg7u4w9
Initial commit

Show diffs side-by-side

added added

removed removed

Lines of Context:
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
        color: $menu-current-icon;
 
216
}
 
217
 
 
218
 
 
219
/* Admin Menu: bubble */
 
220
 
 
221
#adminmenu .awaiting-mod,
 
222
#adminmenu .update-plugins {
 
223
        color: $menu-bubble-text;
 
224
        background: $menu-bubble-background;
 
225
}
 
226
 
 
227
#adminmenu li.current a .awaiting-mod,
 
228
#adminmenu li a.wp-has-current-submenu .update-plugins,
 
229
#adminmenu li:hover a .awaiting-mod,
 
230
#adminmenu li.menu-top:hover > a .update-plugins {
 
231
        color: $menu-bubble-current-text;
 
232
        background: $menu-bubble-current-background;
 
233
}
 
234
 
 
235
 
 
236
/* Admin Menu: collapse button */
 
237
 
 
238
#collapse-menu {
 
239
    color: $menu-collapse-text;
 
240
}
 
241
 
 
242
#collapse-menu:hover {
 
243
    color: $menu-collapse-focus-text;
 
244
}
 
245
 
 
246
#collapse-button div:after {
 
247
    color: $menu-collapse-icon;
 
248
}
 
249
 
 
250
#collapse-menu:hover #collapse-button div:after {
 
251
    color: $menu-collapse-focus-icon;
 
252
}
 
253
 
 
254
 
 
255
/* Admin Bar */
 
256
 
 
257
#wpadminbar {
 
258
        color: $menu-text;
 
259
        background: $menu-background;
 
260
}
 
261
 
 
262
#wpadminbar .ab-item,
 
263
#wpadminbar a.ab-item,
 
264
#wpadminbar > #wp-toolbar span.ab-label,
 
265
#wpadminbar > #wp-toolbar span.noticon {
 
266
        color: $menu-text;
 
267
}
 
268
 
 
269
#wpadminbar .ab-icon,
 
270
#wpadminbar .ab-icon:before,
 
271
#wpadminbar .ab-item:before,
 
272
#wpadminbar .ab-item:after {
 
273
        color: $menu-icon;
 
274
}
 
275
 
 
276
#wpadminbar .ab-top-menu > li:hover > .ab-item,
 
277
#wpadminbar .ab-top-menu > li.hover > .ab-item,
 
278
#wpadminbar .ab-top-menu > li > .ab-item:focus,
 
279
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
 
280
#wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item,
 
281
#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
 
282
        color: $menu-submenu-focus-text;
 
283
        background: $menu-submenu-background;
 
284
}
 
285
 
 
286
#wpadminbar > #wp-toolbar li:hover span.ab-label,
 
287
#wpadminbar > #wp-toolbar li.hover span.ab-label,
 
288
#wpadminbar > #wp-toolbar a:focus span.ab-label {
 
289
        color: $menu-submenu-focus-text;
 
290
}
 
291
 
 
292
#wpadminbar li:hover .ab-icon:before,
 
293
#wpadminbar li:hover .ab-item:before,
 
294
#wpadminbar li:hover .ab-item:after,
 
295
#wpadminbar li:hover #adminbarsearch:before {
 
296
        color: $menu-highlight-icon;
 
297
}
 
298
 
 
299
 
 
300
/* Admin Bar: submenu */
 
301
 
 
302
#wpadminbar .menupop .ab-sub-wrapper {
 
303
        background: $menu-submenu-background;
 
304
}
 
305
 
 
306
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
 
307
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
 
308
        background: $menu-submenu-background-alt;
 
309
}
 
310
 
 
311
#wpadminbar .ab-submenu .ab-item,
 
312
#wpadminbar .quicklinks .menupop ul li a,
 
313
#wpadminbar .quicklinks .menupop.hover ul li a,
 
314
#wpadminbar-nojs .quicklinks .menupop:hover ul li a {
 
315
        color: $menu-submenu-text;
 
316
}
 
317
 
 
318
#wpadminbar .quicklinks li .blavatar,
 
319
#wpadminbar .menupop .menupop > .ab-item:before {
 
320
        color: $menu-icon;
 
321
}
 
322
 
 
323
#wpadminbar .quicklinks .menupop ul li a:hover,
 
324
#wpadminbar .quicklinks .menupop ul li a:focus,
 
325
#wpadminbar .quicklinks .menupop ul li a:hover strong,
 
326
#wpadminbar .quicklinks .menupop ul li a:focus strong,
 
327
#wpadminbar .quicklinks .menupop.hover ul li a:hover,
 
328
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
 
329
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
 
330
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
 
331
#wpadminbar li:hover .ab-icon:before,
 
332
#wpadminbar li:hover .ab-item:before,
 
333
#wpadminbar li a:focus .ab-icon:before,
 
334
#wpadminbar li .ab-item:focus:before,
 
335
#wpadminbar li.hover .ab-icon:before,
 
336
#wpadminbar li.hover .ab-item:before,
 
337
#wpadminbar li:hover .ab-item:after,
 
338
#wpadminbar li.hover .ab-item:after,
 
339
#wpadminbar li:hover #adminbarsearch:before {
 
340
        color: $menu-submenu-focus-text;
 
341
}
 
342
 
 
343
#wpadminbar .quicklinks li a:hover .blavatar,
 
344
#wpadminbar .menupop .menupop > .ab-item:hover:before {
 
345
        color: $menu-submenu-focus-text;
 
346
}
 
347
 
 
348
 
 
349
/* Admin Bar: search */
 
350
 
 
351
#wpadminbar #adminbarsearch:before {
 
352
        color: $menu-icon;
 
353
}
 
354
 
 
355
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
 
356
        color: $menu-text;
 
357
        background: $adminbar-input-background;
 
358
}
 
359
 
 
360
#wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder { color: $menu-text; opacity: .7; }
 
361
#wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder { color: $menu-text; opacity: .7; }
 
362
#wpadminbar #adminbarsearch .adminbar-input::-moz-placeholder { color: $menu-text; opacity: .7; }
 
363
#wpadminbar #adminbarsearch .adminbar-input:-ms-input-placeholder { color: $menu-text; opacity: .7; }
 
364
 
 
365
 
 
366
/* Admin Bar: my account */
 
367
 
 
368
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
 
369
        border-color: $adminbar-avatar-frame;
 
370
        background-color: $adminbar-avatar-frame;
 
371
}
 
372
 
 
373
#wpadminbar #wp-admin-bar-user-info .display-name {
 
374
        color: $menu-text;
 
375
}
 
376
 
 
377
#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
 
378
        color: $menu-submenu-focus-text;
 
379
}
 
380
 
 
381
#wpadminbar #wp-admin-bar-user-info .username {
 
382
        color: $menu-submenu-text;
 
383
}
 
384
 
 
385
 
 
386
/* Pointers */
 
387
 
 
388
.wp-pointer .wp-pointer-content h3 {
 
389
        background-color: $highlight-color;
 
390
        border-color: darken( $highlight-color, 5% );
 
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 */
 
404
 
 
405
.media-item .bar,
 
406
.media-progress-bar div {
 
407
        background-color: $highlight-color;
 
408
}
 
409
 
 
410
.details.attachment {
 
411
        box-shadow:
 
412
                inset 0 0 0 3px #fff,
 
413
                inset 0 0 0 7px $highlight-color;
 
414
}
 
415
 
 
416
.attachment.details .check {
 
417
        background-color: $highlight-color;
 
418
        box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color;
 
419
}
 
420
 
 
421
.media-selection .attachment.selection.details .thumbnail {
 
422
        -webkit-box-shadow:
 
423
                0px 0px 0px 1px #fff,
 
424
                0px 0px 0px 3px $highlight-color;
 
425
        box-shadow:
 
426
                0px 0px 0px 1px #fff,
 
427
                0px 0px 0px 3px $highlight-color;
 
428
}
 
429
 
 
430
 
 
431
/* Themes */
 
432
 
 
433
.theme-browser .theme.active .theme-name,
 
434
.theme-browser .theme.add-new-theme:hover:after {
 
435
        background: $highlight-color;
 
436
}
 
437
 
 
438
.theme-browser .theme.add-new-theme:hover span:after {
 
439
        color: $highlight-color;
 
440
}
 
441
 
 
442
.theme-section.current,
 
443
.theme-filter.current {
 
444
        border-bottom-color: $menu-background;
 
445
}
 
446
 
 
447
body.more-filters-opened .more-filters {
 
448
        color: $menu-text;
 
449
        background-color: $menu-background;
 
450
}
 
451
 
 
452
body.more-filters-opened .more-filters:before {
 
453
        color: $menu-text;
 
454
}
 
455
 
 
456
body.more-filters-opened .more-filters:hover,
 
457
body.more-filters-opened .more-filters:focus {
 
458
        background-color: $menu-highlight-background;
 
459
        color: $menu-highlight-text;
 
460
}
 
461
 
 
462
body.more-filters-opened .more-filters:hover:before,
 
463
body.more-filters-opened .more-filters:focus:before {
 
464
        color: $menu-highlight-text;
 
465
}
 
466
 
 
467
/* Widgets */
 
468
 
 
469
.widgets-chooser li.widgets-chooser-selected {
 
470
        background-color: $menu-highlight-background;
 
471
        color: $menu-highlight-text;
 
472
}
 
473
 
 
474
.widgets-chooser li.widgets-chooser-selected:before,
 
475
.widgets-chooser li.widgets-chooser-selected:focus:before {
 
476
        color: $menu-highlight-text;
 
477
}
 
478
 
 
479
/* Customize */
 
480
 
 
481
#customize-theme-controls .widget-area-select .selected {
 
482
        background-color: $menu-highlight-background;
 
483
        color: $menu-highlight-text;
 
484
}
 
485
 
 
486
/* jQuery UI Slider */
 
487
 
 
488
.wp-slider .ui-slider-handle,
 
489
.wp-slider .ui-slider-handle.ui-state-hover,
 
490
.wp-slider .ui-slider-handle.focus {
 
491
        background: $button-color;
 
492
        border-color: darken( $button-color, 10% );
 
493
        box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
 
494
}
 
495
 
 
496
/* Thickbox: Plugin information */
 
497
 
 
498
#sidemenu a.current {
 
499
        background: $body-background;
 
500
        border-bottom-color: $body-background;
 
501
}
 
502
 
 
503
#plugin-information .action-button {
 
504
        background: $button-color;
 
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
.star-rating .star {
 
520
        color: $highlight-color;
 
521
}
 
522
 
 
523
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
 
524
        background: $menu-submenu-background;
 
525
}