Browse Source

Moved retina support to LESS

master
Igor Zhukov 10 years ago
parent
commit
11fa1c5347
  1. 0
      app/img/icons/AboutLogos.png
  2. 0
      app/img/icons/Checks1.png
  3. 0
      app/img/icons/Checks2.png
  4. BIN
      app/img/icons/General.png
  5. BIN
      app/img/icons/General_1x.png
  6. BIN
      app/img/icons/General_2x.png
  7. BIN
      app/img/icons/IconsetSmiles.png
  8. BIN
      app/img/icons/IconsetSmiles_1x.png
  9. BIN
      app/img/icons/IconsetSmiles_2x.png
  10. BIN
      app/img/icons/IconsetW.png
  11. BIN
      app/img/icons/IconsetW_1x.png
  12. BIN
      app/img/icons/IconsetW_2x.png
  13. 0
      app/img/icons/MobileIcons.png
  14. BIN
      app/img/icons/PhotoIcons.png
  15. BIN
      app/img/icons/PhotoIcons_1x.png
  16. BIN
      app/img/icons/PhotoIcons_2x.png
  17. 168
      app/less/app.less
  18. 146
      app/less/desktop.less
  19. 37
      app/less/lib/mixins.less
  20. 59
      app/less/mobile.less
  21. 2
      gulpfile.js
  22. 2
      package.json
  23. 2
      webogram.sublime-project

0
app/img/icons/AboutLogos_1x.png → app/img/icons/AboutLogos.png

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

0
app/img/icons/Checks1_1x.png → app/img/icons/Checks1.png

Before

Width:  |  Height:  |  Size: 362 B

After

Width:  |  Height:  |  Size: 362 B

0
app/img/icons/Checks2_1x.png → app/img/icons/Checks2.png

Before

Width:  |  Height:  |  Size: 469 B

After

Width:  |  Height:  |  Size: 469 B

BIN
app/img/icons/General.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
app/img/icons/General_1x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

BIN
app/img/icons/General_2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
app/img/icons/IconsetSmiles.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
app/img/icons/IconsetSmiles_1x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

BIN
app/img/icons/IconsetSmiles_2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
app/img/icons/IconsetW.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
app/img/icons/IconsetW_1x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
app/img/icons/IconsetW_2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

0
app/img/icons/MobileIcons_1x.png → app/img/icons/MobileIcons.png

Before

Width:  |  Height:  |  Size: 939 B

After

Width:  |  Height:  |  Size: 939 B

BIN
app/img/icons/PhotoIcons.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
app/img/icons/PhotoIcons_1x.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
app/img/icons/PhotoIcons_2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

168
app/less/app.less

@ -495,16 +495,12 @@ a { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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, @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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;

146
app/less/desktop.less

@ -203,10 +203,11 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 {

37
app/less/lib/mixins.less

@ -74,3 +74,40 @@ @@ -74,3 +74,40 @@
-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;
}
}

59
app/less/mobile.less

@ -216,12 +216,8 @@ html { @@ -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 { @@ -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,29 +886,19 @@ a.im_message_from_photo { @@ -893,29 +886,19 @@ 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;
}
}
}
.im_message_pending {
.icon-message-status-tick {
&,
.is_1x & {
background: #9fd2ee;
}
}
}
.im_dialogs_search_field,
@ -1302,14 +1285,11 @@ a.im_message_fwd_author { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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;

2
gulpfile.js

@ -229,7 +229,7 @@ gulp.task('watchhtml', function() { @@ -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']);
});

2
package.json

@ -48,7 +48,7 @@ @@ -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",

2
webogram.sublime-project vendored

@ -4,7 +4,7 @@ @@ -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"]
}
]

Loading…
Cancel
Save