From bd4e4a7eeba183b01eec9b50265d3345f2a2a0b0 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 14 Mar 2011 23:47:16 -0400 Subject: [PATCH] updated the retina sprite targeting to specifically apply to the icons in the sprite, and nothing broader. Credit for this commit goes to Adam Messinger (@adammessinger). Thanks Adam! --- themes/default/jquery.mobile.theme.css | 23 ++++++++++++++++------- themes/valencia/jquery.mobile.theme.css | 23 ++++++++++++++++------- 2 files changed, 32 insertions(+), 14 deletions(-) diff --git a/themes/default/jquery.mobile.theme.css b/themes/default/jquery.mobile.theme.css index fbc79eb0..5a3c743f 100755 --- a/themes/default/jquery.mobile.theme.css +++ b/themes/default/jquery.mobile.theme.css @@ -740,14 +740,23 @@ a.ui-link-inherit { /* HD/"retina" sprite -----------------------------------------------------------------------------------------------------------*/ -@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) { - .ui-icon { - background-image: url(images/icons-36-white.png); - background-size: 630px 18px; -} +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), + only screen and (min--moz-device-pixel-ratio: 1.5), + only screen and (min-resolution: 240dpi) { + + .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r, + .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check, + .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back, + .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search { + background-image: url(images/icons-36-white.png); + -moz-background-size: 630px 18px; + -o-background-size: 630px 18px; + -webkit-background-size: 630px 18px; + background-size: 630px 18px; + } .ui-icon-black { - background-image: url(images/icons-36-black.png); -} + background-image: url(images/icons-36-black.png); + } } /* plus minus */ diff --git a/themes/valencia/jquery.mobile.theme.css b/themes/valencia/jquery.mobile.theme.css index df7ab773..ee60405c 100644 --- a/themes/valencia/jquery.mobile.theme.css +++ b/themes/valencia/jquery.mobile.theme.css @@ -734,14 +734,23 @@ a.ui-link-inherit { /* HD/"retina" sprite -----------------------------------------------------------------------------------------------------------*/ -@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) { - .ui-icon { - background-image: url(images/icons-36-white.png); - background-size: 630px 18px; -} +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), + only screen and (min--moz-device-pixel-ratio: 1.5), + only screen and (min-resolution: 240dpi) { + + .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r, + .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check, + .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back, + .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search { + background-image: url(images/icons-36-white.png); + -moz-background-size: 630px 18px; + -o-background-size: 630px 18px; + -webkit-background-size: 630px 18px; + background-size: 630px 18px; + } .ui-icon-black { - background-image: url(images/icons-36-black.png); -} + background-image: url(images/icons-36-black.png); + } } /* plus minus */