From 31072a0726e510da696999c9f368811ee37166d8 Mon Sep 17 00:00:00 2001 From: joyqi Date: Fri, 15 May 2020 15:08:36 +0800 Subject: [PATCH] fix icons retina display --- admin/css/style.css | 41 ++++++++++++++++++++++---- admin/src/scss/_icons.scss | 32 ++++++++++++++++---- admin/src/scss/components/_editor.scss | 34 ++++++++++++++++++--- 3 files changed, 91 insertions(+), 16 deletions(-) diff --git a/admin/css/style.css b/admin/css/style.css index 9f021dfa..ec70e703 100644 --- a/admin/css/style.css +++ b/admin/css/style.css @@ -556,7 +556,7 @@ a.operate-reply { color: #545c30; } .icons-mime-video { background-position: 0 -192px; width: 16px; height: 16px; } -@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .icons-sprite, .icons-icon-delete, .icons-icon-edit, .icons-icon-exlink, .icons-icon-upload-active, .icons-icon-upload, .icons-mime-application, .icons-mime-archive, .icons-mime-audio, .icons-mime-html, .icons-mime-image, .icons-mime-office, .icons-mime-script, .icons-mime-text, .icons-mime-unknow, .icons-mime-video { background-image: url("../img/icons@2x.png?_=e65bc46"); background-repeat: no-repeat; background-size: 24px 256px; } +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .icons-sprite, .icons-icon-delete, .icons-icon-edit, .icons-icon-exlink, .icons-icon-upload-active, .icons-icon-upload, .icons-mime-application, .icons-mime-archive, .icons-mime-audio, .icons-mime-html, .icons-mime-image, .icons-mime-office, .icons-mime-script, .icons-mime-text, .icons-mime-unknow, .icons-mime-video, .i-edit, .i-delete, .i-upload, .i-upload-active, .i-exlink, .mime-office, .mime-text, .mime-image, .mime-html, .mime-archive, .mime-application, .mime-audio, .mime-script, .mime-video, .mime-unknow { background-image: url("../img/icons@2x.png?_=e65bc46"); background-repeat: no-repeat; background-size: 24px 256px; } .icons-icon-delete { background-position: 0 -16px; } .icons-icon-edit { background-position: 0 -112px; } .icons-icon-exlink { background-position: 0 -32px; } @@ -572,15 +572,29 @@ a.operate-reply { color: #545c30; } .icons-mime-script { background-position: 0 -176px; } .icons-mime-text { background-position: 0 -64px; } .icons-mime-unknow { background-position: 0 -48px; } - .icons-mime-video { background-position: 0 -192px; } } + .icons-mime-video { background-position: 0 -192px; } + .i-edit { background-position: 0 -112px; } + .i-delete { background-position: 0 -16px; } + .i-upload { background-position: 0 -208px; } + .i-upload:active, .i-upload.icon-upload-active { background-position: 0 -232px; } + .i-upload-active { background-position: 0 -232px; } + .i-exlink { background-position: 0 -32px; } + .mime-office { background-position: 0 -160px; } + .mime-text { background-position: 0 -64px; } + .mime-image { background-position: 0 -144px; } + .mime-html { background-position: 0 -128px; } + .mime-archive { background-position: 0 -96px; } + .mime-application { background-position: 0 -80px; } + .mime-audio { background-position: 0 0; } + .mime-script { background-position: 0 -176px; } + .mime-video { background-position: 0 -192px; } + .mime-unknow { background-position: 0 -48px; } } /* @mixin sprite-background($name) { // background-image: sprite-url($sprites); // background-position: sprite-position($sprites, $name); @include icons-sprite($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) { @include icons-2x-sprite($name); // 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); } } */ .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; text-indent: -9999em; } .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 { opacity: 0.75; } -@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .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 { background-size: auto 256px; } } - .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; } .i-upload, .i-upload-active { width: 24px; height: 24px; } @@ -668,7 +682,7 @@ a.operate-reply { color: #545c30; } .editor-editor-undo { background-position: 0 -280px; width: 20px; height: 20px; } -@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .editor-sprite, .editor-editor-bold, .editor-editor-code, .editor-editor-exit-fullscreen, .editor-editor-fullscreen, .editor-editor-heading, .editor-editor-hr, .editor-editor-image, .editor-editor-italic, .editor-editor-link, .editor-editor-more, .editor-editor-olist, .editor-editor-quote, .editor-editor-redo, .editor-editor-ulist, .editor-editor-undo { background-image: url("../img/editor@2x.png?_=f3643ed"); background-repeat: no-repeat; background-size: 20px 300px; } +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .editor-sprite, .editor-editor-bold, .editor-editor-code, .editor-editor-exit-fullscreen, .editor-editor-fullscreen, .editor-editor-heading, .editor-editor-hr, .editor-editor-image, .editor-editor-italic, .editor-editor-link, .editor-editor-more, .editor-editor-olist, .editor-editor-quote, .editor-editor-redo, .editor-editor-ulist, .editor-editor-undo, .wmd-button-row li#wmd-bold-button span, .wmd-button-row li#wmd-italic-button span, .wmd-button-row li#wmd-link-button span, .wmd-button-row li#wmd-quote-button span, .wmd-button-row li#wmd-code-button span, .wmd-button-row li#wmd-image-button span, .wmd-button-row li#wmd-olist-button span, .wmd-button-row li#wmd-ulist-button span, .wmd-button-row li#wmd-heading-button span, .wmd-button-row li#wmd-hr-button span, .wmd-button-row li#wmd-more-button span, .wmd-button-row li#wmd-undo-button span, .wmd-button-row li#wmd-redo-button span, .wmd-button-row li#wmd-fullscreen-button span, .wmd-button-row li#wmd-exit-fullscreen-button span { background-image: url("../img/editor@2x.png?_=f3643ed"); background-repeat: no-repeat; background-size: 20px 300px; } .editor-editor-bold { background-position: 0 -20px; } .editor-editor-code { background-position: 0 -140px; } .editor-editor-exit-fullscreen { background-position: 0 -40px; } @@ -683,7 +697,22 @@ a.operate-reply { color: #545c30; } .editor-editor-quote { background-position: 0 -220px; } .editor-editor-redo { background-position: 0 -240px; } .editor-editor-ulist { background-position: 0 -260px; } - .editor-editor-undo { background-position: 0 -280px; } } + .editor-editor-undo { background-position: 0 -280px; } + .wmd-button-row li#wmd-bold-button span { background-position: 0 -20px; } + .wmd-button-row li#wmd-italic-button span { background-position: 0 0; } + .wmd-button-row li#wmd-link-button span { background-position: 0 -160px; } + .wmd-button-row li#wmd-quote-button span { background-position: 0 -220px; } + .wmd-button-row li#wmd-code-button span { background-position: 0 -140px; } + .wmd-button-row li#wmd-image-button span { background-position: 0 -120px; } + .wmd-button-row li#wmd-olist-button span { background-position: 0 -200px; } + .wmd-button-row li#wmd-ulist-button span { background-position: 0 -260px; } + .wmd-button-row li#wmd-heading-button span { background-position: 0 -80px; } + .wmd-button-row li#wmd-hr-button span { background-position: 0 -100px; } + .wmd-button-row li#wmd-more-button span { background-position: 0 -180px; } + .wmd-button-row li#wmd-undo-button span { background-position: 0 -280px; } + .wmd-button-row li#wmd-redo-button span { background-position: 0 -240px; } + .wmd-button-row li#wmd-fullscreen-button span { background-position: 0 -60px; } + .wmd-button-row li#wmd-exit-fullscreen-button span { background-position: 0 -40px; } } .wmd-button-row { list-style: none; margin: 0; padding: 0; height: 26px; line-height: 1; } diff --git a/admin/src/scss/_icons.scss b/admin/src/scss/_icons.scss index d2ea79d1..4c99689a 100644 --- a/admin/src/scss/_icons.scss +++ b/admin/src/scss/_icons.scss @@ -9,6 +9,32 @@ (min-resolution: 192dpi) { @import "icons/*@2x.png"; @include all-icons-sprites(); + + @mixin icon-style($type, $name) { + .#{$type}-#{$name} { + @if $type == i { + @include icons-sprite(icon-#{$name}); + } @else { + @include icons-sprite(#{mime}-#{$name}); + } + } + } + + @include icon-style(i, edit) + @include icon-style(i, delete) + @include icon-style(i, upload) + @include icon-style(i, upload-active) + @include icon-style(i, exlink) + @include icon-style(mime, office) + @include icon-style(mime, text) + @include icon-style(mime, image) + @include icon-style(mime, html) + @include icon-style(mime, archive) + @include icon-style(mime, application) + @include icon-style(mime, audio) + @include icon-style(mime, script) + @include icon-style(mime, video) + @include icon-style(mime, unknow) } /* @@ -43,12 +69,6 @@ &:hover { 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. - background-size: auto 256px; - } } %i-16 { diff --git a/admin/src/scss/components/_editor.scss b/admin/src/scss/components/_editor.scss index 43b41bbf..e8ffdbd6 100644 --- a/admin/src/scss/components/_editor.scss +++ b/admin/src/scss/components/_editor.scss @@ -8,16 +8,42 @@ @import "editor/*.png"; @include all-editor-sprites(true); +@mixin editor-button($name) { + &#wmd-#{$name}-button span { + @include editor-sprite(editor-#{$name}) + } +} + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @import "editor/*@2x.png"; @include all-editor-sprites(); -} -@mixin editor-button($name) { - &#wmd-#{$name}-button span { - @include editor-sprite(editor-#{$name}) + @mixin editor-button-2x($name) { + &#wmd-#{$name}-button span { + @include editor-sprite(editor-#{$name}) + } + } + + .wmd-button-row { + li { + @include editor-button-2x(bold) + @include editor-button-2x(italic) + @include editor-button-2x(link) + @include editor-button-2x(quote) + @include editor-button-2x(code) + @include editor-button-2x(image) + @include editor-button-2x(olist) + @include editor-button-2x(ulist) + @include editor-button-2x(heading) + @include editor-button-2x(hr) + @include editor-button-2x(more) + @include editor-button-2x(undo) + @include editor-button-2x(redo) + @include editor-button-2x(fullscreen) + @include editor-button-2x(exit-fullscreen) + } } }