Integrate MP6 into core

[dd32]

As discussed ​during the 3.8 planning sessions, 3.8 is bringing the ​MP6 Plugin into core for a UI refresh and flattening.

Lets make it happen!

[dd32]

mp6.diff​ is a merge of MP6 as of r800128.
The patch assumes:

• svn cp src/wp-admin/css/colors-fresh.css src/wp-admin/css/colors-mp6.css
• src/wp-includes/js/svg-painter.js, src/wp-includes/images/spinner.gif, and src/wp-includes/images/spinner-2x.gif from the plugin

A few extra points:

• Only the base MP6 colour scheme has been included, Colour picker and alternate styles are not included
• colors-fresh and colors-classic are left as-is for now, although they need to disappear, the UI is rather broken using those - We may want to rename the base MP6 scheme to fresh and ditch classic (relying upon the new colour schemes from previous point) before commit
• components/customizer has been merged into wp-admin.css and customize-controls.css, the diff is messy here as this was rewritten with SCSS, only the produced CSS is included here, we can split it out and add a SCSS/LESS processor here (another ticket please)
• components/color-schemes, components/responsive, components/sticky-menu, and, components/widgets have been excluded from the diff for their own merge
• All 3rd-party plugin CSS fixes have been removed from the CSS, including any hacks used to override their stylings
• A bunch of CSS rules were restructured from MP6 to re-order the properties the same as core to reduce the diff size (only shows 1 line changing, when the diff was the entire rule previously).
• A bunch of whitespace was removed or corrected to cores formatting (alignment, stray space, tabs, and extra properties outside of rules)
• .rtl rules were not separated into the -rtl stylesheet, however, MP6 also included a rtl stylesheet in addition to the .rtl rules, this needs cleaning up (but isn't actually a problem, and core was already doing both anyway)
• We'll have to go through and determine which images can be removed afterwards

There's still a bunch more spacing issues in the patch though, I'll upload a 2nd pass at it soon.

[dd32]

mp6.2.diff + Removal of -fresh & -classic laying MP6 down as the "fresh" to make way for MP6's colour schemes

[dd32]

mp6.2.diff​ was a refinement of the first patch, primarily some spacing and a few merge conflicts I missed (included both old and new css rules).

mp6.3.diff​ as the description implies, is mp6.2.diff​ and removing the colors-* stylesheets (since they're no good with MP6), brings core to a single consistent colour scheme until the colour scheme picker gets merged.

[ryelle]

mp6.4.diff includes the updates done over the past few days

[helen]

In 26072:

Say hello to a fresh new look for the WordPress admin.

Still to come: more color schemes, a responsive component, and more.

see #25858.
props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen.

[helen]

In 26073:

Add spinner images that were inadvertently left out of [26072]. see #25858.

[helen]

Wanted to note that Open Sans is actually loading from Google for now, due to issues being spotted with extended character sets that need further investigation and resolution.

Also noting that MP6 the plugin will continue to function just fine, it just loads some unnecessary things for trunk, and until other components are merged in, still improves certain experiences, like responsive.

[designsimply]

"line-heighit" should be "line-height", see 25858.3.diff

[iammattthomas]

In 26075:

Add missing wordpress-logo.svg, see #25858.

[iammattthomas]

In 26076:

Fixing a typo, see #25858. Props designsimply.

[dd32]

In 26077:

Add a white WordPress logo for use on the about pages. See #25858

[azaozz]

In 26078:

Widgets screen: adjust the placeholder to match the new widget "handle" height, and the spinner's margins so the sidebar titles don't "jump" when it is shown. See #25821, see #25858.

[jorbin]

The above patch cleans up the new svg-painter.js so that it passes our jshint

[iammattthomas]

Updated patch with a comment and ref to the original ticket so that future generations will know what this does.

[shaunandrews]

First pass at merging the widgets component

[tollmanz]

25858.6.diff​ is a first pass at the merge of the sticky menu component into core. In the merge process, I have updated a few things:

• I added a debounce function to the resize and scroll events. It is important that this is throttled
• Everything was cleaned up to pass the jshint rules
• All repeated selectors were cached

A few questions about this:

1. Given the integration into core via add JS to an existing JS file and CSS to an existing CSS file, I removed the PHP related to this component that only served to load the assets. One piece of that PHP is that it did not load this JS/CSS on mobile other than iPad. I could not figure out why this was a requirement. Is this needed? Obviously, where possible, especially with a project like WordPress, browser sniffing is not desirable, so it would be nice to remove this altogether, but I do not have an idea as to the implications of it.
2. I stole Underscore.js's debounce function. I did not want to include Underscore.js as it would make Underscore.js a dependency for all of WP admin. Any thoughts use of this function?

[jorbin]

Replying to tollmanz:

1. I stole Underscore.js's debounce function. I did not want to include Underscore.js as it would make Underscore.js a dependency for all of WP admin. Any thoughts use of this function?

Minimized Underscore is 14k. We already are including the 91k jQuery throughout the admin, so it's not a huge addition in my eyes. I know there are plenty of places underscore makes sense to use and this could encourage us to use it more.

[tillkruess]

Replying to tollmanz:

One piece of that PHP is that it did not load this JS/CSS on mobile other than iPad. I could not figure out why this was a requirement. Is this needed?

That code has been ported from the ​stand-alone plugin to prevent position: fixed issues on mobile devices and can be removed. MP6's responsive component disables the sticky-menu on smaller screens in moby6.js.

[ryelle]

25858.colors.diff​ merges in the colors component.

• Add a folder to src/wp-admin/css with the Sass source files for color schemes.
• Add a new task to the Gruntfile: colors, which runs the Sass processing & CSS minification, and add this task to build. This does require ​Sass (and therefore Ruby) on the machine running grunt, specifically v 3.3.0 as we want to use the ​sourcemap option.
• Each processed color scheme generates a colors.css, colors.css.map, and colors.min.css in the build directory, along with keeping the colors.scss files.

This also changes how color schemes are handled in core

• There is a new property to each color scheme object, icon_colors. This is an array of colors used by svg-painter to match any SVG icons to the color scheme.
• The color scheme picker has a new style & now auto-saves.

A few notes

• New function set_color_scheme_json creates the json object mp6_color_scheme used by svg-painter, and both should be renamed to something not MP6.
• Color schemes won't work if you're running out of the src directory. Maybe we need to put some error handling there like (now) exists for RTL, if you're using a color scheme. And probably disable the color scheme picker.

[tillkruess]

Replying to tollmanz:

25858.6.diff​ is a first pass at the merge of the sticky menu component into core.

The z-index styles for pointers/thickbox in attachment:25858.6.diff​ need to be merged properly, those are initial stand-alone hot fixes.

[dd32]

25858.colors.diff​ merges in the colors component.

Add a new task to the Gruntfile: colors, which runs the Sass processing & CSS minification, and add this task to build. This does require ​Sass (and therefore Ruby) on the machine running grunt, specifically v 3.3.0 as we want to use the ​sourcemap option.

• It's a shame we can't use libsass instead of using ruby sass, but as pointed out elsewhere, libsass isn't feature compatible yet, and doesn't support sourcemaps
• @nacin can probably weigh in here a bit, but I'm wondering if perhaps we should commit the generated .css files from the scss files to /src/ ? I guess only having the base colour scheme defined is OK though, but, it's something that might be more useful in the future when other stylesheets are made with a pre-processor

More General:

• What files were src/wp-admin/css/color-schemes/_admin.scss & src/wp-admin/css/color-schemes/_mixins.scss based off? I'd rather do a svn cp on the file so that we can see only the variables have been replaced, and no rules were lost/added - I can see that'll be a messy diff due to the mixin separation, but the declarations shouldn't change
• Is there a reason why the colors.scss files appear to have duplicated content (ie. double imports of colors-fresh.css, and the blue scheme particularly)?
• Probably best to add one colour scheme, and then svn cp the rest (once again, to see whats different between them)
• The .dropdown and .expanded styles are incredibly generic, can they be prefixed with something specific to the job?
• (not specific to this patch) What's the job of svg-painter.js? It seems like it might only be used by the colour scheme picker? (Or does it actually do something on load too?) I ask since we're currently loading it on all pages

[SergeyBiryukov]

Related: #25918, #25919, #25920.

[dd32]

Attachment 25858.6.diff​ added

Took a look at this, few things that we can change from MP6:

• We can remove the .rtl rule, that's no longer needed
• We don't need to go all-out-crazy on the z-indexing as far as I can see, this works for me: (collapsing code to limit the comment length)

  .sticky-menu #adminmenuwrap {
  	position: fixed; top: 32px; left: 0;
  	z-index: 2;
  }
  .sticky-menu #wpwrap {
  	z-index: 1;
  }
  

