Introduce a new, cross-browser HiDPI CSS @media rule to be used everywhere.
{{{ @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { }}} Serve HiDPI graphics for printing, regardless of screen resolution. Specify Opera's vendor-prefixed device pixel ratio property, for Opera desktop. Specify a minimum Webkit device pixel ratio of 1.25 instead of 1.5, to serve 2x images to Android devices that are between 1 and 1.5x (like the Nexus 7). Firefox and Opera will respond to 1.5x on these devices, but Chrome will not. Specify min-resolution, which covers Firefox 19. Opera on Android also supports min-resolution, but Opera Mini does not support dppx, so the dpi unit is used. props iammattthomas for the exhaustive research. props lessbloat for patching. fixes #22238. git-svn-id: http://core.svn.wordpress.org/trunk@22629 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
0a888e8aa0
commit
7183a9cce9
|
@ -2023,7 +2023,10 @@ div.widgets-sortables,
|
||||||
/**
|
/**
|
||||||
* HiDPI Displays
|
* HiDPI Displays
|
||||||
*/
|
*/
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
@media print,
|
||||||
|
(-o-min-device-pixel-ratio: 5/4),
|
||||||
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||||||
|
(min-resolution: 120dpi) {
|
||||||
|
|
||||||
.curtime #timestamp {
|
.curtime #timestamp {
|
||||||
background-image: url("../images/date-button-2x.gif?ver=20120916");
|
background-image: url("../images/date-button-2x.gif?ver=20120916");
|
||||||
|
|
|
@ -1893,7 +1893,10 @@ div.widgets-sortables,
|
||||||
/**
|
/**
|
||||||
* HiDPI Displays
|
* HiDPI Displays
|
||||||
*/
|
*/
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
@media print,
|
||||||
|
(-o-min-device-pixel-ratio: 5/4),
|
||||||
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||||||
|
(min-resolution: 120dpi) {
|
||||||
|
|
||||||
.curtime #timestamp {
|
.curtime #timestamp {
|
||||||
background-image: url("../images/date-button-2x.gif?ver=20120916");
|
background-image: url("../images/date-button-2x.gif?ver=20120916");
|
||||||
|
|
|
@ -74,7 +74,10 @@ abbr {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
@media print,
|
||||||
|
(-o-min-device-pixel-ratio: 5/4),
|
||||||
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||||||
|
(min-resolution: 120dpi) {
|
||||||
#logo a {
|
#logo a {
|
||||||
background-image: url('../images/wordpress-logo-2x.png?ver=20120412');
|
background-image: url('../images/wordpress-logo-2x.png?ver=20120412');
|
||||||
background-size: 274px 63px;
|
background-size: 274px 63px;
|
||||||
|
|
|
@ -326,7 +326,10 @@ table.not-image tr.image-only {
|
||||||
/**
|
/**
|
||||||
* HiDPI Displays
|
* HiDPI Displays
|
||||||
*/
|
*/
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
@media print,
|
||||||
|
(-o-min-device-pixel-ratio: 5/4),
|
||||||
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||||||
|
(min-resolution: 120dpi) {
|
||||||
|
|
||||||
.image-align-none-label {
|
.image-align-none-label {
|
||||||
background-image: url("../images/align-none-2x.png?ver=20120916");
|
background-image: url("../images/align-none-2x.png?ver=20120916");
|
||||||
|
|
|
@ -2382,7 +2382,10 @@ div.sidebar-name h3 {
|
||||||
/**
|
/**
|
||||||
* HiDPI Displays
|
* HiDPI Displays
|
||||||
*/
|
*/
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
@media print,
|
||||||
|
(-o-min-device-pixel-ratio: 5/4),
|
||||||
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||||||
|
(min-resolution: 120dpi) {
|
||||||
.post-com-count {
|
.post-com-count {
|
||||||
background-image: url('../images/bubble_bg-rtl-2x.gif');
|
background-image: url('../images/bubble_bg-rtl-2x.gif');
|
||||||
background-size: 18px 100px;
|
background-size: 18px 100px;
|
||||||
|
|
|
@ -2362,43 +2362,6 @@ html.wp-toolbar {
|
||||||
padding: 2px 0 8px 32px;
|
padding: 2px 0 8px 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
|
||||||
.welcome-panel .welcome-add-page {
|
|
||||||
background: url('../images/welcome-icons-2x.png') no-repeat 0 -1px;
|
|
||||||
background-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome-panel .welcome-edit-page {
|
|
||||||
background: url('../images/welcome-icons-2x.png') no-repeat 0px -92px;
|
|
||||||
background-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome-panel .welcome-learn-more {
|
|
||||||
background: url('../images/welcome-icons-2x.png') no-repeat 0px -138px;
|
|
||||||
background-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome-panel .welcome-comments {
|
|
||||||
background: url('../images/welcome-icons-2x.png') no-repeat 0px -184px;
|
|
||||||
background-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome-panel .welcome-view-site {
|
|
||||||
background: url('../images/welcome-icons-2x.png') no-repeat 0px -276px;
|
|
||||||
background-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome-panel .welcome-widgets-menus {
|
|
||||||
background: url('../images/welcome-icons-2x.png') no-repeat 1px -230px;
|
|
||||||
background-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome-panel .welcome-write-blog {
|
|
||||||
background: url('../images/welcome-icons-2x.png') no-repeat 0px -46px;
|
|
||||||
background-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome-panel .welcome-panel-column ul {
|
.welcome-panel .welcome-panel-column ul {
|
||||||
margin: 0.8em 1em 1em 0;
|
margin: 0.8em 1em 1em 0;
|
||||||
}
|
}
|
||||||
|
@ -2440,17 +2403,6 @@ html.wp-toolbar {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* HiDPI Displays
|
|
||||||
*/
|
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
|
||||||
|
|
||||||
.welcome-panel .welcome-panel-close:before {
|
|
||||||
background-image: url('../images/xit-2x.gif');
|
|
||||||
background-size: 20px auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*------------------------------------------------------------------------------
|
/*------------------------------------------------------------------------------
|
||||||
10.0 - List Posts (/Pages/etc)
|
10.0 - List Posts (/Pages/etc)
|
||||||
------------------------------------------------------------------------------*/
|
------------------------------------------------------------------------------*/
|
||||||
|
@ -4201,14 +4153,6 @@ td.imgedit-settings input {
|
||||||
margin: 5px 5px 0;
|
margin: 5px 5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
|
||||||
.spinner,
|
|
||||||
.imgedit-wait,
|
|
||||||
.customize-loading #customize-container {
|
|
||||||
background-image: url(../images/wpspin_light-2x.gif);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-float {
|
.no-float {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
@ -4403,22 +4347,6 @@ span.imgedit-scale-warn {
|
||||||
padding: 2px 10px;
|
padding: 2px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* HiDPI Displays
|
|
||||||
*/
|
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
|
||||||
.imgedit-crop,
|
|
||||||
.imgedit-rleft,
|
|
||||||
.imgedit-rright,
|
|
||||||
.imgedit-flipv,
|
|
||||||
.imgedit-fliph,
|
|
||||||
.imgedit-undo,
|
|
||||||
.imgedit-redo {
|
|
||||||
background-image: url('../images/imgedit-icons-2x.png');
|
|
||||||
background-size: 260px 64px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*------------------------------------------------------------------------------
|
/*------------------------------------------------------------------------------
|
||||||
15.0 - Comments Screen
|
15.0 - Comments Screen
|
||||||
------------------------------------------------------------------------------*/
|
------------------------------------------------------------------------------*/
|
||||||
|
@ -5137,12 +5065,6 @@ h2 .nav-tab {
|
||||||
box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
|
box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
|
||||||
.pressthis a span {
|
|
||||||
background-image: url(../images/press-this-2x.png?v=20121105);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*------------------------------------------------------------------------------
|
/*------------------------------------------------------------------------------
|
||||||
20.0 - Settings
|
20.0 - Settings
|
||||||
------------------------------------------------------------------------------*/
|
------------------------------------------------------------------------------*/
|
||||||
|
@ -5689,17 +5611,6 @@ body.full-overlay-active {
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* HiDPI Displays
|
|
||||||
*/
|
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
|
||||||
|
|
||||||
.wp-full-overlay .collapse-sidebar-arrow {
|
|
||||||
background-image: url('../images/arrows-2x.png');
|
|
||||||
background-size: 15px 123px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*------------------------------------------------------------------------------
|
/*------------------------------------------------------------------------------
|
||||||
24.0 - Customize Loader
|
24.0 - Customize Loader
|
||||||
|
@ -6645,18 +6556,6 @@ a.rsswidget {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
|
||||||
.login h1 a {
|
|
||||||
background-image: url('../images/wordpress-logo-2x.png?ver=20120412');
|
|
||||||
background-size: 274px 63px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-badge {
|
|
||||||
background-image: url('../images/wp-badge-2x.png?ver=20120516');
|
|
||||||
background-size: 173px 194px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#login {
|
#login {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
padding: 114px 0 0;
|
padding: 114px 0 0;
|
||||||
|
@ -8429,7 +8328,10 @@ a.widget-control-edit {
|
||||||
/**
|
/**
|
||||||
* HiDPI Displays
|
* HiDPI Displays
|
||||||
*/
|
*/
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
@media print,
|
||||||
|
(-o-min-device-pixel-ratio: 5/4),
|
||||||
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||||||
|
(min-resolution: 120dpi) {
|
||||||
|
|
||||||
.press-this .tagchecklist span a {
|
.press-this .tagchecklist span a {
|
||||||
background-image: url('../images/xit-2x.gif');
|
background-image: url('../images/xit-2x.gif');
|
||||||
|
@ -8478,6 +8380,82 @@ a.widget-control-edit {
|
||||||
background: url('../images/stars-2x.png?ver=20121108') repeat-x top left;
|
background: url('../images/stars-2x.png?ver=20121108') repeat-x top left;
|
||||||
background-size: 21px 37px;
|
background-size: 21px 37px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.welcome-panel .welcome-panel-close:before {
|
||||||
|
background-image: url('../images/xit-2x.gif');
|
||||||
|
background-size: 20px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-panel .welcome-add-page {
|
||||||
|
background: url('../images/welcome-icons-2x.png') no-repeat 0 -1px;
|
||||||
|
background-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-panel .welcome-edit-page {
|
||||||
|
background: url('../images/welcome-icons-2x.png') no-repeat 0px -92px;
|
||||||
|
background-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-panel .welcome-learn-more {
|
||||||
|
background: url('../images/welcome-icons-2x.png') no-repeat 0px -138px;
|
||||||
|
background-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-panel .welcome-comments {
|
||||||
|
background: url('../images/welcome-icons-2x.png') no-repeat 0px -184px;
|
||||||
|
background-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-panel .welcome-view-site {
|
||||||
|
background: url('../images/welcome-icons-2x.png') no-repeat 0px -276px;
|
||||||
|
background-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-panel .welcome-widgets-menus {
|
||||||
|
background: url('../images/welcome-icons-2x.png') no-repeat 1px -230px;
|
||||||
|
background-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-panel .welcome-write-blog {
|
||||||
|
background: url('../images/welcome-icons-2x.png') no-repeat 0px -46px;
|
||||||
|
background-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login h1 a {
|
||||||
|
background-image: url('../images/wordpress-logo-2x.png?ver=20120412');
|
||||||
|
background-size: 274px 63px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-badge {
|
||||||
|
background-image: url('../images/wp-badge-2x.png?ver=20120516');
|
||||||
|
background-size: 173px 194px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-full-overlay .collapse-sidebar-arrow {
|
||||||
|
background-image: url('../images/arrows-2x.png');
|
||||||
|
background-size: 15px 123px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pressthis a span {
|
||||||
|
background-image: url(../images/press-this-2x.png?v=20121105);
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgedit-crop,
|
||||||
|
.imgedit-rleft,
|
||||||
|
.imgedit-rright,
|
||||||
|
.imgedit-flipv,
|
||||||
|
.imgedit-fliph,
|
||||||
|
.imgedit-undo,
|
||||||
|
.imgedit-redo {
|
||||||
|
background-image: url('../images/imgedit-icons-2x.png');
|
||||||
|
background-size: 260px 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner,
|
||||||
|
.imgedit-wait,
|
||||||
|
.customize-loading #customize-container {
|
||||||
|
background-image: url(../images/wpspin_light-2x.gif);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =Localized CSS
|
/* =Localized CSS
|
||||||
|
|
|
@ -406,13 +406,6 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
|
||||||
#wpadminbar .quicklinks li div.blavatar {
|
|
||||||
background: url('../images/wpmini-blue-2x.png') no-repeat;
|
|
||||||
background-size: 16px 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Search
|
* Search
|
||||||
*/
|
*/
|
||||||
|
@ -600,7 +593,10 @@
|
||||||
/**
|
/**
|
||||||
* Retina display 2x icons
|
* Retina display 2x icons
|
||||||
*/
|
*/
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
@media print,
|
||||||
|
(-o-min-device-pixel-ratio: 5/4),
|
||||||
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||||||
|
(min-resolution: 120dpi) {
|
||||||
#wpadminbar .menupop .menupop > .ab-item,
|
#wpadminbar .menupop .menupop > .ab-item,
|
||||||
#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item,
|
#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item,
|
||||||
#wpadminbar #adminbarsearch .adminbar-input,
|
#wpadminbar #adminbarsearch .adminbar-input,
|
||||||
|
@ -611,6 +607,11 @@
|
||||||
background-image: url(../images/admin-bar-sprite-2x.png?d=20120830);
|
background-image: url(../images/admin-bar-sprite-2x.png?d=20120830);
|
||||||
background-size: 20px 220px;
|
background-size: 20px 220px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#wpadminbar .quicklinks li div.blavatar {
|
||||||
|
background: url('../images/wpmini-blue-2x.png') no-repeat;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Skip link */
|
/* Skip link */
|
||||||
|
|
|
@ -2027,7 +2027,10 @@ RTL
|
||||||
|
|
||||||
|
|
||||||
/* HiDPI */
|
/* HiDPI */
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
@media print,
|
||||||
|
(-o-min-device-pixel-ratio: 5/4),
|
||||||
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||||||
|
(min-resolution: 120dpi) {
|
||||||
.wp_themeSkin span.mce_undo,
|
.wp_themeSkin span.mce_undo,
|
||||||
.wp_themeSkin span.mce_redo,
|
.wp_themeSkin span.mce_redo,
|
||||||
.wp_themeSkin span.mce_bullist,
|
.wp_themeSkin span.mce_bullist,
|
||||||
|
|
|
@ -189,7 +189,10 @@
|
||||||
/**
|
/**
|
||||||
* HiDPI Displays
|
* HiDPI Displays
|
||||||
*/
|
*/
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
@media print,
|
||||||
|
(-o-min-device-pixel-ratio: 5/4),
|
||||||
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||||||
|
(min-resolution: 120dpi) {
|
||||||
|
|
||||||
.wp-pointer-buttons a.close:before {
|
.wp-pointer-buttons a.close:before {
|
||||||
background-image: url('../images/xit-2x.gif');
|
background-image: url('../images/xit-2x.gif');
|
||||||
|
|
|
@ -167,7 +167,10 @@ margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = d
|
||||||
width: 15px;
|
width: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
@media print,
|
||||||
|
(-o-min-device-pixel-ratio: 5/4),
|
||||||
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||||||
|
(min-resolution: 120dpi) {
|
||||||
.tb-close-icon {
|
.tb-close-icon {
|
||||||
background: url('tb-close-2x.png') no-repeat;
|
background: url('tb-close-2x.png') no-repeat;
|
||||||
background-size: 15px;
|
background-size: 15px;
|
||||||
|
|
|
@ -412,7 +412,13 @@ body#media-upload.rtl ul#sidemenu {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
/**
|
||||||
|
* Retina display 2x icons
|
||||||
|
*/
|
||||||
|
@media print,
|
||||||
|
(-o-min-device-pixel-ratio: 5/4),
|
||||||
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||||||
|
(min-resolution: 120dpi) {
|
||||||
.image-align-none-label {
|
.image-align-none-label {
|
||||||
background: url(../../../../../../wp-admin/images/align-none-2x.png) no-repeat center left;
|
background: url(../../../../../../wp-admin/images/align-none-2x.png) no-repeat center left;
|
||||||
background-size: auto 15px;
|
background-size: auto 15px;
|
||||||
|
|
Loading…
Reference in New Issue