diff --git a/wp-admin/css/colors-classic.css b/wp-admin/css/colors-classic.css index 461d0cf464..34337b8d07 100644 --- a/wp-admin/css/colors-classic.css +++ b/wp-admin/css/colors-classic.css @@ -1460,6 +1460,169 @@ div.wp-menu-image { /* end screen icons */ +/* Post format icons */ + +/* 16px */ +a.post-state-format, +.post-format-change span.icon { + background: url(../images/post-formats-vs.png) no-repeat; +} + +.post-format-change span.icon.wp-format-standard { + background-position: -8px -8px; +} + +.post-format-change span.icon.wp-format-image { + background-position: -40px -8px; +} + +.post-format-change span.icon.wp-format-gallery { + background-position: -72px -8px; +} + +.post-format-change span.icon.wp-format-audio { + background-position: -104px -8px; +} + +.post-format-change span.icon.wp-format-video { + background-position: -136px -8px; +} + +.post-format-change span.icon.wp-format-chat { + background-position: -168px -8px; +} + +.post-format-change span.icon.wp-format-status { + background-position: -200px -8px; +} + +.post-format-change span.icon.wp-format-aside { + background-position: -232px -8px; +} + +.post-format-change span.icon.wp-format-quote { + background-position: -264px -8px; +} + +.post-format-change span.icon.wp-format-link { + background-position: -296px -8px; +} + +/* 32px */ + +.post-format-options a div, +#icon-edit.wp-format-standard, +#icon-edit.wp-format-image, +#icon-edit.wp-format-gallery, +#icon-edit.wp-format-audio, +#icon-edit.wp-format-video, +#icon-edit.wp-format-chat, +#icon-edit.wp-format-status, +#icon-edit.wp-format-aside, +#icon-edit.wp-format-quote, +#icon-edit.wp-format-link { + background: url(../images/post-formats32-vs.png) no-repeat; +} + +#icon-edit.wp-format-standard, +.post-format-options .standard { + background-position: -16px -18px; +} + +#icon-edit.wp-format-image, +.post-format-options .image { + background-position: -80px -16px; +} + +#icon-edit.wp-format-gallery, +.post-format-options .gallery { + background-position: -144px -16px; +} + +#icon-edit.wp-format-audio, +.post-format-options .audio { + background-position: -208px -16px; +} + +#icon-edit.wp-format-video, +.post-format-options .video { + background-position: -272px -16px; +} + +#icon-edit.wp-format-chat, +.post-format-options .chat { + background-position: -336px -17px; +} + +#icon-edit.wp-format-status, +.post-format-options .status { + background-position: -402px -16px; +} + +#icon-edit.wp-format-aside, +.post-format-options .aside { + background-position: -466px -16px; +} + +#icon-edit.wp-format-quote, +.post-format-options .quote { + background-position: -527px -17px; +} + +#icon-edit.wp-format-link, +.post-format-options .link { + background-position: -592px -16px; +} + +/* Responsive post formats */ + +@media only screen and (max-width: 782px) { + + .post-format-options a div { + background: url(../images/post-formats-vs.png) no-repeat; + } + + .post-format-options .standard { + background-position: -8px -8px; + } + + .post-format-options .image { + background-position: -40px -8px; + } + + .post-format-options .gallery { + background-position: -72px -8px; + } + + .post-format-options .audio { + background-position: -104px -8px; + } + + .post-format-options .video { + background-position: -136px -8px; + } + + .post-format-options .chat { + background-position: -168px -8px; + } + + .post-format-options .status { + background-position: -200px -8px; + } + + .post-format-options .aside { + background-position: -232px -8px; + } + + .post-format-options .quote { + background-position: -264px -8px; + } + + .post-format-options .link { + background-position: -296px -8px; + } +} + /* Diff */ table.diff .diff-deletedline { background-color: #fdd; @@ -2280,5 +2443,39 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper { background-image: url('../images/wp-logo-vs-2x.png?ver=20120916'); background-size: 16px auto; } + + /* 16px post formats */ + .post-format-change span.icon, + a.post-state-format { + background-image: url(../images/post-formats32-vs.png); + background-size: 320px 32px; + } + + /* 32px */ + .post-format-options a div, + #icon-edit.wp-format-standard, + #icon-edit.wp-format-image, + #icon-edit.wp-format-gallery, + #icon-edit.wp-format-audio, + #icon-edit.wp-format-video, + #icon-edit.wp-format-chat, + #icon-edit.wp-format-status, + #icon-edit.wp-format-aside, + #icon-edit.wp-format-quote, + #icon-edit.wp-format-link { + background: url(../images/post-formats64-vs.png) no-repeat; + background-size: 640px 64px; + } } + +@media + (-o-min-device-pixel-ratio: 5/4) and (max-width: 782px), + (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 782px), + (min-resolution: 120dpi) and (max-width: 782px) { + /* 16px responsive post formats */ + .post-format-options a div { + background: url(../images/post-formats32-vs.png) no-repeat; + background-size: 320px 32px; + } +} diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css index 340c15a8a1..8afd3f6d32 100644 --- a/wp-admin/css/colors-fresh.css +++ b/wp-admin/css/colors-fresh.css @@ -1354,6 +1354,169 @@ div.wp-menu-image { /* end screen icons */ +/* Post format icons */ + +/* 16px */ +a.post-state-format, +.post-format-change span.icon { + background: url(../images/post-formats.png) no-repeat; +} + +.post-format-change span.icon.wp-format-standard { + background-position: -8px -8px; +} + +.post-format-change span.icon.wp-format-image { + background-position: -40px -8px; +} + +.post-format-change span.icon.wp-format-gallery { + background-position: -72px -8px; +} + +.post-format-change span.icon.wp-format-audio { + background-position: -104px -8px; +} + +.post-format-change span.icon.wp-format-video { + background-position: -136px -8px; +} + +.post-format-change span.icon.wp-format-chat { + background-position: -168px -8px; +} + +.post-format-change span.icon.wp-format-status { + background-position: -200px -8px; +} + +.post-format-change span.icon.wp-format-aside { + background-position: -232px -8px; +} + +.post-format-change span.icon.wp-format-quote { + background-position: -264px -8px; +} + +.post-format-change span.icon.wp-format-link { + background-position: -296px -8px; +} + +/* 32px */ + +.post-format-options a div, +#icon-edit.wp-format-standard, +#icon-edit.wp-format-image, +#icon-edit.wp-format-gallery, +#icon-edit.wp-format-audio, +#icon-edit.wp-format-video, +#icon-edit.wp-format-chat, +#icon-edit.wp-format-status, +#icon-edit.wp-format-aside, +#icon-edit.wp-format-quote, +#icon-edit.wp-format-link { + background: url(../images/post-formats32.png) no-repeat; +} + +#icon-edit.wp-format-standard, +.post-format-options .standard { + background-position: -16px -18px; +} + +#icon-edit.wp-format-image, +.post-format-options .image { + background-position: -80px -16px; +} + +#icon-edit.wp-format-gallery, +.post-format-options .gallery { + background-position: -144px -16px; +} + +#icon-edit.wp-format-audio, +.post-format-options .audio { + background-position: -208px -16px; +} + +#icon-edit.wp-format-video, +.post-format-options .video { + background-position: -272px -16px; +} + +#icon-edit.wp-format-chat, +.post-format-options .chat { + background-position: -336px -17px; +} + +#icon-edit.wp-format-status, +.post-format-options .status { + background-position: -402px -16px; +} + +#icon-edit.wp-format-aside, +.post-format-options .aside { + background-position: -466px -16px; +} + +#icon-edit.wp-format-quote, +.post-format-options .quote { + background-position: -527px -17px; +} + +#icon-edit.wp-format-link, +.post-format-options .link { + background-position: -592px -16px; +} + +/* Responsive post formats */ + +@media only screen and (max-width: 782px) { + + .post-format-options a div { + background: url(../images/post-formats.png) no-repeat; + } + + .post-format-options .standard { + background-position: -8px -8px; + } + + .post-format-options .image { + background-position: -40px -8px; + } + + .post-format-options .gallery { + background-position: -72px -8px; + } + + .post-format-options .audio { + background-position: -104px -8px; + } + + .post-format-options .video { + background-position: -136px -8px; + } + + .post-format-options .chat { + background-position: -168px -8px; + } + + .post-format-options .status { + background-position: -200px -8px; + } + + .post-format-options .aside { + background-position: -232px -8px; + } + + .post-format-options .quote { + background-position: -264px -8px; + } + + .post-format-options .link { + background-position: -296px -8px; + } +} + /* Diff */ table.diff .diff-deletedline { background-color: #fdd; @@ -2168,5 +2331,39 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper { background-image: url('../images/wp-logo-2x.png?ver=20120916'); background-size: 16px auto; } + + /* 16px post formats */ + .post-format-change span.icon, + a.post-state-format { + background-image: url(../images/post-formats32.png); + background-size: 320px 32px; + } + + /* 32px */ + .post-format-options a div, + #icon-edit.wp-format-standard, + #icon-edit.wp-format-image, + #icon-edit.wp-format-gallery, + #icon-edit.wp-format-audio, + #icon-edit.wp-format-video, + #icon-edit.wp-format-chat, + #icon-edit.wp-format-status, + #icon-edit.wp-format-aside, + #icon-edit.wp-format-quote, + #icon-edit.wp-format-link { + background: url(../images/post-formats64.png) no-repeat; + background-size: 640px 64px; + } } + +@media + (-o-min-device-pixel-ratio: 5/4) and (max-width: 782px), + (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 782px), + (min-resolution: 120dpi) and (max-width: 782px) { + /* 16px responsive post formats */ + .post-format-options a div { + background: url(../images/post-formats32.png) no-repeat; + background-size: 320px 32px; + } +} diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index da275dde7d..45d75c8bc2 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -2698,7 +2698,6 @@ a.post-state-format { height: 16px; width: 16px; margin-right: 5px; - background-image: url(../images/post-formats.png); background-repeat: no-repeat; text-indent: -999em; } @@ -4165,56 +4164,6 @@ body .ui-slider-tooltip { min-height: 97px; } -body.wp-format-standard #icon-edit, -.post-format-options .standard { - background: url(../images/post-formats32.png) no-repeat -3px -4px; -} - -body.wp-format-image #icon-edit, -.post-format-options .image { - background: url(../images/post-formats32.png) no-repeat -43px -4px; -} - -body.wp-format-gallery #icon-edit, -.post-format-options .gallery { - background: url(../images/post-formats32.png) no-repeat -83px -4px; -} - -body.wp-format-audio #icon-edit, -.post-format-options .audio { - background: url(../images/post-formats32.png) no-repeat -123px -4px; -} - -body.wp-format-video #icon-edit, -.post-format-options .video { - background: url(../images/post-formats32.png) no-repeat -163px -4px; -} - -body.wp-format-chat #icon-edit, -.post-format-options .chat { - background: url(../images/post-formats32.png) no-repeat -202px -4px; -} - -body.wp-format-status #icon-edit, -.post-format-options .status { - background: url(../images/post-formats32.png) no-repeat -242px -4px; -} - -body.wp-format-aside #icon-edit, -.post-format-options .aside { - background: url(../images/post-formats32.png) no-repeat -282px -4px; -} - -body.wp-format-quote #icon-edit, -.post-format-options .quote { - background: url(../images/post-formats32.png) no-repeat -322px -4px; -} - -body.wp-format-link #icon-edit, -.post-format-options .link { - background: url(../images/post-formats32.png) no-repeat -362px -4px; -} - .post-format-description { color: #666; font-size: 12px; @@ -4281,50 +4230,6 @@ body.wp-format-link #icon-edit, width: 16px; } -.post-format-change span.icon.wp-format-standard { - background: url(../images/post-formats.png) no-repeat -8px -8px; -} - -.post-format-change span.icon.wp-format-image { - background: url(../images/post-formats.png) no-repeat -40px -8px; -} - -.post-format-change span.icon.wp-format-gallery { - background: url(../images/post-formats.png) no-repeat -72px -8px; -} - -.post-format-change span.icon.wp-format-audio { - background: url(../images/post-formats.png) no-repeat -104px -8px; -} - -.post-format-change span.icon.wp-format-video { - background: url(../images/post-formats.png) no-repeat -136px -8px; -} - -.post-format-change span.icon.wp-format-chat { - background: url(../images/post-formats.png) no-repeat -168px -8px; -} - -.post-format-change span.icon.wp-format-status { - background: url(../images/post-formats.png) no-repeat -200px -8px; -} - -.post-format-change span.icon.wp-format-aside { - background: url(../images/post-formats.png) no-repeat -232px -8px; -} - -.post-format-change span.icon.wp-format-quote { - background: url(../images/post-formats.png) no-repeat -264px -8px; -} - -.post-format-change span.icon.wp-format-link { - background: url(../images/post-formats.png) no-repeat -296px -8px; -} - -.post-format-change a { - font-size: 12px; -} - @media only screen and (max-width: 782px) { .post-format-options a { margin-right: 19px; @@ -4335,45 +4240,6 @@ body.wp-format-link #icon-edit, width: 16px; } - .post-format-options .standard { - background: url(../images/post-formats.png) no-repeat -8px -8px; - } - - .post-format-options .image { - background: url(../images/post-formats.png) no-repeat -40px -8px; - } - - .post-format-options .gallery { - background: url(../images/post-formats.png) no-repeat -72px -8px; - } - - .post-format-options .audio { - background: url(../images/post-formats.png) no-repeat -104px -8px; - } - - .post-format-options .video { - background: url(../images/post-formats.png) no-repeat -136px -8px; - } - - .post-format-options .chat { - background: url(../images/post-formats.png) no-repeat -168px -8px; - } - - .post-format-options .status { - background: url(../images/post-formats.png) no-repeat -200px -8px; - } - - .post-format-options .aside { - background: url(../images/post-formats.png) no-repeat -232px -8px; - } - - .post-format-options .quote { - background: url(../images/post-formats.png) no-repeat -264px -8px; - } - - .post-format-options .link { - background: url(../images/post-formats.png) no-repeat -296px -8px; - } } /*------------------------------------------------------------------------------ @@ -9606,11 +9472,6 @@ a.widget-control-edit { background-size: 16px 16px; } - a.post-state-format { - background-image: url(../images/post-formats-2x.png); - background-size: 320px 32px; - } - th .comment-grey-bubble { background-image: url('../images/comment-grey-bubble-2x.png'); background-size: 12px 12px; diff --git a/wp-admin/images/post-formats-2x.png b/wp-admin/images/post-formats-2x.png deleted file mode 100644 index 9b1b950e01..0000000000 Binary files a/wp-admin/images/post-formats-2x.png and /dev/null differ diff --git a/wp-admin/images/post-formats-vs.png b/wp-admin/images/post-formats-vs.png new file mode 100644 index 0000000000..79d42b293c Binary files /dev/null and b/wp-admin/images/post-formats-vs.png differ diff --git a/wp-admin/images/post-formats.png b/wp-admin/images/post-formats.png index 1af1ddf308..868e1637bd 100644 Binary files a/wp-admin/images/post-formats.png and b/wp-admin/images/post-formats.png differ diff --git a/wp-admin/images/post-formats32-vs.png b/wp-admin/images/post-formats32-vs.png new file mode 100644 index 0000000000..042a7e6cb7 Binary files /dev/null and b/wp-admin/images/post-formats32-vs.png differ diff --git a/wp-admin/images/post-formats32.png b/wp-admin/images/post-formats32.png index 9c1239a7b4..1ba1d7bd11 100644 Binary files a/wp-admin/images/post-formats32.png and b/wp-admin/images/post-formats32.png differ