Avoiding crazy z-indexes is something we really need to strive against, otherwise we just add something starting at 9000 next time..

[ryelle]

Replying to dd32:

More General:

• What files were src/wp-admin/css/color-schemes/_admin.scss & src/wp-admin/css/color-schemes/_mixins.scss based off? I'd rather do a svn cp on the file so that we can see only the variables have been replaced, and no rules were lost/added - I can see that'll be a messy diff due to the mixin separation, but the declarations shouldn't change

Do you mean in the plugin? components/color-schemes/schemes/_admin.scss & components/color-schemes/schemes/_mixins.scss.

• Is there a reason why the colors.scss files appear to have duplicated content (ie. double imports of colors-fresh.css, and the blue scheme particularly)?

No, that was a mistake from my testing. Fixed in 25858.colors.2.diff​.

• Probably best to add one colour scheme, and then svn cp the rest (once again, to see whats different between them)
• The .dropdown and .expanded styles are incredibly generic, can they be prefixed with something specific to the job?

Changed the classes to picker-dropdown/picker-expanded in 25858.colors.2.diff​.

I also noticed that there are still moby6 classes in _admin.scss, those should be removed once we know what's up with the responsive component.

[helen]

In 26125:

Merge the sticky menu component from MP6. The admin menu is now fixed if the viewport is large enough. props tollmanz, tillkruess, dd32. see #25858.

