Make WordPress Core

Ticket #25858: 25858.colors.diff

File 25858.colors.diff, 44.8 KB (added by ryelle, 10 years ago)
  • Gruntfile.js

     
    7676                                }
    7777                        }
    7878                },
     79                sass: {
     80                        colors: {
     81                                options: {
     82                                        style: 'expanded',
     83                                        sourcemap: true,
     84                                        noCache: true
     85                                },
     86                                files : [{
     87                                        expand: true,
     88                                        cwd: SOURCE_DIR,
     89                                        dest: BUILD_DIR,
     90                                        ext: '.css',
     91                                        src: ['wp-admin/css/color-schemes/*/colors.scss']
     92                                }]
     93                        }
     94                },
    7995                cssmin: {
    8096                        core: {
    8197                                expand: true,
     
    98114                                        'wp-admin/css/*-rtl.css',
    99115                                        'wp-includes/css/*-rtl.css'
    100116                                ]
     117                        },
     118                        colors: {
     119                                expand: true,
     120                                cwd: BUILD_DIR,
     121                                dest: BUILD_DIR,
     122                                ext: '.min.css',
     123                                src: [
     124                                        'wp-admin/css/color-schemes/**/*.css'
     125                                ]
    101126                        }
    102127                },
    103128                cssjanus: {
     
    316341                        test: {
    317342                                files: ['tests/qunit/**'],
    318343                                tasks: ['qunit']
     344                        },
     345                        colors: {
     346                                files: [SOURCE_DIR + 'wp-admin/css/color-schemes/**'],
     347                                tasks: ['sass:colors']
    319348                        }
    320349                }
    321350        });
     
    327356
    328357        // RTL task.
    329358        grunt.registerTask('rtl', ['cssjanus:core']);
     359       
     360        grunt.registerTask('colors', ['sass:colors', 'cssmin:colors']);
    330361
    331362        // Build task.
    332         grunt.registerTask('build', ['clean:all', 'copy:all', 'rtl', 'cssmin:core', 'cssmin:rtl',
     363        grunt.registerTask('build', ['clean:all', 'copy:all', 'rtl', 'colors', 'cssmin:core', 'cssmin:rtl',
    333364                'uglify:core', 'uglify:tinymce', 'concat:tinymce', 'compress:tinymce', 'clean:tinymce']);
    334365
    335366        // Testing tasks.
  • package.json

     
    1313    "grunt-contrib-clean": "~0.5.0",
    1414    "grunt-contrib-copy": "~0.4.1",
    1515    "grunt-contrib-cssmin": "~0.6.1",
     16    "grunt-contrib-sass": "~0.5.0",
    1617    "grunt-contrib-qunit": "~0.2.2",
    1718    "grunt-contrib-uglify": "~0.2.2",
    1819    "grunt-contrib-watch": "~0.5.1",
  • src/wp-admin/admin-ajax.php

     
    5858        'wp-remove-post-lock', 'dismiss-wp-pointer', 'upload-attachment', 'get-attachment',
    5959        'query-attachments', 'save-attachment', 'save-attachment-compat', 'send-link-to-editor',
    6060        'send-attachment-to-editor', 'save-attachment-order', 'heartbeat', 'get-revision-diffs',
     61        'save-user-color-scheme',
    6162);
    6263
    6364// Register core Ajax calls.
  • src/wp-admin/css/color-schemes/_admin.scss

     
     1
     2@import 'variables';
     3@import 'mixins';
     4
     5
     6html {
     7        background: $body-background;
     8}
     9
     10
     11/* Links */
     12
     13a {
     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,
     25div.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
     35input[type=checkbox]:checked:before {
     36    color: $form-checked;
     37}
     38
     39input[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        .mp6-primary {
     57                color: $text-color;
     58                background-color: $base-color;
     59        }
     60        .mp6-text-primary {
     61                color: $base-color;
     62        }
     63
     64        .mp6-highlight {
     65                color: $menu-highlight-text;
     66                background-color: $menu-highlight-background;
     67        }
     68        .mp6-text-highlight {
     69                color: $menu-highlight-background;
     70        }
     71
     72        .mp6-notification {
     73                color: $menu-bubble-text;
     74                background-color: $menu-bubble-background;
     75        }
     76        .mp6-text-notification {
     77                color: $menu-bubble-background;
     78        }
     79
     80        .mp6-text-icon {
     81                color: $menu-icon;
     82        }
     83}
     84
     85.icon-dashicon:before {
     86        @include dashicons( '\f111' );
     87        display: inline-block;
     88}
     89
     90
     91/* List tables */
     92
     93.wrap .add-new-h2:hover,
     94#add-new-comment a:hover,
     95.tablenav .tablenav-pages a:hover,
     96.tablenav .tablenav-pages a:focus {
     97        color: $menu-text;
     98        background-color: $menu-background;
     99}
     100
     101.view-switch a.current:before {
     102        color: $menu-background;
     103}
     104
     105.view-switch a:hover:before {
     106        color: $menu-bubble-background;
     107}
     108
     109.post-com-count:hover:after {
     110        border-top-color: $menu-background;
     111}
     112.post-com-count:hover span {
     113        color: $menu-text;
     114        background-color: $menu-background;
     115}
     116
     117strong .post-com-count:after {
     118        border-top-color: $menu-bubble-background;
     119}
     120strong .post-com-count span {
     121        background-color: $menu-bubble-background;
     122}
     123
     124
     125/* Admin Menu */
     126
     127#adminmenuback,
     128#adminmenuwrap {
     129        background: $menu-background;
     130}
     131
     132#adminmenu a {
     133        color: $menu-text;
     134}
     135
     136#adminmenu div.wp-menu-image:before {
     137        color: $menu-icon;
     138}
     139
     140#adminmenu a:hover,
     141#adminmenu li.menu-top:hover,
     142#adminmenu li.opensub > a.menu-top,
     143#adminmenu li > a.menu-top:focus {
     144        color: $menu-highlight-text;
     145        background-color: $menu-highlight-background;
     146}
     147
     148#adminmenu li.menu-top:hover div.wp-menu-image:before,
     149#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
     150        color: $menu-highlight-icon;
     151}
     152
     153
     154/* Admin Menu: submenu */
     155
     156#adminmenu .wp-submenu,
     157#adminmenu .wp-has-current-submenu .wp-submenu,
     158#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
     159.folded #adminmenu .wp-has-current-submenu .wp-submenu,
     160#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
     161        background: $menu-submenu-background;
     162}
     163
     164#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
     165        border-right-color: $menu-submenu-background;
     166}
     167
     168#adminmenu .wp-submenu .wp-submenu-head {
     169        color: $menu-submenu-text;
     170}
     171
     172#adminmenu .wp-submenu a,
     173#adminmenu .wp-has-current-submenu .wp-submenu a,
     174.folded #adminmenu .wp-has-current-submenu .wp-submenu a,
     175#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
     176#adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
     177        color: $menu-submenu-text;
     178
     179        &:focus, &:hover {
     180                color: $menu-submenu-focus-text;
     181        }
     182}
     183
     184
     185/* Admin Menu: current */
     186
     187#adminmenu .wp-submenu li.current a,
     188#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
     189#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
     190        color: $menu-submenu-current-text;
     191
     192        &:hover, &:focus {
     193                color: $menu-submenu-focus-text;
     194        }
     195}
     196
     197ul#adminmenu a.wp-has-current-submenu:after,
     198ul#adminmenu > li.current > a.current:after {
     199    border-right-color: $body-background;
     200}
     201
     202#adminmenu li.current a.menu-top,
     203#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
     204#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
     205.folded #adminmenu li.current.menu-top {
     206        color: $menu-current-text;
     207        background: $menu-current-background;
     208}
     209
     210#adminmenu li.wp-has-current-submenu div.wp-menu-image:before {
     211        color: $menu-current-icon;
     212}
     213
     214
     215/* Admin Menu: bubble */
     216
     217#adminmenu .awaiting-mod,
     218#adminmenu .update-plugins {
     219        color: $menu-bubble-text;
     220        background: $menu-bubble-background;
     221}
     222
     223#adminmenu li.current a .awaiting-mod,
     224#adminmenu li a.wp-has-current-submenu .update-plugins,
     225#adminmenu li:hover a .awaiting-mod,
     226#adminmenu li.menu-top:hover > a .update-plugins {
     227        color: $menu-bubble-current-text;
     228        background: $menu-bubble-current-background;
     229}
     230
     231
     232/* Admin Menu: collapse button */
     233
     234#collapse-menu {
     235    color: $menu-collapse-text;
     236}
     237
     238#collapse-menu:hover {
     239    color: $menu-collapse-focus-text;
     240}
     241
     242#collapse-button div:after {
     243    color: $menu-collapse-icon;
     244}
     245
     246#collapse-menu:hover #collapse-button div:after {
     247    color: $menu-collapse-focus-icon;
     248}
     249
     250
     251/* Admin Bar */
     252
     253#wpadminbar {
     254        color: $menu-text;
     255        background: $menu-background;
     256}
     257
     258#wpadminbar .ab-item,
     259#wpadminbar a.ab-item,
     260#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default span.ab-label,
     261#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.ab-label,
     262#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.noticon {
     263        color: $menu-text;
     264}
     265
     266#wpadminbar .ab-icon,
     267#wpadminbar .ab-item:before {
     268        color: $menu-icon;
     269}
     270
     271#wpadminbar .ab-top-menu > li:hover > .ab-item,
     272#wpadminbar .ab-top-menu > li.hover > .ab-item,
     273#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default li:hover span.ab-label,
     274#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary li.hover span.ab-label,
     275#wpadminbar .ab-top-menu > li > .ab-item:focus,
     276#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
     277#wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item,
     278#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
     279        color: $menu-highlight-text;
     280        background: $menu-submenu-background;
     281}
     282
     283#wpadminbar li:hover .ab-icon,
     284#wpadminbar li:hover > .ab-item:before {
     285        color: $menu-highlight-icon;
     286}
     287
     288
     289/* Admin Bar: submenu */
     290
     291#wpadminbar .menupop .ab-sub-wrapper {
     292        background: $menu-submenu-background;
     293}
     294
     295#wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
     296        background: $menu-submenu-background-alt;
     297}
     298
     299#wpadminbar .ab-submenu .ab-item,
     300#wpadminbar .quicklinks .menupop ul li a,
     301#wpadminbar .quicklinks .menupop.hover ul li a,
     302#wpadminbar-nojs .quicklinks .menupop:hover ul li a {
     303        color: $menu-submenu-text;
     304}
     305
     306#wpadminbar .quicklinks li .blavatar,
     307#wpadminbar .menupop .menupop > .ab-item:before {
     308        color: $menu-icon;
     309}
     310
     311#wpadminbar .quicklinks .menupop ul li a:hover,
     312#wpadminbar .quicklinks .menupop.hover ul li a:hover,
     313#wpadminbar .quicklinks .menupop .ab-sub-secondary > li:hover > a,
     314#wpadminbar .quicklinks .menupop .ab-sub-secondary > li.hover > a,
     315#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover {
     316        color: $menu-submenu-focus-text;
     317}
     318
     319#wpadminbar .quicklinks li a:hover .blavatar,
     320#wpadminbar .menupop .menupop > .ab-item:hover:before {
     321        color: $menu-submenu-focus-text;
     322}
     323
     324
     325/* Admin Bar: search */
     326
     327#wpadminbar #adminbarsearch:before {
     328        color: $menu-icon;
     329}
     330
     331#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
     332        color: $menu-text;
     333        background: $adminbar-input-background;
     334}
     335
     336#wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder { color: $menu-text; opacity: .7; }
     337#wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder { color: $menu-text; opacity: .7; }
     338#wpadminbar #adminbarsearch .adminbar-input::-moz-placeholder { color: $menu-text; opacity: .7; }
     339#wpadminbar #adminbarsearch .adminbar-input:-ms-input-placeholder { color: $menu-text; opacity: .7; }
     340
     341
     342/* Admin Bar: my account */
     343
     344#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
     345        border-color: $adminbar-avatar-frame;
     346        background-color: $adminbar-avatar-frame;
     347}
     348
     349#wpadminbar #wp-admin-bar-user-info .display-name {
     350        color: $menu-text;
     351}
     352
     353#wpadminbar #wp-admin-bar-user-info .username {
     354        color: $menu-submenu-text;
     355}
     356
     357
     358/* Pointers */
     359
     360.wp-pointer .wp-pointer-content h3 {
     361        background-color: $highlight-color;
     362}
     363
     364.wp-pointer.wp-pointer-top .wp-pointer-arrow,
     365.wp-pointer.wp-pointer-undefined .wp-pointer-arrow {
     366        border-bottom-color: $highlight-color;
     367}
     368
     369
     370/* Responsive Component */
     371
     372div#moby6-toggle a:before {
     373        color: $menu-icon;
     374}
     375
     376.moby6-open div#moby6-toggle a {
     377        // ToDo: make inset border
     378        border-color: transparent;
     379        background: $menu-highlight-background;
     380}
     381
     382@import 'variables';
     383@import 'mixins';
     384
     385
     386html {
     387        background: $body-background;
     388}
     389
     390
     391/* Links */
     392
     393a {
     394        color: $link;
     395
     396        &:hover,
     397        &:active,
     398        &:focus {
     399                color: $link-focus;
     400        }
     401}
     402
     403#rightnow a:hover,
     404#media-upload a.del-link:hover,
     405div.dashboard-widget-submit input:hover,
     406.subsubsub a:hover,
     407.subsubsub a.current:hover,
     408.ui-tabs-nav a:hover {
     409        color: $link-focus;
     410}
     411
     412
     413/* Forms */
     414
     415input[type=checkbox]:checked:before {
     416    color: $form-checked;
     417}
     418
     419input[type=radio]:checked:before {
     420    background: $form-checked;
     421}
     422
     423.wp-core-ui input[type="reset"]:hover,
     424.wp-core-ui input[type="reset"]:active {
     425        color: $link-focus;
     426}
     427
     428
     429/* Core UI */
     430
     431.wp-core-ui {
     432        .button-primary {
     433                @include button( $button-color );
     434        }
     435
     436        .mp6-primary {
     437                color: $text-color;
     438                background-color: $base-color;
     439        }
     440        .mp6-text-primary {
     441                color: $base-color;
     442        }
     443
     444        .mp6-highlight {
     445                color: $menu-highlight-text;
     446                background-color: $menu-highlight-background;
     447        }
     448        .mp6-text-highlight {
     449                color: $menu-highlight-background;
     450        }
     451
     452        .mp6-notification {
     453                color: $menu-bubble-text;
     454                background-color: $menu-bubble-background;
     455        }
     456        .mp6-text-notification {
     457                color: $menu-bubble-background;
     458        }
     459
     460        .mp6-text-icon {
     461                color: $menu-icon;
     462        }
     463}
     464
     465.icon-dashicon:before {
     466        @include dashicons( '\f111' );
     467        display: inline-block;
     468}
     469
     470
     471/* List tables */
     472
     473.wrap .add-new-h2:hover,
     474#add-new-comment a:hover,
     475.tablenav .tablenav-pages a:hover,
     476.tablenav .tablenav-pages a:focus {
     477        color: $menu-text;
     478        background-color: $menu-background;
     479}
     480
     481.view-switch a.current:before {
     482        color: $menu-background;
     483}
     484
     485.view-switch a:hover:before {
     486        color: $menu-bubble-background;
     487}
     488
     489.post-com-count:hover:after {
     490        border-top-color: $menu-background;
     491}
     492.post-com-count:hover span {
     493        color: $menu-text;
     494        background-color: $menu-background;
     495}
     496
     497strong .post-com-count:after {
     498        border-top-color: $menu-bubble-background;
     499}
     500strong .post-com-count span {
     501        background-color: $menu-bubble-background;
     502}
     503
     504
     505/* Admin Menu */
     506
     507#adminmenuback,
     508#adminmenuwrap {
     509        background: $menu-background;
     510}
     511
     512#adminmenu a {
     513        color: $menu-text;
     514}
     515
     516#adminmenu div.wp-menu-image:before {
     517        color: $menu-icon;
     518}
     519
     520#adminmenu a:hover,
     521#adminmenu li.menu-top:hover,
     522#adminmenu li.opensub > a.menu-top,
     523#adminmenu li > a.menu-top:focus {
     524        color: $menu-highlight-text;
     525        background-color: $menu-highlight-background;
     526}
     527
     528#adminmenu li.menu-top:hover div.wp-menu-image:before,
     529#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
     530        color: $menu-highlight-icon;
     531}
     532
     533
     534/* Admin Menu: submenu */
     535
     536#adminmenu .wp-submenu,
     537#adminmenu .wp-has-current-submenu .wp-submenu,
     538#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
     539.folded #adminmenu .wp-has-current-submenu .wp-submenu,
     540#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
     541        background: $menu-submenu-background;
     542}
     543
     544#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
     545        border-right-color: $menu-submenu-background;
     546}
     547
     548#adminmenu .wp-submenu .wp-submenu-head {
     549        color: $menu-submenu-text;
     550}
     551
     552#adminmenu .wp-submenu a,
     553#adminmenu .wp-has-current-submenu .wp-submenu a,
     554.folded #adminmenu .wp-has-current-submenu .wp-submenu a,
     555#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
     556#adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
     557        color: $menu-submenu-text;
     558
     559        &:focus, &:hover {
     560                color: $menu-submenu-focus-text;
     561        }
     562}
     563
     564
     565/* Admin Menu: current */
     566
     567#adminmenu .wp-submenu li.current a,
     568#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
     569#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
     570        color: $menu-submenu-current-text;
     571
     572        &:hover, &:focus {
     573                color: $menu-submenu-focus-text;
     574        }
     575}
     576
     577ul#adminmenu a.wp-has-current-submenu:after,
     578ul#adminmenu > li.current > a.current:after {
     579    border-right-color: $body-background;
     580}
     581
     582#adminmenu li.current a.menu-top,
     583#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
     584#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
     585.folded #adminmenu li.current.menu-top {
     586        color: $menu-current-text;
     587        background: $menu-current-background;
     588}
     589
     590#adminmenu li.wp-has-current-submenu div.wp-menu-image:before {
     591        color: $menu-current-icon;
     592}
     593
     594
     595/* Admin Menu: bubble */
     596
     597#adminmenu .awaiting-mod,
     598#adminmenu .update-plugins {
     599        color: $menu-bubble-text;
     600        background: $menu-bubble-background;
     601}
     602
     603#adminmenu li.current a .awaiting-mod,
     604#adminmenu li a.wp-has-current-submenu .update-plugins,
     605#adminmenu li:hover a .awaiting-mod,
     606#adminmenu li.menu-top:hover > a .update-plugins {
     607        color: $menu-bubble-current-text;
     608        background: $menu-bubble-current-background;
     609}
     610
     611
     612/* Admin Menu: collapse button */
     613
     614#collapse-menu {
     615    color: $menu-collapse-text;
     616}
     617
     618#collapse-menu:hover {
     619    color: $menu-collapse-focus-text;
     620}
     621
     622#collapse-button div:after {
     623    color: $menu-collapse-icon;
     624}
     625
     626#collapse-menu:hover #collapse-button div:after {
     627    color: $menu-collapse-focus-icon;
     628}
     629
     630
     631/* Admin Bar */
     632
     633#wpadminbar {
     634        color: $menu-text;
     635        background: $menu-background;
     636}
     637
     638#wpadminbar .ab-item,
     639#wpadminbar a.ab-item,
     640#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default span.ab-label,
     641#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.ab-label,
     642#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.noticon {
     643        color: $menu-text;
     644}
     645
     646#wpadminbar .ab-icon,
     647#wpadminbar .ab-item:before {
     648        color: $menu-icon;
     649}
     650
     651#wpadminbar .ab-top-menu > li:hover > .ab-item,
     652#wpadminbar .ab-top-menu > li.hover > .ab-item,
     653#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default li:hover span.ab-label,
     654#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary li.hover span.ab-label,
     655#wpadminbar .ab-top-menu > li > .ab-item:focus,
     656#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
     657#wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item,
     658#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
     659        color: $menu-highlight-text;
     660        background: $menu-submenu-background;
     661}
     662
     663#wpadminbar li:hover .ab-icon,
     664#wpadminbar li:hover > .ab-item:before {
     665        color: $menu-highlight-icon;
     666}
     667
     668
     669/* Admin Bar: submenu */
     670
     671#wpadminbar .menupop .ab-sub-wrapper {
     672        background: $menu-submenu-background;
     673}
     674
     675#wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
     676        background: $menu-submenu-background-alt;
     677}
     678
     679#wpadminbar .ab-submenu .ab-item,
     680#wpadminbar .quicklinks .menupop ul li a,
     681#wpadminbar .quicklinks .menupop.hover ul li a,
     682#wpadminbar-nojs .quicklinks .menupop:hover ul li a {
     683        color: $menu-submenu-text;
     684}
     685
     686#wpadminbar .quicklinks li .blavatar,
     687#wpadminbar .menupop .menupop > .ab-item:before {
     688        color: $menu-icon;
     689}
     690
     691#wpadminbar .quicklinks .menupop ul li a:hover,
     692#wpadminbar .quicklinks .menupop.hover ul li a:hover,
     693#wpadminbar .quicklinks .menupop .ab-sub-secondary > li:hover > a,
     694#wpadminbar .quicklinks .menupop .ab-sub-secondary > li.hover > a,
     695#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover {
     696        color: $menu-submenu-focus-text;
     697}
     698
     699#wpadminbar .quicklinks li a:hover .blavatar,
     700#wpadminbar .menupop .menupop > .ab-item:hover:before {
     701        color: $menu-submenu-focus-text;
     702}
     703
     704
     705/* Admin Bar: search */
     706
     707#wpadminbar #adminbarsearch:before {
     708        color: $menu-icon;
     709}
     710
     711#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
     712        color: $menu-text;
     713        background: $adminbar-input-background;
     714}
     715
     716#wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder { color: $menu-text; opacity: .7; }
     717#wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder { color: $menu-text; opacity: .7; }
     718#wpadminbar #adminbarsearch .adminbar-input::-moz-placeholder { color: $menu-text; opacity: .7; }
     719#wpadminbar #adminbarsearch .adminbar-input:-ms-input-placeholder { color: $menu-text; opacity: .7; }
     720
     721
     722/* Admin Bar: my account */
     723
     724#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
     725        border-color: $adminbar-avatar-frame;
     726        background-color: $adminbar-avatar-frame;
     727}
     728
     729#wpadminbar #wp-admin-bar-user-info .display-name {
     730        color: $menu-text;
     731}
     732
     733#wpadminbar #wp-admin-bar-user-info .username {
     734        color: $menu-submenu-text;
     735}
     736
     737
     738/* Pointers */
     739
     740.wp-pointer .wp-pointer-content h3 {
     741        background-color: $highlight-color;
     742}
     743
     744.wp-pointer.wp-pointer-top .wp-pointer-arrow,
     745.wp-pointer.wp-pointer-undefined .wp-pointer-arrow {
     746        border-bottom-color: $highlight-color;
     747}
     748
     749
     750/* Responsive Component */
     751
     752div#moby6-toggle a:before {
     753        color: $menu-icon;
     754}
     755
     756.moby6-open div#moby6-toggle a {
     757        // ToDo: make inset border
     758        border-color: transparent;
     759        background: $menu-highlight-background;
     760}
  • src/wp-admin/css/color-schemes/_mixins.scss

    Property changes on: src/wp-admin/css/color-schemes/_admin.scss
    ___________________________________________________________________
    Added: svn:executable
    ## -0,0 +1 ##
    +*
    \ No newline at end of property
     
     1/*
     2 * Dashicons mixin
     3 * use: @include dashicons( '\f140' );
     4 */
     5@mixin dashicons( $icon ) {
     6        content: $icon;
     7        font: normal 20px/1 'dashicons';
     8        speak: none;
     9        display: block;
     10        padding: 0;
     11        text-indent: 0;
     12        text-align: center;
     13        position: relative;
     14        -webkit-font-smoothing: antialiased;
     15        -moz-osx-font-smoothing: grayscale;
     16        text-decoration: none !important;
     17}
     18
     19/*
     20 * Button mixin- creates 3d-ish button effect with correct
     21 * highlights/shadows, based on a base color.
     22 */
     23@mixin button( $button-color, $text-color: white ) {
     24        background: $button-color;
     25        border-color: darken( $button-color, 10% );
     26        color: $text-color;
     27        -webkit-box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
     28        box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
     29
     30        &:hover,
     31        &:focus {
     32                background: darken( $button-color, 8% );
     33                border-color: darken( $button-color, 15% );
     34                color: $text-color;
     35                -webkit-box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), 0 1px 0 rgba(0,0,0,.15);
     36                box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), 0 1px 0 rgba(0,0,0,.15);
     37        }
     38
     39        &:active {
     40                background: darken( $button-color, 8% );
     41                border-color: darken( $button-color, 15% );
     42                color: $text-color;
     43                -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     44                box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     45        }
     46
     47        &[disabled],
     48        &:disabled,
     49        &.button-primary-disabled {
     50                color: hsl( hue( $button-color ), 10%, 80% ) !important;
     51                background: darken( $button-color, 8% ) !important;
     52                border-color: darken( $button-color, 15% ) !important;
     53                text-shadow: none !important;
     54        }
     55}
     56/*
     57 * Dashicons mixin
     58 * use: @include dashicons( '\f140' );
     59 */
     60@mixin dashicons( $icon ) {
     61        content: $icon;
     62        font: normal 20px/1 'dashicons';
     63        speak: none;
     64        display: block;
     65        padding: 0;
     66        text-indent: 0;
     67        text-align: center;
     68        position: relative;
     69        -webkit-font-smoothing: antialiased;
     70        -moz-osx-font-smoothing: grayscale;
     71        text-decoration: none !important;
     72}
     73
     74/*
     75 * Button mixin- creates 3d-ish button effect with correct
     76 * highlights/shadows, based on a base color.
     77 */
     78@mixin button( $button-color, $text-color: white ) {
     79        background: $button-color;
     80        border-color: darken( $button-color, 10% );
     81        color: $text-color;
     82        -webkit-box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
     83        box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
     84
     85        &:hover,
     86        &:focus {
     87                background: darken( $button-color, 8% );
     88                border-color: darken( $button-color, 15% );
     89                color: $text-color;
     90                -webkit-box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), 0 1px 0 rgba(0,0,0,.15);
     91                box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), 0 1px 0 rgba(0,0,0,.15);
     92        }
     93
     94        &:active {
     95                background: darken( $button-color, 8% );
     96                border-color: darken( $button-color, 15% );
     97                color: $text-color;
     98                -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     99                box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     100        }
     101
     102        &[disabled],
     103        &:disabled,
     104        &.button-primary-disabled {
     105                color: hsl( hue( $button-color ), 10%, 80% ) !important;
     106                background: darken( $button-color, 8% ) !important;
     107                border-color: darken( $button-color, 15% ) !important;
     108                text-shadow: none !important;
     109        }
     110}
  • src/wp-admin/css/color-schemes/_variables.scss

    Property changes on: src/wp-admin/css/color-schemes/_mixins.scss
    ___________________________________________________________________
    Added: svn:executable
    ## -0,0 +1 ##
    +*
    \ No newline at end of property
     
     1// assign default value to all undefined variables
     2
     3
     4// core variables
     5
     6$text-color: #fff !default;
     7$base-color: #222 !default;
     8$icon-color: hsl( hue( $base-color ), 7%, 95% ) !default;
     9$highlight-color: #0074a2 !default;
     10$notification-color: #d54e21 !default;
     11
     12
     13// global
     14
     15$body-background: #eee !default;
     16
     17$link: #0074a2 !default;
     18$link-focus: lighten( $link, 10% ) !default;
     19
     20$button-color: $highlight-color !default;
     21$form-checked: $highlight-color !default;
     22
     23
     24// admin menu & admin-bar
     25
     26$menu-text: $text-color !default;
     27$menu-icon: $icon-color !default;
     28$menu-background: $base-color !default;
     29
     30$menu-highlight-text: $text-color !default;
     31$menu-highlight-icon: $text-color !default;
     32$menu-highlight-background: $highlight-color !default;
     33
     34$menu-current-text: $menu-highlight-text !default;
     35$menu-current-icon: $menu-highlight-icon !default;
     36$menu-current-background: $menu-highlight-background !default;
     37
     38$menu-submenu-text: mix( $base-color, $text-color, 30% ) !default;
     39$menu-submenu-background: darken( $base-color, 7% ) !default;
     40$menu-submenu-background-alt: desaturate( lighten( $menu-background, 7% ), 7% ) !default;
     41
     42$menu-submenu-focus-text: $highlight-color !default;
     43$menu-submenu-current-text: $text-color !default;
     44
     45$menu-bubble-text: $text-color !default;
     46$menu-bubble-background: $notification-color !default;
     47$menu-bubble-current-text: $text-color !default;
     48$menu-bubble-current-background: $menu-submenu-background !default;
     49
     50$menu-collapse-text: $menu-icon !default;
     51$menu-collapse-icon: $menu-icon !default;
     52$menu-collapse-focus-text: $text-color !default;
     53$menu-collapse-focus-icon: $menu-highlight-icon !default;
     54
     55$adminbar-avatar-frame: lighten( $menu-background, 7% ) !default;
     56$adminbar-input-background: lighten( $menu-background, 7% ) !default;
     57
     58$menu-customizer-text: mix( $base-color, $text-color, 40% ) !default;
     59
     60// assign default value to all undefined variables
     61
     62
     63// core variables
     64
     65$text-color: #fff !default;
     66$base-color: #222 !default;
     67$icon-color: hsl( hue( $base-color ), 7%, 95% ) !default;
     68$highlight-color: #0074a2 !default;
     69$notification-color: #d54e21 !default;
     70
     71
     72// global
     73
     74$body-background: #eee !default;
     75
     76$link: #0074a2 !default;
     77$link-focus: lighten( $link, 10% ) !default;
     78
     79$button-color: $highlight-color !default;
     80$form-checked: $highlight-color !default;
     81
     82
     83// admin menu & admin-bar
     84
     85$menu-text: $text-color !default;
     86$menu-icon: $icon-color !default;
     87$menu-background: $base-color !default;
     88
     89$menu-highlight-text: $text-color !default;
     90$menu-highlight-icon: $text-color !default;
     91$menu-highlight-background: $highlight-color !default;
     92
     93$menu-current-text: $menu-highlight-text !default;
     94$menu-current-icon: $menu-highlight-icon !default;
     95$menu-current-background: $menu-highlight-background !default;
     96
     97$menu-submenu-text: mix( $base-color, $text-color, 30% ) !default;
     98$menu-submenu-background: darken( $base-color, 7% ) !default;
     99$menu-submenu-background-alt: desaturate( lighten( $menu-background, 7% ), 7% ) !default;
     100
     101$menu-submenu-focus-text: $highlight-color !default;
     102$menu-submenu-current-text: $text-color !default;
     103
     104$menu-bubble-text: $text-color !default;
     105$menu-bubble-background: $notification-color !default;
     106$menu-bubble-current-text: $text-color !default;
     107$menu-bubble-current-background: $menu-submenu-background !default;
     108
     109$menu-collapse-text: $menu-icon !default;
     110$menu-collapse-icon: $menu-icon !default;
     111$menu-collapse-focus-text: $text-color !default;
     112$menu-collapse-focus-icon: $menu-highlight-icon !default;
     113
     114$adminbar-avatar-frame: lighten( $menu-background, 7% ) !default;
     115$adminbar-input-background: lighten( $menu-background, 7% ) !default;
     116
     117$menu-customizer-text: mix( $base-color, $text-color, 40% ) !default;
     118
  • src/wp-admin/css/color-schemes/blue/colors.scss

    Property changes on: src/wp-admin/css/color-schemes/_variables.scss
    ___________________________________________________________________
    Added: svn:executable
    ## -0,0 +1 ##
    +*
    \ No newline at end of property
     
     1$base-color: #52accc;
     2$icon-color: #e5f8ff;
     3$highlight-color: #096484;
     4$notification-color: #e1a948;
     5$button-color: #e1a948;
     6
     7$menu-submenu-text: #e2ecf1;
     8$menu-submenu-focus-text: #fff;
     9$menu-submenu-background: #4796b3;
     10
     11@import "../../colors-fresh.css";
     12@import "../_admin.scss";
     13$base-color: #52accc;
     14$icon-color: #e5f8ff;
     15$highlight-color: #096484;
     16$notification-color: #e1a948;
     17$button-color: #e1a948;
     18
     19$menu-submenu-text: #e2ecf1;
     20$menu-submenu-focus-text: #fff;
     21$menu-submenu-background: #4796b3;
     22
     23@import "../../colors-fresh.css";
     24@import "../_admin.scss";
  • src/wp-admin/css/color-schemes/light/colors.scss

    Property changes on: src/wp-admin/css/color-schemes/blue/colors.scss
    ___________________________________________________________________
    Added: svn:executable
    ## -0,0 +1 ##
    +*
    \ No newline at end of property
     
     1$base-color: #e5e5e5;
     2$icon-color: #999;
     3$text-color: #333;
     4$highlight-color: #04a4cc;
     5$notification-color: #d64e07;
     6
     7$body-background: #f5f5f5;
     8
     9$menu-highlight-text: #fff;
     10$menu-highlight-icon: #ccc;
     11$menu-highlight-background: #888;
     12
     13$menu-bubble-text: #fff;
     14$menu-avatar-frame: #aaa;
     15$menu-submenu-background: #fff;
     16
     17$menu-collapse-text: #777;
     18$menu-collapse-focus-icon: #555;
     19
     20@import "../../colors-fresh.css";
     21@import "../_admin.scss";
     22
     23/* temporary fix for admin-bar hover color */
     24#wpadminbar .ab-top-menu > li:hover > .ab-item,
     25#wpadminbar .ab-top-menu > li.hover > .ab-item,
     26#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default li:hover span.ab-label,
     27#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary li.hover span.ab-label,
     28#wpadminbar .ab-top-menu > li > .ab-item:focus,
     29#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
     30#wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item,
     31#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
     32        color: $text-color;
     33}
     34$base-color: #e5e5e5;
     35$icon-color: #999;
     36$text-color: #333;
     37$highlight-color: #04a4cc;
     38$notification-color: #d64e07;
     39
     40$body-background: #f5f5f5;
     41
     42$menu-highlight-text: #fff;
     43$menu-highlight-icon: #ccc;
     44$menu-highlight-background: #888;
     45
     46$menu-bubble-text: #fff;
     47$menu-avatar-frame: #aaa;
     48$menu-submenu-background: #fff;
     49
     50$menu-collapse-text: #777;
     51$menu-collapse-focus-icon: #555;
     52
     53@import "../../colors-fresh.css";
     54@import "../_admin.scss";
     55
     56/* temporary fix for admin-bar hover color */
     57#wpadminbar .ab-top-menu > li:hover > .ab-item,
     58#wpadminbar .ab-top-menu > li.hover > .ab-item,
     59#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default li:hover span.ab-label,
     60#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary li.hover span.ab-label,
     61#wpadminbar .ab-top-menu > li > .ab-item:focus,
     62#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
     63#wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item,
     64#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
     65        color: $text-color;
     66}
  • src/wp-admin/css/color-schemes/midnight/colors.scss

    Property changes on: src/wp-admin/css/color-schemes/light/colors.scss
    ___________________________________________________________________
    Added: svn:executable
    ## -0,0 +1 ##
    +*
    \ No newline at end of property
     
     1$base-color: #363b3f;
     2$highlight-color: #e14d43;
     3$notification-color: #69a8bb;
     4
     5@import "../../colors-fresh.css";
     6@import "../_admin.scss";
     7$base-color: #363b3f;
     8$highlight-color: #e14d43;
     9$notification-color: #69a8bb;
     10
     11@import "../../colors-fresh.css";
     12@import "../_admin.scss";
  • src/wp-admin/css/color-schemes/seaweed/colors.scss

    Property changes on: src/wp-admin/css/color-schemes/midnight/colors.scss
    ___________________________________________________________________
    Added: svn:executable
    ## -0,0 +1 ##
    +*
    \ No newline at end of property
     
     1$base-color: #15757a;
     2$icon-color: #e1f9fa;
     3$highlight-color: #a8c274;
     4$notification-color: #e78229;
     5
     6$form-checked: $base-color;
     7
     8@import "../../colors-fresh.css";
     9@import "../_admin.scss";
     10$base-color: #15757a;
     11$icon-color: #e1f9fa;
     12$highlight-color: #a8c274;
     13$notification-color: #e78229;
     14
     15$form-checked: $base-color;
     16
     17@import "../../colors-fresh.css";
     18@import "../_admin.scss";
  • src/wp-admin/css/wp-admin.css

    Property changes on: src/wp-admin/css/color-schemes/seaweed/colors.scss
    ___________________________________________________________________
    Added: svn:executable
    ## -0,0 +1 ##
    +*
    \ No newline at end of property
     
    56275627        width: auto;
    56285628}
    56295629
    5630 .form-table div.color-option {
    5631         display: block;
    5632         clear: both;
    5633         margin-top: 12px;
    5634 }
    5635 
    56365630.form-table input.tog {
    56375631        margin-top: 2px;
    56385632        margin-right: 2px;
     
    56445638        margin-bottom: 0;
    56455639}
    56465640
    5647 .form-table table.color-palette {
    5648         vertical-align: bottom;
    5649         float: left;
    5650         margin: -12px 3px 11px;
    5651 }
    5652 
    5653 .form-table .color-palette td {
    5654         border-width: 1px 1px 0;
    5655         border-style: solid solid none;
    5656         height: 10px;
    5657         line-height: 20px;
    5658         width: 10px;
    5659 }
    5660 
    5661 
    56625641.form-table td fieldset label {
    56635642        margin: 0.25em 0 0.5em !important;
    56645643        display: inline-block;
     
    63216300        width: 25em;
    63226301}
    63236302
     6303.dropdown {
     6304        background: #fcfcfc;
     6305        border: 1px solid #dedede;
     6306        margin-right: 12%;
     6307        max-width: 270px;
     6308        position: relative;
     6309        width: auto;
     6310}
     6311
     6312.dropdown.dropdown-current {
     6313        padding: 20px;
     6314        margin-bottom: 15px;
     6315        cursor: pointer;
     6316}
     6317
     6318.dropdown.dropdown-container {
     6319        display: none;
     6320        position: absolute;
     6321        width: 340px;
     6322        border-top: none;
     6323        -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
     6324        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
     6325        z-index: 1;
     6326}
     6327
     6328.expanded .dropdown.dropdown-container {
     6329        display: block;
     6330}
     6331
     6332.dropdown.dropdown-container:before,
     6333.dropdown.dropdown-container:after {
     6334        content: "\0020";
     6335        display: block;
     6336        position: absolute;
     6337        top: -10px;
     6338        left: 150px;
     6339        z-index: 2;
     6340        width: 0;
     6341        height: 0;
     6342        overflow: hidden;
     6343        border: solid 11px transparent;
     6344        border-top: 0;
     6345        border-bottom-color: #fefefe;
     6346}
     6347
     6348.dropdown.dropdown-container:before {
     6349        top: -11px;
     6350        z-index: 1;
     6351        border-bottom-color: #dedede;
     6352}
     6353
     6354.picker-dropdown {
     6355        position: absolute;
     6356        top: -1px;
     6357        right: -42px;
     6358        display: block;
     6359        width: 40px;
     6360        height: 100%;
     6361        background: white;
     6362        text-align: center;
     6363        border: 1px solid #dedede;
     6364        border-left-width: 0;
     6365        cursor: pointer;
     6366}
     6367
     6368.picker-dropdown:before {
     6369        font: 20px/91px dashicons;
     6370        content: '\f140';
     6371}
     6372
     6373.expanded .picker-dropdown:before {
     6374        content: '\f142';
     6375}
     6376
     6377.color-option {
     6378        display: block;
     6379        padding: 20px;
     6380        border-top: 1px solid #dedede;
     6381}
     6382
     6383.color-option:hover,
     6384.color-option.selected {
     6385        background: #f2f8fa;
     6386}
     6387
     6388.color-palette {
     6389        width: 100%;
     6390        border-spacing: 0;
     6391        border-collapse: collapse;
     6392}
     6393.color-palette td {
     6394        height: 20px;
     6395        padding: 0;
     6396        border: none;
     6397}
     6398
     6399.color-option {
     6400        cursor: pointer;
     6401}
     6402
     6403.no-js .dropdown-current {
     6404        display: none;
     6405}
     6406
     6407.no-js .dropdown-container {
     6408        display: block;
     6409        position: static;
     6410}
     6411
     6412.no-js .dropdown-container:before,
     6413.no-js .dropdown-container:after {
     6414        display: none;
     6415}
     6416
    63246417/*------------------------------------------------------------------------------
    63256418  19.0 - Tools
    63266419------------------------------------------------------------------------------*/
  • src/wp-admin/includes/ajax-actions.php

     
    22442244        }
    22452245        wp_send_json_success( $return );
    22462246}
     2247
     2248/**
     2249 * Auto-save the selected color scheme for a user
     2250 */
     2251function wp_ajax_save_user_color_scheme() {
     2252
     2253        error_log( "Colors saved." );
     2254        global $_wp_admin_css_colors;
     2255
     2256        $user_id = intval( $_POST[ 'user_id' ] ); // can be replaced by `get_current_user_id` if setting is only save for own profile
     2257        $color_scheme = $_POST[ 'color_scheme' ];
     2258
     2259        if ( ! get_user_by( 'id', $user_id ) )
     2260                wp_die( -1 );
     2261
     2262        if ( ! isset( $_wp_admin_css_colors[ $color_scheme ] ) )
     2263                wp_die( -1 );
     2264
     2265        update_user_option( $user_id, 'admin_color', $color_scheme, true );
     2266        wp_die( 0 );
     2267
     2268}
     2269 No newline at end of file
  • src/wp-admin/includes/misc.php

     
    562562 * @since 3.0.0
    563563 */
    564564function admin_color_scheme_picker() {
    565         global $_wp_admin_css_colors, $user_id; ?>
    566 <fieldset><legend class="screen-reader-text"><span><?php _e('Admin Color Scheme')?></span></legend>
     565        global $_wp_admin_css_colors, $user_id;
     566        ksort($_wp_admin_css_colors);
     567?>
     568
     569        <fieldset id="color-picker">
     570                <legend class="screen-reader-text"><span><?php _e( 'Admin Color Scheme' ); ?></span></legend>
     571
    567572<?php
    568 $current_color = get_user_option('admin_color', $user_id);
    569 if ( empty($current_color) )
    570         $current_color = 'fresh';
    571 foreach ( $_wp_admin_css_colors as $color => $color_info ): ?>
    572 <div class="color-option"><input name="admin_color" id="admin_color_<?php echo esc_attr( $color ); ?>" type="radio" value="<?php echo esc_attr( $color ); ?>" class="tog" <?php checked($color, $current_color); ?> />
    573         <table class="color-palette">
    574         <tr>
    575         <?php foreach ( $color_info->colors as $html_color ): ?>
    576         <td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>">&nbsp;</td>
    577         <?php endforeach; ?>
    578         </tr>
    579         </table>
     573        $current_color = get_user_option( 'admin_color', $user_id );
    580574
    581         <label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
    582 </div>
    583         <?php endforeach; ?>
    584 </fieldset>
     575        if ( empty( $current_color ) )
     576                $current_color = 'mp6';
     577
     578        $color_info = $_wp_admin_css_colors[$current_color];
     579?>
     580
     581                <div class="dropdown dropdown-current">
     582                        <div class="picker-dropdown"></div>
     583                        <label for="admin_color_<?php echo esc_attr( $current_color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
     584                        <table class="color-palette">
     585                                <tr>
     586                                <?php foreach ( $color_info->colors as $html_color ): ?>
     587                                        <td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $current_color ); ?>">&nbsp;</td>
     588                                <?php endforeach; ?>
     589                                </tr>
     590                        </table>
     591                </div>
     592
     593                <div class="dropdown dropdown-container">
     594
     595                <?php foreach ( $_wp_admin_css_colors as $color => $color_info ) : ?>
     596
     597                        <div class="color-option <?php echo ( $color == $current_color ) ? 'selected' : ''; ?>">
     598                                <input name="admin_color" id="admin_color_<?php echo esc_attr( $color ); ?>" type="radio" value="<?php echo esc_attr( $color ); ?>" class="tog" <?php checked( $color, $current_color ); ?> />
     599                                <input type="hidden" class="css_url" value="<?php echo esc_attr( $color_info->url ); ?>" />
     600                                <input type="hidden" class="icon_colors" value="<?php echo esc_attr( json_encode( array( 'icons' => $color_info->icon_colors ) ) ); ?>" />
     601                                <label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
     602                                <table class="color-palette">
     603                                        <tr>
     604                                        <?php foreach ( $color_info->colors as $html_color ): ?>
     605                                                <td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>">&nbsp;</td>
     606                                        <?php endforeach; ?>
     607                                        </tr>
     608                                </table>
     609                        </div>
     610
     611                <?php endforeach; ?>
     612
     613                </div>
     614
     615        </fieldset>
     616
    585617<?php
    586618}
    587619
     620function set_color_scheme_json() {
     621        global $_wp_admin_css_colors;
     622
     623        $color_scheme = get_user_option( 'admin_color' );
     624
     625        if ( isset( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) {
     626                echo '<script type="text/javascript">var mp6_color_scheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n";
     627        }
     628}
     629add_action( 'admin_head', 'set_color_scheme_json' );
     630
    588631function _ipad_meta() {
    589632        if ( wp_is_mobile() ) {
    590633                ?>
  • src/wp-admin/js/user-profile.js

     
    7373                                });
    7474                        });
    7575                }
     76       
     77                var $colorpicker = $( '#color-picker' );
     78                var $stylesheet = $( '#colors-css' );
     79                var user_id = $( 'input#user_id' ).val();
     80                var current_user_id = $( 'input[name="checkuser_id"]' ).val();
     81
     82                // dropdown toggle
     83                $colorpicker.on( 'click', '.dropdown-current', function() {
     84                        $colorpicker.toggleClass( 'expanded' );
     85                });
     86
     87                $colorpicker.on( 'click', '.color-option', function() {
     88
     89                        var color_scheme = $( this ).children( 'input[name="admin_color"]' ).val();
     90
     91                        // update selected
     92                        $( this ).siblings( '.selected' ).removeClass( 'selected' )
     93                        $( this ).addClass( 'selected' );
     94                        $( this ).find( 'input' ).prop( 'checked', true );
     95
     96                        // update current
     97                        $colorpicker.find( '.dropdown-current label' ).html( $( this ).children( 'label' ).html() );
     98                        $colorpicker.find( '.dropdown-current table' ).html( $( this ).children( 'table' ).html() );
     99                        $colorpicker.toggleClass( 'expanded' );
     100
     101                        // preview/save color scheme
     102                        if ( user_id == current_user_id ) {
     103
     104                                // repaint icons
     105                                $stylesheet.attr( 'href', $( this ).children( '.css_url' ).val() );
     106                                svgPainter.setColors( $.parseJSON( $( this ).children( '.icon_colors' ).val() ) );
     107                                svgPainter.paint();
     108
     109                                // update user option
     110                                $.post( ajaxurl, {
     111                                        action: 'save-user-color-scheme',
     112                                        color_scheme: color_scheme,
     113                                        user_id: user_id
     114                                });
     115
     116                        }
     117
     118                });
     119
    76120        });
    77121
    78122})(jQuery);
  • src/wp-includes/general-template.php

     
    20852085 * @param string $name The name of the theme.
    20862086 * @param string $url The url of the css file containing the colour scheme.
    20872087 * @param array $colors Optional An array of CSS color definitions which are used to give the user a feel for the theme.
     2088 * @param array $colors Optional An array of CSS color definitions used to color any SVG icons
    20882089 */
    2089 function wp_admin_css_color($key, $name, $url, $colors = array()) {
     2090function wp_admin_css_color( $key, $name, $url, $colors = array(), $icons = array() ) {
    20902091        global $_wp_admin_css_colors;
    20912092
    20922093        if ( !isset($_wp_admin_css_colors) )
    20932094                $_wp_admin_css_colors = array();
    20942095
    2095         $_wp_admin_css_colors[$key] = (object) array('name' => $name, 'url' => $url, 'colors' => $colors);
     2096        $_wp_admin_css_colors[$key] = (object) array(
     2097                'name' => $name,
     2098                'url' => $url,
     2099                'colors' => $colors,
     2100                'icon_colors' => $icons,
     2101        );
    20962102}
    20972103
    20982104/**
     
    21012107 * @since 3.0.0
    21022108 */
    21032109function register_admin_color_schemes() {
    2104         wp_admin_css_color( 'fresh', _x( 'Default', 'admin color scheme' ), admin_url( 'css/colors-fresh.min.css' ),
    2105                 array( '#222', '#333', '#0074a2', '#2ea2cc' ) );
     2110        wp_admin_css_color( 'light', _x( 'Light', 'admin color scheme' ),
     2111                admin_url( 'css/color-schemes/light/colors.min.css' ),
     2112                array( '#e5e5e5', '#999', '#d64e07', '#04a4cc' ),
     2113                array( 'base' => '#999', 'focus' => '#ccc', 'current' => '#ccc' )
     2114        );
     2115
     2116        wp_admin_css_color( 'blue', _x( 'Blue', 'admin color scheme' ),
     2117                admin_url( 'css/color-schemes/blue/colors.min.css' ),
     2118                array( '#096484', '#4796b3', '#52accc', '#74B6CE' ),
     2119                array( 'base' => '#e5f8ff', 'focus' => '#fff', 'current' => '#fff' )
     2120        );
     2121
     2122        wp_admin_css_color( 'midnight', _x( 'Midnight', 'admin color scheme' ),
     2123                admin_url( 'css/color-schemes/midnight/colors.min.css' ),
     2124                array( '#25282b', '#363b3f', '#69a8bb', '#e14d43' ),
     2125                array( 'base' => '#f1f2f3', 'focus' => '#fff', 'current' => '#fff' )
     2126        );
     2127
     2128        wp_admin_css_color( 'seaweed', _x( 'Seaweed', 'admin color scheme' ),
     2129                admin_url( 'css/color-schemes/seaweed/colors.min.css' ),
     2130                array( '#10585C', '#15757a', '#a8c274', '#e78229' ),
     2131                array( 'base' => '#e1f9fa', 'focus' => '#fff', 'current' => '#fff' )
     2132        );
     2133
     2134        wp_admin_css_color( 'fresh', _x( 'Default', 'admin color scheme' ),
     2135                admin_url( 'css/colors-fresh.min.css' ),
     2136                array( '#222', '#333', '#0074a2', '#2ea2cc' )
     2137        );
    21062138}
    21072139
    21082140/**