Moved retina support to LESS

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;
-
+      .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-      .is_1x & {
+      background-position: -15px -320px;
-        background-image: url(../img/icons/IconsetW_1x.png);
-      }
     }
   }
 
@@ -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;
+  .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-  background-size: 42px 1171px;
+  background-position: -15px -192px;
-
-  .is_1x & {
-    background-image: url(../img/icons/IconsetW_1x.png);
-  }
 }
 
 .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;
+  .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-  background-size: 42px 1171px;
+  background-position: -17px -444px;
-
-  .is_1x & {
-    background-image: url(../img/icons/IconsetW_1x.png);
-  }
 }
 
 .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 & {
+  .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-    background-image: url(../img/icons/IconsetW_1x.png);
+  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;
+  .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-  background-size: 42px 1171px;
+  background-position: -14px -389px;
-
-  .is_1x & {
-    background-image: url(../img/icons/IconsetW_1x.png);
-  }
 }
 
 .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 & {
+  .image-2x('../img/icons/General.png', 40px, 778px);
-    background-image: url(../img/icons/General_1x.png);
+  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 & {
+    .image-2x('../img/icons/General.png', 40px, 778px);
-      background-image: url(../img/icons/General_1x.png);
+    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 & {
+  .image-2x('../img/icons/IconsetSmiles.png', 42px, 470px);
-    background-image: url(../img/icons/IconsetSmiles_1x.png);
-  }
 
   &.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 & {
+  .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-    background-image: url(../img/icons/IconsetW_1x.png);
+  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;
-
+  .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-  .is_1x & {
+  background-position: -9px -516px;
-    background-image: url(../img/icons/IconsetW_1x.png);
-  }
 }
 
 .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-color: #F2F2F2;
-    background-image: url(../img/icons/IconsetW_1x.png);
+  .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;
+  .image-2x('../img/Telegram72.png', 72px, 72px);
-  background-size: 72px 72px;
+  background-position: 0 0;
-
-  .is_1x & {
-    background-image: url(../img/Telegram72.png);
-  }
 }
 
 .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 & {
+    .image-2x('../img/icons/ProfileIcons.png', 40px, 360px);
-      background-image: url(../img/icons/ProfileIcons.png);
+    background-position: 0 0;
-    }
 
     .md_modal_iconed_section_toggle & {
       margin-top: 8px;

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;
+    .image-2x('../img/icons/General.png', 40px, 778px);
-    background-size: 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;
+    .image-2x('../img/icons/General.png', 40px, 778px);
-    background-size: 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;
+    .image-2x('../img/icons/General.png', 40px, 778px);
-    background-size: 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 & {
+    .image-2x('../img/icons/General.png', 40px, 778px);
-    &-new-group,
+    background-position: -10px -193px;
-    &-contacts,
-    &-settings,
-    &-faq,
-    &-about {
-      background-image: url(../img/icons/General_1x.png);
-    }
   }
 }
 
@@ -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 & {
+    .image-2x('../img/icons/General.png', 40px, 778px);
-    &-photos,
+    background-position: 0 0;
-    &-video,
-    &-documents,
-    &-audio {
-      background-image: url(../img/icons/General_1x.png);
-    }
   }
 
   &-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 & {
+  .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-    background-image: url(../img/icons/IconsetW_1x.png);
+  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 & {
+        .image-2x('../img/icons/Checks2.png', 16px, 10px);
-          background-image: url(../img/icons/Checks2_1x.png);
+        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);
+        .image-2x('../img/icons/Checks1.png', 16px, 10px);
-        background-size: 16px 10px;
+        background-position: 0 0;
-
-        .is_1x & {
-          background-image: url(../img/icons/Checks1_1x.png);
-        }
       }
     }
 
@@ -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 & {
+  .image-2x('../img/icons/General.png', 40px, 778px);
-    background-image: url(../img/icons/General_1x.png);
+  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 & {
+  .image-2x('../img/icons/General.png', 40px, 778px);
-    background-image: url(../img/icons/General_1x.png);
+  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 & {
+    .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-      background-image: url(../img/icons/IconsetW_1x.png);
+    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 & {
+    .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-      background-image: url(../img/icons/IconsetW_1x.png);
+    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 & {
+    .image-2x('../img/icons/PhotoIcons.png', 40px, 200px);
-      background-image: url(../img/icons/PhotoIcons_1x.png);
+    background-position: 0 0;
-    }
   }
 
   &:hover i {

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;
+  }
 }

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;
+  .image-2x('../img/icons/MobileIcons.png', 21px, 52px);
-  background-size: 21px 52px;
+  background-position: 0 0;
-
-  .is_1x & {
-    background-image: url(../img/icons/MobileIcons_1x.png);
-  }
 }
 
 .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 {
-    &,
+    background: #43A4DB;
-    .is_1x & {
-      background: #43A4DB;
-    }
   }
 }
 
 .im_message_pending {
   .icon-message-status-tick {
-    &,
+    background: #9fd2ee;
-    .is_1x & {
-      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 & {
+    .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-    background-image: url(../img/icons/IconsetW_1x.png);
+    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 & {
+  .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-    background-image: url(../img/icons/IconsetW_1x.png);
+  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 & {
+  .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-    background-image: url(../img/icons/IconsetW_1x.png);
+  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;

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']);
 });
 

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",

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"]
 		}
 	]