[tollmanz]

25858.responsive.diff brings in the responsive component of MP6. The primary goal of this patch is to port this code to core, warts and all. We believe that this brings parity to the responsive component in MP6.

In this process, we decided to make a few changes:

• Removed jQuery mobile. This script was used to add swipe controls to open/close the sidebar menu. This feature was apparently buggy and due to the pending demise of jQuery mobile, it was removed.
• Removed use of Backbone.js. Adding Backbone.js to this script would add a dependency of Backbone.js for all of the admin. Additionally, it was used to add a menu item. Instead of doing that, it was added via the admin menu API. This also fixes a bad delay in the item showing in the menu.

While this patch ports the responsive component into core, there is much work to be done, including:

• CSS code styling. A ton of CSS was dumped into wp-admin.css, but was not cleaned up. There is a lot of inconsistency with it and should be fixed up.
• CSS organization. We should revisit if the CSS is in the proper place. It might make sense to reorganize it a bit now that this is core code.
• Remove moby6 references. No need for this anymore.
• jshinting. We should clean up JS to pass jshint tests.
• Throttle resize event. We need to make sure these event don't hose performance.
• Review use of matchMedia. I think that we could deprecate this and make it pure CSS.
• Menu icon alignment in Chrome is a bit off and needs tweaked.
• Sidebar quirkiness. On load in narrow view, it will initially pop out, then hide. There are lots of little quirks like this that need identification and fixing.
• Overall review of code. There are likely other issues that need addressing and this code warrants a thorough review.

Finally, I kept a log of changes we made to this patch. It gives the history of moving from the MP6 port to its current state. This history can be viewed here: ​https://gist.github.com/tollmanz/7442994/revisions. The following is a guide to these changes:

1. Port of responsive component to core
2. Removes jQuery mobile from patch
3. Removes Backbone.js requirement from patch
4. Styles the new menu icon
5. Fixes a bug that hid the admin menu

Props to iammattthomas, helen, dd32, and tollmanz for work on this.

[dd32]

Quick patch reviews. Not all of this is a blocker to commit, just mentioning what I can see, I understand most of this is not "production ready" and needs cleaning up still, but some of these things (particularly CSS) is going to be hard to do after it's commited as it often becomes lost and forgotten (and harder to spot without a diff).

Attachment 25858.colors.2.diff​ added

