diff --git a/admin/css/style.css b/admin/css/style.css index c87b5f50..ade4c149 100644 --- a/admin/css/style.css +++ b/admin/css/style.css @@ -1408,112 +1408,177 @@ a.operate-reply { /** * icons */ -/* line 8, ../scss/_icons.scss */ +/* line 29, ../scss/_icons.scss */ .i-edit, .i-delete, .i-exlink, .mime-office, .mime-text, .mime-image, .mime-html, .mime-archive, .mime-application, .mime-audio, .mime-script, .mime-video, .mime-unknow, .i-upload, .i-upload-active { display: inline-block; vertical-align: text-bottom; - background: url('../img/icons-sba2b1299ac.png') no-repeat; - text-indent: -9999em; } - /* line 13, ../scss/_icons.scss */ + text-indent: -9999em; + background-image: url('../img/icons-sba2b1299ac.png'); + background-repeat: no-repeat; } + /* line 35, ../scss/_icons.scss */ .i-edit:hover, .i-delete:hover, .i-exlink:hover, .mime-office:hover, .mime-text:hover, .mime-image:hover, .mime-html:hover, .mime-archive:hover, .mime-application:hover, .mime-audio:hover, .mime-script:hover, .mime-video:hover, .mime-unknow:hover, .i-upload:hover, .i-upload-active:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); opacity: 0.75; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 29, ../scss/_icons.scss */ + .i-edit, .i-delete, .i-exlink, .mime-office, .mime-text, .mime-image, .mime-html, .mime-archive, .mime-application, .mime-audio, .mime-script, .mime-video, .mime-unknow, .i-upload, .i-upload-active { + -webkit-background-size: auto 256px; + -moz-background-size: auto 256px; + -o-background-size: auto 256px; + background-size: auto 256px; + background-image: url('../img/icons-2x-se223d6d340.png'); } } -/* line 18, ../scss/_icons.scss */ +/* line 47, ../scss/_icons.scss */ .i-edit, .i-delete, .i-exlink, .mime-office, .mime-text, .mime-image, .mime-html, .mime-archive, .mime-application, .mime-audio, .mime-script, .mime-video, .mime-unknow { width: 16px; height: 16px; } -/* line 24, ../scss/_icons.scss */ +/* line 53, ../scss/_icons.scss */ .i-upload, .i-upload-active { width: 24px; height: 24px; } -/* line 30, ../scss/_icons.scss */ +/* line 59, ../scss/_icons.scss */ .i-edit { background-position: 0 -80px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 59, ../scss/_icons.scss */ + .i-edit { + background-position: 0 -80px; } } -/* line 34, ../scss/_icons.scss */ +/* line 63, ../scss/_icons.scss */ .i-delete { background-position: 0 -64px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 63, ../scss/_icons.scss */ + .i-delete { + background-position: 0 -64px; } } -/* line 42, ../scss/_icons.scss */ +/* line 71, ../scss/_icons.scss */ .i-upload { background-position: 0 -24px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 71, ../scss/_icons.scss */ + .i-upload { + background-position: 0 -24px; } } -/* line 47, ../scss/_icons.scss */ +/* line 76, ../scss/_icons.scss */ .i-upload-active { background-position: 0 0; } -/* line 53, ../scss/_icons.scss */ +/* line 82, ../scss/_icons.scss */ .i-caret-up, .i-caret-down, .i-caret-left, .i-caret-right { display: inline-block; border-style: solid; border-color: transparent transparent #BBB transparent; border-width: 3px 4px 5px; } -/* line 59, ../scss/_icons.scss */ +/* line 88, ../scss/_icons.scss */ .i-caret-down { border-color: #BBB transparent transparent transparent; border-width: 5px 4px 3px; } -/* line 63, ../scss/_icons.scss */ +/* line 92, ../scss/_icons.scss */ .i-caret-left { border-color: transparent #BBB transparent transparent; border-width: 4px 5px 4px 3px; } -/* line 67, ../scss/_icons.scss */ +/* line 96, ../scss/_icons.scss */ .i-caret-right { border-color: transparent transparent transparent #BBB; border-width: 4px 3px 4px 5px; } -/* line 72, ../scss/_icons.scss */ +/* line 101, ../scss/_icons.scss */ .i-exlink { background-position: 0 -48px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 101, ../scss/_icons.scss */ + .i-exlink { + background-position: 0 -48px; } } /* 文件类型图标 */ -/* line 80, ../scss/_icons.scss */ +/* line 109, ../scss/_icons.scss */ .mime-office { background-position: 0 -128px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 109, ../scss/_icons.scss */ + .mime-office { + background-position: 0 -112px; } } -/* line 85, ../scss/_icons.scss */ +/* line 114, ../scss/_icons.scss */ .mime-text { background-position: 0 -208px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 114, ../scss/_icons.scss */ + .mime-text { + background-position: 0 -208px; } } -/* line 90, ../scss/_icons.scss */ +/* line 119, ../scss/_icons.scss */ .mime-image { background-position: 0 -96px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 119, ../scss/_icons.scss */ + .mime-image { + background-position: 0 -96px; } } -/* line 95, ../scss/_icons.scss */ +/* line 124, ../scss/_icons.scss */ .mime-html { background-position: 0 -144px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 124, ../scss/_icons.scss */ + .mime-html { + background-position: 0 -144px; } } -/* line 100, ../scss/_icons.scss */ +/* line 129, ../scss/_icons.scss */ .mime-archive { background-position: 0 -224px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 129, ../scss/_icons.scss */ + .mime-archive { + background-position: 0 -224px; } } -/* line 105, ../scss/_icons.scss */ +/* line 134, ../scss/_icons.scss */ .mime-application { background-position: 0 -160px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 134, ../scss/_icons.scss */ + .mime-application { + background-position: 0 -176px; } } -/* line 110, ../scss/_icons.scss */ +/* line 139, ../scss/_icons.scss */ .mime-audio { background-position: 0 -240px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 139, ../scss/_icons.scss */ + .mime-audio { + background-position: 0 -240px; } } -/* line 115, ../scss/_icons.scss */ +/* line 144, ../scss/_icons.scss */ .mime-script { background-position: 0 -176px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 144, ../scss/_icons.scss */ + .mime-script { + background-position: 0 -160px; } } -/* line 120, ../scss/_icons.scss */ +/* line 149, ../scss/_icons.scss */ .mime-video { background-position: 0 -112px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 149, ../scss/_icons.scss */ + .mime-video { + background-position: 0 -128px; } } -/* line 125, ../scss/_icons.scss */ +/* line 154, ../scss/_icons.scss */ .mime-unknow { background-position: 0 -192px; } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + /* line 154, ../scss/_icons.scss */ + .mime-unknow { + background-position: 0 -192px; } } /* Logo 图标 */ -/* line 132, ../scss/_icons.scss */ +/* line 161, ../scss/_icons.scss */ .i-logo, .i-logo-s { width: 169px; height: 40px; @@ -1526,12 +1591,12 @@ a.operate-reply { background-size: auto 40px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=15); opacity: 0.15; } - /* line 140, ../scss/_icons.scss */ + /* line 169, ../scss/_icons.scss */ .i-logo:hover, .i-logo-s:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); opacity: 0.2; } -/* line 144, ../scss/_icons.scss */ +/* line 173, ../scss/_icons.scss */ .i-logo-s { width: 26px; height: 26px; @@ -1589,10 +1654,10 @@ a.operate-reply { /* line 46, ../scss/components/_editor.scss */ #wmd-button-row span { background-image: url(../img/editor@2x.png); - -webkit-background-size: 320px 60px; - -moz-background-size: 320px 60px; - -o-background-size: 320px 60px; - background-size: 320px 60px; } } + -webkit-background-size: 320px auto; + -moz-background-size: 320px auto; + -o-background-size: 320px auto; + background-size: 320px auto; } } /* line 53, ../scss/components/_editor.scss */ .wmd-edittab { float: right; diff --git a/admin/img/icons-2x-se223d6d340.png b/admin/img/icons-2x-se223d6d340.png new file mode 100644 index 00000000..71b1f879 Binary files /dev/null and b/admin/img/icons-2x-se223d6d340.png differ diff --git a/admin/img/icons-2x/icon-delete-2x.png b/admin/img/icons-2x/icon-delete.png similarity index 100% rename from admin/img/icons-2x/icon-delete-2x.png rename to admin/img/icons-2x/icon-delete.png diff --git a/admin/img/icons-2x/icon-edit-2x.png b/admin/img/icons-2x/icon-edit.png similarity index 100% rename from admin/img/icons-2x/icon-edit-2x.png rename to admin/img/icons-2x/icon-edit.png diff --git a/admin/img/icons-2x/icon-exlink-2x.png b/admin/img/icons-2x/icon-exlink.png similarity index 100% rename from admin/img/icons-2x/icon-exlink-2x.png rename to admin/img/icons-2x/icon-exlink.png diff --git a/admin/img/icons-2x/icon-upload-active-2x.png b/admin/img/icons-2x/icon-upload-active.png similarity index 100% rename from admin/img/icons-2x/icon-upload-active-2x.png rename to admin/img/icons-2x/icon-upload-active.png diff --git a/admin/img/icons-2x/icon-upload-2x.png b/admin/img/icons-2x/icon-upload.png similarity index 100% rename from admin/img/icons-2x/icon-upload-2x.png rename to admin/img/icons-2x/icon-upload.png diff --git a/admin/img/icons-2x/mime-application-2x.png b/admin/img/icons-2x/mime-application.png similarity index 100% rename from admin/img/icons-2x/mime-application-2x.png rename to admin/img/icons-2x/mime-application.png diff --git a/admin/img/icons-2x/mime-archive-2x.png b/admin/img/icons-2x/mime-archive.png similarity index 100% rename from admin/img/icons-2x/mime-archive-2x.png rename to admin/img/icons-2x/mime-archive.png diff --git a/admin/img/icons-2x/mime-audio-2x.png b/admin/img/icons-2x/mime-audio.png similarity index 100% rename from admin/img/icons-2x/mime-audio-2x.png rename to admin/img/icons-2x/mime-audio.png diff --git a/admin/img/icons-2x/mime-html-2x.png b/admin/img/icons-2x/mime-html.png similarity index 100% rename from admin/img/icons-2x/mime-html-2x.png rename to admin/img/icons-2x/mime-html.png diff --git a/admin/img/icons-2x/mime-image-2x.png b/admin/img/icons-2x/mime-image.png similarity index 100% rename from admin/img/icons-2x/mime-image-2x.png rename to admin/img/icons-2x/mime-image.png diff --git a/admin/img/icons-2x/mime-office-2x.png b/admin/img/icons-2x/mime-office.png similarity index 100% rename from admin/img/icons-2x/mime-office-2x.png rename to admin/img/icons-2x/mime-office.png diff --git a/admin/img/icons-2x/mime-script-2x.png b/admin/img/icons-2x/mime-script.png similarity index 100% rename from admin/img/icons-2x/mime-script-2x.png rename to admin/img/icons-2x/mime-script.png diff --git a/admin/img/icons-2x/mime-text-2x.png b/admin/img/icons-2x/mime-text.png similarity index 100% rename from admin/img/icons-2x/mime-text-2x.png rename to admin/img/icons-2x/mime-text.png diff --git a/admin/img/icons-2x/mime-unknow-2x.png b/admin/img/icons-2x/mime-unknow.png similarity index 100% rename from admin/img/icons-2x/mime-unknow-2x.png rename to admin/img/icons-2x/mime-unknow.png diff --git a/admin/img/icons-2x/mime-video-2x.png b/admin/img/icons-2x/mime-video.png similarity index 100% rename from admin/img/icons-2x/mime-video-2x.png rename to admin/img/icons-2x/mime-video.png diff --git a/admin/scss/_icons.scss b/admin/scss/_icons.scss index 83beeff8..1992149d 100644 --- a/admin/scss/_icons.scss +++ b/admin/scss/_icons.scss @@ -1,18 +1,47 @@ /** * icons */ +$sprites: sprite-map("icons/*.png"); +$sprites-retina: sprite-map("icons-2x/*.png"); + +@mixin sprite-background($name) { + // background-image: sprite-url($sprites); + background-position: sprite-position($sprites, $name); + // background-repeat: no-repeat; + // display: block; + // height: image-height(sprite-file($sprites, $name)); + // width: image-width(sprite-file($sprites, $name)); + @media + (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi) { + // Workaround for https://gist.github.com/2140082 + @if (sprite-position($sprites, $name) != sprite-position($sprites-retina, $name)) { + $ypos: round(nth(sprite-position($sprites-retina, $name), 2) / 2); + background-position: 0 $ypos; + } + // Hard coded width of the normal sprite image. There must be a smarter way to do this. + // @include background-size(auto 256px); + // background-image: sprite-url($sprites-retina); + } +} -$icons: sprite-map("icons/*.png"); -$icons-2x: sprite-map("icons-2x/*.png"); %i-base { display: inline-block; vertical-align: text-bottom; - background: $icons no-repeat; text-indent: -9999em; + background-image: sprite-url($sprites); + background-repeat: no-repeat; &:hover { @include opacity(0.75); } + @media + (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi) { + // Hard coded width of the normal sprite image. There must be a smarter way to do this. + @include background-size(auto 256px); + background-image: sprite-url($sprites-retina); + } } %i-16 { @@ -29,11 +58,11 @@ $icons-2x: sprite-map("icons-2x/*.png"); .i-edit { @extend %i-16; - background-position: sprite-position($icons, icon-edit); + @include sprite-background(icon-edit); } .i-delete { @extend %i-16; - background-position: sprite-position($icons, icon-delete); + @include sprite-background(icon-delete); } @@ -41,12 +70,12 @@ $icons-2x: sprite-map("icons-2x/*.png"); .i-upload { @extend %i-24; - background-position: sprite-position($icons, icon-upload); + @include sprite-background(icon-upload); } .i-upload-active { @extend %i-24; - background-position: sprite-position($icons, icon-upload-active); + @include sprite-background(icon-upload-active); } // 小箭头 @@ -71,7 +100,7 @@ $icons-2x: sprite-map("icons-2x/*.png"); .i-exlink { @extend %i-16; - background-position: sprite-position($icons, icon-exlink); + @include sprite-background(icon-exlink); } @@ -79,52 +108,52 @@ $icons-2x: sprite-map("icons-2x/*.png"); .mime-office { @extend %i-16; - background-position: sprite-position($icons, mime-office); + @include sprite-background(mime-office); } .mime-text { @extend %i-16; - background-position: sprite-position($icons, mime-text); + @include sprite-background(mime-text); } .mime-image { @extend %i-16; - background-position: sprite-position($icons, mime-image); + @include sprite-background(mime-image); } .mime-html { @extend %i-16; - background-position: sprite-position($icons, mime-html); + @include sprite-background(mime-html); } .mime-archive { @extend %i-16; - background-position: sprite-position($icons, mime-archive); + @include sprite-background(mime-archive); } .mime-application { @extend %i-16; - background-position: sprite-position($icons, mime-application); + @include sprite-background(mime-application); } .mime-audio { @extend %i-16; - background-position: sprite-position($icons, mime-audio); + @include sprite-background(mime-audio); } .mime-script { @extend %i-16; - background-position: sprite-position($icons, mime-script); + @include sprite-background(mime-script); } .mime-video { @extend %i-16; - background-position: sprite-position($icons, mime-video); + @include sprite-background(mime-video); } .mime-unknow { @extend %i-16; - background-position: sprite-position($icons, mime-unknow); + @include sprite-background(mime-unknow); } diff --git a/admin/scss/components/_editor.scss b/admin/scss/components/_editor.scss index 96adabec..2d9b68f4 100644 --- a/admin/scss/components/_editor.scss +++ b/admin/scss/components/_editor.scss @@ -45,7 +45,7 @@ (min-resolution: 192dpi) { #wmd-button-row span { background-image: url(../img/editor@2x.png); - @include background-size(320px 60px); + @include background-size(320px auto); } }