Changeset 24294

Timestamp:

05/19/2013 02:05:52 AM (12 years ago)

Author:

azaozz

Message:

Post format retina icons for both color themes, props melchoyce, aaroncampbell. See #24290, see #24331.

Location:

trunk/wp-admin

Files:

• css/colors-classic.css (modified) (2 diffs)
• css/colors-fresh.css (modified) (2 diffs)
• css/wp-admin.css (modified) (5 diffs)
• images/post-formats-2x.png (deleted)
• images/post-formats-vs.png (added)
• images/post-formats.png (modified) (previous)
• images/post-formats32-vs.png (added)
• images/post-formats32.png (modified) (previous)

trunk/wp-admin/css/colors-classic.css

@@ -1461 +1461 @@
 /* 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 {
@@ -2281 +2444 @@
         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;
+    }
+}

trunk/wp-admin/css/colors-fresh.css

@@ -1355 +1355 @@
 /* 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 {
@@ -2169 +2332 @@
         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;
+    }
+}

trunk/wp-admin/css/wp-admin.css

@@ -2699 +2699 @@
     width: 16px;
     margin-right: 5px;
-    background-image: url(../images/post-formats.png);
     background-repeat: no-repeat;
     text-indent: -999em;
@@ -4166 +4165 @@
 }
 
-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;
@@ -4282 +4231 @@
 }
 
-.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 {
@@ -4336 +4241 @@
     }
 
-    .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;
-    }
 }
 
@@ -9607 +9473 @@
     }
 
-    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');