• Skipping review of the grunt sections, I don't have a particularly good idea of what we can do there, seems like that's best left in another commit, but is kind of reququired by the picker.
• .icon-dashicon & the dashicon() mixin is un-used, unreferenced styles in core and doesn't appear to be used by the patch
• src/wp-admin/includes/ajax-actions.php needs cleaning up, error_log removal, nonce protection, cap checks to see if the current user can edit a user, questions on if we should even support changing another users colour scheme
• Colour schemes are unavailable when running in src, need to lock all colour schemes to default for src.
• docblock for wp_admin_css_color() needs updating with correct variable name, can probably convert that array( ..) to a compact() instead (would require renaming $icon_colors
• .picker-dropdown in admin_color_scheme_picker() HTML appears to be indented an extra tab, should also use the selected() helper, and esc_url() for URL escaping (instead of esc_attr()

Attachment 25858.responsive.diff​ added

• In addition to the above list from tollmanz:
• Would be nice to standardise on CSS layout, This one doesn't indent rules within media queries
• .rtl will need to be removed
• Jetpack and Akismet rules need removing, if those rules are needed, then something more generic which applies to all plugins should be investigated
• That's 2,000 lines of CSS that I can't review, a few things feel like things that we removed in late 3.7 as they weren't needed.. not sure. though..
• It'd be nice if we could clean up this CSS before dumping it into core, just to prevent it being difficult in the future to determine where/when the code was added.. But it's such a huge changeset that ultimately I don't think it's goig to matter, it's not dispersed amongst other code..
• JS looks fine, it needs the eyes of a JS master though for performance and probably JSHint alterations

Attachment 25858.5.diff​ added

Commit it already! :)

Attachment 25858.widgets.diff​ added

• Vastly different CSS structure than is used elsewhere in core, and in other MP6 patches (super-indenting each subsequent "nested" rule)
• Would've been nice if this CSS was modified in-place rather than being copy-pasted into a new block, makes it rather hard to review what actually changed, for example, I can see that .widget_title h4 is mostly the same, but it moved for no reason, etc.
• Colours need moving to colour stylesheets, no need to !important it here
• There's so much new CSS here it seems, that splitting it into it's own file is fast approaching, it's 1,000 lines of altered CSS atm.

Attachment 25858.4.diff​ added

Needs commiting.

[iammattthomas]

In 26131:

Clean up the new svg-painter.js so that it passes our jshint; see #25858. Props jorbin.

[iammattthomas]

In 26132:

Reinstating this fix for the issue described in #18868, wherein some versions of Chrome open the About/"W" dropdown menu inadvertantly, like when clicking a select element. Fix was removed in the initial MP6 commit r26072, this brings it back. See #25858; props azaozz.

[ryelle]

Some quick fixes in 25858.colors.3.diff​

• .icon-dashicon & the dashicon() mixin is un-used, unreferenced styles in core and doesn't appear to be used by the patch

I think it might be worth having dashicon classes in core, but this isn't the place for that- this has been removed.

• src/wp-admin/includes/ajax-actions.php needs cleaning up, error_log removal, nonce protection, cap checks to see if the current user can edit a user, questions on if we should even support changing another users colour scheme

Agreed. Removed error_log, more cleanup to come. I think you've always been able to change another user's color scheme, but the autosave here might make that dangerous (unexpected).

• docblock for wp_admin_css_color() needs updating with correct variable name, can probably convert that array( ..) to a compact() instead (would require renaming $icon_colors)

Fixed the docblock name.

• .picker-dropdown in admin_color_scheme_picker() HTML appears to be indented an extra tab, should also use the selected() helper, and esc_url() for URL escaping (instead of esc_attr())

The 'selected' code is just for a class, so selected() isn't appropriate here. I've updated the escaping for the URL to use esc_url.

[iammattthomas]

Updated the widgets patch:

• Vastly different CSS structure than is used elsewhere in core, and in other MP6 patches (super-indenting each subsequent "nested" rule)

I've cleaned this up and reinstated "normal" nesting of rules, no super-indenting.

• Would've been nice if this CSS was modified in-place rather than being copy-pasted into a new block, makes it rather hard to review what actually changed, for example, I can see that .widget_title h4 is mostly the same, but it moved for no reason, etc.

I looked into this a bit, but it seems like an attempt was made to more logically organize the CSS along with the changes that were made. While it makes reviewing this diff a bit more difficult, I think the organization makes sense.

• Colours need moving to colour stylesheets, no need to !important it here
• There's so much new CSS here it seems, that splitting it into it's own file is fast approaching, it's 1,000 lines of altered CSS atm.

Going to leave these two for post-merge fixes if there are no objections.

[tollmanz]

25858.responsive.2.diff​ addresses issues brought up by dd32:

• CSS layout is standardized. Comments have also been cleaned up
• Jetpack and Akismet code is removed
• rtl CSS is removed
• JS passes hinting other than one small issue that will likely be removed when parts of the code are reviewed

[iammattthomas]

This adds to tollmanz's latest responsive patch, fixing the positioning of the adminbar Updates icon and removing the hover state on the hamburger button.

[iammattthomas]

Latest responsive patch removes user-scalable=no and the maximum zoom from the viewport declaration.

[azaozz]

Replying to dd32:

Attachment 25858.responsive.diff​ added

...
JS looks fine, it needs the eyes of a JS master though for performance and probably JSHint alterations

Looking through the JS in 25858.responsive.4.diff: it will need a lot of of work after the merge. Most of what it does can be done (better?) with @media from CSS.

[tollmanz]

Looking through the JS in 25858.responsive.4.diff: it will need a lot of of work after the merge. Most of what it does can be done (better?) with @media from CSS.

I'm in 100% agreement with this. Check that, 150% agreement.

I tried to rewrite the JS as I prepped the patch; however, I was introducing new bugs left and right. In order to make the deadline and at least get us to a state consistent with the current state of MP6, we decided to port everything over as is (with the necessary changes mentioned above). My goal is to gradually rewrite this code over the next few weeks. I would love your keen eye on any patches to see if you think I'm heading in the right direction.

[iammattthomas]

In 26134:

Bring in the responsive component of MP6. See #25858.

• Makes the admin fully responsive down to 320px wide.
• Adds a touch-optimized main menu that can be opened and closed from the toolbar.
• Size and positioning adjustments to icons, buttons, and text elements for better touch usability.

A few changes since MP6:

• Removed jQuery mobile. This script was used to add swipe controls to open/close the sidebar menu. This feature was apparently buggy and due to the pending demise of jQuery mobile, it was removed.
• Removed use of Backbone.js. Adding Backbone.js to this script would add a dependency of Backbone.js for all of the admin. Additionally, it was used to add a menu item. Instead of doing that, it was added via the admin menu API. This also fixes a bad delay in the item showing in the menu.
• CSS layout is standardized. Comments have also been cleaned up.
• Jetpack and Akismet code is removed.
• RTL CSS is removed.
• JS passes hinting other than one small issue that will likely be removed when parts of the code are reviewed.

A number of areas for improvement remain; we're tracking these issues in the comments of #25858.

Props to tollmanz, tillkruess, helen, dd32, and apeatling.

[azaozz]

Also, !important is "banished" in core unless really really needed :)

