diff --git a/app/img/icons/AboutLogos_1x.png b/app/img/icons/AboutLogos.png similarity index 100% rename from app/img/icons/AboutLogos_1x.png rename to app/img/icons/AboutLogos.png diff --git a/app/img/icons/Checks1_1x.png b/app/img/icons/Checks1.png similarity index 100% rename from app/img/icons/Checks1_1x.png rename to app/img/icons/Checks1.png diff --git a/app/img/icons/Checks2_1x.png b/app/img/icons/Checks2.png similarity index 100% rename from app/img/icons/Checks2_1x.png rename to app/img/icons/Checks2.png diff --git a/app/img/icons/General.png b/app/img/icons/General.png index aa2e7ec8..045dccad 100644 Binary files a/app/img/icons/General.png and b/app/img/icons/General.png differ diff --git a/app/img/icons/General_1x.png b/app/img/icons/General_1x.png deleted file mode 100644 index 045dccad..00000000 Binary files a/app/img/icons/General_1x.png and /dev/null differ diff --git a/app/img/icons/General_2x.png b/app/img/icons/General_2x.png new file mode 100644 index 00000000..aa2e7ec8 Binary files /dev/null and b/app/img/icons/General_2x.png differ diff --git a/app/img/icons/IconsetSmiles.png b/app/img/icons/IconsetSmiles.png index 6618c24b..b244cb76 100644 Binary files a/app/img/icons/IconsetSmiles.png and b/app/img/icons/IconsetSmiles.png differ diff --git a/app/img/icons/IconsetSmiles_1x.png b/app/img/icons/IconsetSmiles_1x.png deleted file mode 100644 index b244cb76..00000000 Binary files a/app/img/icons/IconsetSmiles_1x.png and /dev/null differ diff --git a/app/img/icons/IconsetSmiles_2x.png b/app/img/icons/IconsetSmiles_2x.png new file mode 100644 index 00000000..6618c24b Binary files /dev/null and b/app/img/icons/IconsetSmiles_2x.png differ diff --git a/app/img/icons/IconsetW.png b/app/img/icons/IconsetW.png index 39e592bf..92d5ec04 100644 Binary files a/app/img/icons/IconsetW.png and b/app/img/icons/IconsetW.png differ diff --git a/app/img/icons/IconsetW_1x.png b/app/img/icons/IconsetW_1x.png deleted file mode 100644 index 92d5ec04..00000000 Binary files a/app/img/icons/IconsetW_1x.png and /dev/null differ diff --git a/app/img/icons/IconsetW_2x.png b/app/img/icons/IconsetW_2x.png new file mode 100644 index 00000000..39e592bf Binary files /dev/null and b/app/img/icons/IconsetW_2x.png differ diff --git a/app/img/icons/MobileIcons_1x.png b/app/img/icons/MobileIcons.png similarity index 100% rename from app/img/icons/MobileIcons_1x.png rename to app/img/icons/MobileIcons.png diff --git a/app/img/icons/PhotoIcons.png b/app/img/icons/PhotoIcons.png index 70e31b97..93f4ba86 100644 Binary files a/app/img/icons/PhotoIcons.png and b/app/img/icons/PhotoIcons.png differ diff --git a/app/img/icons/PhotoIcons_1x.png b/app/img/icons/PhotoIcons_1x.png deleted file mode 100644 index 93f4ba86..00000000 Binary files a/app/img/icons/PhotoIcons_1x.png and /dev/null differ diff --git a/app/img/icons/PhotoIcons_2x.png b/app/img/icons/PhotoIcons_2x.png new file mode 100644 index 00000000..70e31b97 Binary files /dev/null and b/app/img/icons/PhotoIcons_2x.png differ diff --git a/app/less/app.less b/app/less/app.less index 6d2dacba..e0c8da13 100644 --- a/app/less/app.less +++ b/app/less/app.less @@ -495,16 +495,12 @@ a { i { display: inline-block; - background: url(../img/icons/IconsetW.png) -15px -320px no-repeat; - background-size: 42px 1171px; width: 12px; height: 12px; margin: 21px; opacity: 0.8; - - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -15px -320px; } } @@ -849,17 +845,19 @@ a.tg_radio_on:hover i.icon-radio { height: 30px; display: inline-block; vertical-align: top; - background: url(../img/icons/General.png) no-repeat -5px -10px; - background-size: 40px 778px; margin-right: 18px; + + .image-2x('../img/icons/General.png', 40px, 778px); + background-position: -5px -10px; } .icon-tg-title { width: 63px; height: 16px; display: inline-block; vertical-align: middle; - background: url(../img/Telegram_2x.png) no-repeat 0 0; - background-size: 63px 16px; + + .image-2x('../img/Telegram.png', 63px, 16px); + background-position: 0 0; } .login_head_submit_wrap, .login_head_submit_progress { @@ -887,10 +885,11 @@ a.tg_radio_on:hover i.icon-radio { height: 12px; display: inline-block; vertical-align: middle; - background: url(../img/icons/General.png) no-repeat -18px -50px; - background-size: 40px 778px; margin-left: 12px; margin-top: -1px; + + .image-2x('../img/icons/General.png', 40px, 778px); + background-position: -18px -50px; } .login_footer_wrap { @@ -1033,22 +1032,19 @@ a.tg_radio_on:hover i.icon-radio { .im_dialogs_search_field { font-size: 12px; line-height: normal; - background: #F2F2F2 url(../img/icons/IconsetW.png) -6px -205px no-repeat; - background-size: 42px 1171px; border: 1px solid #F2F2F2; border-radius: 2px; padding: 6px 20px 6px 30px; margin: 0 0 6px; + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -6px -205px; + .im_dialogs_modal_col_wrap & { background-color: #fff; border-color: #d9dbde; } - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } - &:focus, &:active { background-color: #fff; @@ -1080,12 +1076,8 @@ i.icon-search-clear { height: 13px; margin: 10px 0 0 11px; vertical-align: text-top; - background: url(../img/icons/IconsetW.png) -15px -192px no-repeat; - background-size: 42px 1171px; - - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -15px -192px; } .im_dialogs_tabs_wrap { @@ -1298,12 +1290,8 @@ a.im_dialog_selected { margin-top: 7px; margin-left: 6px; - background: url(../img/icons/IconsetW.png) -17px -444px no-repeat; - background-size: 42px 1171px; - - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -17px -444px; } .im_dialogs_empty_header { @@ -1434,14 +1422,10 @@ div.im_message_video_thumb { margin-top: -21px; width: 42px; height: 42px; - - background: url(../img/icons/IconsetW.png) 0 -590px no-repeat; - background-size: 42px 1171px; z-index: 1; - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: 0 -590px; } .im_message_geopoint { @@ -1464,12 +1448,8 @@ div.im_message_video_thumb { width: 15px; height: 19px; - background: url(../img/icons/IconsetW.png) -14px -389px no-repeat; - background-size: 42px 1171px; - - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -14px -389px; } .im_message_media_embed { @@ -1550,15 +1530,13 @@ div.im_message_video_thumb { .im_message_file_button_icon { display: inline-block; line-height: 0; - background: url(../img/icons/General.png) no-repeat -14px -509px; - background-size: 40px 778px; width: 12px; height: 18px; margin: 12px 15px; - .is_1x & { - background-image: url(../img/icons/General_1x.png); - } + .image-2x('../img/icons/General.png', 40px, 778px); + background-position: -14px -509px; + .im_message_file_button_dl_doc & { background-position: -12px -561px; width: 16px; @@ -1575,13 +1553,10 @@ div.im_message_video_thumb { display: block; width: 14px; height: 16px; - background: url(../img/icons/General.png) no-repeat -13px -611px; - background-size: 40px 778px; margin: 13px 16px; - .is_1x & { - background-image: url(../img/icons/General_1x.png); - } + .image-2x('../img/icons/General.png', 40px, 778px); + background-position: -13px -611px; } &, @@ -2130,9 +2105,10 @@ img.img_fullsize { width: 22px; height: 22px; vertical-align: top; - background: url(../img/icons/General.png) no-repeat -9px -335px; - background-size: 40px 778px; opacity: 0.8; + + .image-2x('../img/icons/General.png', 40px, 778px); + background-position: -9px -335px; } @@ -2196,15 +2172,11 @@ img.img_fullsize { display: inline-block; width: 24px; height: 29px; - background: url(../img/icons/IconsetSmiles.png) no-repeat; - background-size: 42px 470px; cursor: pointer; opacity: 0.7; margin: 0 5px 0 4px; - .is_1x & { - background-image: url(../img/icons/IconsetSmiles_1x.png); - } + .image-2x('../img/icons/IconsetSmiles.png', 42px, 470px); &.active { opacity: 1; @@ -2586,8 +2558,9 @@ a.composer_emoji_btn { display: inline-block; width: 59px; height: 18px; - background: url(../img/icons/AboutLogos_2x.png) no-repeat 0 -5px; - background-size: 60px 136px; + + .image-2x('../img/icons/AboutLogos.png', 60px, 136px); + background-position: 0 -5px; a:hover & { background-position: 0 -43px; @@ -2599,21 +2572,15 @@ a.composer_emoji_btn { width: 20px; height: 15px; margin-top: 1px; - background: url(../img/icons/AboutLogos_2x.png) no-repeat 0 -81px; - background-size: 60px 136px; + + .image-2x('../img/icons/AboutLogos.png', 60px, 136px); + background-position: 0 -81px; a:hover & { background-position: 0 -116px; } } -.is_1x { - .icon-github, - .icon-twitter { - background-image: url(../img/icons/AboutLogos_1x.png); - } -} - /* Contacts modal */ .contacts_modal_search { padding: 0 0 14px; @@ -2623,16 +2590,13 @@ a.composer_emoji_btn { .contacts_modal_search_field { font-size: 12px; line-height: normal; - background: url(../img/icons/IconsetW.png) -6px -205px no-repeat; - background-size: 42px 1171px; border: 1px solid #d9dbde; border-radius: 2px; padding: 6px 15px 6px 30px; margin: 0; - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -6px -205px; } a.contacts_modal_search_clear { @@ -2764,13 +2728,9 @@ a.contacts_modal_contact:hover .md_modal_list_peer_description, display: inline-block; width: 25px; height: 25px; - background: url(../img/icons/IconsetW.png) -9px -516px no-repeat; - background-size: 42px 1171px; opacity: 0.5; - - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -9px -516px; } .contacts_modal_members_list { @@ -2936,7 +2896,6 @@ h5 { .countries_modal_search_field { font-size: 12px; line-height: normal; - background: #F2F2F2 url(../img/icons/IconsetW.png) -6px -205px no-repeat; background-size: 42px 1171px; border: 1px solid #F2F2F2; border-radius: 3px; @@ -2944,9 +2903,9 @@ h5 { margin-bottom: 0; margin: 0; - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + background-color: #F2F2F2; + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -6px -205px; &:focus, &:active { @@ -3068,12 +3027,8 @@ a.countries_modal_search_clear { } .telegram_modal_logo { - background: url(../img/Telegram72_2x.png) no-repeat 0 0; - background-size: 72px 72px; - - .is_1x & { - background-image: url(../img/Telegram72.png); - } + .image-2x('../img/Telegram72.png', 72px, 72px); + background-position: 0 0; } .changelog { @@ -3215,10 +3170,10 @@ a.countries_modal_search_clear { display: inline-block; width: 20px; height: 18px; - background: url(../img/icons/ProfileIcons_2x.png) 0 0 no-repeat; - background-size: 40px 360px; - background-position: -10px -164px; margin: 17px 0 0 16px; + + .image-2x('../img/icons/ProfileIcons.png', 40px, 360px); + background-position: -10px -164px; } &:hover &_camera, @@ -3230,10 +3185,10 @@ a.countries_modal_search_clear { display: inline-block; width: 27px; height: 22px; - background: url(../img/icons/ProfileIcons_2x.png) 0 0 no-repeat; - background-size: 40px 360px; - background-position: -7px -280px; margin: 17px 0 0 13px; + + .image-2x('../img/icons/ProfileIcons.png', 40px, 360px); + background-position: -7px -280px; } &:hover &_twitter, @@ -3245,22 +3200,16 @@ a.countries_modal_search_clear { display: inline-block; width: 20px; height: 20px; - background: url(../img/icons/ProfileIcons_2x.png) 0 0 no-repeat; - background-size: 40px 360px; - background-position: -10px -220px; margin: 18px 0 0 16px; + + .image-2x('../img/icons/ProfileIcons.png', 40px, 360px); + background-position: -10px -220px; } &:hover &_msg, &:active &_msg { background-position: -10px -250px; } - - .is_1x &_camera, - .is_1x &_twitter, - .is_1x &_msg { - background-image: url(../img/icons/ProfileIcons.png); - } } .md_modal_iconed_section { @@ -3297,13 +3246,10 @@ a.countries_modal_search_clear { display: inline-block; margin-left: -64px; margin-top: 5px; - background: url(../img/icons/ProfileIcons_2x.png) 0 0 no-repeat; - background-size: 40px 360px; position: absolute; - .is_1x & { - background-image: url(../img/icons/ProfileIcons.png); - } + .image-2x('../img/icons/ProfileIcons.png', 40px, 360px); + background-position: 0 0; .md_modal_iconed_section_toggle & { margin-top: 8px; diff --git a/app/less/desktop.less b/app/less/desktop.less index 89608a83..ec6819a0 100644 --- a/app/less/desktop.less +++ b/app/less/desktop.less @@ -203,10 +203,11 @@ height: 14px; margin-right: 38px; display: inline-block; - background: url(../img/icons/General.png) no-repeat -10px -111px; - background-size: 40px 778px; vertical-align: top; margin-top: 3px; + .image-2x('../img/icons/General.png', 40px, 778px); + background-position: -10px -111px; + } &-contacts { @@ -216,8 +217,8 @@ margin-top: 2px; display: inline-block; vertical-align: top; - background: url(../img/icons/General.png) no-repeat -11px -135px; - background-size: 40px 778px; + .image-2x('../img/icons/General.png', 40px, 778px); + background-position: -11px -135px; } &-settings { @@ -227,8 +228,8 @@ margin-top: 1px; display: inline-block; vertical-align: top; - background: url(../img/icons/General.png) no-repeat -10px -163px; - background-size: 40px 778px; + .image-2x('../img/icons/General.png', 40px, 778px); + background-position: -10px -163px; } &-faq { @@ -238,8 +239,8 @@ margin-top: 1px; display: inline-block; vertical-align: top; - background: url(../img/icons/General.png) no-repeat -10px -637px; - background-size: 40px 778px; + .image-2x('../img/icons/General.png', 40px, 778px); + background-position: -10px -637px; } &-about { @@ -248,18 +249,9 @@ margin-right: 37px; display: inline-block; vertical-align: top; - background: url(../img/icons/General.png) no-repeat -10px -193px; - background-size: 40px 778px; - } - .is_1x & { - &-new-group, - &-contacts, - &-settings, - &-faq, - &-about { - background-image: url(../img/icons/General_1x.png); - } + .image-2x('../img/icons/General.png', 40px, 778px); + background-position: -10px -193px; } } @@ -383,19 +375,11 @@ &-documents, &-audio { display: inline-block; - background: url(../img/icons/General.png) no-repeat 0 0; - background-size: 40px 778px; margin-right: 12px; vertical-align: top; - } - .is_1x & { - &-photos, - &-video, - &-documents, - &-audio { - background-image: url(../img/icons/General_1x.png); - } + .image-2x('../img/icons/General.png', 40px, 778px); + background-position: 0 0; } &-photos { @@ -915,12 +899,9 @@ a.footer_link.active:active { width: 26px; height: 26px; margin: 16px 0 0 40px; - background: url(../img/icons/IconsetW.png) -9px -516px no-repeat; - background-size: 42px 1171px; - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -9px -516px; } @media (min-width: 1024px) { @@ -1013,14 +994,11 @@ a.footer_link.active:active { display: inline-block; width: 16px; height: 10px; - background: url(../img/icons/Checks2_2x.png); - background-size: 16px 10px; top: 2px; position: relative; - .is_1x & { - background-image: url(../img/icons/Checks2_1x.png); - } + .image-2x('../img/icons/Checks2.png', 16px, 10px); + background-position: 0 0; } } @@ -1032,12 +1010,8 @@ a.footer_link.active:active { &_unread { .icon-message-status-tick { - background: url(../img/icons/Checks1_2x.png); - background-size: 16px 10px; - - .is_1x & { - background-image: url(../img/icons/Checks1_1x.png); - } + .image-2x('../img/icons/Checks1.png', 16px, 10px); + background-position: 0 0; } } @@ -1111,32 +1085,6 @@ a.im_panel_peer_photo .peer_initials { margin-left: 36px; } -/*.composer_emoji_insert_btn { - display: block; - position: absolute; - right: 3px; - top: 2px; - cursor: pointer; - padding: 0; - - width: 22px; - height: 22px; - margin-top: 1px; -}*/ -/*.icon-emoji { - display: inline-block; - width: 22px; - height: 22px; - vertical-align: top; - background: url(../img/icons/General.png) no-repeat -9px -335px; - background-size: 40px 778px; - opacity: 0.8; -}*/ - -.is_1x .icon-emoji { - background-image: url(../img/icons/General_1x.png); -} - .composer_emoji_insert_btn { &:hover { .icon-emoji { @@ -1183,14 +1131,11 @@ a.im_panel_peer_photo .peer_initials { width: 18px; height: 17px; vertical-align: top; - background: url(../img/icons/General.png) no-repeat -11px -455px; - background-size: 40px 778px; opacity: 0.8; margin: 0; - .is_1x & { - background-image: url(../img/icons/General_1x.png); - } + .image-2x('../img/icons/General.png', 40px, 778px); + background-position: -11px -455px; } .im_attach { @@ -1236,13 +1181,10 @@ a.im_panel_peer_photo .peer_initials { width: 20px; height: 18px; vertical-align: top; - background: url(../img/icons/General.png) no-repeat -10px -399px; - background-size: 40px 778px; opacity: 0.8; - .is_1x & { - background-image: url(../img/icons/General_1x.png); - } + .image-2x('../img/icons/General.png', 40px, 778px); + background-position: -10px -399px; } .im_media_attach { @@ -1344,7 +1286,7 @@ a.im_panel_peer_photo .peer_initials { } .im_media_attach { position: absolute; - top: -7px; + top: -6px; left: -43px; width: 19px; height: 24px; @@ -1355,13 +1297,11 @@ a.im_panel_peer_photo .peer_initials { width: 19px; height: 23px; vertical-align: text-top; - background: url(../img/icons/IconsetW.png) -12px -68px no-repeat; - background-size: 42px 1171px; opacity: 0.8; + margin-top: -1px; - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -12px -68px; } .im_media_attach { @@ -1389,12 +1329,9 @@ a.im_panel_peer_photo .peer_initials { vertical-align: text-top; opacity: 1; margin: 0; - background: url(../img/icons/IconsetW.png) -10px -771px no-repeat; - background-size: 42px 1171px; - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -10px -771px; } .composer_emoji_insert_btn:active .icon-emoji, @@ -1997,8 +1934,6 @@ a.im_panel_peer_photo .peer_initials { } .modal_close { - background: url(../img/icons/PhotoIcons.png) -10px -10px no-repeat; - background-size: 40px 200px; width: 20px; height: 21px; float: right; @@ -2011,6 +1946,9 @@ a.im_panel_peer_photo .peer_initials { -o-transition : .2s; transition : .2s; + .image-2x('../img/icons/PhotoIcons.png', 40px, 200px); + background-position: -10px -10px; + &_wrap { display: none; cursor: pointer; @@ -2048,8 +1986,6 @@ a.im_panel_peer_photo .peer_initials { } .modal_prev, .modal_next { - background: url(../img/icons/PhotoIcons.png) -12px -41px no-repeat; - background-size: 40px 200px; width: 16px; height: 24px; opacity: 0.15; @@ -2062,6 +1998,9 @@ a.im_panel_peer_photo .peer_initials { -moz-transition : .2s; -o-transition : .2s; transition : .2s; + + .image-2x('../img/icons/PhotoIcons.png', 40px, 200px); + background-position: -12px -41px; } .modal_next { margin: 0 0 0 50px; @@ -2100,14 +2039,6 @@ a.im_panel_peer_photo .peer_initials { } } -.is_1x { - .modal_close, - .modal_prev, - .modal_next { - background-image: url(../img/icons/PhotoIcons_1x.png); - } -} - @media (min-width: 800px) { .modal_close_wrap, .modal_next_wrap, @@ -2227,14 +2158,11 @@ a.im_panel_peer_photo .peer_initials { } i { - background: url(../img/icons/PhotoIcons.png) 0 0 no-repeat; - background-size: 40px 200px; display: block; opacity: 0.5; - .is_1x & { - background-image: url(../img/icons/PhotoIcons_1x.png); - } + .image-2x('../img/icons/PhotoIcons.png', 40px, 200px); + background-position: 0 0; } &:hover i { diff --git a/app/less/lib/mixins.less b/app/less/lib/mixins.less index 7e39c35a..c8c6b1d7 100644 --- a/app/less/lib/mixins.less +++ b/app/less/lib/mixins.less @@ -73,4 +73,41 @@ -moz-transition: none; -o-transition: none; transition: none; +} + +/* Thanks to @brandonb927 + https://gist.github.com/brandonb927/3874012 + + Prepending 'only screen and ' to each media query breaks nested media queries */ + +// .image-2x(@image, @width, @height, @repeat: no-repeat) { +// @filename : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`; +// @extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`; +// background-image: ~`"url(@{filename}.@{extension}?1)"`; +// background-repeat: @repeat; + +// /* on retina, use image that's scaled by 2 */ +// @media +// (-webkit-min-device-pixel-ratio: 2), +// ( min--moz-device-pixel-ratio: 2), +// ( -o-min-device-pixel-ratio: 2/1), +// ( min-device-pixel-ratio: 2), +// ( min-resolution: 192dpi), +// ( min-resolution: 2dppx) { +// background-image: ~`"url(@{filename}_2x.@{extension}?1)"`; +// background-size: @width @height; +// } +// } + + + +.image-2x(@image, @width, @height, @repeat: no-repeat) { + @filename : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`; + @extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`; + background-image: ~`"url(@{filename}.@{extension}?1)"`; + background-repeat: @repeat; + .is_2x & { + background-image: ~`"url(@{filename}_2x.@{extension}?1)"`; + background-size: @width @height; + } } \ No newline at end of file diff --git a/app/less/mobile.less b/app/less/mobile.less index a65479c1..42b27d70 100644 --- a/app/less/mobile.less +++ b/app/less/mobile.less @@ -216,12 +216,8 @@ html { display: inline-block; width: 21px; height: 21px; - background: url(../img/icons/MobileIcons_2x.png) 0 0 no-repeat; - background-size: 21px 52px; - - .is_1x & { - background-image: url(../img/icons/MobileIcons_1x.png); - } + .image-2x('../img/icons/MobileIcons.png', 21px, 52px); + background-position: 0 0; } .tg_page_head .navbar_peer_not_selected .navbar-search-wrap, @@ -251,14 +247,11 @@ html { width: 11px; height: 19px; vertical-align: text-top; - - background: url(../img/icons/IconsetW.png) -15px -835px no-repeat; - background-size: 42px 1171px; opacity: 0.8; - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -15px -835px; } .tg_page_head { @@ -893,28 +886,18 @@ a.im_message_from_photo { opacity: 1; margin-top: 6px; background: none; - - .is_1x & { - background: none; - } } } .im_message_unread { .icon-message-status-tick { - &, - .is_1x & { - background: #43A4DB; - } + background: #43A4DB; } } .im_message_pending { .icon-message-status-tick { - &, - .is_1x & { - background: #9fd2ee; - } + background: #9fd2ee; } } @@ -1302,14 +1285,11 @@ a.im_message_fwd_author { &, &:active, &:hover { - background: url(../img/icons/IconsetW.png) 2px -860px no-repeat; - background-size: 42px 1171px; color: transparent; box-shadow: none; - } - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: 2px -860px; } } @@ -1318,13 +1298,10 @@ a.im_message_fwd_author { width: 19px; height: 23px; vertical-align: text-top; - background: url(../img/icons/IconsetW.png) -12px -68px no-repeat; - background-size: 42px 1171px; opacity: 0.8; - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -12px -68px; } .im_attach { @@ -1365,12 +1342,9 @@ a.im_message_fwd_author { vertical-align: text-top; opacity: 1; margin: 0; - background: url(../img/icons/IconsetW.png) -10px -771px no-repeat; - background-size: 42px 1171px; - .is_1x & { - background-image: url(../img/icons/IconsetW_1x.png); - } + .image-2x('../img/icons/IconsetW.png', 42px, 1171px); + background-position: -10px -771px; } .composer_emoji_insert_btn { @@ -1647,10 +1621,11 @@ a.media_modal_date:hover { } i { - background: url(../img/icons/PhotoIcons.png) 0 0 no-repeat; - background-size: 40px 200px; display: block; opacity: 0.8; + + .image-2x('../img/icons/PhotoIcons.png', 40px, 200px); + background-position: 0 0; } &:active { @@ -1659,12 +1634,6 @@ a.media_modal_date:hover { } } - .is_1x & { - i { - background-image: url(../img/icons/PhotoIcons_1x.png); - } - } - & i&_download { background-position: -12px -163px; width: 16px; diff --git a/gulpfile.js b/gulpfile.js index 385f6afe..8539b28f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -229,7 +229,7 @@ gulp.task('watchhtml', function() { gulp.task('watch', ['server', 'less'], function() { livereload.listen({ basePath: 'app' }); gulp.watch('app/css/*.css', ['watchcss']); - gulp.watch('app/less/*.less', ['less']); + gulp.watch('app/less/**/*.less', ['less']); gulp.watch('app/partials/**/*.html', ['watchhtml']); }); diff --git a/package.json b/package.json index 2819e80e..43aeb57d 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "gulp-concat": "^2.1.7", "gulp-grep-stream": "0.0.2", "gulp-imagemin": "^0.1.5", - "gulp-less": "^3.0.0", + "gulp-less": "^3.0.2", "gulp-livereload": "^3.0.2", "gulp-load-plugins": "^0.4.0", "gulp-manifest": "0.0.3", diff --git a/webogram.sublime-project b/webogram.sublime-project index de78285e..96c52876 100644 --- a/webogram.sublime-project +++ b/webogram.sublime-project @@ -4,7 +4,7 @@ { "follow_symlinks": true, "path": ".", - "folder_exclude_patterns": ["*dist", "node_modules", "releases", ".tx", "css"], + "folder_exclude_patterns": ["*dist*", "node_modules", "releases", ".tx", "css"], "file_exclude_patterns": ["*.zip", "templates.js"] } ]