[shaunandrews]

This is a minor change from the last widgets patch which fixes a bug that broke click-to-add widgets.

[shaunandrews]

Available widget descriptions are now always visible. The .more-info ? and tooltip are gone.

[shaunandrews]

One more widgets patch, this time with styles for the oft forgotten accessibility mode.

[helen]

In 26137:

Merge the color schemes component from MP6. Introduces Light, Blue, and Midnight.

Color scheme selection on your own profile page gives you a preview and autosaves the selection.

Also introduces the usage of a preprocessor for core files, namely Sass. For 3.8, we will not expand its implementation past the color schemes. This does require Ruby as well as Sass 3.3.0+ due to the usage of the sourcemap option.

Note that only the default color scheme is available when running out of src. Use build to test the rest as well as the color picker.

props ryelle, melchoyce, tillkruess, drw158, littlethingsstudio, helen. see #25858, #22862.

[helen]

In 26139:

Turns out it helps if you add those pesky Sass files if you're going to use a preprocessor. see #25858.

[iammattthomas]

In 26140:

Bring in the widgets component of MP6. See #25858.

• A cleaner UI, with a simpler design for available and inactive widgets, and more emphasis on your sidebars.
• Available widgets and sidebars expand to two columns at larger screen sizes making it easier to manage sites with lots of sidebars.
• New dropzone indicator for empty sidebars.

Props shaunandrews, joen, iammattthomas.

[nacin]

In 26143:

Temporarily remove CSS preprocessing until we can get our Ruby dependency sorted out.

see #25858, #22862.

[nacin]

In 26145:

Move to grunt-sass, which which has less bells and whistles than grunt-contrib-sass but also no Ruby dependency.

see #25858, #22862, [26143].

[helen]

In 26146:

Avoid a notice when SCRIPT_DEBUG is not defined. props MikeHansenMe. see #25824, #25858.

[nacin]

In 26147:

Remove SCRIPT_DEBUG reference from register_admin_color_schemes().

Instead, script-loader.php handles converting .min.css to .css when SCRIPT_DEBUG is on, and has since r21592. (This was done for compatibility with plugin color schemes that used .css and .dev.css.)

see #25858.

[azaozz]

Related: #25977

[johnbillion]

Regression: #25982

[ryelle]

Customizer: remove gradients & add a border to distinguish customizer panel from site content

[helen]

In 26165:

Remove old control/accordion section title gradients that were still appearing in the customizer and reinstate a divider between the customizer sidebar and the preview. props ryelle, helen. see #25858.

[helen]

I think that completes the merge. Going to call this fixed - new tickets for individual bugs, please.

[iammattthomas]

In 26181:

Color schemes should use .ab-icon:before instead of .ab-item:before to target adminbar icons. See #25858.

[helen]

In 26182:

Remove now-unused #adminmenushadow. see #25858.

[helen]

In 26185:

We only need to declare Open Sans once in wp-admin.css. See #25858.

[azaozz]

In 26290:

MP6: remove left-over plugin reference, see #25858

[iammattthomas]

In 26293:

Making improvements to new styles added in the MP6 merge, and addressing visual feedback from core team.

Improved and more consistent styling on the widgets & menus pages:

• Use the same visual treatment for both widgets and menus.
• Re-use existing styles from input:focus for draggable elements.
• Use the standard H3 size for widget area titles.
• Re-style the Widgets page drop zone to match drop zone from dashboard.
• Replace the gear icon on Widgets with the standard open/close arrows.
• Remove "Choose a sidebar" header from widget area chooser.

Make open/close arrows more consistent:

• Use the same arrow direction everywhere: pointing down when its container is closed, pointing up when open (following the Dashboard example).
• Set a consistent color for open/close arrows.
• Add a hover color for open/close arrows.
• Make open/close arrows permanently visible; :hover states don't exist on touch.

Make typography and color more consistent:

• Switch all declarations of #dedede to #ddd for simplicity's sake.
• Make H3s the same weight and color as H2s.
• Make select elements the same color as text inputs.
• Make paragraph text #444 so it doesn't look washed out on grey backgrounds.

General improvements:

• Eliminate the border between rows in settings tables.
• Make text and buttons line up in the Customizer.

See #25858.

[azaozz]

In 26296:

Widgets: adjust placeholder size to match the widget size. Prevents the widgets from jumping when one is dragged. See #25858.

[iammattthomas]

In 26297:

Some improvements to the dashboard activity widget:

• Use the correct background color for unapproved comments.
• Use the sale box-shadow style instead of a border between rows so the orange border is uninterrupted between multiple pending comments.

See #25858.

[iammattthomas]

In 26373:

Make the responsive layout behave better when the user zooms the page:

• Change the smartphone media query from 480 to 600px so it captures large screen phones in landscape mode.
• Set #wpadminbar to position: absolute at smartphone sizes so it scrolls with the page, freeing up the viewport.
• Remove the transition states on #adminmenu for better performance on mobile devices
• Make the responsive sidebar scroll with the page instead of using a fixed position
• Remove the -webkit-overflow-scrolling rule that was disabling scroll-to-top when tapping the iOS status bar.
• Remove unnecessary zoom declaration from -ms-viewport.

See #25858.

[iammattthomas]

In 26379:

Add padding to #wpbody at viewports < 600px so that content isn't overlapped by the absolute-positioned adminbar. See #25858.

[iammattthomas]

In 26387:

Add #adminmenu to this background color rule so it remains visible on mobile when the sidebar is longer than the main column, like on media-new.php. See #25858.

[iammattthomas]

In 26415:

Match the background color of the responsive toggle button active state to -submenu-background, so it matches color schemes. See #25858.

[iammattthomas]

In 26417:

Remove gradients and text-shadow from ui-slider-handle and restyle it to mimic buttons. Match the background color to the chosen color scheme's -color. See #25858.

[iammattthomas]

In 26423:

Prevent horizontal scrolling when the responsive sidebar is open, pushing the main column off to the right. See #25858.

[kovshenin]

@iammattthomas in r26423 you used the 600px breakpoint to prevent horizontal scrolling when the responsive menu is open, but the menu is shown at 782px or less. See 25858.7.diff​, unless that was intentional.

[iammattthomas]

In 26433:

Press This fixes:

• Override responsive styles for the Press This window
• Remove the old header logo in Press This
• Add the new Dashicon WP logo

See #25858.

[iammattthomas]

In 26441:

Updating the #wp-auth-check login form to match the new admin design:

• Remove border-radius on the container and add a box shadow
• Style the top bar background to match the new #eee page background
• Replace the close button PNG with a Dashicon
• Remove a no-longer-needed button style override in buttons.css that caused padding to change when clicking the submit button.

See #25858.

[nacin]

In 26535:

Simplify the color scheme profile saving JS. see #25858.

[iammattthomas]

In 26670:

Correct the alignment of the W logo within its container. See #25858.

[iammattthomas]

In 26675:

Line up ALL the things:

• Make folded adminmenu icons line up with the W icon in the toolbar
• Make the W link in the toolbar the same width as the folded adminmenu
• Reduce padding on toolbar links to match reduced padding between W and Globe icons
• Reduce right-side padding on toolbar links to account for 1px of extra padding around icons on the left

See #25858.

[helen]

In 26676:

Lovingly restore corners that had previously been nibbled upon by a mouse. see #25858.

[helen]

In 26677:

Bring screen reader shortcuts and image edit controls in line with admin design. see #25858.

[iammattthomas]

In 26682:

More consistent vertical alignment of the .awaiting-mod/new updates indicator. See #25858.

[iammattthomas]

In 26712:

Hide the 'Dismiss' label in the dashboard welcome panel at smartphone sizes, so the close link doesn't overlap the Welcome headline. See #25858.

[iammattthomas]

In 26744:

Provide a default generic avatar icon in the My Account menu if avatars are disabled, ensuring that the link is visible at responsive sizes. See #25858.

[nacin]

In 26773:

Add four more color schemes to round out our collection at eight.

The new schemes are Ectoplasm, Coffee, Ocean, Sunrise. For those following along, the first three were at one point named Ghostbusters, Pixel, and Cape Cod.

See [26137] for the original color schemes.

props ryelle, melchoyce, drw158, littlethingsstudio.
fixes #26468. see #25858, #22862.

[iammattthomas]

In 26788:

A small adjustment to the page background color per yesterday's conversation with nacin, from #eee to #f3f3f3. This retains enough contrast with white widget containers while making for a more comfortable reading experiences on pages that heavily use the default background color, like the About page. A few adjustments to go along with it:

• Horizontal rules on the About page are lighter, to match their previous level of contrast with #eee
• Eliminated the .flush-top class on <hr>s on the About page since we want the styles applied to all About page <hr>s.
• Color schemes should match the bottom border of active tabs to the scheme's body-background variable.
• Lighten the comment background color on the Dashboard activity widget to keep adequate contrast with the new lighter body background.

See #25858.

[matveb]

I'm a bit worried the change from #eee to #f3f3f3 could have more implications to the overall luminance balance. It's currently throwing off some shadows and some borders with the fainter look, and can make the white-boxes elements we use throughout the admin less visible — specially on old screens, that cannot handle subtleties in the highlights very well. Why can't we just change the About page background if that was the concern?

[iammattthomas]

It's not just the About page that felt heavy; it's also pages like Settings that don't use the white boxes. I haven't seen the problems with contrast or shadows that matveb mentioned but I think at this point we've reached the point of diminishing returns; there are tradeoffs either way.

[iammattthomas]

If we want to split the difference, we can use #f1f1f1 as a page background. I've used this a hundred times in the past and it seems to provide adequate contrast with a white container on top of it, especially since ours have darker borders and shadows. 25858.10.diff​ makes that change.

[Joen]

I find the reasoning very convincing, and the change is certainly something I can live with. I'd like to echo Matias thoughts though, that especially with #f3f3f3 we lose some of the glorious contrast MP6 introduced. #f1f1f1 would make me significantly happier, though, and seems like the best of both worlds.

[matveb]

+1 to #f1f1f1 :)

[iammattthomas]

In 26837:

Slightly darkening the page backcground to f1f1f1 for better contrast with white interface elements on top of it. See #25858.

[melchoyce]

25858.11.diff​ drops down the border-color and box-shadow a bit on container elements to match the new #f1f1f1 background-color.

[iammattthomas]

In 26840:

Adjust the border-color and box-shadow on container elements to match the new f1f1f1 background-color. See #25858, props melchoyce.

[iammattthomas]

In 26841:

Return container shadows to 1px blur as they were pre- r26293. This is a better match for the 1px shadow we use on buttons and screen options. See #25858.

[ocean90]

In 27855:

Adjust colors in wp_die() and install.css.

Missed in [26788] and [26837], see #25858.
fixes #27589.