From ddf4dd7c201a3211a1a19e13e235f3aa8f931ace Mon Sep 17 00:00:00 2001 From: Artem Fitiskin Date: Sat, 21 Mar 2015 21:51:40 +0300 Subject: [PATCH 1/2] CSS -> LESS. Fix #648 --- .gitignore | 1 + app/css/app.css | 3278 ------------------------ app/css/desktop.css | 1911 -------------- app/css/mobile.css | 1394 ---------- app/less/app.less | 3516 ++++++++++++++++++++++++++ app/less/desktop.less | 2264 +++++++++++++++++ app/{css/font.css => less/font.less} | 1 - app/less/lib/mixins.less | 76 + app/less/mobile.less | 1688 +++++++++++++ gulpfile.js | 25 +- package.json | 2 + 11 files changed, 7566 insertions(+), 6590 deletions(-) delete mode 100644 app/css/app.css delete mode 100644 app/css/desktop.css delete mode 100644 app/css/mobile.css create mode 100644 app/less/app.less create mode 100644 app/less/desktop.less rename app/{css/font.css => less/font.less} (99%) create mode 100644 app/less/lib/mixins.less create mode 100644 app/less/mobile.less diff --git a/.gitignore b/.gitignore index 85ee19f6..407a7cda 100644 --- a/.gitignore +++ b/.gitignore @@ -10,4 +10,5 @@ dist_package releases webogram*.zip app/js/templates.js +app/css cldr \ No newline at end of file diff --git a/app/css/app.css b/app/css/app.css deleted file mode 100644 index 272a87a9..00000000 --- a/app/css/app.css +++ /dev/null @@ -1,3278 +0,0 @@ -/* app css stylesheet */ - -html { - display: none; - background: #e7ebf0; - overflow: visible; -} -body { - color: #000; - background: none; - font: 12px/18px 'Open Sans', "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif; - overflow: visible; - overflow-x: hidden; -} -body.non_osx { - font: 13px/18px Tahoma, sans-serif, Arial, Helvetica; -} -h1, h2, h3, h4, h5 { - color: #222; -} -.non_osx h4 { - font-size: 17px; -} -.noselect { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.hasselect { - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; -} -a { - cursor: pointer; -} -a.disabled { - cursor: default; - pointer-events: none; -} -.form-control { - border: 1px solid #d9dbde; - border-radius: 2px; - -webkit-box-shadow: none; - box-shadow: none; - -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; -} - -.form-control:focus { - border-color: #66afe9; - outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); -} -.form-control.no_outline:focus { - border: 1px solid #d9dbde; - box-shadow: none; - outline: none; -} - -.form-control::-moz-placeholder { - color: #b3b3b3; -} -.form-control:-ms-input-placeholder { - color: #b3b3b3; -} -.form-control::-webkit-input-placeholder { - color: #b3b3b3; -} - -input[type="number"]::-webkit-outer-spin-button, -input[type="number"]::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - -input[type="number"] { - -moz-appearance:textfield; -} -.btn { - border: 0; - padding: 7px 13px; -} -.btn:hover, -.btn:active, -.btn.active, -.btn:focus, -.btn:active:focus, -.btn.active:focus, -.open .dropdown-toggle.btn { - box-shadow: none; - outline: none; -} -.btn-success { - color: #ffffff; - background-color: #6ec26d; -} - -.btn-success:hover, -.btn-success:focus, -.btn-success:active, -.btn-success.active, -.open .dropdown-toggle.btn-success { - color: #ffffff; - background-color: #61b75b; -} - -.btn-success:active, -.btn-success.active, -.open .dropdown-toggle.btn-success { - background: #66b864; - background-image: none; -} - - -.btn-danger { - color: #ffffff; - background-color: #c05f5a; -} -.btn-danger:hover, -.btn-danger:focus, -.btn-danger:active, -.btn-danger.active, -.open .dropdown-toggle.btn-danger { - color: #ffffff; - background-color: #ab5450; -} -.btn-danger:active, -.btn-danger.active, -.open .dropdown-toggle.btn-danger { - background: #a24f4b; - background-image: none; -} - - -.btn-primary { - color: #ffffff; - background-color: #6490b1; - border-radius: 3px; -} -.btn-primary:hover, -.btn-primary:focus, -.btn-primary:active, -.btn-primary.active, -.open .dropdown-toggle.btn-primary { - color: #ffffff; - background-color: #4a80a9; -} -.btn-primary:active, -.btn-primary.active, -.open .dropdown-toggle.btn-primary { - background: #41769e; - background-image: none; -} -.btn-primary[disabled], -.btn-primary.disabled { - background: #7999b3; -} -.btn-link { - color: #3a6d99; - text-decoration: none !important; - border-radius: 3px; - overflow: hidden; -} -.btn-link:hover { - background: #f2f6fa; -} -.btn-link.btn-link-noarea:hover, -.btn-link.dropdown-toggle:hover { - background: none; -} -.btn-link.dropdown-toggle:active { - outline: none; -} - -.btn-md { - background: none; - text-decoration: none !important; - border-radius: 2px; - overflow: hidden; - text-transform: uppercase; - font-size: 13px; - padding: 6px 10px; - font-weight: bold; -} -.btn-md, -.btn-md:focus, -.btn-md:hover { - color: #72a0c7; - /*color: #4680b3;*/ -} -.btn-md:hover { - background: #f2f6fa; -} -.btn-md-primary, -.btn-md-primary:focus, -.btn-md-primary:hover { - color: #4680b3; -} - -.btn-md-danger, -.btn-md-danger:focus, -.btn-md-danger:hover { - color: #c05f5a; -} -.btn-md-danger:hover { - background: #fbe7e6; -} - -.md-input-group { - height: 50px; - border-bottom: 1px solid #e6e6e6; - /*padding: 0 0 10px;*/ - padding: 0; - margin: 0 0 22px; -} -.md-input-label { - font-weight: normal; - color: #999; - cursor: pointer; - display: block; - font-size: 13px; - margin: 0; - padding: 0; - z-index: 1; - pointer-events: none; - -webkit-font-smoothing: antialiased; - - transform-origin: left center; - -webkit-transform-origin: left center; - - -webkit-transform: translate3d(0, 22px, 0); - transform: translate3d(0, 22px, 0); -} -.md-input-animated .md-input-group, -.md-input-animated .md-input-label { - -webkit-transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1); - transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1); -} - -.md-input { - color: #000; - background: #FFF; - display: inline-block; - border: 0; - outline: 0; - font-size: 13px; - padding: 3px 0; - margin: 3px 0 0; - width: 100%; - box-shadow: none; -} -.md-input-disabled .md-input { - color: #999; -} -.md-input-focused { - border-bottom: 2px solid #6bace1; -} -.md-input-error { - border-bottom: 2px solid #e2726f; -} -.md-input-error .md-input-label { - color: #d45a58; -} -.md-input-has-value .md-input-label { - -webkit-transform: scale(0.9); - transform: scale(0.9); -} -.md-input-group-centered, -.md-input-group-centered .md-input { - text-align: center; -} -.md-input-group-centered .md-input-label { - transform-origin: center center; - -webkit-transform-origin: center center; -} - - -.md_modal_head { - color: #FFF; - background: #5580a3; - padding: 0 0 28px 26px; -} -.md_modal_head_simple { - padding-bottom: 13px; -} - -.md_modal_actions_wrap { - float: right; -} -a.md_modal_action { - display: block; - float: right; - color: #dde8f1; - padding: 19px 15px 5px; - font-weight: bold; -} -a.md_modal_action:hover { - color: #FFF; -} -a.md_modal_action_close { - padding-right: 22px; -} -a.md_modal_action:hover, -a.md_modal_action:focus, -a.md_modal_action:active { - text-decoration: none; -} -.md_modal_title { - font-weight: bold; - padding: 18px 0 5px; - font-size: 13px; -} - - - -.navbar_offline .navbar-header, -.navbar_offline .navbar-offline > li { - float: left; -} -.navbar-offline { - max-width: 400px; - margin: 0 auto; - float: none; -} -.navbar-offline-text { - color: #b9cfe3; - padding: 13px 15px; - font-size: 13px; - display: block; - line-height: 20px; -} - - -.tg_progress { - height: 12px; - margin: 0; - padding: 0; - background: rgba(255,255,255, 0.4); - border: 5px solid rgba(0,0,0, 0.5); - border-radius: 3px; -} -.tg_progress .progress-bar { - height: 5px; - line-height: 2px; - background: rgba(255,255,255, 0.9); - border-radius: 0; - overflow: hidden; -} - -.dropdown-menu { - border-radius: 2px; - padding: 0; - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175); -} -.dropdown-menu-to-up { - top: auto; - bottom: 100%; - margin: 0 0 3px; -} -.dropdown-menu > li > a { - padding: 5px 14px; - font-size: 13px; -} - -.modal-backdrop { - background: rgba(26, 26, 26, 0.7); - opacity: 1 !important; - /*opacity: 0.25 !important;*/ -} - -.modal.fade .modal-dialog { - -webkit-transition: none; - -moz-transition: none; - -o-transition: none; - transition: none; -} -.modal.fade, -.modal-backdrop.fade { - -webkit-transition: none; - -moz-transition: none; - -o-transition: none; - transition: none; -} - - -.modal { - overflow-y: auto; - padding: 10px; -} -.modal-dialog { - margin: 0 auto; -} -.modal-content { - border: 0; - border-radius: 0; - -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15); - box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15); -} - -.text-invisible { - visibility: hidden; -} - -.modal-header { - padding: 12px 0 4px 3px; - border-bottom: 2px solid #E1E1E1; - margin: 0 18px; -} -.modal-title { - color: #222; - font-weight: bold; - font-size: 17px; - line-height: 1.4; -} - -.modal-close-link, -.modal-head-link { - font-size: 12px; - line-height: 1.4; - float: right; - padding: 0 2px 0; - margin: 6px 2px 0 0; -} -.modal-close-link:hover, -.modal-head-link:hover { - text-decoration: none; -} -.modal-head-link { - margin-right: 15px; -} - -.modal-close-button { - position: absolute; - z-index: 1051; - top: 0; - right: 0; - width: 54px; - height: 54px; -} -.modal-close-button 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 .modal-close-button i { - background-image: url(../img/icons/IconsetW_1x.png); -} -.modal-close-button:hover i { - opacity: 1; -} - -.modal-body { - padding: 14px 14px; -} -.modal-footer { - padding: 0 14px 13px; - margin: 0; - border-top: 0; -} -.modal_simple_header { - font-size: 14px; - margin: 0 0 10px; - text-align: center; - font-weight: bold; -} - -.modal_simple_form { - max-width: 276px; - margin: 0 auto; - /*padding: 70px 0 50px;*/ -} -.modal_simple_form h4 { - font-size: 14px; - margin-bottom: 38px; - text-align: left; -} -.modal_simple_form .form-group { - margin-bottom: 13px; -} -.modal_simple_form_description { - color: #777; - line-height: 160%; - margin: 10px 0 0; - text-align: justify; -} - -.md_simple_modal_wrap { - -} -.md_simple_modal_body { - padding: 40px 37px 0; -} -.md_simple_header { - font-size: 14px; - margin: 0 0 10px; - font-weight: bold; -} -.md_simple_modal_body .modal_simple_form { - max-width: none; - margin: 0; - padding: 0; -} -.md_simple_modal_body .modal_simple_form h4 { - font-size: 14px; - margin-top: 0; - margin-bottom: 38px; - text-align: left; - font-weight: bold; -} -.md_simple_form_description { - color: #777; - line-height: 160%; - margin: 0 0 10px; - text-align: justify; -} -.md_simple_modal_footer { - text-align: right; - padding: 10px 27px 15px; -} -.md_simple_modal_footer .btn { - margin-left: 10px; -} - - - - -.modal_section_header { - font-size: 12px; - line-height: 14px; - color: #999; - background: #f5f5f5; - padding: 7px 14px; - margin: 0; -} -.modal_section_body { - padding: 14px 14px; -} -.modal_section_body p, -.modal_section_body dl { - margin: 5px 0; -} -.modal_section:last-child .modal_section_body { - padding-bottom: 8px; -} - -a.tg_checkbox { - color: #000; - display: block; - line-height: 18px; - padding: 8px 0; - margin: 9px 0; -} -a.tg_checkbox:hover { - text-decoration: none; -} -.tg_checkbox span.icon-checkbox-outer { - float: right; - display: inline-block; - background-color: #e6e6e6; - width: 36px; - height: 14px; - line-height: 14px; - vertical-align: middle; - border-radius: 8px; - margin: 3px 0px 3px 0; - -webkit-transition: background-color ease-in-out 0.1s; - transition: background-color ease-in-out 0.1s; -} -.tg_checkbox.tg_checkbox_on span.icon-checkbox-outer { - background-color: #bfd9ed; -} -.tg_checkbox i.icon-checkbox-inner { - display: inline-block; - background: #FFF; - width: 20px; - height: 20px; - border-radius: 10px; - overflow: hidden; - float: left; - margin-left: -6px; - margin-top: -3px; - -webkit-transition: all ease 0.1s; - transition: all ease 0.1s; - border: 1px solid #E7E7E7; - -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.05); - box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.05); -} -.tg_checkbox.tg_checkbox_on i.icon-checkbox-inner { - background: #6b9bc2; - margin-left: 16px; - border: 0; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -.tg_checkbox_label { - display: inline-block; - line-height: 18px; - vertical-align: middle; -} -/*a.tg_checkbox:hover span.icon-checkbox-outer { - background: #bdbdbd; -} -a.tg_checkbox_on:hover span.icon-checkbox-outer { - background: #5785aa; -} -a.tg_checkbox:hover i.icon-checkbox-inner { - background: #f2f2f2; -}*/ -.tg_radios_wrap { - margin: 15px 0; -} -a.tg_radio { - color: #000; - display: block; - line-height: 20px; - padding: 5px 0 6px; -} -a.tg_radio:hover { - text-decoration: none; -} -.tg_radio .icon-radio-outer { - display: inline-block; - width: 20px; - height: 20px; - line-height: 20px; - vertical-align: middle; - border-radius: 10px; - border: 2px solid #d8d8d8; - overflow: hidden; - margin: 0 8px 0 0; - - -webkit-transition: border-color ease-in-out 0.1s; - transition: border-color ease-in-out 0.1s; -} -i.icon-radio { - display: inline-block; - background-color: #FFF; - width: 16px; - height: 16px; - line-height: 16px; - border-radius: 8px; - border: 3px solid #FFF; - -webkit-transition: background-color ease-in-out 0.1s; - transition: background-color ease-in-out 0.1s; -} -.tg_radio.tg_radio_on .icon-radio-outer { - border-color: #5c8db3; -} -.tg_radio.tg_radio_on i.icon-radio { - background-color: #6b9bc2; -} -a.tg_radio:hover i.icon-radio { - background-color: #f2f2f2; -} -a.tg_radio_on:hover i.icon-radio { - background-color: #5785aa; -} - -.tg_radio_label { - display: inline-block; - line-height: 20px; - vertical-align: middle; -} - -.tg_range_wrap { - line-height: 18px; -} -.tg_slider_wrap { - position: relative; - cursor: pointer; - line-height: 18px; - height: 18px; -} -.tg_slider_track { - position: absolute; - background: #c4daec; - height: 4px; - margin: 7px 0; - width: 100%; - z-index: 2; -} -.tg_slider_track_fill { - background: #83afd2; - height: 4px; -} -.tg_slider_thumb { - position: absolute; - border: 0; - background: #6b9bc2; - width: 18px; - height: 18px; - border-radius: 9px; - z-index: 3; -} - - -.tg_form_group { - padding: 6px 0; -} -.tg_form_group:first-child { - padding-top: 0; -} -.tg_form_group:last-child { - padding-bottom: 0; -} - - - -.img_fullsize_with_progress_wrap { - position: relative; - margin: 0 auto; -} -.img_fullsize_progress_overlay { - position: absolute; - width: 100%; - height: 100%; -} -.img_fullsize_progress_wrap { - position: relative; -} -.img_fullsize_progress { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 25px; - margin: 0; - padding: 0; - background: rgba(0,0,0, 0.5); - border: 0; - border-radius: 0; - padding: 10px; -} - - -/* Login page */ -.login_head_bg { - background: #5682a3; - height: 226px; -} -.login_page { - margin: -131px auto 90px; - max-width: 404px; -} -.login_head_wrap { - height: 75px; -} - -.login_head_logo_link { - display: inline-block; - line-height: 30px; - padding: 23px 15px 22px; -} -.tg_logo_wrap { - line-height: 30px !important; -} -.icon-tg-logo { - width: 30px; - 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; -} -.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; -} -.login_head_submit_wrap, -.login_head_submit_progress { - float: right; -} -.login_head_submit_wrap { - font-weight: bold; -} -.login_head_submit_btn, -.login_head_submit_progress { - font-size: 13px; - line-height: 20px; - padding: 27px 15px 28px; - display: inline-block; - color: #FFF; -} -.login_head_submit_btn:hover, -.login_head_submit_btn:focus, -.login_head_submit_btn:active { - color: #FFF; - text-decoration: none; -} -.icon-next-submit { - width: 7px; - 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; -} - -.login_footer_wrap { - color: #84a2bc; - font-size: 13px; - line-height: 16px; - margin-top: 25px; - text-align: center; -} -.logo_footer_learn_more_link, -.logo_footer_learn_more_link:hover, -.logo_footer_learn_more_link:focus, -.logo_footer_learn_more_link:active { - color: #84a2bc; - font-weight: bold; -} - -.login_form_wrap { - background: #FFF; - padding: 44px 65px 44px; - - -webkit-box-shadow: 0px 1px 1px rgba(97, 127, 152, 0.2), - 1px 0px 0 rgba(97, 127, 152, 0.1), - -1px 0px 0 rgba(97, 127, 152, 0.1); - -moz-box-shadow: 0px 1px 1px rgba(97, 127, 152, 0.2), - 1px 0px 0 rgba(97, 127, 152, 0.1), - -1px 0px 0 rgba(97, 127, 152, 0.1); - box-shadow: 0px 1px 1px rgba(97, 127, 152, 0.2), - 1px 0px 0 rgba(97, 127, 152, 0.1), - -1px 0px 0 rgba(97, 127, 152, 0.1); - border-radius: 2px; - border: 0; - margin: 0; - max-width: none; -} -.login_phone_country_input_group { - cursor: pointer; -} -.login_phone_num_input_group { - overflow: hidden; -} -.login_phone_code_input_group { - float: left; - width: 50px; - margin-right: 25px; -} - - -.login_footer_about_wrap { - background: #FFF; - margin-top: 12px; - padding: 44px 65px 44px; - - -webkit-box-shadow: 0px 1px 0 #dfe5ec; - -moz-box-shadow: 0px 1px 0 #dfe5ec; - box-shadow: 0px 1px 0 #dfe5ec; - border-radius: 3px; - border: 1px solid #dfe5ec; -} -.login_footer_about_wrap h3 { - margin: 0 0 20px; - font-size: 15px; - font-weight: bold; - text-align: left; -} -.login_footer_about_wrap p { - margin: 0 0 20px; - font-size: 13px; - line-height: 160%; -} -.login_footer_about_wrap p:last-child { - margin: 0; -} -.login_form_head { - color: #222222; - margin: 0 0 20px; - font-size: 15px; - font-weight: bold; -} -.login_form_lead { - color: #999; - margin: 15px 0 30px; - font-size: 13px; - line-height: 160%; -} -.login_form_messaging { - color: #999; - font-size: 13px; - margin-top: 20px; - line-height: 160%; -} -.login_phone_head { - color: #222222; - font-size: 15px; - font-weight: bold; - text-align: center; - margin: 0; -} -.login_edit_phone { - margin: 5px 0 15px; - text-align: center; -} -.login_smscode_lead { - color: #999; - margin: 15px 0 15px; - line-height: 160%; - text-align: center; -} -.login_smscode_lead:last-child { - margin-bottom: 30px; -} - - -/* IM page start */ - - - - - - -/* Dialogs list */ -.im_dialogs_empty_wrap { - margin: 60px 50px; - text-align: center; -} -.im_dialogs_empty_header { - font-size: 15px; - color: #808080; - margin: 0 0 15px; -} -.im_dialogs_empty_lead { - color: #808080; - margin-bottom: 18px; -} -.im_dialogs_import_phonebook { - margin-top: 10px; -} - - - - -.im_dialogs_panel { - padding: 12px 12px 6px; - position: relative; -} - .im_dialogs_search { - position: relative; -} -.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; -} -.im_dialogs_modal_col_wrap .im_dialogs_search_field { - background-color: #FFF; - border-color: #d9dbde; -} -.is_1x .im_dialogs_search_field { - background-image: url(../img/icons/IconsetW_1x.png); -} -.im_dialogs_search_field:focus, -.im_dialogs_search_field:active { - background-color: #FFF; -} - - -a.tg_search_clear { - position: absolute; - right: 0; - margin-top: -40px; - width: 34px; - height: 34px; - opacity: 0.6; -} -.contacts_modal_search a.tg_search_clear { - right: 12px; - margin-top: -34px; -} -a.tg_search_clear:hover { - opacity: 1; -} -i.icon-search-clear { - display: inline-block; - color: #999; - width: 13px; - 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 i.icon-search-clear { - background-image: url(../img/icons/IconsetW_1x.png); -} - -.im_dialogs_tabs_wrap { - display: none; -} -.im_dialogs_tabs { - padding: 4px 0; - position: relative; -} -.im_dialogs_tab { - color: #8c8c8c; - background: #f2f2f2; - height: 30px; - text-align: center; - overflow: hidden; - width: 50%; - float: left; - padding: 7px 0; -} -.im_dialogs_tab:hover, -.im_dialogs_tab:active, -.im_dialogs_tab:focus { - color: #8c8c8c; - text-decoration: none; -} -.im_dialogs_tab.active { - color: #FFF; - background: #6490b1; -} -.im_dialogs_tab:first-child { - border-radius: 2px 0 0 2px; -} -.im_dialogs_tab:last-child { - border-radius: 0 2px 2px 0; -} - - -.im_dialogs_panel_dropdown { - position: absolute; - right: 12px; -} - -.im_dialogs_panel_dropdown .dropdown-menu { - right: auto; - left: 0; - margin-top: 8px; -} - - - -.im_dialogs_scrollable_wrap { - outline: none ! important; -} -.im_dialogs_scrollable_wrap .im_dialog_wrap { - margin-top: 0; -} -.im_dialogs_scrollable_wrap a.im_dialog { - clear: both; - overflow: hidden; - color: #000; - padding: 8px 9px; - border-radius: 0; -} -.im_dialogs_scrollable_wrap a.im_dialog:hover, -.im_dialogs_scrollable_wrap a.im_dialog_selected { - border-radius: 0; - background: #f2f6fa; -} -.im_dialogs_scrollable_wrap .active a.im_dialog { - border-radius: 0; - background-color: #6490b1; -} -.im_dialogs_scrollable_wrap .active a.im_dialog:hover, -.im_dialogs_scrollable_wrap .active a.im_dialog_selected { - background-color: #6490b1; -} - -.im_dialogs_scrollable_wrap a.im_dialog .icon, -.im_dialogs_scrollable_wrap a.im_dialog .glyphicon { - display: none; -} - -.im_dialog_message_wrap { - overflow: hidden; - word-wrap: break-word; -} -.im_dialog_chat_from_wrap, -.im_dialog_message_media, -.im_dialog_message_service { - color: #3a6d99; -} -.im_dialog_message_text { - color: #808080; -} -a.im_dialog:hover .im_dialog_message_text, -a.im_dialog_selected .im_dialog_message_text { - color: #698192; -} - -.active a.im_dialog .im_dialog_chat_from_wrap, -.active a.im_dialog .im_dialog_message_media, -.active a.im_dialog .im_dialog_message_service, -.active a.im_dialog .im_dialog_message_text, -.active a.im_dialog .im_dialog_message { - color: #FFF; -} -.im_dialog_peer { - color: #222; - font-weight: bold; - margin-top: 2px; - margin-bottom: 2px; -} -.active .im_dialog_peer { - color: #FFF; -} - -.im_dialog_badge { - background: #64c270; - font-size: 11px; - padding: 5px; - border-radius: 11px; - min-width: 21px; - text-align: center; - margin-top: 4px; -} -.active .im_dialog_badge { - color: #428bca; - background-color: #fff; -} -.im_dialogs_modal_col .im_dialog_badge { - display: none; -} - -.im_dialog_unread { - background: #c1d6e5; - display: inline-block; - float: right; - width: 8px; - height: 8px; - border-radius: 5px; - overflow: hidden; - margin: 12px 0 0; -} - -a.im_dialog:hover .im_dialog_unread, -a.im_dialog_selected .im_dialog_unread { - background: #a3c0d4; -} -.active .im_dialog_unread { - background-color: #a4c4dd; -} - - -.im_dialog_date { - color: #b3b3b3; - font-size: 0.85em; -} -a.im_dialog:hover .im_dialog_date, -a.im_dialog_selected .im_dialog_date { - color: #91a6ba; -} -.active .im_dialog_date, -.active a.im_dialog:hover .im_dialog_date, -.active a.im_dialog_selected .im_dialog_date { - color: #b8d1e4; -} - -.im_dialog_service { - font-style: italic; - color: #999; -} -.im_dialog_message, -.im_dialog_peer { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} -.im_dialog_message { - color: #808080; -} - - -/* IM history */ -.icon-caret { - width: 8px; - height: 4px; - - display: inline-block; - vertical-align: text-top; - margin-top: 7px; - margin-left: 6px; - - background: url(../img/icons/IconsetW.png) -17px -444px no-repeat; - background-size: 42px 1171px; -} -.is_1x .icon-caret { - background-image: url(../img/icons/IconsetW_1x.png); -} - - -.im_dialogs_empty_header { - font-size: 15px; - color: #808080; - margin: 0 0 15px; -} -.im_dialogs_empty_lead { - color: #808080; - margin-bottom: 18px; -} - - - -.im_history_scrollable_wrap { - outline: none ! important; - position: relative; -} -.im_history_to_bottom { - overflow: hidden; -} -.im_history_to_bottom .im_history_scrollable { - position: absolute; - bottom: 0; - width: 100%; -} - - -.im_history { - padding: 20px 0 0 0; - position: relative; -} - - -.im_message_unread_split { - background: #f0f4f7; - color: #8096a8; - text-align: center; - padding: 4px 10px; - margin: 10px 0; -} - - - -.im_message_author, -.im_message_fwd_author { - color: #3a6d99; - font-weight: bold; -} -.non_osx .im_message_author, -.non_osx .im_message_fwd_author { - font-size: 12px; -} - - -.im_message_from_photo, -.im_message_contact_photo, -.im_message_fwd_photo { - width: 42px; - height: 42px; - border-radius: 50%; - overflow: hidden; -} -.im_message_from_photo .peer_initials, -.im_message_contact_photo .peer_initials, -.im_message_fwd_photo .peer_initials { - line-height: 42px; -} -a.im_message_from_photo, -a.im_message_contact_photo { - margin: 0 15px 0 0; -} -.non_osx .im_message_contact_name { - font-size: 12px; -} -.im_message_contact_name { - font-weight: bold; -} -.im_message_contact_name, -.im_message_contact_phone { - white-space: nowrap; -} -a.im_message_photo_thumb, -a.im_message_video_thumb { - display: block; - overflow: hidden; - border-radius: 2px; -} -img.im_message_photo_thumb, -img.im_message_video_thumb { - overflow: hidden; - border-radius: 2px; -} -.im_message_video, -a.im_message_photo_thumb { - margin-top: 5px; -} -a.im_message_video_thumb { - float: left; - margin-right: 15px; - position: relative; -} - -img.im_message_video_thumb { - -webkit-filter: blur(2px); - -moz-filter: blur(2px); - -o-filter: blur(2px); - -ms-filter: blur(2px); - filter: blur(2px); - filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2'); -} - -div.im_message_video_thumb { - position: relative; -} -.im_message_video_duration { - background: rgba(0, 0, 0, 0.4); - color: #FFF; - position: absolute; - bottom: 4px; - right: 4px; - padding: 2px 6px; - font-size: 11px; - line-height: 15px; - border-radius: 2px; - overflow: hidden; - z-index: 1; -} - -.icon-videoplay { - position: absolute; - display: inline-block; - top: 50%; - left: 50%; - margin-left: -21px; - 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 .icon-videoplay { - background-image: url(../img/icons/IconsetW_1x.png); -} - -.im_message_geopoint { - border-radius: 2px; - margin-top: 5px; - overflow: hidden; - display: block; - position: relative; - width: 200px; - height: 100px; -} -.icon-geo-point { - position: absolute; - display: inline-block; - top: 50%; - left: 50%; - margin-left: -8px; - margin-top: -10px; - width: 15px; - height: 19px; - - background: url(../img/icons/IconsetW.png) -14px -389px no-repeat; - background-size: 42px 1171px; -} -.is_1x .icon-geo-point { - background-image: url(../img/icons/IconsetW_1x.png); -} - -.im_message_media_embed { - position: relative; - height: 0; - overflow: hidden; - margin-top: 5px; -} -.im_message_video_embed { - padding-bottom: 56.25%; /* 16/9 ratio */ -} -.im_message_insta_embed { - padding-bottom: 122%; -} -.im_message_vine_embed { - padding-bottom: 100%; -} -.im_message_soundcloud_embed { - padding-bottom: 56.25%; /* 16/9 ratio */ -} -.im_message_spotify_embed { - width: 300px; - height: 80px; -} -.im_message_media_embed iframe, -.im_message_media_embed webview { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} -.im_message_twitter_embed > blockquote { - visibility: hidden; -} - -.im_message_gif_wrap { - position: relative; -} -.im_message_gif_btn { - color: #FFF; - font-style: normal; - font-weight: bold; - position: absolute; - display: inline-block; - top: 50%; - left: 50%; - margin-left: -22px; - margin-top: -21px; - border: 2px solid #FFF; - border-radius: 20px; - padding: 10px; - z-index: 1; -} - -.im_message_video, -.im_message_document, -.im_message_upload_file, -.im_message_audio { - margin-top: 3px; - width: 317px; -} -.im_message_audio { - margin-top: 3px; -} -.im_message_file_button { - display: block; - background: rgba(218,228,234,0.50); - float: left; - width: 42px; - height: 42px; - border-radius: 50%; - margin-right: 10px; -} -.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 .im_message_file_button_icon { - background-image: url(../img/icons/General_1x.png); -} -.im_message_file_button_dl_doc .im_message_file_button_icon { - background-position: -12px -561px; - width: 16px; - height: 18px; - margin: 13px 13px; -} -.im_message_file_button_dl_audio { - background: #6490b1; - border-radius: 50%; -} -.im_message_file_button_dl_audio .im_message_file_button_icon { - 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 .im_message_file_button_dl_audio .im_message_file_button_icon { - background-image: url(../img/icons/General_1x.png); -} -.im_message_file_button_dl_audio .audio_player_btn_icon_pause, -.is_1x .im_message_file_button_dl_audio .audio_player_btn_icon_pause { - width: 12px; - height: 14px; - background-position: -14px -587px; - margin: 14px 15px; -} - -.im_message_selected .icon-document, -.im_history_selectable .im_message_outer_wrap:hover .icon-document { - background-color: #dae6f0; - background-position: -2px -542px; -} - -.im_history_selectable a { - pointer-events: none; -} - -.im_message_document_link_disabled { - cursor: default; - pointer-events: none; -} - -.im_message_document_info { - float: left; -} - -.im_message_document_thumb_wrap { - border-radius: 2px; - overflow: hidden; - background: #f2f2f2; - width: 100px; - min-height: 38px; - max-height: 100px; - margin-right: 10px; - text-align: center; - float: left; - line-height: 0; -} -img.im_message_document_thumb { - max-width: 100px; - max-height: 100px; - vertical-align: middle; -} -.im_message_document_name_wrap { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - width: 265px; - padding: 0 0 1px; -} -.im_message_document_actions { - width: 265px; -} - - -.im_message_document_name { - color: #3a6d99; - display: inline-block; - font-weight: bold; - max-width: 170px; - overflow: hidden; - vertical-align: text-top; - white-space: nowrap; - text-overflow: ellipsis; -} -.im_message_document_size { - color: #999; - padding-left: 2px; - vertical-align: text-top; -} -.im_message_document_actions a, -.audio_player_actions a { - margin-right: 10px; -} -.audio_player_title_wrap { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - padding: 1px 0 1px; - line-height: 16px; - height: 19px; - width: 200px; -} -.audio_player_title { - display: inline-block; - font-weight: bold; - max-width: 100px; - overflow: hidden; - vertical-align: text-top; - white-space: nowrap; - text-overflow: ellipsis; -} -.audio_player_meta { - overflow: hidden; - vertical-align: text-top; - display: inline-block; -} -.audio_player_size, -.audio_player_duration { - color: #999; - padding-left: 2px; -} -.audio_player_actions { - margin-top: 3px; -} - -.audio_player_seek_slider { - float: left; - margin-right: 15px; - width: 200px; -} -.audio_player_seek_slider .tg_slider_wrap { - height: 18px; - line-height: 18px; -} -.audio_player_seek_slider .tg_slider_track { - margin: 7px 0; - background: rgba(218,228,234,0.50); - height: 4px; - border-radius: 0; -} -.audio_player_seek_slider .tg_slider_track_fill { - background: #6490b1; - height: 4px; - width: 0; -} -.audio_player_seek_slider .tg_slider_thumb { - display: none; -} -.audio_player_seek_slider:hover .tg_slider_thumb { - display: block; -} - -.audio_player_volume_slider { - width: 50px; - float: left; -} -.audio_player_volume_slider .tg_slider_wrap { - height: 18px; - line-height: 18px; -} -.audio_player_volume_slider .tg_slider_thumb { - display: none; - background: #6490b1; - width: 4px; - height: 10px; - line-height: 16px; - margin-top: 4px; - border-radius: 0; -} -.audio_player_volume_slider:hover .tg_slider_thumb { - display: block; -} -.audio_player_volume_slider .tg_slider_track { - margin: 7px 0; - background: rgba(218,228,234,0.50); - height: 4px; -} -.audio_player_volume_slider .tg_slider_track_fill { - background: #6490b1; - height: 4px; - width: 0; -} - -.audio_player_progress_wrap { - overflow: hidden; -} -.audio_player_progress_wrap .tg_down_progress { - margin-top: 5px; -} - - - - -.im_message_upload_progress_wrap, -.im_message_download_progress_wrap { - margin-top: 5px; - width: 200px; -} - -.im_message_document_thumbed .im_message_document_name_wrap, -.im_message_document_thumbed .im_message_upload_progress_wrap, -.im_message_document_thumbed .im_message_download_progress_wrap, -.im_message_document_thumbed .im_message_document_actions { - width: 207px; -} -.im_message_document_thumbed .im_message_document_name { - max-width: 110px; -} -.im_message_video .im_message_document_name_wrap, -.im_message_video .im_message_download_progress_wrap, -.im_message_video .im_message_document_actions { - width: 152px; -} -.im_message_video .im_message_document_name_wrap { - margin-top: 5px; -} - -.im_message_cancelable_progress_wrap, -.im_message_playback_progress_wrap { - margin-top: 4px; - /*width: 265px;*/ -} -.im_message_media_progress_cancel { - margin-left: 15px; - line-height: 100%; - width: 50px; - display: block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.tg_up_progress, -.tg_down_progress { - height: 4px; - margin: 0; - padding: 0; - background: rgba(218,228,234,0.50); - border: 0; - border-radius: 0; - -webkit-box-shadow: none; - box-shadow: none; -} -.tg_up_progress .progress-bar, -.tg_down_progress .progress-bar { - height: 4px; - line-height: 4px; - background: #6B9ABD; - border-radius: 0; - overflow: hidden; - -webkit-box-shadow: none; - box-shadow: none; -} - - - -.im_service_message_wrap { - text-align: center; -} -.im_service_message { - display: inline-block; - min-width: 10px; - padding: 4px 7px; - line-height: 1.4; - color: #999; - text-align: center; - border-radius: 10px; - margin: 5px 0; -} - -.im_service_message_photo_thumb { - display: block; - margin: 0 auto; -} - - -.im_message_date, -.im_message_fwd_date { - color: #adadad; - font-size: 0.85em; - padding: 0 0 20px 10px; -} - - -div.im_message_author, -div.im_message_body { - display: block; - overflow: hidden; -} - -.im_message_meta, -.im_message_body { - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; -} - -.im_message_reply_wrap { - display: block; - color: inherit; - text-decoration: none; - margin-bottom: 5px; - margin-top: 2px; - overflow: hidden; -} -.im_message_reply_wrap:hover { - text-decoration: none; - color: inherit; -} -.im_message_reply_border { - background: #7eaad1; - height: 33px; - width: 2px; - position: absolute; - margin-left: -12px; -} -.im_message_reply { - padding-left: 12px; -} -.im_message_reply_thumb_wrap { - display: block; - float: left; - width: 42px; - height: 42px; - text-align: center; - position: absolute; -} -.im_message_reply_author { - font-weight: bold; - color: #3a6d99; - line-height: 16px; - margin-bottom: 3px; -} -.im_message_reply_loading { - padding: 7px 0 8px; -} -.im_reply_message_service, -.im_reply_message_media { - color: #999; -} -.im_message_reply_body { - line-height: 16px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - margin-bottom: 1px; -} -.im_message_reply_thumbed .im_message_reply_wrap, -.im_message_reply_thumbed .im_message_reply_border { - height: 42px; -} -.im_message_reply_thumbed .im_message_reply_author { - margin-top: 4px; -} -.im_message_reply_thumbed .im_message_reply_author, -.im_message_reply_thumbed .im_message_reply_body { - margin-left: 52px; -} -.im_message_reply_wrap .im_message_reply_thumbed { - margin-bottom: 4px; -} - - -a.im_message_fwd_photo { - position: absolute; - margin-top: 1px; -} -.im_message_fwd_date { - padding: 0; -} - -.im_message_text { - word-wrap: break-word; - line-height: 150%; -} -.im_message_mymention { - background: #FFF8CC; - /*border-bottom: 1px solid #FFE222;*/ - /*font-weight: bold;*/ -} - -.im_history_not_selected, -.im_history_empty { - visibility: hidden; - text-align: center; - color: #999; - font-size: 16px; - line-height: 18px; - padding: 1px 50px; - margin: 0; -} -.im_history_not_selected.vertical-aligned, -.im_history_empty.vertical-aligned { - visibility: visible; -} -.im_history_to_bottom .im_history_not_selected, -.im_history_to_bottom .im_history_empty { - display: none; -} - -.im_send_panel_wrap { - margin: 0 auto; - padding: 10px 15px 30px 15px; -} -.im_send_form_wrap { - position: relative; -} -.im_send_form { - margin: 0 auto; - position: absolute; - bottom: 0; -} -.im_attach_input, -.im_media_attach_input { - cursor: pointer; - font-size: 120px !important; - opacity: 0.01; - position: absolute; - z-index: 100; - margin: 0; - padding: 0; - - top: 0; - right: 0; -} - -.im_send_dropbox_wrap { - background: #FFF; - display: none; - padding: 17px 10px 0; - border: 1px dashed #999; - overflow: hidden; - text-align: center; - color: #999; - position: absolute; -} -textarea.im_message_field { - font-size: 12px; - margin-bottom: 10px; - padding: 6px; - min-height: 50px; - height: 50px; - resize: none; -} - - -.icon-online { - background: #6ec26d; - border: 1px solid #FFF; - display: block; - width: 11px; - height: 11px; - border-radius: 6px; - overflow: hidden; - position: absolute; - margin-top: -7px; - margin-left: 33px; -} - - -a.img_fullsize, -.img_fullsize_wrap { - display: block; - text-align: center; -} -img.img_fullsize { - margin: 0 auto; -} -.document_modal_image_wrap { - overflow: auto; -} -.document_fullsize_wrap { - display: none; - cursor: zoom-in; - text-align: center; -} -.document_fullsize_zoomed { - cursor: zoom-out; -} -.document_fullsize_img { - /*max-width: 100%;*/ - -webkit-user-select: none; -} -.document_fullsize_zoomed .document_fullsize_img { - /*min-width: 100%;*/ - -webkit-user-select: none; - image-rendering: optimizeSpeed; /* FUCK SMOOTHING, GIVE ME SPEED */ - image-rendering: -moz-crisp-edges; /* Firefox */ - image-rendering: -o-crisp-edges; /* Opera */ - image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */ - image-rendering: optimize-contrast; /* CSS3 Proposed */ - -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ - -} -.video_full_player video { - background: #000; -} - -.media_modal_info { - color: #999; - margin: 20px 0 0; -} -.media_modal_actions { - margin-top: 20px; -} -.media_modal_action_link { - margin-left: 15px; -} -.media_modal_author { - color: inherit; - font-weight: bold; -} -.media_modal_author:hover { - color: inherit; -} -.non_osx .media_modal_author { - font-size: 12px; -} - - - -/* Message composer */ -.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; -} -.composer_emoji_tooltip { - display: none; - position: absolute; - z-index: 999; - width: 254px; - margin-left: -116px; - margin-top: -245px; - - border: 1px #dfdfdf solid; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); - background: #FFF; - padding: 5px 2px 5px 8px; -} -.composer_emoji_tooltip_shown { - display: block; -} -.composer_emoji_tooltip_tail { - position: absolute; - bottom: -14px; - left: 50%; - margin-left: -13px; - overflow: hidden; - width: 26px; - height: 14px; -} -.icon-tooltip-tail { - background: #FFF; - width: 18px; - height: 18px; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); - display: inline-block; - -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); - border: 1px #dfdfdf solid; - border-width: 0 1px 1px 0; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - position: relative; - top: -8px; - left: 4px; - -} - -.composer_emoji_tooltip_tabs { - width: 100%; - margin: 5px 0 2px; -} -.composer_emoji_tooltip_tab { - line-height: 0; - color: white; - 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 .composer_emoji_tooltip_tab { - background-image: url(../img/icons/IconsetSmiles_1x.png); -} -.composer_emoji_tooltip_tab.active { - opacity: 1; -} - -.composer_emoji_tooltip_tab_recent {background-position: -9px -306px; } -.composer_emoji_tooltip_tab_recent.active {background-position: -9px -277px; } - -.composer_emoji_tooltip_tab_smile {background-position: -9px -34px; } -.composer_emoji_tooltip_tab_smile.active {background-position: -9px -5px; } - -.composer_emoji_tooltip_tab_flower {background-position: -9px -145px; } -.composer_emoji_tooltip_tab_flower.active {background-position: -9px -118px; } - -.composer_emoji_tooltip_tab_bell {background-position: -9px -89px; } -.composer_emoji_tooltip_tab_bell.active {background-position: -9px -61px; } - -.composer_emoji_tooltip_tab_car {background-position: -9px -196px; } -.composer_emoji_tooltip_tab_car.active {background-position: -9px -170px; } - -.composer_emoji_tooltip_tab_grid {background-position: -9px -248px; } -.composer_emoji_tooltip_tab_grid.active {background-position: -9px -222px; } - -.composer_emoji_tooltip_tab_stickers {background-position: -9px -361px; } -.composer_emoji_tooltip_tab_stickers.active {background-position: -9px -333px; } - - -.nano.composer_emoji_tooltip_content_wrap { - height: 174px; - position: relative; -} -.composer_emoji_tooltip_content { - /*position: relative;*/ - /*overflow: hidden; - overflow-y: auto;*/ - padding-right: 8px; - outline: 0!important; -} - - -a.composer_emoji_btn { - margin: 0 1px 0 0; - padding: 6px; - display: block; - float: left; - border-radius: 2px; -} -a.composer_emoji_btn:hover { - background-color: #edf2f5; -} - -.emoji { - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - *vertical-align: auto; - *zoom: 1; - *display: inline; - height: 18px; - width: 18px; - background-repeat: no-repeat; - text-indent: -9999px; - border: 0 none; -} - -/* widths and heights calculated according to spritesheet dimensions and icon size */ -.emoji-spritesheet-0 { - background-size: 486px 126px; - background-image: url('../img/emojisprite_0.png'); -} -.emoji-spritesheet-1 { - background-size: 522px 72px; - background-image: url('../img/emojisprite_1.png'); -} -.emoji-spritesheet-2 { - background-size: 594px 126px; - background-image: url('../img/emojisprite_2.png'); -} -.emoji-spritesheet-3 { - background-size: 612px 54px; - background-image: url('../img/emojisprite_3.png'); -} -.emoji-spritesheet-4 { - background-size: 612px 126px; - background-image: url('../img/emojisprite_4.png'); -} - -.emoji-w20 { - width: 20px; - height: 20px; - vertical-align: middle; - display: inline-block; -} -.emoji-w20.emoji-spritesheet-0 {background-size: 540px 140px;} -.emoji-w20.emoji-spritesheet-1 {background-size: 580px 80px;} -.emoji-w20.emoji-spritesheet-2 {background-size: 660px 140px;} -.emoji-w20.emoji-spritesheet-3 {background-size: 680px 60px;} -.emoji-w20.emoji-spritesheet-4 {background-size: 680px 140px;} - -.emoji-w26 { - width: 26px; - height: 26px; - vertical-align: middle; - display: inline-block; -} -.emoji-w26.emoji-spritesheet-0 {background-size: 702px 182px;} -.emoji-w26.emoji-spritesheet-1 {background-size: 754px 104px;} -.emoji-w26.emoji-spritesheet-2 {background-size: 858px 182px;} -.emoji-w26.emoji-spritesheet-3 {background-size: 884px 78px;} -.emoji-w26.emoji-spritesheet-4 {background-size: 884px 182px;} - -.composer_dropdown { - display: none; - padding: 6px 0; - border: 0; - -webkit-box-shadow: 0px 1px 1px 0px rgba(60,75,87,0.27); - -moz-box-shadow: 0px 1px 1px 0px rgba(60,75,87,0.27); - box-shadow: 0px 1px 1px 0px rgba(60,75,87,0.27); - border-radius: 0; - margin-top: -5px; -} - -.composer_dropdown > li > a { - display: block; - font-size: 13px; - line-height: 15px; - padding: 4px 10px; - color: #52719a; -} -.composer_dropdown li a:hover, -.composer_dropdown li a.composer_autocomplete_option_active { - color: #52719a; - background: #f2f6fa; -} -.composer_emoji_shortcut { - display: inline-block; - vertical-align: top; - margin-left: 15px; - line-height: 20px; -} - -.composer_mention_option { - line-height: 20px; -} -.composer_user_mention { - color: #808080; - margin-left: 7px; -} -.composer_dropdown li a:hover .composer_user_mention, -.composer_dropdown li a.composer_autocomplete_option_active .composer_user_mention { - color: #698192; -} -span.composer_user_photo { - display: inline-block; - width: 32px; - height: 32px; - border-radius: 50%; - overflow: hidden; - margin-right: 10px; - vertical-align: top; -} -img.composer_user_photo { - width: 32px; - height: 32px; -} -span.composer_user_photo .peer_initials { - line-height: 32px; - font-size: 14px; -} -.composer_user_name, -.composer_user_mention { - display: inline-block; - line-height: 32px; - vertical-align: top; -} - -.composer_sticker_btn { - width: 78px; - height: 78px; - display: block; - display: inline-block; - text-align: center; - padding: 3px; -} -.composer_sticker_btn:hover { - background: #f2f6fa; -} -.composer_sticker_image { - max-width: 72px; - max-height: 72px; -} - -.composer_rich_textarea { - box-sizing: content-box; - -moz-box-sizing: content-box; - font-size: 12px; - margin-bottom: 10px; - padding: 6px; - min-height: 38px; - height: auto; - width: auto; - max-height: 284px; - overflow: auto; - line-height: 17px; - - border: 1px solid #d2dbe3; - border-radius: 2px; - -webkit-box-shadow: none; - box-shadow: none; - -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - - -webkit-user-select: text; - word-wrap: break-word; - - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; -} - -.composer_rich_textarea:empty:before { - content: attr(placeholder); - color: #9aa2ab; -} -.composer_rich_textarea:active:before, -.composer_rich_textarea:focus:before { - content: none; -} -/*.composer_rich_textarea:empty:active:before, -.composer_rich_textarea:empty:focus:before { - content: attr(placeholder); - color: #9aa2ab; -}*/ - -.composer_rich_textarea img { - width: 20px; - height: 20px; - vertical-align: middle; - margin: -3px 0 0 0; -} - - -.error_modal_window .modal-dialog { - max-width: 350px; -} -.error_modal_description { - color: #999; - padding: 5px 0; - font-size: 13px; - line-height: 160%; -} -.error_modal_details textarea { - display: block; - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; - padding: 0; - font-size: 10px; - line-height: 100%; - white-space: pre-wrap; - padding: 4px; - margin: 10px 0 10px; - word-break: break-all; - word-wrap: break-word; - color: #333333; - background-color: #f5f5f5; - border: 1px solid #cccccc; - border-radius: 4px; - width: 100%; - text-align: left; -} -.error_modal_details_link, -.error_modal_details_link:hover { - font-size: 11px; - color: #999; -} - -.confirm_modal_description { - text-align: center; - padding: 20px 0; - font-size: 14px; - line-height: 160%; -} - -.confirm_phone_number { - font-weight: bold; - padding: 15px 10px 0; - text-align: center; -} - - -.photo_modal_window, -.video_modal_window, -.document_modal_window { - display: block; -} -.photo_modal_error { - color: #999; - position: absolute; - width: 100%; - top: 50%; - margin-top: -20px; - padding: 0 20px; - text-align: center; - font-size: 1.4em; - line-height: 160%; -} - -.video_full_error { - border-radius: 10px; - overflow: hidden; - background: rgba(0,0,0,0.6); - color: #FFF; - position: absolute; - top: 50%; - margin: -40px 10px 0; - padding: 10px 10px; - text-align: center; - font-size: 1.4em; - line-height: 160%; -} - - -.settings_modal_wrap .im_attach_input { - z-index: 999; -} -.settings_modal_username_link, -.settings_modal_username_link:hover { - color: inherit; -} -.settings_external_service { - line-height: 0; - display: inline-block; - padding: 7px 9px; -} -.settings_about_section_body { - padding-right: 0; -} -.settings_about_section_body p { - margin-top: 7px; - margin-bottom: 3px; -} -.icon-github { - display: inline-block; - width: 59px; - height: 18px; - background: url(../img/icons/AboutLogos_2x.png) no-repeat 0 -5px; - background-size: 60px 136px; -} -a:hover .icon-github { - background-position: 0 -43px; -} - -.icon-twitter { - display: inline-block; - width: 20px; - height: 15px; - margin-top: 1px; - background: url(../img/icons/AboutLogos_2x.png) no-repeat 0 -81px; - background-size: 60px 136px; -} -a:hover .icon-twitter { - background-position: 0 -116px; -} - -.is_1x .icon-github, -.is_1x .icon-twitter { - background-image: url(../img/icons/AboutLogos_1x.png); -} - -/* Contacts modal */ -.contacts_modal_search { - padding: 0 0 14px; - position: relative; -} -.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 .contacts_modal_search_field { - background-image: url(../img/icons/IconsetW_1x.png); -} - -a.contacts_modal_search_clear { - right: 9px; - margin-top: -24px; -} - -.contacts_scrollable_wrap { - outline: none ! important; -} -.contacts_modal_contacts_empty { - visibility: hidden; - text-align: center; - color: #999; - font-size: 16px; - line-height: 160%; - padding: 1px 50px; - margin: 0; -} -.contacts_modal_contacts_empty.vertical-aligned { - visibility: visible; -} - - -.contacts_modal_members_list .contacts_modal_contact_wrap { - margin-top: 0; -} -.contacts_modal_members_list a.contacts_modal_contact { - clear: both; - overflow: hidden; - color: #000; - padding: 8px 9px; - border-radius: 0; -} -.contacts_modal_members_list a.contacts_modal_contact:hover, -.contacts_modal_members_list .active a.contacts_modal_contact, -.contacts_modal_members_list .active a.contacts_modal_contact:hover { - background: #f2f6fa; -} - - -.contacts_modal_contact_name { - display: block; - color: #3C6E97; - font-weight: bold; - margin: 1px 0 2px; -} -.non_osx .contacts_modal_contact_name { - font-size: 12px; -} -.contacts_modal_contact_photo { - width: 40px; - height: 40px; - margin-right: 10px; - overflow: hidden; - border-radius: 2px; -} - -.contacts_modal_contact_status { - color: #999; -} -a.contacts_modal_contact:hover .contacts_modal_contact_status, -.contacts_modal_members_list .active a.contacts_modal_contact .contacts_modal_contact_status, -a.contacts_modal_contact:hover .md_modal_list_peer_description, -.contacts_modal_members_list .active a.contacts_modal_contact .md_modal_list_peer_description { - color: #91a6ba; -} - -.chat_modal_participant_wrap { - padding: 8px 0; - border-top: 1px solid #F0F0F0; -} -.chat_modal_participant_wrap:first-child { - border-top: 0; -} -.chat_modal_participant_kick { - padding: 11px 0; - display: block; -} -.chat_modal_participant_name { - display: block; - color: #3C6E97; - font-weight: bold; - margin: 1px 0 2px; -} -.non_osx .chat_modal_participant_name { - font-size: 12px; -} -.chat_modal_participant_status { - color: #999; -} -a.chat_modal_participant_photo { - width: 40px; - height: 40px; - margin-right: 10px; - border-radius: 2px; - overflow: hidden; -} -img.chat_modal_participant_photo { - width: 40px; - height: 40px; -} -.chat_modal_members_forbidden { - color: #999; -} - -.icon-contact-tick { - position: absolute; - right: 10px; - top: 17px; - 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 .icon-contact-tick { - background-image: url(../img/icons/IconsetW_1x.png); -} -.contacts_modal_members_list .contacts_modal_contact_wrap:hover .icon-contact-tick { - background-position: -9px -481px; - opacity: 0.5; -} -.contacts_modal_members_list .contacts_modal_contact_wrap.active .icon-contact-tick { - background-position: -9px -481px; - opacity: 1; -} -.contacts_modal_members_list .disabled { - pointer-events: none; -} -.contacts_modal_members_list .disabled .icon-contact-tick { - display: none; -} -.md_simple_modal_window .modal-dialog, -.confirm_modal_window .modal-dialog, -.error_modal_window .modal-dialog { - max-width: 348px; -} - - -.im_edit_panel_title { - text-align: center; - margin: 0; - font-size: 14px; - line-height: 34px; -} - -.im_message_focus .im_message_date, -.im_message_focus .im_message_document_size, -.im_message_focus .audio_player_duration, -.im_message_focus .audio_player_size, -.im_message_focus .im_message_fwd_date { - color: #899daf; -} - - -/* Colorized user names - -c03d33 red -4fad2d green -d09306 yellow -348cd4 blue -8544d6 purple -cd4073 pink -2996ad sea -ce671b orange - */ -.user_color_1, -.user_color_1:hover {color: #8365ab;} -.user_color_2, -.user_color_2:hover {color: #539e4f;} -.user_color_3, -.user_color_3:hover {color: #ae9661;} -.user_color_4, -.user_color_4:hover {color: #4979a3;} -.user_color_5, -.user_color_5:hover {color: #b7635d;} -.user_color_6, -.user_color_6:hover {color: #b3577a;} -.user_color_7, -.user_color_7:hover {color: #5397b4;} -.user_color_8, -.user_color_8:hover {color: #c07844;} - -.user_bgcolor_1 {background: #cc90e2;} -.user_bgcolor_2 {background: #80d066;} -.user_bgcolor_3 {background: #ecd074;} -.user_bgcolor_4 {background: #6fb1e4;} -.user_bgcolor_5 {background: #e57979;} -.user_bgcolor_6 {background: #f98bae;} -.user_bgcolor_7 {background: #73cdd0;} -.user_bgcolor_8 {background: #fba76f;} - -a.peer_photo_init:hover, -a.peer_photo_init:active, -a.peer_photo_init:focus { - text-decoration: none; -} -.peer_initials { - display: block; - color: #FFF; - text-align: center; - text-transform: uppercase; -} - - - -.im_dialogs_contacts_wrap h5, -.im_dialogs_messages_wrap h5 { - color: #999; - font-size: 13px; - margin-left: 20px; - font-weight: bold; -} - -/* Gif documents */ -.img_gif_with_progress_wrap { - position: relative; - overflow: hidden; - float: left; - margin-top: 3px; - max-width: 100%; -} - -.img_gif_thumb { - -webkit-filter: blur(2px); - -moz-filter: blur(2px); - -o-filter: blur(2px); - -ms-filter: blur(2px); - filter: blur(2px); - filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='2'); - margin: -1px; - padding: 1px; - max-width: 100%; -} -.img_gif_image { - max-width: 100%; -} -.img_gif_info_wrap { - color: #FFF; - font-size: 10px; - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 4px; -} -.img_gif_label, -.img_gif_size { - padding: 1px 8px; - background: rgba(0,0,0,0.5); - border-radius: 3px; - overflow: hidden; -} - -.img_gif_progress_wrap { - position: absolute; - bottom: 0; - left: 0; - right: 0; -} -.img_gif_progress_wrap .tg_progress { - background: rgba(0,0,0, 0.6); - border-color: rgba(0,0,0, 0.6); - border-width: 8px; - height: 18px; - border-radius: 0; -} -.img_gif_progress_wrap .progress-bar { - background: #FFF; - height: 2px; -} - - -.countries_modal_window .modal-dialog { - max-width: 392px; -} - -.countries_modal_window .modal_simple_header { - margin-bottom: 12px; - font-weight: normal; -} - -.countries_modal_search { - padding: 0 0 12px; - margin: 0 20px; - position: relative; -} -.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; - padding: 6px 20px 6px 30px; - margin-bottom: 0; - margin: 0; -} -.is_1x .countries_modal_search_field { - background-image: url(../img/icons/IconsetW_1x.png); -} -.countries_modal_search_field:focus, -.countries_modal_search_field:active { - background-color: #FFF; -} -a.countries_modal_search_clear { - right: 12px; - margin-top: -34px; -} -.countries_modal_wrap .modal-body { - padding: 14px 0; -} -.countries_scrollable_wrap a.countries_modal_country { - clear: both; - overflow: hidden; - color: #000; - padding: 8px 26px; - font-size: 12px; - border-radius: 0; -} -.countries_scrollable_wrap a.countries_modal_country:hover { - border-radius: 2px; - background: #f2f6fa; -} - -.countries_modal_country_code { - color: #999; -} -.countries_scrollable_wrap a.countries_modal_country:hover .countries_modal_country_code { - color: #698192; -} - - -/* Loading dots animation */ -.loading_dots { - display: inline-block; - font-size: 1em; - line-height: 1; - padding: 0.125em 0 0.175em 0.15em; -} - -.loading_dots i { - border: 0.125rem solid; - border-radius: 50%; - display: inline-block; - height: 0.2rem; - width: 0.2rem; - margin-left: 0.2rem; - - -webkit-animation: loading_dots 0.8s linear infinite; - -moz-animation: loading_dots 0.8s linear infinite; - -ms-animation: loading_dots 0.8s linear infinite; - animation: loading_dots 0.8s linear infinite; -} -.loading_dots i:nth-child(2) { - -webkit-animation-delay: 0.2s; - -moz-animation-delay: 0.2s; - -ms-animation-delay: 0.2s; - animation-delay: 0.2s; -} -.loading_dots i:nth-child(3) { - -webkit-animation-delay: 0.4s; - -moz-animation-delay: 0.4s; - -ms-animation-delay: 0.4s; - animation-delay: 0.4s; -} - -@-webkit-keyframes loading_dots { - 0% { - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -@-moz-keyframes loading_dots { - 0% { - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@-ms-keyframes loading_dots { - 0% { - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@keyframes loading_dots { - 0% { - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -.telegram_modal_logo { - background: url(../img/Telegram72_2x.png) no-repeat 0 0; - background-size: 72px 72px; -} -.is_1x .telegram_modal_logo { - background-image: url(../img/Telegram72.png); -} - -.changelog_modal_window .modal-dialog { - max-width: 480px; -} -.changelog_card_wrap { - text-align: center; - padding: 12px 0 18px; -} -.changelog_header { - margin-top: 15px; - font-size: 16px; -} -.changelog_card { - width: 160px; - height: 160px; - display: block; - background: url(../img/changelog/card_wecandoit.png) no-repeat 0 0; - background-size: 160px 160px; - margin: 0 auto; -} -.changelog_card_search { - width: 133px; - height: 133px; - display: block; - background: url(../img/changelog/search.png) no-repeat 0 0; - background-size: 133px 133px; - margin: 0 auto; -} - -.changelog_version_title { - color: #9d9479; - background: #efede3; -} -.changelog_version_changes_list li { - line-height: 20px; -} -.changelog_footer_wrap { - padding: 15px 28px 30px 120px; -} -.changelog_github_link { - font-size: 13px; - float: right; - color: #999; -} -.changelog_more_link { - font-size: 13px; -} - - -.bad_browser_wrap { - border-radius: 4px; - border: 1px solid #ccc; - background: #FFF; - max-width: 600px; - margin: 50px auto 0; - padding: 40px; -} -.bad_browser_wrap h2 { - margin-top: 0; -} -.bad_browser_text { - font-size: 14px; - line-height: 160%; - margin: 25px 0 30px; -} - -#nacl_listener { - position: absolute; - left: -10000px; -} - - -.peer_modal_profile_wrap { - padding: 35px 2px 0px; -} -.peer_modal_photo { - width: 72px; - height: 72px; - border-radius: 36px; - overflow: hidden; -} -a.peer_modal_photo, -div.peer_modal_photo { - display: block; - margin-right: 19px; -} -.peer_modal_photo .peer_initials { - line-height: 72px; - font-size: 22px; -} -.peer_modal_profile_name { - font-size: 14px; - padding: 15px 0 9px; - font-weight: bold; -} -.peer_modal_profile_description { - color: #ccdeed; -} - -.md_modal_split_actions_wrap { - position: relative; -} -.md_modal_split_actions { - position: absolute; - right: 25px; - top: -26px; -} -.md_modal_split_action { - display: block; - background: #FFF; - float: right; - position: relative; - width: 52px; - height: 52px; - margin-left: 20px; - border-radius: 26px; - overflow: hidden; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -} -.md_modal_split_action_camera { - 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; -} -.md_modal_split_action:hover .md_modal_split_action_camera, -.md_modal_split_action:active .md_modal_split_action_camera { - background-position: -10px -192px; -} -.md_modal_split_action_twitter { - 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; -} -.md_modal_split_action:hover .md_modal_split_action_twitter, -.md_modal_split_action:active .md_modal_split_action_twitter { - background-position: -7px -312px; -} - -.md_modal_split_action_msg { - 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; -} -.md_modal_split_action:hover .md_modal_split_action_msg, -.md_modal_split_action:active .md_modal_split_action_msg { - background-position: -10px -250px; -} - -.is_1x .md_modal_split_action_camera, -.is_1x .md_modal_split_action_twitter, -.is_1x .md_modal_split_action_msg { - background-image: url(../img/icons/ProfileIcons.png); -} - -.md_modal_sections { - padding-top: 17px -} - -.md_modal_iconed_section_wrap { - position: relative; - border-bottom: 1px solid #ebebeb; - margin: 19px 0 0 120px; - padding-right: 28px; -} -.md_modal_iconed_section_wrap:last-child { - border-bottom: 0; -} - -.md_modal_iconed_section_number { - margin-top: 0; -} -.md_modal_iconed_section_toggle { - margin-top: 10px; -} -.md_modal_section_icon { - margin-top: 8px; -} -.md_modal_iconed_section_radio { - margin-top: 1px; -} - -.md_modal_section_icon { - 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 .md_modal_section_icon { - background-image: url(../img/icons/ProfileIcons.png); -} -.md_modal_iconed_section_toggle .md_modal_section_icon { - margin-top: 8px; -} -.md_modal_iconed_section_radio .md_modal_section_icon { - margin-top: 10px; -} -.md_modal_iconed_section_link .md_modal_section_icon { - margin-top: 4px; -} -.md_modal_section_icon_phone { - width: 18px; - height: 18px; - background-position: -12px -10px; - margin-top: 3px; -} -.md_modal_section_icon_notification { - width: 17px; - height: 20px; - background-position: -12px -38px; -} -.md_modal_section_icon_keyboard { - width: 20px; - height: 14px; - background-position: -10px -140px; - margin-left: -66px; -} -.md_modal_section_icon_person { - width: 16px; - height: 16px; - background-position: -12px -90px; -} -.md_modal_section_icon_people { - width: 22px; - height: 14px; - background-position: -9px -116px; -} -.md_modal_section_icon_more { - width: 18px; - height: 12px; - background-position: -11px -68px; -} - -.md_modal_section_param_wrap { - margin-top: 19px; - margin-bottom: 19px; -} -.md_modal_section_param_wrap:last-child { - margin-bottom: 16px; -} -.md_modal_section_param_wrap .md_modal_section_param_name { - color: #909090; - font-size: 11px; - line-height: 14px; - margin-top: 4px; -} -.md_modal_section_range_wrap { - padding-right: 4px; - margin-bottom: 25px; - padding-top: 1px; -} -.md_modal_section_select_wrap { - margin-bottom: 20px; -} -.md_modal_section_select { - float: right; - font-size: 12px; - padding: 0; -} -.md_modal_section_select_wrap .md_modal_section_param_name { - padding-top: 1px; -} -.md_modal_section_select .dropdown-toggle { - font-size: 12px; - padding: 0; - line-height: normal; -} -.md_modal_section_select .dropdown-menu { - left: -15px; -} -.md_modal_section_link_wrap { - padding-bottom: 15px; -} -.md_modal_section_link { - color: inherit; - display: block; - padding: 4px 0; -} -.md_modal_section_link:hover { - text-decoration: none; -} - -.md_modal_versioned_section_wrap { - position: relative; - border-bottom: 1px solid #ebebeb; - margin: 19px 0 0 120px; - padding-right: 28px; -} -.md_modal_versioned_section_wrap:last-child { - border-bottom: 0; -} -.md_modal_section_version { - color: #777; - display: inline-block; - margin-left: -70px; - position: absolute; -} -.md_modal_section_splitter { - border-top: 1px solid #dfdfdf; - box-shadow: inset 0px 1px 1px #ededed; - height: 12px; - background: #f5f5f5; -} - - -.md_modal_list_peer_wrap { - padding-bottom: 16px; -} -.md_modal_list_peer_action { - font-size: 13px; - padding: 3px; - margin: -3px; -} -.md_modal_list_peer_photo { - width: 42px; - height: 42px; - line-height: 42px; - border-radius: 50%; - overflow: hidden; -} -a.md_modal_list_peer_photo, -div.md_modal_list_peer_photo { - margin-right: 12px; -} -.md_modal_list_peer_name { - font-size: 13px; - font-weight: bold; -} -a.md_modal_list_peer_name { - color: inherit; -} -.md_modal_list_peer_description { - margin-top: 4px; - color: #999; -} -.md_modal_list_peer_description.status_online, -.md_modal_list_peer_description .status_online { - color: #3a6d99; -} - -.md_modal_footer { - padding: 15px 27px 15px; -} - - - -.md_photo_loading { - display: block; - width: 72px; - height: 72px; - border-radius: 36px; - overflow: hidden; - background: #48769b; - text-align: center; - line-height: 72px; - padding: 0; -} -.md_photo_loading i { - display: inline-block; - background: #FFF; - width: 8px; - height: 8px; - border-radius: 4px; - vertical-align: middle; - border: 0; - margin-left: 6px; -} -.md_photo_loading i:first-child { - margin-left: 0; -} \ No newline at end of file diff --git a/app/css/desktop.css b/app/css/desktop.css deleted file mode 100644 index caa68f51..00000000 --- a/app/css/desktop.css +++ /dev/null @@ -1,1911 +0,0 @@ -.tg_head_wrap { -} -.tg_head_split { - max-width: 1010px; - margin: 0 auto; - height: 48px; - background: #5682a3; -} -.tg_head_logo_wrap { - float: left; - width: 31%; -} -.tg_head_main_wrap { - float: left; - width: 69%; - white-space: nowrap; -} - -.tg_head_btn { - display: block; - font-weight: bold; - padding: 16px 19px; - color: #b9cfe3; - font-size: 13px; - line-height: 16px; -} -.dropdown.open .tg_head_btn, -.tg_head_btn:hover { - color: #FFF; - text-decoration: none; - background: #497799; -} - -.dropdown.open .tg_head_btn { - position: relative; - z-index: 5; -} - -.tg_head_logo_dropdown .dropdown-toggle { - color: #FFF; - padding: 17px 20px 15px 22px; - display: block; - font-size: 14px; - line-height: 16px; - vertical-align: top; -} -.tg_head_logo_dropdown .dropdown-toggle:hover, -.tg_head_logo_dropdown .dropdown-toggle:focus, -.tg_head_logo_dropdown .dropdown-toggle:active { - text-decoration: none; -} -.tg_head_logo_dropdown .dropdown-toggle .tg_head_logo_text { - display: inline-block; - vertical-align: top; -} -.icon-hamburger-wrap { - display: inline-block; - width: 18px; - height: 14px; - -webkit-transform: translate3d(0,0,0); -} -.tg_head_logo_dropdown .icon-hamburger-wrap { - margin: 0 40px 0 0; - vertical-align: top; -} -.tg_head_logo_dropdown .icon-tg-title { - vertical-align: top; -} -.icon-hamburger-wrap .icon-bar { - background: #fff; - display: block; - height: 2px; - margin: 0; -} -.icon-hamburger-wrap .icon-bar:nth-child(2) { - margin-bottom: 4px; - margin-top: 4px; -} - -.tg_head_logo_dropdown .icon-bar { - opacity: 1; - -webkit-transition: -webkit-transform .1s ease-in; - -o-transition: -o-transform .1s ease; - -ms-transition: -ms-transform .1s ease; - -moz-transition: -moz-transform .1s ease; - transition: transform .1s ease-in; - -webkit-transform-origin: 50% 50%; - -o-transform-origin: 50% 50%; - -ms-transform-origin: 50% 50%; - -moz-transform-origin: 50% 50%; - transform-origin: 50% 50%; -} -.tg_head_logo_dropdown:not(.open) .dropdown-toggle:hover .icon-bar:nth-child(1) { - -webkit-transform: translateY(-1px); - -moz-transform: translateY(-1px); - -ms-transform: translateY(-1px); - -o-transform: translateY(-1px); - transform: translateY(-1px); -} -.tg_head_logo_dropdown:not(.open) .dropdown-toggle:hover .icon-bar:nth-child(3) { - -webkit-transform: translateY(1px); - -moz-transform: translateY(1px); - -ms-transform: translateY(1px); - -o-transform: translateY(1px); - transform: translateY(1px); -} - -.tg_head_logo_dropdown.open .icon-bar:nth-child(1) { - -webkit-transform: translate3d(0,6px,0) rotate(45deg); - -moz-transform: translate3d(0,6px,0) rotate(45deg); - -ms-transform: translate3d(0,6px,0) rotate(45deg); - -o-transform: translate3d(0,6px,0) rotate(45deg); - transform: translate3d(0,6px,0) rotate(45deg); -} -.tg_head_logo_dropdown.open .icon-bar:nth-child(2) { - opacity: 0; -} -.tg_head_logo_dropdown.open .icon-bar:nth-child(3) { - -webkit-transform: translate3d(0,-6px,0) rotate(-45deg); - -moz-transform: translate3d(0,-6px,0) rotate(-45deg); - -ms-transform: translate3d(0,-6px,0) rotate(-45deg); - -o-transform: translate3d(0,-6px,0) rotate(-45deg); - transform: translate3d(0,-6px,0) rotate(-45deg); -} - - -.tg_head_logo_dropdown .dropdown-menu { - border-radius: 0; - padding: 9px 0 7px; - - margin: -1px 0 0; - float: none; - right: 0; - border: 1px solid rgba(15, 60, 96, 0.2); - border-left-color: #b5c3d0; - border-right-color: #b5c3d0; - -webkit-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27); - -moz-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27); - box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27); - overflow: hidden; -} - -@-webkit-keyframes rollIn { - from { transform: translateY(-220px); } - to { transform: translateY(0); } -} - -@keyframes rollIn { - from { transform: translateY(-220px); } - to { transform: translateY(0); } -} - -.tg_head_logo_dropdown.open .dropdown-menu { - -webkit-animation: rollIn 0.1s ease-in; - animation: rollIn 0.1s ease-in; - z-index: 4; -} -.tg_head_logo_dropdown .dropdown-menu > li > a { - font-size: 12px; - line-height: 21px; - padding: 11px 19px 10px 21px; - color: #42749b; -} -.tg_head_logo_dropdown .dropdown-menu > li > a:hover { - background: #f2f6fa; -} -.tg_head_logo_dropdown .dropdown-menu > li > a span { - vertical-align: top; -} - -.icon-new-group { - width: 20px; - 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; -} -.icon-contacts { - width: 18px; - height: 18px; - margin-right: 40px; - margin-top: 2px; - display: inline-block; - vertical-align: top; - background: url(../img/icons/General.png) no-repeat -11px -135px; - background-size: 40px 778px; -} -.icon-settings { - width: 20px; - height: 20px; - margin-right: 38px; - margin-top: 1px; - display: inline-block; - vertical-align: top; - background: url(../img/icons/General.png) no-repeat -10px -163px; - background-size: 40px 778px; -} -.icon-faq { - width: 20px; - height: 20px; - margin-right: 38px; - margin-top: 1px; - display: inline-block; - vertical-align: top; - background: url(../img/icons/General.png) no-repeat -10px -637px; - background-size: 40px 778px; -} -.icon-about { - width: 21px; - height: 21px; - 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 .icon-new-group, -.is_1x .icon-contacts, -.is_1x .icon-settings, -.is_1x .icon-faq, -.is_1x .icon-about { - background-image: url(../img/icons/General_1x.png); -} - -.tg_head_connecting_text { - color: #b9cfe3; - padding: 14px 15px; - font-size: 13px; - display: block; - line-height: 20px; - float: left; -} -.tg_head_connecting_wrap .tg_head_btn { - float: left; -} -.tg_head_peer_dropdown { - float: right; -} -.tg_head_msgs_edit_btn { - float: right; -} -.tg_head_peer_status { - font-weight: normal; -} -.tg_head_peer_dropdown .dropdown-menu { - max-width: 100%; - border-radius: 0; - padding: 9px 0; - - margin: -1px 0 0 0; - border: 1px solid rgba(15, 60, 96, 0.2); - -webkit-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27); - -moz-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27); - box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27); -} -.tg_head_peer_more_dropdown .dropdown-menu { - left: auto; - right: 0; -} - -.tg_head_peer_dropdown .dropdown-menu > li > a { - font-size: 13px; - line-height: 15px; - padding: 11px 18px 11px 18px; - color: #52719a; -} -.tg_head_peer_dropdown .dropdown-menu > li > a:hover { - background: #f3f6fa; -} - -.tg_head_peer_return_btn { - float: right; -} -.tg_head_peer_return_count { - color: #FFF; - margin-left: 3px; -} -.tg_head_peer_title_wrap { - overflow: hidden; -} -.tg_head_peer_title_wrap .tg_head_btn { - padding: 15px 19px 15px; - line-height: 18px; -} -.tg_head_peer_title_wrap .tg_head_btn .tg_head_peer_info { - display: block; - white-space: nowrap; - overflow: hidden; - -ms-text-overflow: ellipsis; - text-overflow: ellipsis; -} - -.tg_head_peer_title { - display: inline-block; - color: #fff; - margin-right: 3px; - -ms-text-overflow: ellipsis; - text-overflow: ellipsis; - max-width: 180px; - overflow: hidden; - vertical-align: top; -} - -.tg_head_peer_media { - padding: 14px 19px; - color: #FFF; - font-size: 13px; - line-height: 20px; - float: left; - font-weight: bold; -} -.icon-filter-photos, -.icon-filter-video, -.icon-filter-documents, -.icon-filter-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 .icon-filter-photos, -.is_1x .icon-filter-video, -.is_1x .icon-filter-documents, -.is_1x .icon-filter-audio { - background-image: url(../img/icons/General_1x.png); -} -.icon-filter-photos { - width: 18px; - height: 18px; - background-position: -11px -223px; - margin-top: 1px; -} -.icon-filter-video { - width: 16px; - height: 18px; - background-position: -12px -278px; - margin-top: 1px; -} -.icon-filter-documents { - width: 18px; - height: 17px; - background-position: -11px -251px; - margin-top: 1px; -} -.icon-filter-audio { - width: 14px; - height: 19px; - background-position: -13px -306px; - margin-top: 0; -} - - - -/** initial setup **/ -.nano { - position : relative; - width : 100%; - height : 100%; - overflow : hidden; -} -.nano > .nano-content { - position : absolute; - overflow : scroll; - overflow-x : hidden; - top : 0; - right : 0; - bottom : 0; - left : 0; -} -.nano > .nano-content:focus { - outline: thin dotted; -} -.nano > .nano-content::-webkit-scrollbar { - display: none; -} -.has-scrollbar > .nano-content::-webkit-scrollbar { - display: block; -} -.nano > .nano-pane { - background : rgba(0,0,0,.25); - position : absolute; - width : 10px; - right : 0; - top : 0; - bottom : 0; - visibility : hidden\9; /* Target only IE7 and IE8 with this hack */ - opacity : .01; - -webkit-transition : .2s; - -moz-transition : .2s; - -o-transition : .2s; - transition : .2s; - -moz-border-radius : 5px; - -webkit-border-radius : 5px; - border-radius : 5px; -} -.nano > .nano-pane > .nano-slider { - background: #444; - background: rgba(0,0,0,.5); - position : relative; - margin : 0 1px; - -moz-border-radius : 3px; - -webkit-border-radius : 3px; - border-radius : 3px; -} -.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { - visibility : visible\9; /* Target only IE7 and IE8 with this hack */ - opacity : 0.99; -} -.composer_emoji_tooltip { - z-index: 1001; -} -.composer_emoji_tooltip .nano > .nano-pane { - background : rgba(255,255,255,0.0); - right: -2px; -} -.composer_emoji_tooltip .nano > .nano-pane > .nano-slider { - background: #d1d1d1; - margin: 0 3px 0 4px; -} - -.countries_modal_col .nano > .nano-pane { - background : rgba(3,36,64,0.08); - width : 3px; - right: 6px; - top: 0; - -webkit-transition : .2s; - -moz-transition : .2s; - -o-transition : .2s; - transition : .2s; - -moz-border-radius : 0; - -webkit-border-radius : 0; - border-radius : 0; -} -.countries_modal_col .nano > .nano-pane > .nano-slider { - background : rgba(3,46,79,0.22); - margin: 0; - -moz-border-radius : 0; - -webkit-border-radius : 0; - border-radius : 0; -} - - - -.im_page_wrap { - background: #FFF; - max-width: 1010px; - min-width: 300px; - margin: 0 auto; - - -webkit-box-shadow: 0px 1px 0 #dfe5ec; - -moz-box-shadow: 0px 1px 0 #dfe5ec; - box-shadow: 0px 1px 0 #dfe5ec; - - border-radius: 0 0 3px 3px; - - border-left: 1px solid #dfe5ec; - border-right: 1px solid #dfe5ec; - border-bottom: 1px solid #d2dbe3; - overflow: hidden; -} - - -.footer_wrap { - font-size: 11px; - text-align: center; - color: #9cacb9; - line-height: 40px; -} -.footer_empty { - height: 23px; -} -.footer_brand { - color: #9cacb9; - font-weight: bold; -} -a.footer_lang_link { - color: #9cacb9; -} -a.footer_lang_link.active { - font-weight: bold; -} -a.footer_link { - color: #9cacb9; - padding: 0 3px; -} -.footer_brand:hover, -.footer_brand:active, -a.footer_lang_link.active:hover, -a.footer_lang_link.active:active, -a.footer_link.active:hover, -a.footer_link.active:active { - color: #8499aa; - text-decoration: none; -} - -.footer_link_divider { - padding: 0 5px; -} - -.im_dialogs_col { - margin-right: -7px; -} -.im_dialogs_col_wrap { - float: left; - width: 31%; - border-right: 2px solid #E9EBED; - padding-bottom: 10px; -} -.im_dialogs_scrollable_wrap { - padding: 0 7px 0 0; - - /* Hardware acceleration in Safari */ - -webkit-transform: translateZ(0); - -webkit-perspective: 1000; - -webkit-backface-visibility: hidden; -} -.im_dialogs_modal_col_wrap .im_dialogs_scrollable_wrap { - padding: 0; -} -.im_dialogs_col .nano > .nano-pane { - background : rgba(0,0,0,0.0); - width : 12px; - right: 0px; - -moz-border-radius : 0; - -webkit-border-radius : 0; - border-radius : 0; - -webkit-transition : none; - -moz-transition : none; - -o-transition : none; - transition : none; -} -.im_dialogs_col .nano > .nano-pane > .nano-slider { - background: rgba(30, 85,127 , 0.3); - margin: 0 5px; - -moz-border-radius : 0; - -webkit-border-radius : 0; - border-radius : 0; -} - -.im_history_col_wrap { - float: left; - width: 69%; -} -.im_history_scrollable_wrap { - /* Hardware acceleration in Safari */ - -webkit-transform: translateZ(0); - -webkit-perspective: 1000; - -webkit-backface-visibility: hidden; -} -.im_history_col .nano > .nano-pane, -.contacts_modal_col .nano > .nano-pane, -.im_dialogs_modal_col .nano > .nano-pane { - background : rgba(216,223,225,0.45); /*45% d8dfe5*/ - width : 9px; - right: 0; - top: 0; - -moz-border-radius : 2px; - -webkit-border-radius : 2px; - border-radius : 2px; - - -webkit-transition : none; - -moz-transition : none; - -o-transition : none; - transition : none; -} -.contacts_modal_col .nano > .nano-pane { - width: 5px; - right: 4px; -} - -.im_dialogs_modal_col .nano > .nano-pane { - width: 6px; - right: 2px; -} - -.im_history_col .nano > .nano-pane { - top: 10px; - right: 8px; -} -.im_history_col .nano > .nano-pane > .nano-slider, -.contacts_modal_col .nano > .nano-pane > .nano-slider, -.im_dialogs_modal_col .nano > .nano-pane > .nano-slider { - background : rgba(137,160,179,0.50); /*50% 89a0b3*/ - margin: 0; - -moz-border-radius : 2px; - -webkit-border-radius : 2px; - border-radius : 2px; -} - - - - -.im_history_no_dialogs_wrap { - margin: 122px 170px 60px; - text-align: center; -} - -.im_history_appending { - -webkit-transition: all ease-in-out 0.2s; - -moz-transition: all ease-in-out 0.2s; - -ms-transition: all ease-in-out 0.2s; - -o-transition: all ease-in-out 0.2s; - transition: all ease-in-out 0.2s; -} - -.im_history_typing_wrap { - line-height: 18px; - width: 100%; - height: 39px; - padding: 13px 0 8px; - overflow: hidden; - -webkit-user-select: none; -} -.im_history_typing { - font-size: 11px; - color: #999; - max-width: 556px; - margin: 0 auto; - padding: 0 81px 0 85px; -} -.im_history_typing a.im_history_typing_author { - color: #999; - font-weight: bold; -} - -/* Contacts modal */ -.contacts_modal_window .modal-dialog { - max-width: 420px; -} -.contacts_modal_search { - padding: 15px 12px 12px; - position: relative; -} -.contacts_modal_members_list a.contacts_modal_contact { - padding: 8px 16px; -} -.contacts_modal_members_list .active a.contacts_modal_contact, -.contacts_modal_members_list .active a.contacts_modal_contact:hover { - background: #6490b1; - color: #FFF; -} -.contacts_modal_members_list .active a.contacts_modal_contact .md_modal_list_peer_description, -.contacts_modal_members_list .active a.contacts_modal_contact:hover .md_modal_list_peer_description, -.contacts_modal_members_list .active a.contacts_modal_contact .md_modal_list_peer_description .status_online { - color: #FFF; -} - -.icon-message-status { - pointer-events: none; - background: #4eabf1; - border: 0; - display: block; - width: 10px; - height: 10px; - border-radius: 7px; - position: absolute; - margin-left: -26px; - margin-top: 16px; - opacity: 0; -} -.im_message_unread .icon-message-status { - opacity: 1.0; -} -.im_message_pending .icon-message-status { - opacity: 0.5; -} -.im_message_error_btn { - display: none; -} -.im_message_error .im_message_error_btn { - display: inline; -} -.im_message_error_btn .icon-message-status { - background: #da564d; - opacity: 0.85; -} -.im_message_error_btn .icon-message-status:hover { - opacity: 1; -} - -/* Messages edit panel */ -.im_edit_delete_btn, -.im_edit_forward_btn, -.im_edit_reply_btn { - border-radius: 2px; - padding: 7px 17px; - font-weight: normal; - font-size: 12px; - line-height: 18px; - margin: 6px 0 6px 14px; -} -.im_edit_panel_wrap { - padding: 0px 0 43px; - margin: 0 24px 0 12px; -} -.im_edit_panel_border { - display: block; - margin: 0 0 42px 3px; - border-bottom: 1px solid #EEE; -} -.im_edit_cancel_link { - display: block; - padding: 7px 17px; - border-radius: 2px; - overflow: hidden; - margin: 6px 6px; -} -.im_edit_cancel_link { - float: right; -} -.im_edit_selected_actions { - text-align: left; - text-transform: uppercase; -} -.im_selected_count { - color: #b9cfe3; -} - -.im_submit { - color: #499dd9; - font-size: 13px; - line-height: 18px; - height: 18px; - border-radius: 0; - float: right; - min-width: 0; - margin-top: 5px; - margin-left: 10px; - width: auto; - padding: 0; - font-weight: bold; -} -.im_submit:hover { - color: #3589c5; - background: inherit; -} - -.composer_emoji_panel { - display: block; - height: 30px; - overflow: hidden; - max-width: 210px; -} -.composer_emoji_panel a.composer_emoji_btn { - display: inline-block; - padding: 5px; - outline: 0; - border-radius: 2px; - margin: -1px 0 2px -1px; -} -/*.composer_emoji_panel a:hover { - background-color: #edf2f5; -}*/ - -.im_message_selected .im_message_date, -.im_message_selected .im_message_document_size, -.im_message_selected .im_message_audio_duration, -.im_message_selected .im_message_audio_size, -.im_message_selected .im_message_fwd_date, -.im_history_selectable .im_message_outer_wrap:hover .im_message_date, -.im_history_selectable .im_message_outer_wrap:hover .im_message_document_size, -.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_duration, -.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_size, -.im_history_selectable .im_message_outer_wrap:hover .im_message_fwd_date { - color: #899daf; -} - -.im_content_message_select_area { - display: none; - cursor: pointer; - position: absolute; - width: 99px; - height: 58px; - margin: -8px 0 0 -99px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.icon-select-tick { - display: none; - 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 .icon-select-tick { - background-image: url(../img/icons/IconsetW_1x.png); -} -@media (min-width: 1024px) { - .im_content_message_select_area { - display: block; - } - .im_message_wrap { - position: relative; - } -} - -.im_message_selected .icon-select-tick, -.im_history_selectable .im_message_outer_wrap:hover .icon-select-tick, -.im_content_message_select_area:hover .icon-select-tick { - display: inline-block; - background-position: -9px -481px; - opacity: 0.5; -} -.im_message_selected .icon-select-tick { - opacity: 1 !important; -} - -/* Dialogs modal */ -.peer_select_window .modal-dialog { - max-width: 420px; -} -.peer_select_window .im_dialogs_panel { - padding-top: 15px; -} -.peer_select_modal_footer { - box-shadow: 0 -1px 0px rgba(0,0,0,0.05); - padding: 15px 10px 15px; -} -.peer_select_modal_recipients_wrap { - padding: 6px 0 0 10px; - white-space: nowrap; - max-width: 300px; - overflow: hidden; - text-overflow: ellipsis; -} -.peer_select_modal_recipients_empty, -.peer_select_modal_recipients_name { - color: #999; -} -.peer_select_modal_recipient { - display: inline-block; - white-space: nowrap; - max-width: 120px; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: bottom; -} - -@media (max-height: 600px), (max-width: 1010px) { - .im_page_wrap { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - border-bottom: 0; - border-radius: 0; - } - - .footer_wrap { - display: none; - } -} - -@media (max-width: 900px) { - - /* Status ticks */ - .icon-message-status, - .im_message_error_btn, - .icon-message-status-tick { - display: none; - } - .im_message_out .icon-message-status-tick { - display: inline-block; - width: 16px; - height: 10px; - background: url(../img/icons/Checks2_2x.png); - background-size: 16px 10px; - top: 2px; - position: relative; - } - .is_1x .im_message_out .icon-message-status-tick { - background-image: url(../img/icons/Checks2_1x.png); - } - .im_message_pending .icon-message-status-tick { - display: none; - } - .im_message_unread .icon-message-status-tick { - background: url(../img/icons/Checks1_2x.png); - background-size: 16px 10px; - } - .is_1x .im_message_unread .icon-message-status-tick { - background-image: url(../img/icons/Checks1_1x.png); - } - .im_message_date { - padding: 0; - } -} - - -.im_message_fwd_author_wrap { - margin: 1px 0 4px; - display: inline-block; -} -.im_message_fwd_author { - margin-right: 5px; -} -.im_message_fwd .im_message_fwd_author_wrap, -.im_message_fwd .im_message_text, -.im_message_fwd .im_message_media { - margin-left: 52px; -} - -.im_send_panel_wrap { - max-width: 554px; - padding-bottom: 23px; -} -.im_send_form { - max-width: 382px; - left: 70px; - right: 72px; -} - -.im_panel_peer_photo, -.im_panel_own_photo { - width: 52px; - height: 52px; - line-height: 52px; - border-radius: 50%; - overflow: hidden; -} -div.im_panel_peer_photo, -a.im_panel_peer_photo { - cursor: pointer; - margin-left: 20px; - height: 55px; -} -a.im_panel_own_photo { - display: block; - margin-right: 18px; -} -a.im_panel_own_photo .peer_initials, -div.im_panel_peer_photo .peer_initials, -a.im_panel_peer_photo .peer_initials { - font-size: 18px; - line-height: 50px; -} - -.im_panel_peer_online { - background: #6ec26d; - border: 2px solid #FFF; - display: block; - width: 14px; - height: 14px; - border-radius: 7px; - overflow: hidden; - position: absolute; - margin-top: -12px; - 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 { - opacity: 1; -} -.composer_emoji_insert_btn:active .icon-emoji, -.composer_emoji_insert_btn.composer_emoji_insert_btn_on .icon-emoji { - background-position: -9px -367px; - opacity: 1; -} - - - - - - - - - - - - - -.im_send_field_wrap { - margin-bottom: 15px; - position: relative; -} -.composer_rich_textarea, -.composer_textarea { - border-radius: 0; - border: 0; - box-shadow: none; - outline: none; - box-shadow: 0 1px 0 0 #e8e8e8; - padding: 1px 30px 1px 0; - margin: 0; - min-height: 50px; - line-height: 20px; - height: auto; -} -.composer_rich_textarea:focus, -.composer_textarea:focus { - border: 0; - box-shadow: none; - outline: none; - box-shadow: 0 2px 0 0 #77b7e4; -} - -.im_attach { - cursor: pointer; - display: block; - overflow: hidden; - position: relative; - - width: 18px; - height: 17px; - margin-right: 28px; - margin-top: 6px; -} - -.icon-paperclip { - display: inline-block; - 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 .icon-paperclip { - background-image: url(../img/icons/General_1x.png); -} -.im_attach:hover .icon-paperclip { - opacity: 1; -} -.im_attach:active .icon-paperclip { - background-position: -11px -482px; - opacity: 1; -} - - -.im_media_attach { - cursor: pointer; - display: block; - overflow: hidden; - position: relative; - padding: 0; - - width: 20px; - height: 18px; - margin-top: 5px; - margin-right: 25px; -} - - -.icon-camera { - display: inline-block; - 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 .icon-camera { - background-image: url(../img/icons/General_1x.png); -} -.im_media_attach:hover .icon-camera { - opacity: 1; -} -.im_media_attach:active .icon-camera { - background-position: -10px -427px; - opacity: 1; -} - -.im_send_reply_wrap { - margin-bottom: 5px; -} -.im_send_reply_form_wrap a.im_panel_own_photo, -.im_send_reply_form_wrap a.im_panel_peer_photo { - margin-top: 47px; -} -.im_send_reply_cancel { - float: right; - display: block; - width: 18px; - height: 18px; - margin-right: 6px; - margin-top: 5px; - -webkit-transform: translate3d(0,0,0); - padding-top: 7px; -} -.im_send_reply_cancel .icon-reply-bar { - display: block; - background: #999; - width: 18px; - height: 2px; - transform-origin: 50% 50%; -} -.im_send_reply_cancel:hover .icon-reply-bar { - background: #44a1e8; -} -.icon-reply-bar:first-child { - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); - transform-origin: 50% 50%; -} -.icon-reply-bar:last-child { - -webkit-transform: translate3d(0,-2px,0) rotate(45deg); - -moz-transform: translate3d(0,-2px,0) rotate(45deg); - -ms-transform: translate3d(0,-2px,0) rotate(45deg); - -o-transform: translate3d(0,-2px,0) rotate(45deg); - transform: translate3d(0,-2px,0) rotate(45deg); -} - - -@media (max-height: 700px) { - a.im_panel_peer_photo, - a.im_panel_own_photo { - display: none; - } - .im_send_field_wrap { - margin-bottom: 0; - } - .composer_rich_textarea, - .composer_textarea { - min-height: 25px; - padding-right: 25px; - } - .composer_emoji_insert_btn { - top: 0; - right: 0px; - margin-top: -3px; - } - .composer_emoji_panel { - display: none; - } - .im_submit { - position: absolute; - top: 0; - left: 100%; - margin: 0 0 0 15px; - } - .im_media_attach { - position: absolute; - top: -7px; - left: -43px; - width: 19px; - height: 24px; - } - .icon-camera { - display: inline-block; - 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 .icon-camera { - background-image: url(../img/icons/IconsetW_1x.png); - } - .im_media_attach:hover .icon-camera, - .im_media_attach:active .icon-camera { - background-position: -12px -100px; - opacity: 1; - } - .im_attach { - display: none; - position: absolute; - top: 0; - right: 100%; - margin: 0; - margin-right: 45px; - margin-top: 1px; - } - .icon-emoji { - display: inline-block; - width: 22px; - height: 22px; - vertical-align: text-top; - opacity: 1; - margin: 0; - background: url(../img/icons/IconsetW.png) -10px -771px no-repeat; - background-size: 42px 1171px; - } - .is_1x .icon-emoji { - background-image: url(../img/icons/IconsetW_1x.png); - } - .composer_emoji_insert_btn:active .icon-emoji, - .is_1x .composer_emoji_insert_btn:active .icon-emoji, - .composer_emoji_insert_btn.composer_emoji_insert_btn_on .icon-emoji, - .is_1x .composer_emoji_insert_btn.composer_emoji_insert_btn_on .icon-emoji { - background-position: -10px -803px; - } - - .im_edit_panel_wrap { - padding-bottom: 8px; - } - .im_edit_panel_border { - margin-bottom: 7px; - } -} - -/* Peer modals */ -.user_modal_window .modal-dialog { - max-width: 480px; -} -.user_modal_photo_profile_wrap { - padding: 13px 12px; - margin-bottom: 15px; -} -.user_modal_image_wrap { - display: block; - width: 100px; - margin-right: 22px; - overflow: hidden; - border-radius: 3px; -} -.user_modal_image { - width: 100px; - height: 100px; -} -.user_modal_header { - font-weight: bold; - margin: 2px 0 7px; -} -.user_modal_status { - color: #999; - margin-bottom: 15px; -} -.modal_section_body dt { - font-weight: normal; - display: inline-block; - width: 100px; -} -.modal_section_body dd { - display: inline-block; -} - -.user_modal_main_btn { - border: 0; - font-size: 12px; - padding-left: 16px; - padding-right: 16px; - margin: 8px 10px 0 0; - float: left; -} -.user_modal_other_btn { - margin: 8px 0 0 0; - float: left; -} -.user_modal_other_btn .dropdown-toggle { - border: 0; - font-size: 12px; -} -.user_modal_other_btn .dropdown-menu { - margin-left: -3px; -} - -.user_modal_settings_wrap { - margin-top: 25px; -} -.user_modal_notifications { - font-weight: bold; -} -.user_modal_clear { - margin-top: 20px; -} - - -.chat_modal_window .modal-dialog { - max-width: 480px; -} -.chat_modal_header { - font-weight: bold; - margin: 0 0 10px; -} -.chat_modal_members_count { - color: #999; - margin-bottom: 16px; -} - -.chat_modal_actions_wrap { - float: right; - position: relative; - width: 332px; -} -.chat_modal_actions_wrap > button, -.chat_modal_actions_wrap > .chat_modal_other_btn > button, -.chat_modal_actions_wrap > span.btn { - padding: 7px 10px; -} - -.chat_modal_main_btn { - border: 0; - font-size: 12px; - padding-left: 16px; - padding-right: 16px; - float: left; - position: relative; - overflow: hidden; - margin-right: 10px; - margin-top: 8px; -} -.chat_modal_invite_btn { - border: 0; - font-size: 12px; - padding-left: 16px; - padding-right: 16px; - float: left; - position: relative; - margin-right: 10px; - margin-top: 8px; -} -.chat_modal_delete_btn { - border: 0; - font-size: 12px; - padding-left: 16px; - padding-right: 16px; - float: left; - margin-right: 10px; - margin-top: 8px; -} -.chat_modal_other_btn { - margin-top: 8px; - float: left; -} -.chat_modal_other_btn .dropdown-toggle { - border: 0; - font-size: 12px; -} -.chat_modal_other_btn .dropdown-menu { - margin-left: -3px; -} - -.chat_modal_photo_update_link { - display: block; - padding: 5px 14px; - clear: both; - font-weight: normal; - line-height: 1.428571429; - color: #333333; - white-space: nowrap; - font-size: 13px; - overflow: hidden; - position: relative; -} -.chat_modal_photo_update_link:hover { - text-decoration: none; - color: #262626; - background-color: #f5f5f5; -} - -.chat_modal_settings_wrap { - margin-top: 10px; -} - -.settings_modal_window .modal-dialog { - max-width: 480px; -} -.settings_modal_settings { - padding: 4px 0; - margin: 0; -} -.settings_modal_wrap .user_modal_main_btn { - position: relative; - overflow: hidden; -} -.settings_profile_edit_form { - margin-bottom: 15px; -} -.settings_profile_image_wrap { - float: left; - width: 120px; - margin-right: 22px; -} -.settings_profile_first_name, -.settings_profile_last_name { - width: 180px; - float: left; - margin-bottom: 0; -} -.settings_profile_first_name label, -.settings_profile_last_name label { - margin-bottom: 3px; -} -.settings_profile_first_name { - margin-right: 22px; - margin-bottom: 10px; -} -.settings_profile_last_name { - margin-right: 10px; - margin-bottom: 15px; -} -.settings_profile_save { - padding-top: 21px; - float: left; -} -.settings_profile_save_btn { - width: 50px; -} - -.settings_profile_edit_form { - margin-bottom: 0; -} -.settings_profile_edit_form input { - font-size: 12px; - line-height: normal; - background: #F2F2F2; - border: 1px solid #F2F2F2; - border-radius: 0; - padding: 6px 6px 6px 6px; - margin-bottom: 0; - margin: 0; -} -.settings_profile_edit_form input:focus, -.settings_profile_edit_form input:active { - background-color: #FFF; -} - -.settings_send_choose_form input { - margin-top: 2px; -} -.settings_send_choose_form { - margin-bottom: 20px; -} - -.settings_user_phone, -.settings_version { - color: #999; -} -.modal_section_body dl.settings_modal_language { - margin: 3px 0; -} -.modal_section_body dl.settings_modal_language dt { - padding-top: 2px; -} -.settings_modal_language_select { - font-size: 12px; - height: 21px; - line-height: 21px; - padding: 0; -} -.icon-volume-outer { - display: inline-block; - background: #c7c7c7; - border-radius: 10px; - overflow: hidden; - height: 18px; - padding: 5px 8px; - margin: 0 9px 0 0; - width: 32px; -} -.icon-volume-inner { - display: block; - background: #fff; - float: left; - width: 2px; - vertical-align: bottom; - margin: 0 1px 0; - height: 8px; -} -.icon-volume-inner1 { - height: 2px; - margin-top: 6px; -} -.icon-volume-inner2 { - height: 4px; - margin-top: 4px; -} -.icon-volume-inner3 { - height: 6px; - margin-top: 2px; -} - -.icon-volume-outer1 .icon-volume-inner2, -.icon-volume-outer1 .icon-volume-inner3, -.icon-volume-outer1 .icon-volume-inner4, -.icon-volume-outer2 .icon-volume-inner3, -.icon-volume-outer2 .icon-volume-inner4, -.icon-volume-outer3 .icon-volume-inner4 { - display: none; -} - -.settings_volume_slider { - width: 100%; - max-width: 362px; - display: inline-block; -} - - -.im_message_selected .im_message_outer_wrap, -.im_message_focus .im_message_outer_wrap { - background: #f2f6fa; -} -.im_history_selectable .im_message_outer_wrap { - cursor: pointer; -} -.im_history_selectable .im_message_outer_wrap:hover { - background: #f2f6fa; -} - -.im_message_wrap { - max-width: 560px; - padding: 0 15px 0 15px; - margin: 0 auto; - position: static; -} -.im_content_message_wrap { - margin: 8px 10px 8px 16px -} -.im_grouped_short .im_content_message_wrap { - margin: 6px 10px 6px 16px -} -.im_grouped_short:last-child .im_content_message_wrap { - margin-bottom: 8px; -} -@media (min-width: 901px) { - .im_message_wrap { - position: relative; - } -} - - -.im_message_author { - margin: 1px 0 4px; - display: inline-block; -} - -/* Groupings */ -.im_message_fwd_from { - margin-top: 5px; -} -.im_grouped .im_message_fwd_from { - margin-top: 0; -} -.im_message_fwd { - margin-top: 4px; - margin-bottom: 4px; -} -.im_grouped_short .im_message_from_photo, -.im_grouped_short .im_message_author, -.im_grouped .im_message_from_photo, -.im_grouped .im_message_author, -.im_grouped_fwd .im_message_author, -.im_grouped_fwd .im_message_from_photo, -.im_grouped_fwd_short .im_message_author, -.im_grouped_fwd_short .im_message_from_photo { - display: none; -} -.im_grouped_short .im_message_body, -.im_grouped .im_message_body, -.im_grouped_fwd .im_message_body, -.im_grouped_fwd_short .im_message_body { - margin-left: 57px; -} -.im_grouped_short .im_content_message_select_area, -.im_grouped .im_content_message_select_area { - height: 50px; -} -.im_message_fwd .im_content_message_select_area { - margin-top: -4px; -} -.im_grouped_fwd .im_message_fwd .im_content_message_select_area, -.im_grouped_fwd_short .im_message_fwd .im_content_message_select_area { - margin-top: -8px; -} - -.im_history_appending .im_content_message_select_area { - height: 52px; -} -.im_message_fwd .icon-select-tick { - margin-top: 12px; -} -.im_grouped_short .icon-select-tick { - margin-top: 4px; -} -.im_grouped_fwd_short .icon-select-tick { - margin-top: 2px; -} -.im_grouped_short .icon-message-status, -.im_grouped_fwd_short .icon-message-status { - margin-top: 5px; -} -.im_grouped_fwd .im_message_fwd_from, -.im_grouped_fwd_short .im_message_fwd_from { - display: none; -} - -.im_grouped_short .im_message_fwd .im_message_date, -.im_grouped .im_message_fwd .im_message_date, -.im_grouped_fwd .im_message_fwd .im_message_date, -.im_grouped_fwd_short .im_message_fwd .im_message_date { - display: none; -} - -.im_grouped_fwd .im_message_fwd, -.im_grouped_fwd_short .im_message_fwd { - margin-top: 8px; -} -.im_grouped_fwd .im_message_fwd, -.im_grouped_fwd_short .im_message_fwd { - margin-top: 8px; -} - - -.tooltip-inner { - background: rgba(0,0,0, 0.8); -} -.tooltip-arrow { - opacity: 0.8; -} - -.im_dialogs_scrollable_wrap a.im_dialog { - padding: 7px 16px; -} -.im_dialogs_scrollable_wrap .active a.im_dialog { - margin-right: -2px; - padding-right: 18px; -} -.im_dialog_photo { - width: 48px; - height: 48px; - border-radius: 50%; - overflow: hidden; -} -div.im_dialog_photo { - margin-right: 15px; -} -div.im_dialog_photo .peer_initials { - line-height: 48px; - font-size: 18px; -} -.im_dialog_message { - margin-top: 5px; -} -.im_dialog_peer { - margin-top: 3px; - margin-bottom: 3px; -} -.active .im_dialog_date, -.active a.im_dialog:hover .im_dialog_date, -.active a.im_dialog_selected .im_dialog_date { - color: #FFF; -} - -/* Import contact modal */ -.import_contact_modal_window .modal-dialog { - max-width: 480px; -} - -.modal-content-animated { - -webkit-transition: margin-top linear 0.2s; - transition: margin-top linear 0.2s; -} - -.countries_modal_search { - padding: 12px 12px 12px; - margin: 0; - position: relative; -} -.countries_modal_col { - max-height: 350px; -} -.countries_modal_wrap .md_modal_body { - padding-bottom: 15px; -} - - -.modal_close_wrap { - display: none; - cursor: pointer; - position: fixed; - top: 0; - right: 0; - width: 50%; - height: 100%; -} -.modal_close_wrap_wnext { - width: 104px; - height: 150px; -} -.modal_close { - background: url(../img/icons/PhotoIcons.png) -10px -10px no-repeat; - background-size: 40px 200px; - width: 20px; - height: 21px; - float: right; - margin: 43px 40px 0 0; - opacity: 0.5; - pointer-events: none; - - -webkit-transition : .2s; - -moz-transition : .2s; - -o-transition : .2s; - transition : .2s; -} -.modal_close_wrap:hover .modal_close { - opacity: 1; -} - -.modal_prev_wrap, -.modal_next_wrap { - display: none; - position: fixed; - top: 0; - left: 0; - bottom: 64px; - width: 104px; -} -.modal_next_wrap { - left: auto; - right: 0; -} -.modal_prev_active_wrap, -.modal_next_active_wrap { - cursor: pointer; -} -.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; - position: absolute; - top: 50%; - pointer-events: none; - margin: 0 0 0 38px; - - -webkit-transition : .2s; - -moz-transition : .2s; - -o-transition : .2s; - transition : .2s; -} -.modal_next { - margin: 0 0 0 50px; - background-position: -14px -75px; -} -.modal_prev_active_wrap .modal_prev, -.modal_next_active_wrap .modal_next { - opacity: 0.5; -} - -.modal_prev_active_wrap:hover, -.modal_next_active_wrap:hover { - background-color: rgba(0,0,0,0.2); -} -.modal_prev_active_wrap:hover .modal_prev, -.modal_next_active_wrap:hover .modal_next { - opacity: 1; -} - -.is_1x .modal_close, -.is_1x .modal_prev, -.is_1x .modal_next { - background-image: url(../img/icons/PhotoIcons_1x.png); -} - -@media (min-width: 800px) { - .modal_close_wrap, - .modal_next_wrap, - .modal_prev_wrap { - display: block; - } -} - -.media_modal_bottom_panel_wrap { - position: fixed; - bottom: 0; - left: 0; - right: 0; - height: 64px; - background: #313131; -} -.media_modal_bottom_panel { - max-width: 1000px; - margin: 0 auto; - color: rgba(255, 255, 255, 0.6); - position: relative; -} - -.media_modal_title_wrap { - max-width: 300px; - margin: 0 auto; - text-align: center; - font-size: 13px; - font-weight: bold; - line-height: 16px; - padding: 24px 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} -.media_modal_info_wrap { - line-height: 16px; - padding: 15px 16px; - width: 200px; - position: absolute; - left: 0; -} -.media_modal_author_photo { - width: 32px; - height: 32px; - border-radius: 50%; - overflow: hidden; -} -.media_modal_author_photo .peer_initials { - line-height: 32px; -} -a.media_modal_author_photo { - margin: 1px 10px 1px 0; -} -div.media_modal_author_name { - font-size: 13px; - margin-top: 1px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} -.media_modal_date, -a.media_modal_date:hover { - font-size: 11px; - color: rgba(255, 255, 255, 0.4); -} -div.media_modal_date { - margin-top: 2px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.photo_modal_window, -.video_modal_window, -.document_modal_window { - padding: 0; -} -.media_modal_wrap .modal-body { - padding: 16px; -} -.video_modal_window .modal-body { - padding: 0; -} -.media_modal_bottom_actions { - position: absolute; - right: 0; -} -.media_modal_action_btn { - float: left; - display: block; - width: 68px; - height: 64px; -} -.media_modal_action_btn:hover { - background: rgba(0,0,0,0.2); -} - -.media_modal_action_btn i { - background: url(../img/icons/PhotoIcons.png) 0 0 no-repeat; - background-size: 40px 200px; - display: block; - opacity: 0.5; -} -.media_modal_action_btn:hover i { - opacity: 1; -} -.is_1x .media_modal_action_btn i { - background-image: url(../img/icons/PhotoIcons_1x.png); -} - -.media_modal_action_btn i.media_modal_action_btn_download { - background-position: -12px -163px; - width: 16px; - height: 20px; - margin: 22px 26px; -} -.media_modal_action_btn i.media_modal_action_btn_forward { - background-position: -9px -109px; - width: 23px; - height: 15px; - margin: 24px 22px; -} -.media_modal_action_btn i.media_modal_action_btn_delete { - background-position: -13px -135px; - width: 14px; - height: 18px; - margin: 23px 27px; -} diff --git a/app/css/mobile.css b/app/css/mobile.css deleted file mode 100644 index 7e226e95..00000000 --- a/app/css/mobile.css +++ /dev/null @@ -1,1394 +0,0 @@ -html { - background: #FFF; -} - - - -.dropdown-menu { - border-radius: 0; -} -.dropdown-menu > li > a { - padding: 15px 17px 14px; - font-size: 14px; -} -.dropdown-menu .divider { - margin: 0; -} - -.tg_page_head .navbar-quick-nav, -.tg_page_head .navbar-toggle { - display: none; -} -.tg_page_head .container { - display: block; - width: auto; - padding-left: 0; - padding-right: 0; -} -.tg_page_head .container .navbar-header { - margin: 0; -} -.tg_page_head .navbar-inverse { - background: #5682a3; - border: 0; - - -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11); - -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11); - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11); - - margin: 0; -} -.ios_standalone .tg_page_head .navbar > .container { - margin-top: 20px; -} -.ios_standalone .modal.mobile_modal { - border-top: 20px solid #497495; -} -.tg_page_head .navbar > .container .navbar-brand { - padding: 8px 15px; - margin-left: 0; - margin-right: 20px; - display: block; - line-height: 0; - height: auto; -} -.tg_page_head .navbar-menu .navbar-nav.navbar-right { - margin-right: 0; -} - - -.tg_page_head .navbar-inverse .navbar-nav > li > a { - padding-top: 13px; - padding-bottom: 13px; - color: #b9cfe3; - font-size: 13px; -} -.tg_page_head .navbar-inverse .navbar-nav > li > a:hover { - color: #FFF; -} -.tg_page_head .navbar-inverse .navbar-toggle { - border-color: #497495; - outline: 0; - border: 0; -} -.tg_page_head .navbar-inverse .navbar-collapse, -.tg_page_head .navbar-inverse .navbar-form { - border-color: #497495; -} - -.tg_page_head .navbar-inverse .navbar-toggle:hover, -.tg_page_head .navbar-inverse .navbar-toggle:active, -.tg_page_head .navbar-inverse .navbar-toggle:focus { - background-color: rgba(255,255,255,0.1); -} - - -.tg_page_head .navbar > .container .navbar-brand { - padding-left: 9px; - outline: none; -} -.im_history_panel_edit_link { - margin-right: 0; -} -.navbar-header { - float: none; -} -.navbar-toggle-wrap { - float: right; - display: block; - margin: 0; -} -.navbar-toggle-wrap .navbar-toggle { - float: none; - display: block; - margin: 0; - padding: 12px 20px 11px; - border-radius: 0; -} - -.tg_page_head .navbar-inverse .navbar-toggle:hover, -.tg_page_head .navbar-inverse .open .navbar-toggle { - background-color: rgba(0,0,0,0.1); -} - - -.navbar_peer_not_selected .navbar-toggle-wrap .navbar-toggle { - padding: 16px 17px; -} -.navbar-toggle-wrap .navbar-toggle .icon-bar { - background-color: #d7e5f0; - width: 5px; - height: 5px; - border-radius: 3px; - margin-left: 6px; - margin-right: 6px; -} -.navbar-toggle-wrap .navbar-toggle .icon-bar + .icon-bar { - margin-top: 3px; -} -.navbar_peer_not_selected .navbar-toggle-wrap .navbar-toggle .icon-bar { - background-color: #fefeff; - width: 21px; - height: 2px; - border-radius: 1px; - margin-left: 0; - margin-right: 0; -} -.navbar-toggle-wrap .navbar-toggle .icon-bar + .icon-bar { - margin-top: 4px; -} -.navbar-toggle .dropdown-toggle { - display: block; -} -.navbar-toggle-wrap .dropdown-menu { - margin-top: 6px; - right: -40px; - left: auto; - width: 195px; -} -.navbar_peer_not_selected .navbar-toggle-wrap .dropdown-menu, -.tg_modal_head .navbar-toggle-wrap .dropdown-menu { - right: 6px; -} - -.navbar-search-wrap { - display: none; - float: right; - margin: 0; - line-height: 0; - padding: 12px 14px 11px; - border: 1px solid transparent; - border-radius: 4px; -} -.navbar-search-wrap:hover, -.navbar-search-wrap:link, -.navbar-search-wrap:active { - background-color: rgba(0,0,0,0.1); -} -.icon-search { - display: inline-block; - width: 21px; - height: 21px; - background: url(../img/icons/MobileIcons_2x.png) 0 0 no-repeat; - background-size: 21px 52px; -} -.is_1x .icon-search { - background-image: url(../img/icons/MobileIcons_1x.png); -} -.tg_page_head .navbar_peer_not_selected .navbar-search-wrap, -.tg_modal_head .navbar-search-wrap { - display: block; -} - -.tg_page_head .navbar-quick-nav { - display: block; - float: none; - margin: 0; -} -.tg_page_head .navbar-quick-nav li { - float: left; -} -.tg_page_head .navbar-quick-nav a { - padding-top: 15px; - padding-bottom: 15px; -} -.icon-back { - display: inline-block; - 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 .icon-back { - background-image: url(../img/icons/IconsetW_1x.png); -} -.tg_page_head .navbar-quick-nav a:active .icon-back { - opacity: 1; -} - -.tg_page_head .navbar > .container .navbar-brand { - display: none; -} -.tg_page_head .navbar_peer_not_selected > .container .navbar-brand { - display: block; -} -.tg_page_head .navbar_offline > .container .navbar-brand.tg_logo_wrap { - display: none; -} -.tg_page_head .navbar { - min-height: 46px; -} - -.tg_page_head .navbar-inverse .navbar-quick-nav > li > a { - padding-left: 16px; - padding: 6px 10px 2px 28px; - color: #b9cfe3; - font-size: 13px; - height: 46px; -} -.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover/*, -.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:active*/ { - background-color: rgba(0,0,0,0.1); -} -.navbar-quick-nav .icon-back { - position: absolute; - margin-left: -18px; - margin-top: 8px; -} -.navbar-quick-nav h4 { - font-size: 15px; - color: #FFF; - margin: 0; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} -.navbar-quick-back-title { - max-width: 160px; - overflow: hidden; - text-overflow: ellipsis; -} -.navbar-quick-media-back h4 { - margin: 9px 0 12px 0; - line-height: 120%; -} -.navbar-quick-profile-back h4, -.navbar-quick-group-back h4 { - font-weight: bold; -} -.navbar-quick-profile-back small, -.navbar-quick-group-back small { - font-size: 13px; - white-space: nowrap; - overflow: hidden; - margin-left: 0; -} -.navbar-quick-profile-back .status_online, -.navbar-quick-group-back .status_online { - color: #FFF; -} - -.navbar-menu { - display: none; -} -.navbar_offline .navbar-menu { - display: block; -} -.navbar_offline .navbar-offline { - float: left; - margin: 0; -} -.navbar-offline > li > a { - padding-right: 0; - padding-left: 0; -} -.navbar-offline-text { - color: #FFF; - font-size: 15px; -} -.tg_page_head .navbar-inverse .navbar-offline > li > a { - padding-top: 13px; - padding-bottom: 12px; - color: #FFF; - font-size: 15px; -} -.tg_page_head .navbar_offline > .container .navbar-brand { - margin-right: 0; -} -.navbar_offline .navbar-quick-nav li > a > .navbar-quick-back-title, -.navbar_offline .navbar-search-wrap, -.navbar_offline .navbar-history-edit { - display: none; -} - -.navbar-peer-wrap { - display: block; - float: right; - width: 46px; - height: 46px; - padding: 5px; -} -.navbar-peer-wrap img { - width: 36px; - height: 36px; - border-radius: 18px; - overflow: hidden; -} -.navbar_peer_not_selected .navbar-peer-wrap { - display: none; -} - - -.navbar_history_select .navbar-peer-wrap, -.navbar_history_select .navbar-toggle-wrap { - display: none; -} -.tg_page_head .navbar-quick-nav li.navbar-quick-right { - float: right; -} -.tg_page_head .navbar-quick-nav li.navbar-quick-left { - float: left; -} -.tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-right > a, -.tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-left > a { - font-size: 15px; - color: #FFF; - padding: 14px 15px; -} -.tg_page_head .navbar-quick-nav li.navbar-quick-title { - position: static; - float: none; - color: #FFF; - font-size: 15px; - font-weight: bold; - padding: 14px 0; - text-align: center; -} - -.mobile_scrollable_wrap { - overflow: hidden; - overflow-y: scroll; - -webkit-overflow-scrolling: touch; -} - -.login_head_bg { - display: none; -} -.login_page { - margin-top: 0; - margin-bottom: 30px; -} -.login_head_wrap { - height: 75px; - background: #537c9a; -} -.login_form_wrap { - border-radius: 0; - border-top: 0; - border-left: 0; - border-right: 0; - box-shadow: none; - padding: 44px 40px 44px; -} -.login_footer_about_wrap { - border-radius: 0; - border-top: 0; - border-left: 0; - border-right: 0; - box-shadow: none; - padding: 44px 40px 44px; -} - -.icon-next-submit { - margin-top: -3px; -} - -.im_dialogs_empty_header { - font-size: 19px; - margin-bottom: 10px; -} -.im_dialogs_empty_lead { - font-size: 14px; - line-height: 160%; -} -.im_dialogs_add_contact, -.im_dialogs_import_phonebook { - padding: 12px 13px; -} -.im_dialogs_add_contact + .im_dialogs_import_phonebook { - margin-top: 10px; -} - -.im_page_wrap { - background: none; - box-shadow: none; - border: 0; - overflow: hidden; -} -.im_history_selectable .im_message_outer_wrap:hover, -.im_message_selected { - background: #e1e9f0; -} -.im_message_focus .im_message_outer_wrap { - background: rgba(225, 233, 240, 0.35); -} - - -.im_message_body { - padding: 7px 10px; - border-radius: 3px; - background: #f1f1f1; -} -.im_message_out .im_message_body { - background: #e4ecf2; -} -.im_message_body_media, -.im_message_out .im_message_body_media { - padding: 0; - border-radius: 0; - background: none; -} -.im_message_selected .im_message_body, -.im_message_selected .im_message_document, -.im_message_selected .im_message_audio { - background: #497495; - color: #FFF; -} -.im_message_selected .im_message_body_media { - background: none; - color: inherit; -} - -.im_service_message { - font-size: 13px; -} -.audio_player_button { - margin-right: 8px; -} -.im_message_body_media .im_message_document, -.im_message_body_media .im_message_audio { - padding: 5px; - border-radius: 3px; - background: #f1f1f1; - margin-top: 0; -} -.im_message_body_media a.im_message_photo_thumb, -.im_message_body_media .im_message_video { - margin-top: 0; -} -.im_message_out .im_message_body_media .im_message_document, -.im_message_out .im_message_body_media .im_message_audio { - background: #e4ecf2; -} -.im_message_document { - width: auto; - max-width: 250px; -} -.im_message_video { - width: auto; - max-width: 250px; -} -.im_message_contact { - width: 200px; -} -.im_message_contact_name, -.im_message_contact_phone { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - max-width: 150px; -} -.im_message_document { - position: relative; -} -.im_message_document .icon-document, -.im_message_document_thumb_wrap { - position: absolute; -} -.im_message_out .im_message_document .icon-document { - background-color: #e4ecf2; -} -.im_message_document_thumb_wrap { - background-color: transparent; -} -.im_message_document_info { - float: none; - margin-left: 43px; - width: auto; - min-height: 38px; -} -.im_message_document_thumbed .im_message_document_info { - margin-left: 110px; -} -.im_message_document_size { - display: block; - padding-left: 0; -} -.im_message_document_thumbed .im_message_document_info { - min-height: 100px; -} -.im_message_document_info .cancelable_progress_wrap { - margin-top: 4px; -} -.im_message_document_thumbed .im_message_document_name_wrap, -.im_message_document_name_wrap { - width: auto; -} -.im_message_document_progress .im_message_document_size { - display: inline; -} -.im_message_document_progress .im_message_document_name { - max-width: 50%; -} -.im_message_document_progress.im_message_document_thumbed .im_message_document_name { - display: inline; - max-width: none; -} - -.im_message_document_thumbed .im_message_document_name { - white-space: normal; -} - - -.im_message_document_thumbed .im_message_upload_progress_wrap, -.im_message_document_thumbed .im_message_download_progress_wrap { - width: 130px; -} -.img_gif_label, -.img_gif_size, -.im_message_video_duration { - font-size: 13px; -} - -a.im_message_video_thumb { - margin-right: 0; -} -img.im_message_video_thumb, -.img_gif_thumb { - -webkit-filter: none; - -moz-filter: none; - -o-filter: none; - -ms-filter: none; - filter: none; -} - -.im_message_document_thumb_wrap { - position: absolute; -} -.im_grouped .im_message_body { - margin-left: 0; -} - - -.im_history_panel_wrap { - display: none; - margin: 0 15px; -} -.im_send_panel_wrap { - padding: 10px 0 12px; -} - -.im_history_scrollable_wrap.im_history_to_bottom { - overflow: hidden; - position: relative; -} -.im_history { - position: static; -} - -.icon-select-tick { - margin: 10px 0 0 -24px -} -.im_message_wrap { - padding: 0 8px; -} -.im_content_message_wrap { - font-size: 15px; - float: left; - position: relative; - margin: 8px 0 8px; - max-width: 100%; -} -.im_message_out.im_content_message_wrap { - padding-left: 80px; - padding-right: 0; - float: right; -} -.im_message_in.im_content_message_wrap { - padding-left: 0; - padding-right: 60px; -} -.im_history_messages_group .im_message_in.im_content_message_wrap, -.im_history_messages_group .im_grouped_short .im_message_in.im_content_message_wrap, -.im_history_messages_group .im_grouped .im_message_in.im_content_message_wrap { - padding-left: 45px; -} -.im_grouped_short .im_content_message_wrap, -.im_grouped .im_content_message_wrap { - margin-top: 0; -} - - -.im_message_reply_wrap { - margin-top: 2px; -} -.im_message_reply_author { - font-weight: normal; - font-size: 13px; -} -.im_message_fwd_header { - font-size: 12px; -} -.im_message_meta { - float: none; - position: absolute; - bottom: 5px; - left: 100%; - white-space: nowrap; - margin-left: -60px; - width: 60px; - padding: 0 0 0 8px; - overflow: hidden; -} -.im_message_date { - font-size: 10px; - padding: 0; -} -.im_message_out .im_message_meta { - width: 80px; - left: 0; - text-align: right; - margin-left: 0; - padding: 0 8px 0 0; -} - -.im_message_out .im_message_fwd_date { - color: #93a2ae; -} - -.im_message_out .icon-document { - background-color: #dae6f0; - background-position: -2px -542px; -} -.im_message_out .im_message_document_size, -.im_message_out .audio_player_duration, -.im_message_out .audio_player_size, -.im_message_out .im_message_fwd_date, -.im_message_selected .im_message_document_size, -.im_message_selected .audio_player_duration, -.im_message_selected .audio_player_size, -.im_message_selected .im_message_fwd_date, -.im_message_focus .im_message_document_size, -.im_message_focus .audio_player_duration, -.im_message_focus .audio_player_size, -.im_message_focus .im_message_fwd_date, -.im_history_selectable .im_message_outer_wrap:hover .im_message_document_size, -.im_history_selectable .im_message_outer_wrap:hover .audio_player_duration, -.im_history_selectable .im_message_outer_wrap:hover .audio_player_size, -.im_history_selectable .im_message_outer_wrap:hover .im_message_fwd_date { - color: #68839c; -} - - -.im_message_from_photo, -.im_message_fwd_photo { - width: 40px; - height: 40px; -} -a.im_message_from_photo { - margin: 0; - display: none; -} -.im_history_messages_group a.im_message_from_photo { - display: block; - position: absolute; - margin-left: -45px; -} -.im_message_author { - display: none; -} -.im_history_messages_group a.im_message_author { - display: inline; - font-size: 13px; - font-weight: normal; -} -.im_grouped_short a.im_message_from_photo, -.im_grouped_short a.im_message_author, -.im_grouped a.im_message_from_photo, -.im_grouped a.im_message_author, -.im_grouped_fwd a.im_message_author, -.im_grouped_fwd a.im_message_from_photo, -.im_grouped_fwd_short a.im_message_author, -.im_grouped_fwd_short a.im_message_from_photo, -.im_message_out a.im_message_author, -.im_message_out a.im_message_from_photo, -.im_message_body_media a.im_message_author { - display: none; -} -.im_message_wrap { - padding: 0 7px; -} - - - - -.im_message_out .icon-message-status-tick { - border: 0; - display: inline-block; - width: 10px; - height: 10px; - line-height: 18px; - border-radius: 7px; - position: static; - vertical-align: text-top; - margin-right: 2px; - opacity: 1; - margin-top: 6px; -} -.im_message_out .icon-message-status-tick, -.is_1x .im_message_out .icon-message-status-tick { - background: none; -} -.im_message_unread .icon-message-status-tick, -.is_1x .im_message_unread .icon-message-status-tick { - background: #43A4DB; -} -.im_message_pending .icon-message-status-tick, -.is_1x .im_message_pending .icon-message-status-tick { - background: #9fd2ee; -} - - -.im_dialogs_search_field, -.contacts_modal_search_field { - font-size: 1.2em; -} -.im_edit_selected_actions { - text-align: center; -} -.im_edit_delete_btn, -.im_edit_forward_btn { - border-radius: 2px; - font-weight: normal; - line-height: 18px; - background: none !important; - border: 0 !important; - width: 50%; - margin: 0; - font-size: 15px; - padding: 13px 0; -} -.im_edit_forward_btn { - color: #497495 !important; -} -.im_edit_delete_btn { - color: #c3584d !important; -} -.im_edit_delete_btn strong, -.im_edit_forward_btn strong { - font-weight: normal; -} -.im_edit_panel_wrap { - padding: 5px 0; - margin: 0; -} - - -.im_dialogs_col_wrap { - border: 0; - padding-bottom: 0; -} -.im_dialogs_col_wrap, -.im_history_col_wrap { - float: none; - width: auto; - max-width: auto; - min-width: auto; -} - -.im_dialogs_col_wrap, -.im_page_peer_not_selected .im_history_col_wrap { - display: none; -} -.im_page_peer_not_selected .im_dialogs_col_wrap { - display: block; -} - -.im_dialogs_panel { - display: none; - padding-left: 9px; - padding-right: 9px; -} -.im_dialogs_panel_search.im_dialogs_panel { - display: block; -} -.im_page_split .im_dialogs_search { - margin-right: 0; -} - -.im_dialogs_scrollable_wrap a.im_dialog { - border-bottom: 1px solid #eee; - border-top: 1px solid #eee; - margin-top: -1px; - border-radius: 0 !important; - padding-right: 11px; -} - -.im_dialog_wrap:last-child a.im_dialog { - border-bottom: 0; -} -.im_dialog_photo { - width: 54px; - height: 54px; - border-radius: 50%; - overflow: hidden; -} -div.im_dialog_photo { - margin: 0 12px 0 0; -} - -.im_dialog_peer, -.im_dialog_message { - font-size: 1.3em; -} -.im_dialog_peer { - margin-bottom: 7px; - margin-top: 5px; -} -.im_dialog_meta { - margin-top: 6px; -} -.im_dialog_date, -a.im_dialog:hover .im_dialog_date, -a.im_dialog_selected .im_dialog_date { - color: #b3b3b3; - font-size: 12px; - margin-right: 3px; -} -.im_dialog_unread, -.active .im_dialog_unread, -a.im_dialog:hover .im_dialog_unread, -a.im_dialog_selected .im_dialog_unread { - background: #7cacc7; -} -.im_dialog_message_text, -a.im_dialog:hover .im_dialog_message_text, -a.im_dialog_selected .im_dialog_message_text { - color: #8f8f8f; -} -.im_message_fwd_title { - display: none; -} -.im_grouped_fwd_start .im_message_fwd_title { - display: block; - color: #8a8a8a; - font-size: 13px; - font-weight: normal; - margin-bottom: 5px; -} -.im_history_messages_group .im_message_in .im_message_fwd_title { - margin-top: 5px; -} -.im_message_out .im_message_fwd_title { - color: #798791; -} -.im_message_selected .im_message_body a, -.im_message_selected .im_message_fwd_title, -.im_message_selected .im_message_fwd_date, -.im_message_selected .im_message_document_name, -.im_message_selected .im_message_document_size, -.im_message_selected .audio_player_title, -.im_message_selected .audio_player_duration, -.im_message_selected .audio_player_size, -.im_history_selectable .im_message_selected:hover .im_message_document_size, -.im_history_selectable .im_message_selected:hover .audio_player_duration, -.im_history_selectable .im_message_selected:hover .audio_player_size, -.im_history_selectable .im_message_selected:hover .im_message_fwd_date { - color: #FFF; -} - - -a.im_message_fwd_author { - color: #323232; -} - -.im_dialogs_scrollable_wrap a.im_dialog:hover, -.im_dialogs_scrollable_wrap a.im_dialog_selected, -.im_dialogs_scrollable_wrap .active a.im_dialog, -.im_dialogs_scrollable_wrap .active a.im_dialog:hover, -.im_dialogs_scrollable_wrap .active a.im_dialog_selected { - border-radius: 0; - background-color: #f4f4f4; -} - -.modal.mobile_modal { - background: #FFF; - padding: 0; -} -.mobile_modal .modal-content { - border-radius: 0; - box-shadow: none; -} -.mobile_modal .modal-dialog { - margin: 0 auto; -} -.mobile_modal .modal-content .modal-body { - padding-left: 0; - padding-right: 0; -} -.mobile_modal .modal-footer { - padding-left: 0; - padding-right: 0; - padding-bottom: 9px; -} - -.mobile_modal_body, -.mobile_modal .modal-content .mobile_modal_body { - padding: 9px; -} - - -.mobile_user_modal_photo_profile_wrap { - padding: 3px; - margin-bottom: 15px; -} -.mobile_user_modal_image_wrap { - display: block; - width: 64px; - height: 64px; - margin-right: 14px; -} -.mobile_chat_modal_image { - margin-right: 14px; - float: left; -} -.mobile_user_modal_image { - width: 64px; - height: 64px; - overflow: hidden; - border-radius: 32px; -} -.mobile_user_modal_info_wrap { - padding-top: 2px; -} -.mobile_user_modal_header { - font-size: 16px; - font-weight: bold; - margin-bottom: 7px; - margin-top: 11px -} -.mobile_user_modal_status { - font-size: 14px; - color: #999; -} -.mobile_modal_action_wrap { - border-bottom: 1px solid #e0e0e0; -} -.mobile_modal_select_wrap { - margin: 7px 12px 0; -} -a.mobile_modal_action, -span.mobile_modal_action { - color: #000; - display: block; - line-height: 47px; - font-size: 15px; - padding: 0 12px; - margin: 0; -} -span.mobile_modal_upload_action { - position: relative; - overflow: hidden; -} -a.mobile_modal_action:hover, -a.mobile_modal_action:active { - text-decoration: none; -} -a.mobile_modal_action .icon-checkbox-outer { - float: right; - margin-top: 16px; - margin-right: 1px; -} -a.mobile_modal_action .tg_checkbox_label { - vertical-align: baseline; - line-height: inherit; -} - -.mobile_modal_section { - display: block; - border-bottom: 1px solid #e0e0e0; - padding: 15px 0; -} -.mobile_modal_section:last-child { - border-bottom: 0; -} -.mobile_modal_section_header { - font-size: 12px; - margin-bottom: 3px; - margin-top: 0; - color: #999; - padding: 0 12px; -} -.mobile_modal_section_value { - font-size: 15px; - padding: 0 12px; -} -.mobile_modal_section_body { - padding: 0 12px; -} - -.user_modal_other_btn button { - padding-right: 0; -} -.user_modal_other_btn .dropdown-menu { - left: auto; - right: -9px; -} -.chat_modal_actions_wrap { - clear: both; -} -.chat_modal_other_btn button { - padding-right: 0; -} -.chat_modal_other_btn .dropdown-menu { - left: auto; - right: -9px; -} - -.photo_modal_window .modal-content, -.video_modal_window .modal-content { - border-radius: 0; -} -.media_modal_wrap .modal-body { - padding: 0 0 0; -} -.media_modal_actions, -.media_modal_info{ - margin: 10px; -} - - - - -.im_send_form { - position: relative; - left: 0; - right: 0; - max-width: none; -} - -.im_submit { - width: 50px; - min-width: 0; - height: 32px; - padding: 0; - border: 0; - position: absolute; - right: 0; - top: 0; -} -.im_submit, -.im_submit:active, -.im_submit:hover { - background: url(../img/icons/IconsetW.png) 2px -860px no-repeat; - background-size: 42px 1171px; - color: transparent; - box-shadow: none; -} -.is_1x .im_submit { - background-image: url(../img/icons/IconsetW_1x.png); -} - -.im_attach { - cursor: pointer; - display: block; - overflow: hidden; - position: absolute; - right: 0; - top: 0; - margin: 0; - width: 50px; - height: 32px; - padding: 3px 13px 4px 16px; -} - -.icon-paperclip { - display: inline-block; - 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 .icon-paperclip { - background-image: url(../img/icons/IconsetW_1x.png); -} -.im_attach:hover .icon-paperclip, -.im_attach:active .icon-paperclip { - background-position: -12px -100px; - opacity: 1; -} - -.im_attach, -.im_send_form_empty .im_submit { - display: none; -} -.im_send_form_empty .im_attach { - display: block; -} - -.composer_emoji_insert_btn { - position: absolute; - left: 0; - top: 0; - margin: 0; - padding: 3px 13px 4px 13px; - width: 48px; - height: 32px; -} -.icon-emoji { - display: inline-block; - width: 22px; - height: 22px; - vertical-align: text-top; - opacity: 1; - margin: 0; - background: url(../img/icons/IconsetW.png) -10px -771px no-repeat; - background-size: 42px 1171px; -} -.is_1x .icon-emoji { - background-image: url(../img/icons/IconsetW_1x.png); -} -.composer_emoji_insert_btn:active .icon-emoji, -.is_1x .composer_emoji_insert_btn:active .icon-emoji, -.composer_emoji_insert_btn.on .icon-emoji, -.is_1x .composer_emoji_insert_btn.on .icon-emoji { - background-position: -10px -803px; -} - -.im_send_field_wrap { - margin-right: 50px; - margin-left: 48px; -} -.im_send_field_wrap .form-control { - border-radius: 4px; -} -.composer_rich_textarea { - min-height: 18px; - max-height: 136px; - margin-bottom: 0; - font-size: 15px; -} -.composer_rich_textarea:empty { - background: #f1f1f1; - border-color: #f1f1f1; -} -.composer_rich_textarea:empty:before { - color: #999; -} -.composer_rich_textarea:active, -.composer_rich_textarea:focus { - box-shadow: none; - outline: 0; - background: #FFF; - border-color: #d9dbde; - content: none; -} - - -.composer_emoji_tooltip { - margin-left: 6px; - margin-top: -170px; - width: 262px; - z-index: 10000; - padding: 5px 2px 5px 5px; -} -.composer_emoji_tooltip .composer_emoji_tooltip_content_wrap { - height: 106px; -} -.composer_emoji_tooltip_tabs { - margin-bottom: 3px; -} -.composer_emoji_tooltip .composer_emoji_tooltip_content .composer_emoji_btn { - padding: 5px; - margin: -1px 0 0 -1px; -} -.icon-tooltip-tail { - display: none; -} -.composer_emoji_tooltip_tab { - margin: 0 5px; -} - -.composer_sticker_btn { - width: 80px; - height: 80px; - padding: 3px; -} -.composer_sticker_image { - max-width: 64px; - max-height: 64px; -} - - -.contacts_modal_search { - padding: 3px 0 12px; -} -.contacts_modal_col { - margin: 0 -9px; -} -.contacts_modal_members_list a.contacts_modal_contact { - padding: 8px 9px; - border-radius: 0; - border-bottom: 1px solid #eee; -} -.contacts_modal_members_list li.contacts_modal_contact_wrap { - margin: 0; -} -.contacts_modal_members_list li:last-child a { - border-bottom: 0; -} -.contacts_modal_members_list a.contacts_modal_contact:hover { - background: inherit; -} - -.mobile_modal .peer_select_modal_wrap .modal-body { - padding: 0; -} -.settings_about_section_body { - padding-right: 0; -} - - -.countries_modal_search { - padding: 3px 3px 12px; - margin: 0; - position: relative; -} -.countries_modal_col { - margin: 0 -9px; -} -.countries_modal_members_list { - padding: 0 12px 0 12px; -} -.countries_scrollable_wrap a.countries_modal_country { - padding: 8px 8px; -} - -.import_modal_phonebook_wrap { - margin-top: 40px; - text-align: center; -} - - - - -.media_modal_bottom_panel_wrap { - position: fixed; - bottom: 0; - left: 0; - right: 0; - height: 46px; - background: rgba(0,0,0,0.6); - z-index: 1030; -} -.media_modal_bottom_panel { - color: #FFF; -} - -.media_modal_top_panel_wrap { - position: fixed; - top: 0; - left: 0; - right: 0; - height: 46px; - background: rgba(0,0,0,0.6); - z-index: 1030; -} -.media_modal_top_panel { - color: #FFF; -} -.media_modal_top_actions .navbar-quick-media-back { - color: inherit; - position: relative; - display: block; - padding-left: 16px; - padding: 6px 10px 2px 28px; - font-size: 13px; - height: 46px; -} -.media_modal_top_actions .navbar-quick-media-back:hover { - text-decoration: none; -} -.media_modal_top_actions .navbar-quick-media-back .icon-back { - position: absolute; - margin-left: -18px; - margin-top: 8px; -} -h4.media_modal_title_wrap { - color: inherit; - margin: 8px 0 11px 0; -} - -.media_modal_info_wrap { - line-height: 16px; - padding: 7px 20px; - text-align: center; - max-width: 150px; - margin: 0 auto; -} -.media_modal_author { - display: inline-block; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - max-width: 150px; - font-size: 14px; -} -.media_modal_date, -a.media_modal_date:hover { - font-size: 12px; - color: #999; -} - -.photo_modal_window, -.video_modal_window, -.document_modal_window { - padding: 0; - background: #000; -} -.photo_modal_window .modal-content, -.video_modal_window .modal-content, -.document_modal_window .modal-content { - background: none; - box-shadow: none; -} -.video_modal_window .modal-body { - padding: 0; -} -.media_modal_action_btn { - float: left; - display: block; - width: 46px; - height: 46px; -} -.tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-right > a.media_modal_action_btn, -.tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-left > a.media_modal_action_btn { - padding: 0; -} - -.media_modal_action_btn i { - background: url(../img/icons/PhotoIcons.png) 0 0 no-repeat; - background-size: 40px 200px; - display: block; - opacity: 0.8; -} -.media_modal_action_btn:active i { - opacity: 1; -} -.is_1x .media_modal_action_btn i { - background-image: url(../img/icons/PhotoIcons_1x.png); -} - -.media_modal_action_btn i.media_modal_action_btn_download { - background-position: -12px -163px; - width: 16px; - height: 20px; - margin: 14px 15px; -} -.media_modal_action_btn i.media_modal_action_btn_forward { - background-position: -9px -109px; - width: 23px; - height: 15px; - margin: 14px 13px; -} -.media_modal_action_btn i.media_modal_action_btn_delete { - background-position: -13px -135px; - width: 14px; - height: 18px; - margin: 13px 17px; -} \ No newline at end of file diff --git a/app/less/app.less b/app/less/app.less new file mode 100644 index 00000000..2479e46a --- /dev/null +++ b/app/less/app.less @@ -0,0 +1,3516 @@ +@import "lib/mixins"; + +/* app common css */ + +html { + display: none; + background: #e7ebf0; + overflow: visible; +} + +body { + color: #000; + background: none; + font: 12px/18px 'Open Sans', "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif; + overflow: visible; + overflow-x: hidden; + + &.non_osx { + font: 13px/18px Tahoma, sans-serif, Arial, Helvetica; + } +} + +h1, h2, h3, h4, h5 { + color: #222; +} + +.non_osx { + h4 { + font-size: 17px; + } +} + +.noselect { + .user-select(none); +} + +.hasselect { + .user-select(text); +} + +a { + cursor: pointer; + + &.disabled { + cursor: default; + pointer-events: none; + } +} + +.form-control { + border: 1px solid #d9dbde; + border-radius: 2px; + + .box-shadow(none); + + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + + &:focus { + border-color: #66afe9; + outline: 0; + + @shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); + .box-shadow(@shadow); + } + + &.no_outline { + &:focus { + border: 1px solid #d9dbde; + outline: none; + + .box-shadow(none); + } + } + + &::-moz-placeholder, + &:-ms-input-placeholder, + &::-webkit-input-placeholder { + color: #b3b3b3; + } +} + +input[type="number"] { + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + + -moz-appearance:textfield; +} + +.btn { + border: 0; + padding: 7px 13px; + + &:hover, + &:active, + &.active, + &:focus, + &:active:focus, + &.active:focus, + .open &.dropdown-toggle { + .box-shadow(none); + outline: none; + } +} + +.btn-success { + color: #ffffff; + background-color: #6ec26d; + + &:hover, + &:focus, + &:active, + &.active, + .open &.dropdown-toggle { + color: #ffffff; + background-color: #61b75b; + } + + &:active, + &.active, + .open &.dropdown-toggle { + background: #66b864; + background-image: none; + } +} + +.btn-danger { + color: #ffffff; + background-color: #c05f5a; + + &:hover, + &:focus, + &:active, + &.active, + .open &.dropdown-toggle { + color: #ffffff; + background-color: #ab5450; + } + + &:active, + &.active, + .open &.dropdown-toggle { + background: #a24f4b; + background-image: none; + } +} + +.btn-primary { + color: #ffffff; + background-color: #6490b1; + border-radius: 3px; + + &:hover, + &:focus, + &:active, + &.active, + .open &.dropdown-toggle { + color: #ffffff; + background-color: #4a80a9; + } + + &:active, + &.active, + .open &.dropdown-toggle { + background: #41769e; + background-image: none; + } + + &[disabled], + &.disabled { + background: #7999b3; + } +} + +.btn-link { + color: #3a6d99; + text-decoration: none !important; + border-radius: 3px; + overflow: hidden; + + &:hover { + background: #f2f6fa; + } + + &.btn-link-noarea:hover, + &.dropdown-toggle:hover { + background: none; + } + + &.dropdown-toggle:active { + outline: none; + } +} + +.btn-md { + background: none; + text-decoration: none !important; + border-radius: 2px; + overflow: hidden; + text-transform: uppercase; + font-size: 13px; + padding: 6px 10px; + font-weight: bold; + + &, + &:focus, + &:hover { + color: #72a0c7; + } + + &:hover { + background: #f2f6fa; + } +} + +.btn-md-primary { + &, + &:focus, + &:hover { + color: #4680b3; + } +} + +.btn-md-danger { + &, + &:focus, + &:hover { + color: #c05f5a; + } + + &:hover { + background: #fbe7e6; + } +} + +.md-input-group { + height: 50px; + border-bottom: 1px solid #e6e6e6; + padding: 0; + margin: 0 0 22px; +} + +.md-input-label { + font-weight: normal; + color: #999; + cursor: pointer; + display: block; + font-size: 13px; + margin: 0; + padding: 0; + z-index: 1; + pointer-events: none; + -webkit-font-smoothing: antialiased; + + transform-origin: left center; + -webkit-transform-origin: left center; + + -webkit-transform: translate3d(0, 22px, 0); + transform: translate3d(0, 22px, 0); +} + +.md-input-animated { + .md-input-group, + .md-input-label { + -webkit-transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1); + transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1); + } +} + +.md-input { + color: #000; + background: #fff; + display: inline-block; + border: 0; + outline: 0; + font-size: 13px; + padding: 3px 0; + margin: 3px 0 0; + width: 100%; + + .box-shadow(none); +} +.md-input-disabled .md-input { + color: #999; +} +.md-input-focused { + border-bottom: 2px solid #6bace1; +} + +.md-input-error { + border-bottom: 2px solid #e2726f; + + .md-input-label { + color: #d45a58; + } +} + +.md-input-has-value { + .md-input-label { + -webkit-transform: scale(0.9); + transform: scale(0.9); + } +} + +.md-input-group-centered { + &, + .md-input { + text-align: center; + } + + .md-input-label { + transform-origin: center center; + -webkit-transform-origin: center center; + } +} + +.md_modal { + &_head { + color: #fff; + background: #5580a3; + padding: 0 0 28px 26px; + } + + &_head_simple { + padding-bottom: 13px; + } + + &_actions_wrap { + float: right; + } +} + +a { + &.md_modal_action { + display: block; + float: right; + color: #dde8f1; + padding: 19px 15px 5px; + font-weight: bold; + } + + &.md_modal_action:hover { + color: #fff; + } + + &.md_modal_action_close { + padding-right: 22px; + } + + &.md_modal_action:hover, + &.md_modal_action:focus, + &.md_modal_action:active { + text-decoration: none; + } +} + +.md_modal_title { + font-weight: bold; + padding: 18px 0 5px; + font-size: 13px; +} + +.navbar_offline { + .navbar-header, + .navbar-offline > li { + float: left; + } +} + +.navbar-offline { + max-width: 400px; + margin: 0 auto; + float: none; + + &-text { + color: #b9cfe3; + padding: 13px 15px; + font-size: 13px; + display: block; + line-height: 20px; + } +} + +.tg_progress { + height: 12px; + margin: 0; + padding: 0; + background: rgba(255,255,255, 0.4); + border: 5px solid rgba(0,0,0, 0.5); + border-radius: 3px; + + .progress-bar { + height: 5px; + line-height: 2px; + background: rgba(255,255,255, 0.9); + border-radius: 0; + overflow: hidden; + } +} + +.dropdown-menu { + border-radius: 2px; + padding: 0; + + .box-shadow(0 1px 3px rgba(0, 0, 0, 0.175)); + + &-to-up { + top: auto; + bottom: 100%; + margin: 0 0 3px; + } +} + +.dropdown-menu { + & > li { + & > a { + padding: 5px 14px; + font-size: 13px; + } + } +} + +.modal-backdrop { + background: rgba(26, 26, 26, 0.7); + opacity: 1 !important; + /*opacity: 0.25 !important;*/ +} +.modal.fade .modal-dialog { + .noTransition(); +} +.modal.fade, +.modal-backdrop.fade { + .noTransition(); +} + +.text-invisible { + visibility: hidden; +} + +.modal { + overflow-y: auto; + padding: 10px; + + &-dialog { + margin: 0 auto; + } + + &-content { + border: 0; + border-radius: 0; + + .box-shadow(0 1px 10px rgba(0, 0, 0, 0.15)); + } + + &-header { + padding: 12px 0 4px 3px; + border-bottom: 2px solid #E1E1E1; + margin: 0 18px; + } + + &-title { + color: #222; + font-weight: bold; + font-size: 17px; + line-height: 1.4; + } + + &-close-link, + &-head-link { + font-size: 12px; + line-height: 1.4; + float: right; + padding: 0 2px 0; + margin: 6px 2px 0 0; + + &:hover { + text-decoration: none; + } + } + + &-head-link { + margin-right: 15px; + } + + &-close-button { + position: absolute; + z-index: 1051; + top: 0; + right: 0; + width: 54px; + height: 54px; + + 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); + } + } + } + + &-close-button:hover { + i { + opacity: 1; + } + } + + &-body { + padding: 14px 14px; + } + + &-footer { + padding: 0 14px 13px; + margin: 0; + border-top: 0; + } +} + +.modal_simple { + &_header { + font-size: 14px; + margin: 0 0 10px; + text-align: center; + font-weight: bold; + } + + &_form { + max-width: 276px; + margin: 0 auto; + /*padding: 70px 0 50px;*/ + + h4 { + font-size: 14px; + margin-bottom: 38px; + text-align: left; + } + + .form-group { + margin-bottom: 13px; + } + } + + &_form_description { + color: #777; + line-height: 160%; + margin: 10px 0 0; + text-align: justify; + } +} + +.md_simple { + &_header { + font-size: 14px; + margin: 0 0 10px; + font-weight: bold; + } + + &_modal_body { + padding: 40px 37px 0; + + .modal_simple_form { + max-width: none; + margin: 0; + padding: 0; + } + + .modal_simple_form h4 { + font-size: 14px; + margin-top: 0; + margin-bottom: 38px; + text-align: left; + font-weight: bold; + } + } + + &_form_description { + color: #777; + line-height: 160%; + margin: 0 0 10px; + text-align: justify; + } + + &_modal_footer { + text-align: right; + padding: 10px 27px 15px; + + .btn { + margin-left: 10px; + } + } +} + +.modal_section { + &_header { + font-size: 12px; + line-height: 14px; + color: #999; + background: #f5f5f5; + padding: 7px 14px; + margin: 0; + } + + &_body { + padding: 14px 14px; + + p, + dl { + margin: 5px 0; + } + } + + &:last-child &_body { + padding-bottom: 8px; + } +} + +a.tg_checkbox { + color: #000; + display: block; + line-height: 18px; + padding: 8px 0; + margin: 9px 0; + + &:hover { + text-decoration: none; + } +} + +.tg_checkbox { + span.icon-checkbox-outer { + float: right; + display: inline-block; + background-color: #e6e6e6; + width: 36px; + height: 14px; + line-height: 14px; + vertical-align: middle; + border-radius: 8px; + margin: 3px 0px 3px 0; + -webkit-transition: background-color ease-in-out 0.1s; + transition: background-color ease-in-out 0.1s; + } + + &.tg_checkbox_on span.icon-checkbox-outer { + background-color: #bfd9ed; + } + + i.icon-checkbox-inner { + display: inline-block; + background: #fff; + width: 20px; + height: 20px; + border-radius: 10px; + overflow: hidden; + float: left; + margin-left: -6px; + margin-top: -3px; + -webkit-transition: all ease 0.1s; + transition: all ease 0.1s; + border: 1px solid #E7E7E7; + + .box-shadow(0px 0px 1px rgba(0, 0, 0, 0.05)); + } + + &.tg_checkbox_on i.icon-checkbox-inner { + background: #6b9bc2; + margin-left: 16px; + border: 0; + + .box-shadow(none); + } +} + +.tg_checkbox_label { + display: inline-block; + line-height: 18px; + vertical-align: middle; +} +/*a.tg_checkbox:hover span.icon-checkbox-outer { + background: #bdbdbd; +} +a.tg_checkbox_on:hover span.icon-checkbox-outer { + background: #5785aa; +} +a.tg_checkbox:hover i.icon-checkbox-inner { + background: #f2f2f2; +}*/ +.tg_radios_wrap { + margin: 15px 0; +} + +.tg_radio { + a& { + color: #000; + display: block; + line-height: 20px; + padding: 5px 0 6px; + + &:hover { + text-decoration: none; + } + } + + .icon-radio-outer { + display: inline-block; + width: 20px; + height: 20px; + line-height: 20px; + vertical-align: middle; + border-radius: 10px; + border: 2px solid #d8d8d8; + overflow: hidden; + margin: 0 8px 0 0; + + -webkit-transition: border-color ease-in-out 0.1s; + transition: border-color ease-in-out 0.1s; + } +} + +i.icon-radio { + display: inline-block; + background-color: #fff; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 8px; + border: 3px solid #fff; + -webkit-transition: background-color ease-in-out 0.1s; + transition: background-color ease-in-out 0.1s; +} + +.tg_radio.tg_radio_on .icon-radio-outer { + border-color: #5c8db3; +} +.tg_radio.tg_radio_on i.icon-radio { + background-color: #6b9bc2; +} +a.tg_radio:hover i.icon-radio { + background-color: #f2f2f2; +} +a.tg_radio_on:hover i.icon-radio { + background-color: #5785aa; +} + +.tg_radio_label { + display: inline-block; + line-height: 20px; + vertical-align: middle; +} +.tg_range_wrap { + line-height: 18px; +} +.tg_slider_wrap { + position: relative; + cursor: pointer; + line-height: 18px; + height: 18px; +} +.tg_slider_track { + position: absolute; + background: #c4daec; + height: 4px; + margin: 7px 0; + width: 100%; + z-index: 2; +} +.tg_slider_track_fill { + background: #83afd2; + height: 4px; +} +.tg_slider_thumb { + position: absolute; + border: 0; + background: #6b9bc2; + width: 18px; + height: 18px; + border-radius: 9px; + z-index: 3; +} + +.tg_form_group { + padding: 6px 0; + + &:first-child { + padding-top: 0; + } + &:last-child { + padding-bottom: 0; + } +} + +.img_fullsize_with_progress_wrap { + position: relative; + margin: 0 auto; +} +.img_fullsize_progress_overlay { + position: absolute; + width: 100%; + height: 100%; +} +.img_fullsize_progress_wrap { + position: relative; +} +.img_fullsize_progress { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 25px; + margin: 0; + padding: 0; + background: rgba(0,0,0, 0.5); + border: 0; + border-radius: 0; + padding: 10px; +} + +/* Login page */ +.login_head_bg { + background: #5682a3; + height: 226px; +} +.login_page { + margin: -131px auto 90px; + max-width: 404px; +} +.login_head_wrap { + height: 75px; +} +.login_head_logo_link { + display: inline-block; + line-height: 30px; + padding: 23px 15px 22px; +} +.tg_logo_wrap { + line-height: 30px !important; +} +.icon-tg-logo { + width: 30px; + 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; +} +.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; +} +.login_head_submit_wrap, +.login_head_submit_progress { + float: right; +} +.login_head_submit_wrap { + font-weight: bold; +} +.login_head_submit_btn, +.login_head_submit_progress { + font-size: 13px; + line-height: 20px; + padding: 27px 15px 28px; + display: inline-block; + color: #fff; +} +.login_head_submit_btn:hover, +.login_head_submit_btn:focus, +.login_head_submit_btn:active { + color: #fff; + text-decoration: none; +} +.icon-next-submit { + width: 7px; + 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; +} + +.login_footer_wrap { + color: #84a2bc; + font-size: 13px; + line-height: 16px; + margin-top: 25px; + text-align: center; +} +.logo_footer_learn_more_link, +.logo_footer_learn_more_link:hover, +.logo_footer_learn_more_link:focus, +.logo_footer_learn_more_link:active { + color: #84a2bc; + font-weight: bold; +} + +.login_form_wrap { + background: #fff; + padding: 44px 65px 44px; + + @shadow: 0px 1px 1px rgba(97, 127, 152, 0.2), + 1px 0px 0 rgba(97, 127, 152, 0.1), + -1px 0px 0 rgba(97, 127, 152, 0.1); + + .box-shadow(@shadow); + + border-radius: 2px; + border: 0; + margin: 0; + max-width: none; +} +.login_phone_country_input_group { + cursor: pointer; +} +.login_phone_num_input_group { + overflow: hidden; +} +.login_phone_code_input_group { + float: left; + width: 50px; + margin-right: 25px; +} + +.login_footer_about_wrap { + background: #fff; + margin-top: 12px; + padding: 44px 65px 44px; + + .box-shadow(0px 1px 0 #dfe5ec); + + border-radius: 3px; + border: 1px solid #dfe5ec; + + h3 { + margin: 0 0 20px; + font-size: 15px; + font-weight: bold; + text-align: left; + } + + p { + margin: 0 0 20px; + font-size: 13px; + line-height: 160%; + + &:last-child { + margin: 0; + } + } +} + +.login_form_head { + color: #222222; + margin: 0 0 20px; + font-size: 15px; + font-weight: bold; +} +.login_form_lead { + color: #999; + margin: 15px 0 30px; + font-size: 13px; + line-height: 160%; +} +.login_form_messaging { + color: #999; + font-size: 13px; + margin-top: 20px; + line-height: 160%; +} +.login_phone_head { + color: #222222; + font-size: 15px; + font-weight: bold; + text-align: center; + margin: 0; +} +.login_edit_phone { + margin: 5px 0 15px; + text-align: center; +} +.login_smscode_lead { + color: #999; + margin: 15px 0 15px; + line-height: 160%; + text-align: center; + + &:last-child { + margin-bottom: 30px; + } +} + +/* IM page start */ + +/* Dialogs list */ +.im_dialogs_empty_wrap { + margin: 60px 50px; + text-align: center; +} +.im_dialogs_empty_header { + font-size: 15px; + color: #808080; + margin: 0 0 15px; +} +.im_dialogs_empty_lead { + color: #808080; + margin-bottom: 18px; +} +.im_dialogs_import_phonebook { + margin-top: 10px; +} +.im_dialogs_panel { + padding: 12px 12px 6px; + position: relative; +} +.im_dialogs_search { + position: relative; +} + +.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; + + .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; + } +} + +a.tg_search_clear { + position: absolute; + right: 0; + margin-top: -40px; + width: 34px; + height: 34px; + opacity: 0.6; + + .contacts_modal_search & { + right: 12px; + margin-top: -34px; + } + + &:hover { + opacity: 1; + } +} + +i.icon-search-clear { + display: inline-block; + color: #999; + width: 13px; + 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); + } +} + +.im_dialogs_tabs_wrap { + display: none; +} +.im_dialogs_tabs { + padding: 4px 0; + position: relative; +} + +.im_dialogs_tab { + color: #8c8c8c; + background: #f2f2f2; + height: 30px; + text-align: center; + overflow: hidden; + width: 50%; + float: left; + padding: 7px 0; + + &:hover, + &:active, + &:focus { + color: #8c8c8c; + text-decoration: none; + } + + &.active { + color: #fff; + background: #6490b1; + } + + &:first-child { + border-radius: 2px 0 0 2px; + } + + &:last-child { + border-radius: 0 2px 2px 0; + } +} + +.im_dialogs_panel_dropdown { + position: absolute; + right: 12px; + + .dropdown-menu { + right: auto; + left: 0; + margin-top: 8px; + } +} + +.im_dialogs_scrollable_wrap { + outline: none ! important; + + .im_dialog_wrap { + margin-top: 0; + } + + a.im_dialog { + clear: both; + overflow: hidden; + color: #000; + padding: 8px 9px; + border-radius: 0; + + &:hover, + &_selected { + border-radius: 0; + background: #f2f6fa; + } + + .icon, + .glyphicon { + display: none; + } + } + + .active { + a.im_dialog { + border-radius: 0; + background-color: #6490b1; + + &:hover, + &_selected { + background-color: #6490b1; + } + } + } +} + +.im_dialog_message_wrap { + overflow: hidden; + word-wrap: break-word; +} +.im_dialog_chat_from_wrap, +.im_dialog_message_media, +.im_dialog_message_service { + color: #3a6d99; +} +.im_dialog_message_text { + color: #808080; +} + +a.im_dialog:hover, +a.im_dialog_selected { + .im_dialog_message_text { + color: #698192; + } +} + +.active { + a.im_dialog { + .im_dialog_chat_from_wrap, + .im_dialog_message_media, + .im_dialog_message_service, + .im_dialog_message_text, + .im_dialog_message { + color: #fff; + } + } +} + +.im_dialog_peer { + color: #222; + font-weight: bold; + margin-top: 2px; + margin-bottom: 2px; + + .active & { + color: #fff; + } +} + +.im_dialog_badge { + background: #64c270; + font-size: 11px; + padding: 5px; + border-radius: 11px; + min-width: 21px; + text-align: center; + margin-top: 4px; + + .active & { + color: #428bca; + background-color: #fff; + } + + .im_dialogs_modal_col & { + display: none; + } +} + +.im_dialog_unread { + background: #c1d6e5; + display: inline-block; + float: right; + width: 8px; + height: 8px; + border-radius: 5px; + overflow: hidden; + margin: 12px 0 0; + + a.im_dialog:hover &, + a.im_dialog_selected & { + background: #a3c0d4; + } + + .active & { + background-color: #a4c4dd; + } +} + +.im_dialog_date { + color: #b3b3b3; + font-size: 0.85em; + + a.im_dialog:hover &, + a.im_dialog_selected & { + color: #91a6ba; + } + .active &, + .active a.im_dialog:hover &, + .active a.im_dialog_selected & { + color: #b8d1e4; + } +} + +.im_dialog_service { + font-style: italic; + color: #999; +} +.im_dialog_message, +.im_dialog_peer { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.im_dialog_message { + color: #808080; +} + +/* IM history */ +.icon-caret { + width: 8px; + height: 4px; + + display: inline-block; + vertical-align: text-top; + 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); + } +} + +.im_dialogs_empty_header { + font-size: 15px; + color: #808080; + margin: 0 0 15px; +} +.im_dialogs_empty_lead { + color: #808080; + margin-bottom: 18px; +} +.im_history_scrollable_wrap { + outline: none ! important; + position: relative; +} + +.im_history_to_bottom { + overflow: hidden; + + .im_history_scrollable { + position: absolute; + bottom: 0; + width: 100%; + } +} + +.im_history { + padding: 20px 0 0 0; + position: relative; +} +.im_message_unread_split { + background: #f0f4f7; + color: #8096a8; + text-align: center; + padding: 4px 10px; + margin: 10px 0; +} +.im_message_author, +.im_message_fwd_author { + color: #3a6d99; + font-weight: bold; +} +.non_osx .im_message_author, +.non_osx .im_message_fwd_author { + font-size: 12px; +} + +.im_message_from_photo, +.im_message_contact_photo, +.im_message_fwd_photo { + width: 42px; + height: 42px; + border-radius: 50%; + overflow: hidden; + + .peer_initials { + line-height: 42px; + } +} + +a.im_message_from_photo, +a.im_message_contact_photo { + margin: 0 15px 0 0; +} +.non_osx .im_message_contact_name { + font-size: 12px; +} +.im_message_contact_name { + font-weight: bold; +} +.im_message_contact_name, +.im_message_contact_phone { + white-space: nowrap; +} +a.im_message_photo_thumb, +a.im_message_video_thumb { + display: block; + overflow: hidden; + border-radius: 2px; +} +img.im_message_photo_thumb, +img.im_message_video_thumb { + overflow: hidden; + border-radius: 2px; +} +.im_message_video, +a.im_message_photo_thumb { + margin-top: 5px; +} +a.im_message_video_thumb { + float: left; + margin-right: 15px; + position: relative; +} + +img.im_message_video_thumb { + -webkit-filter: blur(2px); + -moz-filter: blur(2px); + -o-filter: blur(2px); + -ms-filter: blur(2px); + filter: blur(2px); + filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='2'); +} + +div.im_message_video_thumb { + position: relative; +} +.im_message_video_duration { + background: rgba(0, 0, 0, 0.4); + color: #fff; + position: absolute; + bottom: 4px; + right: 4px; + padding: 2px 6px; + font-size: 11px; + line-height: 15px; + border-radius: 2px; + overflow: hidden; + z-index: 1; +} + +.icon-videoplay { + position: absolute; + display: inline-block; + top: 50%; + left: 50%; + margin-left: -21px; + 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); + } +} + +.im_message_geopoint { + border-radius: 2px; + margin-top: 5px; + overflow: hidden; + display: block; + position: relative; + width: 200px; + height: 100px; +} + +.icon-geo-point { + position: absolute; + display: inline-block; + top: 50%; + left: 50%; + margin-left: -8px; + margin-top: -10px; + 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); + } +} + +.im_message_media_embed { + position: relative; + height: 0; + overflow: hidden; + margin-top: 5px; + + iframe, + webview { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +.im_message_video_embed { + padding-bottom: 56.25%; /* 16/9 ratio */ +} +.im_message_insta_embed { + padding-bottom: 122%; +} +.im_message_vine_embed { + padding-bottom: 100%; +} +.im_message_soundcloud_embed { + padding-bottom: 56.25%; /* 16/9 ratio */ +} +.im_message_spotify_embed { + width: 300px; + height: 80px; +} +.im_message_twitter_embed > blockquote { + visibility: hidden; +} + +.im_message_gif_wrap { + position: relative; +} +.im_message_gif_btn { + color: #fff; + font-style: normal; + font-weight: bold; + position: absolute; + display: inline-block; + top: 50%; + left: 50%; + margin-left: -22px; + margin-top: -21px; + border: 2px solid #fff; + border-radius: 20px; + padding: 10px; + z-index: 1; +} + +.im_message_video, +.im_message_document, +.im_message_upload_file, +.im_message_audio { + margin-top: 3px; + width: 317px; +} +.im_message_audio { + margin-top: 3px; +} +.im_message_file_button { + display: block; + background: rgba(218,228,234,0.50); + float: left; + width: 42px; + height: 42px; + border-radius: 50%; + margin-right: 10px; +} + +.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); + } + .im_message_file_button_dl_doc & { + background-position: -12px -561px; + width: 16px; + height: 18px; + margin: 13px 13px; + } +} + +.im_message_file_button_dl_audio { + background: #6490b1; + border-radius: 50%; + + .im_message_file_button_icon { + 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); + } + } + + &, + .is_1x & { + .audio_player_btn_icon_pause { + width: 12px; + height: 14px; + background-position: -14px -587px; + margin: 14px 15px; + } + } +} + +.im_message_selected .icon-document, +.im_history_selectable .im_message_outer_wrap:hover .icon-document { + background-color: #dae6f0; + background-position: -2px -542px; +} + +.im_history_selectable { + a { + pointer-events: none; + } +} + +.im_message_document_link_disabled { + cursor: default; + pointer-events: none; +} +.im_message_document_info { + float: left; +} +.im_message_document_thumb_wrap { + border-radius: 2px; + overflow: hidden; + background: #f2f2f2; + width: 100px; + min-height: 38px; + max-height: 100px; + margin-right: 10px; + text-align: center; + float: left; + line-height: 0; +} +img.im_message_document_thumb { + max-width: 100px; + max-height: 100px; + vertical-align: middle; +} +.im_message_document_name_wrap { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 265px; + padding: 0 0 1px; +} +.im_message_document_actions { + width: 265px; +} +.im_message_document_name { + color: #3a6d99; + display: inline-block; + font-weight: bold; + max-width: 170px; + overflow: hidden; + vertical-align: text-top; + white-space: nowrap; + text-overflow: ellipsis; +} +.im_message_document_size { + color: #999; + padding-left: 2px; + vertical-align: text-top; +} +.im_message_document_actions a, +.audio_player_actions a { + margin-right: 10px; +} +.audio_player_title_wrap { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding: 1px 0 1px; + line-height: 16px; + height: 19px; + width: 200px; +} +.audio_player_title { + display: inline-block; + font-weight: bold; + max-width: 100px; + overflow: hidden; + vertical-align: text-top; + white-space: nowrap; + text-overflow: ellipsis; +} +.audio_player_meta { + overflow: hidden; + vertical-align: text-top; + display: inline-block; +} +.audio_player_size, +.audio_player_duration { + color: #999; + padding-left: 2px; +} +.audio_player_actions { + margin-top: 3px; +} + +.audio_player_seek { + &_slider { + float: left; + margin-right: 15px; + width: 200px; + + .tg_slider_wrap { + height: 18px; + line-height: 18px; + } + + .tg_slider_track { + margin: 7px 0; + background: rgba(218,228,234,0.50); + height: 4px; + border-radius: 0; + } + + .tg_slider_track_fill { + background: #6490b1; + height: 4px; + width: 0; + } + + .tg_slider_thumb { + display: none; + } + + &:hover { + .tg_slider_thumb { + display: block; + } + } + } +} + +.audio_player_volume_slider { + width: 50px; + float: left; + + .tg_slider_wrap { + height: 18px; + line-height: 18px; + } + + .tg_slider_thumb { + display: none; + background: #6490b1; + width: 4px; + height: 10px; + line-height: 16px; + margin-top: 4px; + border-radius: 0; + } + + &:hover { + .tg_slider_thumb { + display: block; + } + } + + .tg_slider_track { + margin: 7px 0; + background: rgba(218,228,234,0.50); + height: 4px; + } + + .tg_slider_track_fill { + background: #6490b1; + height: 4px; + width: 0; + } +} + +.audio_player_progress_wrap { + overflow: hidden; + + .tg_down_progress { + margin-top: 5px; + } +} + +.im_message_upload_progress_wrap, +.im_message_download_progress_wrap { + margin-top: 5px; + width: 200px; +} + +.im_message_document_thumbed { + .im_message_document_name_wrap, + .im_message_upload_progress_wrap, + .im_message_download_progress_wrap, + .im_message_document_actions { + width: 207px; + } + .im_message_document_name { + max-width: 110px; + } +} + +.im_message_video { + .im_message_document_name_wrap, + .im_message_download_progress_wrap, + .im_message_document_actions { + width: 152px; + } + + .im_message_document_name_wrap { + margin-top: 5px; + } +} + +.im_message_cancelable_progress_wrap, +.im_message_playback_progress_wrap { + margin-top: 4px; + /*width: 265px;*/ +} +.im_message_media_progress_cancel { + margin-left: 15px; + line-height: 100%; + width: 50px; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.tg_up_progress, +.tg_down_progress { + height: 4px; + margin: 0; + padding: 0; + background: rgba(218,228,234,0.50); + border: 0; + border-radius: 0; + + .box-shadow(none); + + .progress-bar { + height: 4px; + line-height: 4px; + background: #6B9ABD; + border-radius: 0; + overflow: hidden; + + .box-shadow(none); + } +} + +.im_service_message_wrap { + text-align: center; +} +.im_service_message { + display: inline-block; + min-width: 10px; + padding: 4px 7px; + line-height: 1.4; + color: #999; + text-align: center; + border-radius: 10px; + margin: 5px 0; +} +.im_service_message_photo_thumb { + display: block; + margin: 0 auto; +} + +.im_message_date, +.im_message_fwd_date { + color: #adadad; + font-size: 0.85em; + padding: 0 0 20px 10px; +} + +div.im_message_author, +div.im_message_body { + display: block; + overflow: hidden; +} + +.im_message_meta, +.im_message_body { + .user-select(text); +} + +.im_message_reply_wrap { + display: block; + color: inherit; + text-decoration: none; + margin-bottom: 5px; + margin-top: 2px; + overflow: hidden; + + &:hover { + text-decoration: none; + color: inherit; + } +} + +.im_message_reply_border { + background: #7eaad1; + height: 33px; + width: 2px; + position: absolute; + margin-left: -12px; +} +.im_message_reply { + padding-left: 12px; +} +.im_message_reply_thumb_wrap { + display: block; + float: left; + width: 42px; + height: 42px; + text-align: center; + position: absolute; +} +.im_message_reply_author { + font-weight: bold; + color: #3a6d99; + line-height: 16px; + margin-bottom: 3px; +} +.im_message_reply_loading { + padding: 7px 0 8px; +} +.im_reply_message_service, +.im_reply_message_media { + color: #999; +} +.im_message_reply_body { + line-height: 16px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-bottom: 1px; +} + +.im_message_reply_thumbed { + .im_message_reply_wrap, + .im_message_reply_border { + height: 42px; + } + + .im_message_reply_author { + margin-top: 4px; + } + + .im_message_reply_author, + .im_message_reply_body { + margin-left: 52px; + } + + .im_message_reply_wrap & { + margin-bottom: 4px; + } +} + +a.im_message_fwd_photo { + position: absolute; + margin-top: 1px; +} +.im_message_fwd_date { + padding: 0; +} +.im_message_text { + word-wrap: break-word; + line-height: 150%; +} +.im_message_mymention { + background: #fff8cc; + /*border-bottom: 1px solid #ffe222;*/ + /*font-weight: bold;*/ +} + +.im_history_not_selected, +.im_history_empty { + visibility: hidden; + text-align: center; + color: #999; + font-size: 16px; + line-height: 18px; + padding: 1px 50px; + margin: 0; + + &.vertical-aligned { + visibility: visible; + } + + .im_history_to_bottom & { + display: none; + } +} + +.im_send_panel_wrap { + margin: 0 auto; + padding: 10px 15px 30px 15px; +} +.im_send_form_wrap { + position: relative; +} +.im_send_form { + margin: 0 auto; + position: absolute; + bottom: 0; +} +.im_attach_input, +.im_media_attach_input { + cursor: pointer; + font-size: 120px !important; + opacity: 0.01; + position: absolute; + z-index: 100; + margin: 0; + padding: 0; + + top: 0; + right: 0; +} + +.im_send_dropbox_wrap { + background: #fff; + display: none; + padding: 17px 10px 0; + border: 1px dashed #999; + overflow: hidden; + text-align: center; + color: #999; + position: absolute; +} +textarea.im_message_field { + font-size: 12px; + margin-bottom: 10px; + padding: 6px; + min-height: 50px; + height: 50px; + resize: none; +} + +.icon-online { + background: #6ec26d; + border: 1px solid #fff; + display: block; + width: 11px; + height: 11px; + border-radius: 6px; + overflow: hidden; + position: absolute; + margin-top: -7px; + margin-left: 33px; +} + +a.img_fullsize, +.img_fullsize_wrap { + display: block; + text-align: center; +} +img.img_fullsize { + margin: 0 auto; +} +.document_modal_image_wrap { + overflow: auto; +} +.document_fullsize_wrap { + display: none; + cursor: zoom-in; + text-align: center; +} +.document_fullsize_zoomed { + cursor: zoom-out; +} +.document_fullsize_img { + /*max-width: 100%;*/ + -webkit-user-select: none; +} + +.document_fullsize_zoomed { + .document_fullsize_img { + /*min-width: 100%;*/ + -webkit-user-select: none; + image-rendering: optimizeSpeed; /* FUCK SMOOTHING, GIVE ME SPEED */ + image-rendering: -moz-crisp-edges; /* Firefox */ + image-rendering: -o-crisp-edges; /* Opera */ + image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */ + image-rendering: optimize-contrast; /* CSS3 Proposed */ + -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ + } +} + +.video_full_player { + video { + background: #000; + } +} + +.media_modal_info { + color: #999; + margin: 20px 0 0; +} +.media_modal_actions { + margin-top: 20px; +} +.media_modal_action_link { + margin-left: 15px; +} +.media_modal_author { + color: inherit; + font-weight: bold; + + &:hover { + color: inherit; + } + .non_osx & { + font-size: 12px; + } +} + +/* Message composer */ +.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; +} + + +.composer_emoji_tooltip { + display: none; + position: absolute; + z-index: 999; + width: 254px; + margin-left: -116px; + margin-top: -245px; + + border: 1px #dfdfdf solid; + + .rounded(3px); + .box-shadow(0px 1px 1px rgba(0, 0, 0, 0.1)); + + background: #fff; + padding: 5px 2px 5px 8px; + + &_shown { + display: block; + } + + &_tail { + position: absolute; + bottom: -14px; + left: 50%; + margin-left: -13px; + overflow: hidden; + width: 26px; + height: 14px; + } +} + +.icon-tooltip-tail { + background: #fff; + width: 18px; + height: 18px; + display: inline-block; + border: 1px #dfdfdf solid; + border-width: 0 1px 1px 0; + + .rounded(2px); + + position: relative; + top: -8px; + left: 4px; + + .transform(rotate(45deg)); + .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.1)); +} + +.composer_emoji_tooltip_tabs { + width: 100%; + margin: 5px 0 2px; +} + +.composer_emoji_tooltip_tab { + line-height: 0; + color: white; + 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); + } + + &.active { + opacity: 1; + } +} + +/* Recent */ +.composer_emoji_tooltip_tab_recent {background-position: -9px -306px; } +.composer_emoji_tooltip_tab_recent.active {background-position: -9px -277px; } + +/* Smile */ +.composer_emoji_tooltip_tab_smile {background-position: -9px -34px; } +.composer_emoji_tooltip_tab_smile.active {background-position: -9px -5px; } + +/* Flower */ +.composer_emoji_tooltip_tab_flower {background-position: -9px -145px; } +.composer_emoji_tooltip_tab_flower.active {background-position: -9px -118px; } + +/* Bell */ +.composer_emoji_tooltip_tab_bell {background-position: -9px -89px; } +.composer_emoji_tooltip_tab_bell.active {background-position: -9px -61px; } + +/* Car */ +.composer_emoji_tooltip_tab_car {background-position: -9px -196px; } +.composer_emoji_tooltip_tab_car.active {background-position: -9px -170px; } + +/* Grid */ +.composer_emoji_tooltip_tab_grid {background-position: -9px -248px; } +.composer_emoji_tooltip_tab_grid.active {background-position: -9px -222px; } + +/* Stickers */ +.composer_emoji_tooltip_tab_stickers {background-position: -9px -361px; } +.composer_emoji_tooltip_tab_stickers.active {background-position: -9px -333px; } + +.nano.composer_emoji_tooltip_content_wrap { + height: 174px; + position: relative; +} +.composer_emoji_tooltip_content { + /*position: relative;*/ + /*overflow: hidden; + overflow-y: auto;*/ + padding-right: 8px; + outline: 0!important; +} + +a.composer_emoji_btn { + margin: 0 1px 0 0; + padding: 6px; + display: block; + float: left; + border-radius: 2px; + + &:hover { + background-color: #edf2f5; + } +} + +.emoji { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + *vertical-align: auto; + *zoom: 1; + *display: inline; + height: 18px; + width: 18px; + background-repeat: no-repeat; + text-indent: -9999px; + border: 0 none; +} + +/* widths and heights calculated according to spritesheet dimensions and icon size */ +.emoji-spritesheet-0 { + background-size: 486px 126px; + background-image: url('../img/emojisprite_0.png'); +} +.emoji-spritesheet-1 { + background-size: 522px 72px; + background-image: url('../img/emojisprite_1.png'); +} +.emoji-spritesheet-2 { + background-size: 594px 126px; + background-image: url('../img/emojisprite_2.png'); +} +.emoji-spritesheet-3 { + background-size: 612px 54px; + background-image: url('../img/emojisprite_3.png'); +} +.emoji-spritesheet-4 { + background-size: 612px 126px; + background-image: url('../img/emojisprite_4.png'); +} + +.emoji-w20 { + width: 20px; + height: 20px; + vertical-align: middle; + display: inline-block; + + &.emoji-spritesheet-0 { background-size: 540px 140px; } + &.emoji-spritesheet-1 { background-size: 580px 80px; } + &.emoji-spritesheet-2 { background-size: 660px 140px; } + &.emoji-spritesheet-3 { background-size: 680px 60px; } + &.emoji-spritesheet-4 { background-size: 680px 140px; } +} + +.emoji-w26 { + width: 26px; + height: 26px; + vertical-align: middle; + display: inline-block; + + &.emoji-spritesheet-0 { background-size: 702px 182px; } + &.emoji-spritesheet-1 { background-size: 754px 104px; } + &.emoji-spritesheet-2 { background-size: 858px 182px; } + &.emoji-spritesheet-3 { background-size: 884px 78px; } + &.emoji-spritesheet-4 { background-size: 884px 182px; } +} + +.composer_dropdown { + display: none; + padding: 6px 0; + border: 0; + + .box-shadow(0px 1px 1px 0px rgba(60,75,87,0.27)); + + border-radius: 0; + margin-top: -5px; + + & > li > a { + display: block; + font-size: 13px; + line-height: 15px; + padding: 4px 10px; + color: #52719a; + } + + li a:hover, + li a.composer_autocomplete_option_active { + color: #52719a; + background: #f2f6fa; + } +} + +.composer_emoji_shortcut { + display: inline-block; + vertical-align: top; + margin-left: 15px; + line-height: 20px; +} +.composer_mention_option { + line-height: 20px; +} +.composer_user_mention { + color: #808080; + margin-left: 7px; +} + +.composer_dropdown { + li a:hover .composer_user_mention, + li a.composer_autocomplete_option_active .composer_user_mention { + color: #698192; + } +} + +.composer_user_photo { + span& { + display: inline-block; + width: 32px; + height: 32px; + border-radius: 50%; + overflow: hidden; + margin-right: 10px; + vertical-align: top; + } + + img& { + width: 32px; + height: 32px; + } + + span& { + .peer_initials { + line-height: 32px; + font-size: 14px; + } + } +} + +.composer_user_name, +.composer_user_mention { + display: inline-block; + line-height: 32px; + vertical-align: top; +} + +.composer_sticker_btn { + width: 78px; + height: 78px; + display: block; + display: inline-block; + text-align: center; + padding: 3px; + + &:hover { + background: #f2f6fa; + } +} + +.composer_sticker_image { + max-width: 72px; + max-height: 72px; +} + +.composer_rich_textarea { + font-size: 12px; + margin-bottom: 10px; + padding: 6px; + min-height: 38px; + height: auto; + width: auto; + max-height: 284px; + overflow: auto; + line-height: 17px; + + border: 1px solid #d2dbe3; + border-radius: 2px; + + .box-shadow(none); + .box-sizing(content-box); + + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + + -webkit-user-select: text; + word-wrap: break-word; + + .user-select(text); + + &:empty:before { + content: attr(placeholder); + color: #9aa2ab; + } + + &:active:before, + &:focus:before { + content: none; + } + + /* + &:empty:active:before, + &:empty:focus:before { + content: attr(placeholder); + color: #9aa2ab; + } + */ + + img { + width: 20px; + height: 20px; + vertical-align: middle; + margin: -3px 0 0 0; + } +} + +.error_modal_window { + .modal-dialog { + max-width: 350px; + } +} + +.error_modal_description { + color: #999; + padding: 5px 0; + font-size: 13px; + line-height: 160%; +} + +.error_modal_details { + textarea { + display: block; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + padding: 0; + font-size: 10px; + line-height: 100%; + white-space: pre-wrap; + padding: 4px; + margin: 10px 0 10px; + word-break: break-all; + word-wrap: break-word; + color: #333333; + background-color: #f5f5f5; + border: 1px solid #cccccc; + border-radius: 4px; + width: 100%; + text-align: left; + } +} + +.error_modal_details_link { + &, + &:hover { + font-size: 11px; + color: #999 + } +} + +.confirm_modal_description { + text-align: center; + padding: 20px 0; + font-size: 14px; + line-height: 160%; +} +.confirm_phone_number { + font-weight: bold; + padding: 15px 10px 0; + text-align: center; +} + +.photo_modal_window, +.video_modal_window, +.document_modal_window { + display: block; +} +.photo_modal_error { + color: #999; + position: absolute; + width: 100%; + top: 50%; + margin-top: -20px; + padding: 0 20px; + text-align: center; + font-size: 1.4em; + line-height: 160%; +} +.video_full_error { + border-radius: 10px; + overflow: hidden; + background: rgba(0,0,0,0.6); + color: #fff; + position: absolute; + top: 50%; + margin: -40px 10px 0; + padding: 10px 10px; + text-align: center; + font-size: 1.4em; + line-height: 160%; +} + +.settings_modal_wrap .im_attach_input { + z-index: 999; +} + +.settings_modal_username_link { + &, + &:hover { + color: inherit; + } +} + +.settings_external_service { + line-height: 0; + display: inline-block; + padding: 7px 9px; +} + +.settings_about_section_body { + padding-right: 0; + + p { + margin-top: 7px; + margin-bottom: 3px; + } +} + +.icon-github { + display: inline-block; + width: 59px; + height: 18px; + background: url(../img/icons/AboutLogos_2x.png) no-repeat 0 -5px; + background-size: 60px 136px; + + a:hover & { + background-position: 0 -43px; + } +} + +.icon-twitter { + display: inline-block; + width: 20px; + height: 15px; + margin-top: 1px; + background: url(../img/icons/AboutLogos_2x.png) no-repeat 0 -81px; + background-size: 60px 136px; + + 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; + position: relative; +} + +.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); + } +} + +a.contacts_modal_search_clear { + right: 9px; + margin-top: -24px; +} +.contacts_scrollable_wrap { + outline: none ! important; +} +.contacts_modal_contacts_empty { + visibility: hidden; + text-align: center; + color: #999; + font-size: 16px; + line-height: 160%; + padding: 1px 50px; + margin: 0; +} +.contacts_modal_contacts_empty.vertical-aligned { + visibility: visible; +} + +.contacts_modal_members_list { + .contacts_modal_contact_wrap { + margin-top: 0; + } + + a.contacts_modal_contact { + clear: both; + overflow: hidden; + color: #000; + padding: 8px 9px; + border-radius: 0; + + &:hover { + background: #f2f6fa; + } + } + + .active { + a.contacts_modal_contact { + &, + &:hover { + background: #f2f6fa; + } + } + } +} + +.contacts_modal_contact_name { + display: block; + color: #3C6E97; + font-weight: bold; + margin: 1px 0 2px; + + .non_osx & { + font-size: 12px; + } +} + +.contacts_modal_contact_photo { + width: 40px; + height: 40px; + margin-right: 10px; + overflow: hidden; + border-radius: 2px; +} +.contacts_modal_contact_status { + color: #999; +} +a.contacts_modal_contact:hover .contacts_modal_contact_status, +.contacts_modal_members_list .active a.contacts_modal_contact .contacts_modal_contact_status, +a.contacts_modal_contact:hover .md_modal_list_peer_description, +.contacts_modal_members_list .active a.contacts_modal_contact .md_modal_list_peer_description { + color: #91a6ba; +} + +.chat_modal_participant_wrap { + padding: 8px 0; + border-top: 1px solid #F0F0F0; + + &:first-child { + border-top: 0; + } +} + +.chat_modal_participant_kick { + padding: 11px 0; + display: block; +} + +.chat_modal_participant_name { + display: block; + color: #3C6E97; + font-weight: bold; + margin: 1px 0 2px; + + .non_osx & { + font-size: 12px; + } +} + +.chat_modal_participant_status { + color: #999; +} + +.chat_modal_participant_photo { + a& { + width: 40px; + height: 40px; + margin-right: 10px; + border-radius: 2px; + overflow: hidden; + } + img& { + width: 40px; + height: 40px; + } +} + +.chat_modal_members_forbidden { + color: #999; +} + +.icon-contact-tick { + position: absolute; + right: 10px; + top: 17px; + 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); + } +} + +.contacts_modal_members_list { + .contacts_modal_contact_wrap:hover { + .icon-contact-tick { + background-position: -9px -481px; + opacity: 0.5; + } + } + + .contacts_modal_contact_wrap.active { + .icon-contact-tick { + background-position: -9px -481px; + opacity: 1; + } + } + + .disabled { + pointer-events: none; + + .icon-contact-tick { + display: none; + } + } +} + +.modal-dialog { + .md_simple_modal_window &, + .confirm_modal_window &, + .error_modal_window & { + max-width: 348px; + } +} + +.im_edit_panel_title { + text-align: center; + margin: 0; + font-size: 14px; + line-height: 34px; +} + +.im_message_focus { + .im_message_date, + .im_message_document_size, + .audio_player_duration, + .audio_player_size, + .im_message_fwd_date { + color: #899daf; + } +} + +/* Colorized user names */ +.user { + .generate_user(@user_colors, true); + .generate_user(@user_bgcolors, false); +} + +a.peer_photo_init { + &:hover, + &:active, + &:focus { + text-decoration: none; + } +} + +.peer_initials { + display: block; + color: #fff; + text-align: center; + text-transform: uppercase; +} + +h5 { + .im_dialogs_contacts_wrap &, + .im_dialogs_messages_wrap & { + color: #999; + font-size: 13px; + margin-left: 20px; + font-weight: bold; + } +} + +/* Gif documents */ +.img_gif_with_progress_wrap { + position: relative; + overflow: hidden; + float: left; + margin-top: 3px; + max-width: 100%; +} + +.img_gif_thumb { + -webkit-filter: blur(2px); + -moz-filter: blur(2px); + -o-filter: blur(2px); + -ms-filter: blur(2px); + filter: blur(2px); + filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='2'); + margin: -1px; + padding: 1px; + max-width: 100%; +} +.img_gif_image { + max-width: 100%; +} +.img_gif_info_wrap { + color: #fff; + font-size: 10px; + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 4px; +} +.img_gif_label, +.img_gif_size { + padding: 1px 8px; + background: rgba(0,0,0,0.5); + border-radius: 3px; + overflow: hidden; +} + +.img_gif_progress_wrap { + position: absolute; + bottom: 0; + left: 0; + right: 0; + + .tg_progress { + background: rgba(0,0,0, 0.6); + border-color: rgba(0,0,0, 0.6); + border-width: 8px; + height: 18px; + border-radius: 0; + } + + .progress-bar { + background: #fff; + height: 2px; + } +} + +.countries_modal_window { + .modal-dialog { + max-width: 392px; + } +} + +.countries_modal_window { + .modal_simple_header { + margin-bottom: 12px; + font-weight: normal; + } +} + +.countries_modal_search { + padding: 0 0 12px; + margin: 0 20px; + position: relative; +} + + +.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; + padding: 6px 20px 6px 30px; + margin-bottom: 0; + margin: 0; + + .is_1x & { + background-image: url(../img/icons/IconsetW_1x.png); + } + + &:focus, + &:active { + background-color: #fff; + } +} + +a.countries_modal_search_clear { + right: 12px; + margin-top: -34px; +} +.countries_modal_wrap .modal-body { + padding: 14px 0; +} + +.countries_scrollable_wrap { + a.countries_modal_country { + clear: both; + overflow: hidden; + color: #000; + padding: 8px 26px; + font-size: 12px; + border-radius: 0; + + &:hover { + border-radius: 2px; + background: #f2f6fa; + } + } +} + +.countries_modal_country_code { + color: #999; + + .countries_scrollable_wrap a.countries_modal_country:hover & { + color: #698192; + } +} + +/* Loading dots animation */ +.loading_dots { + display: inline-block; + font-size: 1em; + line-height: 1; + padding: 0.125em 0 0.175em 0.15em; + + i { + border: 0.125rem solid; + border-radius: 50%; + display: inline-block; + height: 0.2rem; + width: 0.2rem; + margin-left: 0.2rem; + + -webkit-animation: loading_dots 0.8s linear infinite; + -moz-animation: loading_dots 0.8s linear infinite; + -ms-animation: loading_dots 0.8s linear infinite; + animation: loading_dots 0.8s linear infinite; + + &:nth-child(2) { + -webkit-animation-delay: 0.2s; + -moz-animation-delay: 0.2s; + -ms-animation-delay: 0.2s; + animation-delay: 0.2s; + } + &:nth-child(3) { + -webkit-animation-delay: 0.4s; + -moz-animation-delay: 0.4s; + -ms-animation-delay: 0.4s; + animation-delay: 0.4s; + } + } + + @-webkit-keyframes loading_dots { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } + } + + @-moz-keyframes loading_dots { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } + } + @-ms-keyframes loading_dots { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } + } + @keyframes loading_dots { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } + } +} + +.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); + } +} + +.changelog { + &_modal_window .modal-dialog { + max-width: 480px; + } + + &_card_wrap { + text-align: center; + padding: 12px 0 18px; + } + + &_header { + margin-top: 15px; + font-size: 16px; + } + + &_card { + width: 160px; + height: 160px; + display: block; + background: url(../img/changelog/card_wecandoit.png) no-repeat 0 0; + background-size: 160px 160px; + margin: 0 auto; + } + + &_card_search { + width: 133px; + height: 133px; + display: block; + background: url(../img/changelog/search.png) no-repeat 0 0; + background-size: 133px 133px; + margin: 0 auto; + } + + &_version_title { + color: #9d9479; + background: #efede3; + } + + &_version_changes_list li { + line-height: 20px; + } + + &_footer_wrap { + padding: 15px 28px 30px 120px; + } + + &_github_link { + font-size: 13px; + float: right; + color: #999; + } + + &_more_link { + font-size: 13px; + } +} + +.bad_browser_wrap { + border-radius: 4px; + border: 1px solid #ccc; + background: #fff; + max-width: 600px; + margin: 50px auto 0; + padding: 40px; + + h2 { + margin-top: 0; + } +} + +.bad_browser_text { + font-size: 14px; + line-height: 160%; + margin: 25px 0 30px; +} + +#nacl_listener { + position: absolute; + left: -10000px; +} + +.peer_modal_profile_wrap { + padding: 35px 2px 0px; +} + +.peer_modal_photo { + width: 72px; + height: 72px; + border-radius: 36px; + overflow: hidden; + + a&, + div& { + display: block; + margin-right: 19px; + } + + .peer_initials { + line-height: 72px; + font-size: 22px; + } +} + +.peer_modal_profile_name { + font-size: 14px; + padding: 15px 0 9px; + font-weight: bold; +} +.peer_modal_profile_description { + color: #ccdeed; +} + +.md_modal_split_action { + display: block; + background: #fff; + float: right; + position: relative; + width: 52px; + height: 52px; + margin-left: 20px; + border-radius: 26px; + overflow: hidden; + + .box-shadow(0 1px 1px rgba(0, 0, 0, 0.2)); + + &s { + position: absolute; + right: 25px; + top: -26px; + + &_wrap { + position: relative; + } + } + + &_camera { + 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; + } + + &:hover &_camera, + &:active &_camera { + background-position: -10px -192px; + } + + &_twitter { + 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; + } + + &:hover &_twitter, + &:active &_twitter { + background-position: -7px -312px; + } + + &_msg { + 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; + } + + &: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 { + &_wrap { + position: relative; + border-bottom: 1px solid #ebebeb; + margin: 19px 0 0 120px; + padding-right: 28px; + + &:last-child { + border-bottom: 0; + } + } + + &_number { + margin-top: 0; + } + + &_toggle { + margin-top: 10px; + } + + &_radio { + margin-top: 1px; + } +} + +.md_modal_section { + &s { + padding-top: 17px + } + + &_icon { + 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); + } + + .md_modal_iconed_section_toggle & { + margin-top: 8px; + } + .md_modal_iconed_section_radio & { + margin-top: 10px; + } + .md_modal_iconed_section_link & { + margin-top: 4px; + } + + &_phone { + width: 18px; + height: 18px; + background-position: -12px -10px; + margin-top: 3px; + } + + &_notification { + width: 17px; + height: 20px; + background-position: -12px -38px; + } + + &_keyboard { + width: 20px; + height: 14px; + background-position: -10px -140px; + margin-left: -66px; + } + + &_person { + width: 16px; + height: 16px; + background-position: -12px -90px; + } + + &_people { + width: 22px; + height: 14px; + background-position: -9px -116px; + } + + &_more { + width: 18px; + height: 12px; + background-position: -11px -68px; + } + } + + &_param_wrap { + margin-top: 19px; + margin-bottom: 19px; + + &:last-child { + margin-bottom: 16px; + } + + .md_modal_section_param_name { + color: #909090; + font-size: 11px; + line-height: 14px; + margin-top: 4px; + } + } + + &_range_wrap { + padding-right: 4px; + margin-bottom: 25px; + padding-top: 1px; + } + + &_select_wrap { + margin-bottom: 20px; + } + + &_select { + float: right; + font-size: 12px; + padding: 0; + } + + &_select_wrap &_param_name { + padding-top: 1px; + } + + &_select { + .dropdown-toggle { + font-size: 12px; + padding: 0; + line-height: normal; + } + + .dropdown-menu { + left: -15px; + } + } + + &_link { + color: inherit; + display: block; + padding: 4px 0; + + &_wrap { + padding-bottom: 15px; + } + + &:hover { + text-decoration: none; + } + } + + &_version { + color: #777; + display: inline-block; + margin-left: -70px; + position: absolute; + } + + &_splitter { + border-top: 1px solid #dfdfdf; + height: 12px; + background: #f5f5f5; + + .box-shadow(inset 0px 1px 1px #ededed); + } +} + +.md_modal_versioned_section_wrap { + position: relative; + border-bottom: 1px solid #ebebeb; + margin: 19px 0 0 120px; + padding-right: 28px; + + &:last-child { + border-bottom: 0; + } +} + +.md_modal_list_peer { + &_wrap { + padding-bottom: 16px; + } + + &_action { + font-size: 13px; + padding: 3px; + margin: -3px; + } + + &_photo { + width: 42px; + height: 42px; + line-height: 42px; + border-radius: 50%; + overflow: hidden; + + a&, + div& { + margin-right: 12px; + } + } + + &_name { + font-size: 13px; + font-weight: bold; + + a& { + color: inherit; + } + } + + &_description { + margin-top: 4px; + color: #999; + + &.status_online, + .status_online { + color: #3a6d99; + } + } +} + +.md_modal_footer { + padding: 15px 27px 15px; +} + +.md_photo_loading { + display: block; + width: 72px; + height: 72px; + border-radius: 36px; + overflow: hidden; + background: #48769b; + text-align: center; + line-height: 72px; + padding: 0; + + i { + display: inline-block; + background: #fff; + width: 8px; + height: 8px; + border-radius: 4px; + vertical-align: middle; + border: 0; + margin-left: 6px; + + &:first-child { + margin-left: 0; + } + } +} \ No newline at end of file diff --git a/app/less/desktop.less b/app/less/desktop.less new file mode 100644 index 00000000..4838f0e0 --- /dev/null +++ b/app/less/desktop.less @@ -0,0 +1,2264 @@ +@import "lib/mixins"; + +/* app desktop css */ + +.tg_head { + &_split { + max-width: 1010px; + margin: 0 auto; + height: 48px; + background: #5682a3; + } + + &_logo_wrap { + float: left; + width: 31%; + } + + &_main_wrap { + float: left; + width: 69%; + white-space: nowrap; + } + + &_btn { + display: block; + font-weight: bold; + padding: 16px 19px; + color: #b9cfe3; + font-size: 13px; + line-height: 16px; + + .dropdown.open &, + &:hover { + color: #fff; + text-decoration: none; + background: #497799; + } + + .dropdown.open & { + position: relative; + z-index: 5; + } + } +} + +.tg_head_logo_dropdown { + .dropdown-toggle { + color: #fff; + padding: 17px 20px 15px 22px; + display: block; + font-size: 14px; + line-height: 16px; + vertical-align: top; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + + .tg_head_logo_text { + display: inline-block; + vertical-align: top; + } + } +} + +.icon-hamburger-wrap { + display: inline-block; + width: 18px; + height: 14px; + -webkit-transform: translate3d(0,0,0); +} + +.tg_head_logo_dropdown { + .icon-hamburger-wrap { + margin: 0 40px 0 0; + vertical-align: top; + } + + .icon-tg-title { + vertical-align: top; + } +} + +.icon-hamburger-wrap { + .icon-bar { + background: #fff; + display: block; + height: 2px; + margin: 0; + + &:nth-child(2) { + margin-bottom: 4px; + margin-top: 4px; + } + } +} + +.tg_head_logo_dropdown { + .icon-bar { + opacity: 1; + -webkit-transition: -webkit-transform .1s ease-in; + -o-transition: -o-transform .1s ease; + -ms-transition: -ms-transform .1s ease; + -moz-transition: -moz-transform .1s ease; + transition: transform .1s ease-in; + -webkit-transform-origin: 50% 50%; + -o-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; + transform-origin: 50% 50%; + } + + &:not(.open) { + .dropdown-toggle:hover { + .icon-bar { + &:nth-child(1) { + .transform(translateY(-1px)); + } + + &:nth-child(3) { + .transform(translateY(1px)); + } + } + } + } + + &.open { + .icon-bar { + &:nth-child(1) { + .transform(translate3d(0,6px,0) rotate(45deg)); + } + + &:nth-child(2) { + opacity: 0; + } + + &:nth-child(3) { + .transform(translate3d(0,-6px,0) rotate(-45deg)); + } + } + } + + .dropdown-menu { + border-radius: 0; + padding: 9px 0 7px; + + margin: -1px 0 0; + float: none; + right: 0; + border: 1px solid rgba(15, 60, 96, 0.2); + border-left-color: #b5c3d0; + border-right-color: #b5c3d0; + + .box-shadow(0px 1px 3px 0px rgba(60,75,87,0.27)); + + overflow: hidden; + } + + @-webkit-keyframes rollIn { + from { transform: translateY(-220px); } + to { transform: translateY(0); } + } + + @keyframes rollIn { + from { transform: translateY(-220px); } + to { transform: translateY(0); } + } + + &.open { + .dropdown-menu { + -webkit-animation: rollIn 0.1s ease-in; + animation: rollIn 0.1s ease-in; + z-index: 4; + } + } + + .dropdown-menu { + & > li { + & > a { + font-size: 12px; + line-height: 21px; + padding: 11px 19px 10px 21px; + color: #42749b; + + &:hover { + background: #f2f6fa; + } + + span { + vertical-align: top; + } + } + } + } +} + + +.icon { + &-new-group { + width: 20px; + 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; + } + + &-contacts { + width: 18px; + height: 18px; + margin-right: 40px; + margin-top: 2px; + display: inline-block; + vertical-align: top; + background: url(../img/icons/General.png) no-repeat -11px -135px; + background-size: 40px 778px; + } + + &-settings { + width: 20px; + height: 20px; + margin-right: 38px; + margin-top: 1px; + display: inline-block; + vertical-align: top; + background: url(../img/icons/General.png) no-repeat -10px -163px; + background-size: 40px 778px; + } + + &-faq { + width: 20px; + height: 20px; + margin-right: 38px; + margin-top: 1px; + display: inline-block; + vertical-align: top; + background: url(../img/icons/General.png) no-repeat -10px -637px; + background-size: 40px 778px; + } + + &-about { + width: 21px; + height: 21px; + 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); + } + } +} + +.tg_head_connecting { + &_text { + color: #b9cfe3; + padding: 14px 15px; + font-size: 13px; + display: block; + line-height: 20px; + float: left; + } + + &_wrap { + .tg_head_btn { + float: left; + } + } +} + +.tg_head_msgs_edit_btn { + float: right; +} + +.tg_head_peer { + &_dropdown { + float: right; + } + + &_status { + font-weight: normal; + } + + &_dropdown { + .dropdown-menu { + max-width: 100%; + border-radius: 0; + padding: 9px 0; + + margin: -1px 0 0 0; + border: 1px solid rgba(15, 60, 96, 0.2); + + .box-shadow(0px 1px 3px 0px rgba(60,75,87,0.27)); + } + } + + &_more_dropdown { + .dropdown-menu { + left: auto; + right: 0; + } + } + + &_dropdown { + .dropdown-menu { + & > li { + & > a { + font-size: 13px; + line-height: 15px; + padding: 11px 18px 11px 18px; + color: #52719a; + + &:hover { + background: #f3f6fa; + } + } + } + } + } + + &_return_btn { + float: right; + } + + &_return_count { + color: #fff; + margin-left: 3px; + } + + &_title_wrap { + overflow: hidden; + + .tg_head_btn { + padding: 15px 19px 15px; + line-height: 18px; + + .tg_head_peer_info { + display: block; + white-space: nowrap; + overflow: hidden; + -ms-text-overflow: ellipsis; + text-overflow: ellipsis; + } + } + } + + &_title { + display: inline-block; + color: #fff; + margin-right: 3px; + -ms-text-overflow: ellipsis; + text-overflow: ellipsis; + max-width: 180px; + overflow: hidden; + vertical-align: top; + } + + &_media { + padding: 14px 19px; + color: #fff; + font-size: 13px; + line-height: 20px; + float: left; + font-weight: bold; + } +} + +.icon-filter { + &-photos, + &-video, + &-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); + } + } + + &-photos { + width: 18px; + height: 18px; + background-position: -11px -223px; + margin-top: 1px; + } + + &-video { + width: 16px; + height: 18px; + background-position: -12px -278px; + margin-top: 1px; + } + + &-documents { + width: 18px; + height: 17px; + background-position: -11px -251px; + margin-top: 1px; + } + + &-audio { + width: 14px; + height: 19px; + background-position: -13px -306px; + margin-top: 0; + } +} + +/** initial setup **/ +.nano { + position : relative; + width : 100%; + height : 100%; + overflow : hidden; + + & > .nano-content { + position : absolute; + overflow : scroll; + overflow-x : hidden; + top : 0; + right : 0; + bottom : 0; + left : 0; + + &:focus { + outline: thin dotted; + } + + &::-webkit-scrollbar { + display: none; + } + } +} + +.has-scrollbar { + & > .nano-content { + &::-webkit-scrollbar { + display: block; + } + } +} + +.nano { + & > .nano-pane { + background : rgba(0,0,0,.25); + position : absolute; + width : 10px; + right : 0; + top : 0; + bottom : 0; + visibility : hidden\9; /* Target only IE7 and IE8 with this hack */ + opacity : .01; + -webkit-transition : .2s; + -moz-transition : .2s; + -o-transition : .2s; + transition : .2s; + + .rounded(5px); + + & > .nano-slider { + background: #444; + background: rgba(0,0,0,.5); + position : relative; + margin : 0 1px; + + .rounded(3px); + } + } +} + +.nano-pane { + .nano:hover > &, + &.active, + &.flashed { + visibility : visible\9; /* Target only IE7 and IE8 with this hack */ + opacity : 0.99; + } +} + +.composer_emoji_tooltip { + z-index: 1001; + + .nano > .nano-pane { + background : rgba(255,255,255,0.0); + right: -2px; + + & > .nano-slider { + background: #d1d1d1; + margin: 0 3px 0 4px; + } + } +} + +.countries_modal_col { + .nano { + & > .nano-pane { + background : rgba(3,36,64,0.08); + width : 3px; + right: 6px; + top: 0; + -webkit-transition : .2s; + -moz-transition : .2s; + -o-transition : .2s; + transition : .2s; + + .rounded(0); + + & > .nano-slider { + background : rgba(3,46,79,0.22); + margin: 0; + + .rounded(0); + } + } + } +} + +.im_page_wrap { + background: #fff; + max-width: 1010px; + min-width: 300px; + margin: 0 auto; + + .box-shadow(0px 1px 0 #dfe5ec); + + border-radius: 0 0 3px 3px; + + border-left: 1px solid #dfe5ec; + border-right: 1px solid #dfe5ec; + border-bottom: 1px solid #d2dbe3; + + overflow: hidden; +} + +.footer { + &_wrap { + font-size: 11px; + text-align: center; + color: #9cacb9; + line-height: 40px; + } + + &_empty { + height: 23px; + } + + &_brand { + color: #9cacb9; + font-weight: bold; + } +} + +a { + &.footer_lang_link { + color: #9cacb9; + + &.active { + font-weight: bold; + } + } + + &.footer_link { + color: #9cacb9; + padding: 0 3px; + } +} + +.footer_brand:hover, +.footer_brand:active, +a.footer_lang_link.active:hover, +a.footer_lang_link.active:active, +a.footer_link.active:hover, +a.footer_link.active:active { + color: #8499aa; + text-decoration: none; +} + +.footer_link_divider { + padding: 0 5px; +} + +.im_dialogs_col { + margin-right: -7px; + + &_wrap { + float: left; + width: 31%; + border-right: 2px solid #E9EBED; + padding-bottom: 10px; + } +} + +.im_dialogs_scrollable_wrap { + padding: 0 7px 0 0; + + /* Hardware acceleration in Safari */ + -webkit-transform: translateZ(0); + -webkit-perspective: 1000; + -webkit-backface-visibility: hidden; + + .im_dialogs_modal_col_wrap & { + padding: 0; + } +} + +.im_dialogs_col { + .nano { + & > .nano-pane { + background : rgba(0,0,0,0.0); + width : 12px; + right: 0px; + + .rounded(0); + .noTransition(); + + & > .nano-slider { + background: rgba(30, 85,127 , 0.3); + margin: 0 5px; + + .rounded(0); + } + } + } +} + +.im_history { + &_col_wrap { + float: left; + width: 69%; + } + + &_scrollable_wrap { + /* Hardware acceleration in Safari */ + -webkit-transform: translateZ(0); + -webkit-perspective: 1000; + -webkit-backface-visibility: hidden; + } +} + +.nano-pane { + .im_history_col .nano > &, + .contacts_modal_col .nano > &, + .im_dialogs_modal_col .nano > & { + background : rgba(216,223,225,0.45); /*45% d8dfe5*/ + width : 9px; + right: 0; + top: 0; + + .rounded(2px); + .noTransition(); + } + + .contacts_modal_col .nano > & { + width: 5px; + right: 4px; + } + + .im_dialogs_modal_col .nano > & { + width: 6px; + right: 2px; + } + + .im_history_col .nano > & { + top: 10px; + right: 8px; + } + + .im_history_col .nano > &, + .contacts_modal_col .nano > &, + .im_dialogs_modal_col .nano > & { + & > .nano-slider { + background : rgba(137,160,179,0.50); /*50% 89a0b3*/ + margin: 0; + + .rounded(2px); + } + } +} + +.im_history { + &_no_dialogs_wrap { + margin: 122px 170px 60px; + text-align: center; + } + + &_appending { + -webkit-transition: all ease-in-out 0.2s; + -moz-transition: all ease-in-out 0.2s; + -ms-transition: all ease-in-out 0.2s; + -o-transition: all ease-in-out 0.2s; + transition: all ease-in-out 0.2s; + } + + &_typing_wrap { + line-height: 18px; + width: 100%; + height: 39px; + padding: 13px 0 8px; + overflow: hidden; + -webkit-user-select: none; + } + + &_typing { + font-size: 11px; + color: #999; + max-width: 556px; + margin: 0 auto; + padding: 0 81px 0 85px; + + a.im_history_typing_author { + color: #999; + font-weight: bold; + } + } +} + +/* Contacts modal */ +.contacts_modal { + &_window { + .modal-dialog { + max-width: 420px; + } + } + + &_search { + padding: 15px 12px 12px; + position: relative; + } + + &_members_list { + a.contacts_modal_contact { + padding: 8px 16px; + } + + .active { + a.contacts_modal_contact, + a.contacts_modal_contact:hover { + background: #6490b1; + color: #fff; + } + + a.contacts_modal_contact .md_modal_list_peer_description, + a.contacts_modal_contact:hover .md_modal_list_peer_description, + a.contacts_modal_contact .md_modal_list_peer_description .status_online { + color: #fff; + } + } + } +} + +.icon-message-status { + pointer-events: none; + background: #4eabf1; + border: 0; + display: block; + width: 10px; + height: 10px; + border-radius: 7px; + position: absolute; + margin-left: -26px; + margin-top: 16px; + opacity: 0; + + .im_message_unread & { + opacity: 1.0; + } + .im_message_pending & { + opacity: 0.5; + } +} + +.im_message_error_btn { + display: none; + + .im_message_error & { + display: inline; + } + + .icon-message-status { + background: #da564d; + opacity: 0.85; + + &:hover { + opacity: 1; + } + } +} + +/* Messages edit panel */ + +.im { + &_edit_delete_btn, + &_edit_forward_btn, + &_edit_reply_btn { + border-radius: 2px; + padding: 7px 17px; + font-weight: normal; + font-size: 12px; + line-height: 18px; + margin: 6px 0 6px 14px; + } + + &_edit_panel_wrap { + padding: 0px 0 43px; + margin: 0 24px 0 12px; + } + + &_edit_panel_border { + display: block; + margin: 0 0 42px 3px; + border-bottom: 1px solid #EEE; + } + + &_edit_cancel_link { + display: block; + padding: 7px 17px; + border-radius: 2px; + overflow: hidden; + margin: 6px 6px; + float: right; + } + + &_edit_selected_actions { + text-align: left; + text-transform: uppercase; + } + + &_selected_count { + color: #b9cfe3; + } + + &_submit { + color: #499dd9; + font-size: 13px; + line-height: 18px; + height: 18px; + border-radius: 0; + float: right; + min-width: 0; + margin-top: 5px; + margin-left: 10px; + width: auto; + padding: 0; + font-weight: bold; + + &:hover { + color: #3589c5; + background: inherit; + } + } +} + +.composer_emoji_panel { + display: block; + height: 30px; + overflow: hidden; + max-width: 210px; + + a.composer_emoji_btn { + display: inline-block; + padding: 5px; + outline: 0; + border-radius: 2px; + margin: -1px 0 2px -1px; + } +} + +.im_message_selected .im_message_date, +.im_message_selected .im_message_document_size, +.im_message_selected .im_message_audio_duration, +.im_message_selected .im_message_audio_size, +.im_message_selected .im_message_fwd_date, +.im_history_selectable .im_message_outer_wrap:hover .im_message_date, +.im_history_selectable .im_message_outer_wrap:hover .im_message_document_size, +.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_duration, +.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_size, +.im_history_selectable .im_message_outer_wrap:hover .im_message_fwd_date { + color: #899daf; +} + +.im_content_message_select_area { + display: none; + cursor: pointer; + position: absolute; + width: 99px; + height: 58px; + margin: -8px 0 0 -99px; + + .user-select(none); +} + +.icon-select-tick { + display: none; + 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); + } +} + +@media (min-width: 1024px) { + .im_content_message_select_area { + display: block; + } + .im_message_wrap { + position: relative; + } +} + +.icon-select-tick { + .im_message_selected &, + .im_history_selectable .im_message_outer_wrap:hover &, + .im_content_message_select_area:hover & { + display: inline-block; + background-position: -9px -481px; + opacity: 0.5; + } + + .im_message_selected & { + opacity: 1 !important; + } +} + +/* Dialogs modal */ +.peer_select { + &_window { + .modal-dialog { + max-width: 420px; + } + .im_dialogs_panel { + padding-top: 15px; + } + } + + &_modal_footer { + padding: 15px 10px 15px; + + .box-shadow(0 -1px 0px rgba(0,0,0,0.05)); + } + + &_modal_recipients_wrap { + padding: 6px 0 0 10px; + white-space: nowrap; + max-width: 300px; + overflow: hidden; + text-overflow: ellipsis; + } + + &_modal_recipients_empty, + &_modal_recipients_name { + color: #999; + } + + &_modal_recipient { + display: inline-block; + white-space: nowrap; + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: bottom; + } +} + +@media (max-height: 600px), (max-width: 1010px) { + .im_page_wrap { + border-bottom: 0; + border-radius: 0; + + .box-shadow(none); + } + + .footer_wrap { + display: none; + } +} + +@media (max-width: 900px) { + /* Status ticks */ + .icon-message-status, + .im_message_error_btn, + .icon-message-status-tick { + display: none; + } + + .im_message { + &_out { + .icon-message-status-tick { + 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); + } + } + } + + &_pending { + .icon-message-status-tick { + display: none; + } + } + + &_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); + } + } + } + + &_date { + padding: 0; + } + } +} + +.im_message_fwd { + &_author_wrap { + margin: 1px 0 4px; + display: inline-block; + } + + &_author { + margin-right: 5px; + } + + .im_message_fwd_author_wrap, + .im_message_text, + .im_message_media { + margin-left: 52px; + } +} + +.im_send_panel_wrap { + max-width: 554px; + padding-bottom: 23px; +} +.im_send_form { + max-width: 382px; + left: 70px; + right: 72px; +} +.im_panel_peer_photo, +.im_panel_own_photo { + width: 52px; + height: 52px; + line-height: 52px; + border-radius: 50%; + overflow: hidden; +} +div.im_panel_peer_photo, +a.im_panel_peer_photo { + cursor: pointer; + margin-left: 20px; + height: 55px; +} +a.im_panel_own_photo { + display: block; + margin-right: 18px; +} +a.im_panel_own_photo .peer_initials, +div.im_panel_peer_photo .peer_initials, +a.im_panel_peer_photo .peer_initials { + font-size: 18px; + line-height: 50px; +} + +.im_panel_peer_online { + background: #6ec26d; + border: 2px solid #fff; + display: block; + width: 14px; + height: 14px; + border-radius: 7px; + overflow: hidden; + position: absolute; + margin-top: -12px; + 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 { + opacity: 1; + } + } + + &:active, + &.composer_emoji_insert_btn_on { + .icon-emoji { + background-position: -9px -367px; + opacity: 1; + } + } +} + +.im_send_field_wrap { + margin-bottom: 15px; + position: relative; +} +.composer_rich_textarea, +.composer_textarea { + border-radius: 0; + border: 0; + box-shadow: none; + outline: none; + box-shadow: 0 1px 0 0 #e8e8e8; + padding: 1px 30px 1px 0; + margin: 0; + min-height: 50px; + line-height: 20px; + height: auto; + + &:focus { + border: 0; + box-shadow: none; + outline: none; + box-shadow: 0 2px 0 0 #77b7e4; + } +} + +.icon-paperclip { + display: inline-block; + 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); + } +} + +.im_attach { + cursor: pointer; + display: block; + overflow: hidden; + position: relative; + + width: 18px; + height: 17px; + margin-right: 28px; + margin-top: 6px; + + &:hover { + .icon-paperclip { + opacity: 1; + } + } + + &:active { + .icon-paperclip { + background-position: -11px -482px; + opacity: 1; + } + } +} + +.im_media_attach { + cursor: pointer; + display: block; + overflow: hidden; + position: relative; + padding: 0; + + width: 20px; + height: 18px; + margin-top: 5px; + margin-right: 25px; +} + +.icon-camera { + display: inline-block; + 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); + } +} + +.im_media_attach { + &:hover .icon-camera { + opacity: 1; + } + + &:active .icon-camera { + background-position: -10px -427px; + opacity: 1; + } +} + +.im_send_reply { + &_wrap { + margin-bottom: 5px; + } + + &_form_wrap { + a.im_panel_own_photo, + a.im_panel_peer_photo { + margin-top: 47px; + } + } + + &_cancel { + float: right; + display: block; + width: 18px; + height: 18px; + margin-right: 6px; + margin-top: 5px; + -webkit-transform: translate3d(0,0,0); + padding-top: 7px; + + .icon-reply-bar { + display: block; + background: #999; + width: 18px; + height: 2px; + transform-origin: 50% 50%; + } + + &:hover { + .icon-reply-bar { + background: #44a1e8; + } + } + } +} + +.icon-reply-bar { + &:first-child { + .transform(rotate(-45deg)); + + transform-origin: 50% 50%; + } + + &:last-child { + .transform(translate3d(0,-2px,0) rotate(45deg)); + } +} + +@media (max-height: 700px) { + a { + &.im_panel_peer_photo, + &.im_panel_own_photo { + display: none; + } + } + + .im_send_field_wrap { + margin-bottom: 0; + } + + .composer { + &_rich_textarea, + &_textarea { + min-height: 25px; + padding-right: 25px; + } + + &_emoji_insert_btn { + top: 0; + right: 0px; + margin-top: -3px; + } + + &_emoji_panel { + display: none; + } + } + + .im_submit { + position: absolute; + top: 0; + left: 100%; + margin: 0 0 0 15px; + } + .im_media_attach { + position: absolute; + top: -7px; + left: -43px; + width: 19px; + height: 24px; + } + + .icon-camera { + display: inline-block; + 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); + } + } + + .im_media_attach { + &:hover .icon-camera, + &:active .icon-camera { + background-position: -12px -100px; + opacity: 1; + } + } + + .im_attach { + display: none; + position: absolute; + top: 0; + right: 100%; + margin: 0; + margin-right: 45px; + margin-top: 1px; + } + + .icon-emoji { + display: inline-block; + width: 22px; + height: 22px; + 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); + } + } + + .composer_emoji_insert_btn:active .icon-emoji, + .is_1x .composer_emoji_insert_btn:active .icon-emoji, + .composer_emoji_insert_btn.composer_emoji_insert_btn_on .icon-emoji, + .is_1x .composer_emoji_insert_btn.composer_emoji_insert_btn_on .icon-emoji { + background-position: -10px -803px; + } + + .im_edit_panel { + &_wrap { + padding-bottom: 8px; + } + + &_border { + margin-bottom: 7px; + } + } +} + +/* Peer modals */ +.user_modal { + &_window .modal-dialog { + max-width: 480px; + } + + &_photo_profile_wrap { + padding: 13px 12px; + margin-bottom: 15px; + } + + &_image_wrap { + display: block; + width: 100px; + margin-right: 22px; + overflow: hidden; + border-radius: 3px; + } + + &_image { + width: 100px; + height: 100px; + } + + &_header { + font-weight: bold; + margin: 2px 0 7px; + } + + &_status { + color: #999; + margin-bottom: 15px; + } +} + +.modal_section_body { + dt { + font-weight: normal; + display: inline-block; + width: 100px; + } + + dd { + display: inline-block; + } +} + +.user_modal { + &_main_btn { + border: 0; + font-size: 12px; + padding-left: 16px; + padding-right: 16px; + margin: 8px 10px 0 0; + float: left; + } + + &_other_btn { + margin: 8px 0 0 0; + float: left; + + .dropdown-toggle { + border: 0; + font-size: 12px; + } + + .dropdown-menu { + margin-left: -3px; + } + } + + &_settings_wrap { + margin-top: 25px; + } + + &_notifications { + font-weight: bold; + } + + &_clear { + margin-top: 20px; + } +} + +.chat_modal { + &_window { + .modal-dialog { + max-width: 480px; + } + } + + &_header { + font-weight: bold; + margin: 0 0 10px; + } + + &_members_count { + color: #999; + margin-bottom: 16px; + } + + &_actions_wrap { + float: right; + position: relative; + width: 332px; + + & > button, + & > .chat_modal_other_btn > button, + & > span.btn { + padding: 7px 10px; + } + } + + &_main_btn { + border: 0; + font-size: 12px; + padding-left: 16px; + padding-right: 16px; + float: left; + position: relative; + overflow: hidden; + margin-right: 10px; + margin-top: 8px; + } + + &_invite_btn { + border: 0; + font-size: 12px; + padding-left: 16px; + padding-right: 16px; + float: left; + position: relative; + margin-right: 10px; + margin-top: 8px; + } + + &_delete_btn { + border: 0; + font-size: 12px; + padding-left: 16px; + padding-right: 16px; + float: left; + margin-right: 10px; + margin-top: 8px; + } + + &_other_btn { + margin-top: 8px; + float: left; + + .dropdown-toggle { + border: 0; + font-size: 12px; + } + + .dropdown-menu { + margin-left: -3px; + } + } + + &_photo_update_link { + display: block; + padding: 5px 14px; + clear: both; + font-weight: normal; + line-height: 1.428571429; + color: #333333; + white-space: nowrap; + font-size: 13px; + overflow: hidden; + position: relative; + + &:hover { + text-decoration: none; + color: #262626; + background-color: #f5f5f5; + } + } + + &_settings_wrap { + margin-top: 10px; + } +} + +.settings { + &_modal { + &_window { + .modal-dialog { + max-width: 480px; + } + } + + &_settings { + padding: 4px 0; + margin: 0; + } + + &_wrap { + .user_modal_main_btn { + position: relative; + overflow: hidden; + } + } + } + + &_profile { + &_edit_form { + margin-bottom: 15px; + } + + &_image_wrap { + float: left; + width: 120px; + margin-right: 22px; + } + + &_first_name, + &_last_name { + width: 180px; + float: left; + margin-bottom: 0; + + label { + margin-bottom: 3px; + } + } + + &_first_name { + margin-right: 22px; + margin-bottom: 10px; + } + + &_last_name { + margin-right: 10px; + margin-bottom: 15px; + } + + &_save { + padding-top: 21px; + float: left; + + &_btn { + width: 50px; + } + } + + &_edit_form { + margin-bottom: 0; + + input { + font-size: 12px; + line-height: normal; + background: #f2f2f2; + border: 1px solid #f2f2f2; + border-radius: 0; + padding: 6px 6px 6px 6px; + margin-bottom: 0; + margin: 0; + + &:focus, + &:active { + background-color: #fff; + } + } + } + } + + &_send_choose_form { + input { + margin-top: 2px; + } + } + + &_send_choose_form { + margin-bottom: 20px; + } + + &_user_phone, + &_version { + color: #999; + } +} + +.modal_section_body { + dl.settings_modal_language { + margin: 3px 0; + + dt { + padding-top: 2px; + } + } +} + +.settings_modal_language_select { + font-size: 12px; + height: 21px; + line-height: 21px; + padding: 0; +} + +.icon-volume { + &-outer { + display: inline-block; + background: #c7c7c7; + border-radius: 10px; + overflow: hidden; + height: 18px; + padding: 5px 8px; + margin: 0 9px 0 0; + width: 32px; + } + + &-inner { + display: block; + background: #fff; + float: left; + width: 2px; + vertical-align: bottom; + margin: 0 1px 0; + height: 8px; + } + + &-inner1 { + height: 2px; + margin-top: 6px; + } + + &-inner2 { + height: 4px; + margin-top: 4px; + } + + &-inner3 { + height: 6px; + margin-top: 2px; + } + + &-outer1 &-inner2, + &-outer1 &-inner3, + &-outer1 &-inner4, + &-outer2 &-inner3, + &-outer2 &-inner4, + &-outer3 &-inner4 { + display: none; + } +} + +.settings_volume_slider { + width: 100%; + max-width: 362px; + display: inline-block; +} +.im_message_selected .im_message_outer_wrap, +.im_message_focus .im_message_outer_wrap { + background: #f2f6fa; +} + +.im_history_selectable { + .im_message_outer_wrap { + cursor: pointer; + + &:hover { + background: #f2f6fa; + } + } +} + +.im_message_wrap { + max-width: 560px; + padding: 0 15px 0 15px; + margin: 0 auto; + position: static; +} +.im_content_message_wrap { + margin: 8px 10px 8px 16px; +} + +.im_grouped_short { + .im_content_message_wrap { + margin: 6px 10px 6px 16px; + } + + &:last-child { + .im_content_message_wrap { + margin-bottom: 8px; + } + } +} + +@media (min-width: 901px) { + .im_message_wrap { + position: relative; + } +} + +.im_message_author { + margin: 1px 0 4px; + display: inline-block; +} + +/* Groupings */ +.im_message_fwd_from { + margin-top: 5px; +} +.im_grouped .im_message_fwd_from { + margin-top: 0; +} +.im_message_fwd { + margin-top: 4px; + margin-bottom: 4px; +} +.im_grouped_short .im_message_from_photo, +.im_grouped_short .im_message_author, +.im_grouped .im_message_from_photo, +.im_grouped .im_message_author, +.im_grouped_fwd .im_message_author, +.im_grouped_fwd .im_message_from_photo, +.im_grouped_fwd_short .im_message_author, +.im_grouped_fwd_short .im_message_from_photo { + display: none; +} + +.im_message_body { + .im_grouped_short &, + .im_grouped &, + .im_grouped_fwd &, + .im_grouped_fwd_short & { + margin-left: 57px; + } +} + +.im_content_message_select_area { + .im_grouped_short &, + .im_grouped & { + height: 50px; + } + + .im_message_fwd & { + margin-top: -4px; + } + + .im_grouped_fwd .im_message_fwd &, + .im_grouped_fwd_short .im_message_fwd & { + margin-top: -8px; + } + + .im_history_appending & { + height: 52px; + } +} + +.icon-select-tick { + .im_message_fwd & { + margin-top: 12px; + } + .im_grouped_short & { + margin-top: 4px; + } + .im_grouped_fwd_short & { + margin-top: 2px; + } +} + +.im_grouped_short .icon-message-status, +.im_grouped_fwd_short .icon-message-status { + margin-top: 5px; +} +.im_grouped_fwd .im_message_fwd_from, +.im_grouped_fwd_short .im_message_fwd_from { + display: none; +} + +.im_message_fwd { + .im_grouped_short &, + .im_grouped &, + .im_grouped_fwd &, + .im_grouped_fwd_short & { + .im_message_date { + display: none; + } + } + + .im_grouped_fwd &, + .im_grouped_fwd_short & { + margin-top: 8px; + } + .im_grouped_fwd &, + .im_grouped_fwd_short & { + margin-top: 8px; + } +} + +.tooltip { + &-inner { + background: rgba(0,0,0, 0.8); + } + &-arrow { + opacity: 0.8; + } +} + +.im_dialogs { + &_scrollable_wrap { + a.im_dialog { + padding: 7px 16px; + } + } + + &_scrollable_wrap { + .active { + a.im_dialog { + margin-right: -2px; + padding-right: 18px; + } + } + } +} + +.im_dialog { + &_photo { + width: 48px; + height: 48px; + border-radius: 50%; + overflow: hidden; + } + + div&_photo { + margin-right: 15px; + + .peer_initials { + line-height: 48px; + font-size: 18px; + } + } + + &_message { + margin-top: 5px; + } + + &_peer { + margin-top: 3px; + margin-bottom: 3px; + } +} + +.active { + .im_dialog_date, + a.im_dialog:hover .im_dialog_date, + a.im_dialog_selected .im_dialog_date { + color: #fff; + } +} + +/* Import contact modal */ +.import_contact_modal_window { + .modal-dialog { + max-width: 480px; + } +} + +.modal-content-animated { + -webkit-transition: margin-top linear 0.2s; + transition: margin-top linear 0.2s; +} + +.countries { + &_modal_search { + padding: 12px 12px 12px; + margin: 0; + position: relative; + } + + &_modal_col { + max-height: 350px; + } + + &_modal_wrap .md_modal_body { + padding-bottom: 15px; + } +} + +.modal_close { + background: url(../img/icons/PhotoIcons.png) -10px -10px no-repeat; + background-size: 40px 200px; + width: 20px; + height: 21px; + float: right; + margin: 43px 40px 0 0; + opacity: 0.5; + pointer-events: none; + + -webkit-transition : .2s; + -moz-transition : .2s; + -o-transition : .2s; + transition : .2s; + + &_wrap { + display: none; + cursor: pointer; + position: fixed; + top: 0; + right: 0; + width: 50%; + height: 100%; + + &:hover { + .modal_close { + opacity: 1; + } + } + } + + &_wrap_wnext { + width: 104px; + height: 150px; + } +} + +.modal_prev_wrap, +.modal_next_wrap { + display: none; + position: fixed; + top: 0; + left: 0; + bottom: 64px; + width: 104px; +} +.modal_next_wrap { + left: auto; + right: 0; +} +.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; + position: absolute; + top: 50%; + pointer-events: none; + margin: 0 0 0 38px; + + -webkit-transition : .2s; + -moz-transition : .2s; + -o-transition : .2s; + transition : .2s; +} +.modal_next { + margin: 0 0 0 50px; + background-position: -14px -75px; +} + +.modal_prev_active_wrap { + cursor: pointer; + + .modal_prev { + opacity: 0.5; + } + + &:hover { + background-color: rgba(0,0,0,0.2); + + .modal_prev { + opacity: 1; + } + } +} + +.modal_next_active_wrap { + cursor: pointer; + + .modal_next { + opacity: 0.5; + } + + &:hover { + background-color: rgba(0,0,0,0.2); + + .modal_next { + opacity: 1; + } + } +} + +.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, + .modal_prev_wrap { + display: block; + } +} + +.media_modal { + &_bottom_panel { + max-width: 1000px; + margin: 0 auto; + color: rgba(255, 255, 255, 0.6); + position: relative; + + &_wrap { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 64px; + background: #313131; + } + } + + &_title_wrap { + max-width: 300px; + margin: 0 auto; + text-align: center; + font-size: 13px; + font-weight: bold; + line-height: 16px; + padding: 24px 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + &_info_wrap { + line-height: 16px; + padding: 15px 16px; + width: 200px; + position: absolute; + left: 0; + } + + &_author_photo { + width: 32px; + height: 32px; + border-radius: 50%; + overflow: hidden; + + .peer_initials { + line-height: 32px; + } + + a& { + margin: 1px 10px 1px 0; + } + } + + div&_author_name { + font-size: 13px; + margin-top: 1px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + &_date { + &, + a&:hover { + font-size: 11px; + color: rgba(255, 255, 255, 0.4); + } + + div& { + margin-top: 2px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + + &_wrap { + .modal-body { + padding: 16px; + } + } +} + +.photo_modal_window, +.video_modal_window, +.document_modal_window { + padding: 0; +} + +.video_modal_window { + .modal-body { + padding: 0; + } +} + +.media_modal_bottom_actions { + position: absolute; + right: 0; +} + +.media_modal_action_btn { + float: left; + display: block; + width: 68px; + height: 64px; + + &:hover { + background: rgba(0,0,0,0.2); + } + + 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); + } + } + + &:hover i { + opacity: 1; + } + + & i&_download { + background-position: -12px -163px; + width: 16px; + height: 20px; + margin: 22px 26px; + } + + & i&_forward { + background-position: -9px -109px; + width: 23px; + height: 15px; + margin: 24px 22px; + } + + & i&_delete { + background-position: -13px -135px; + width: 14px; + height: 18px; + margin: 23px 27px; + } +} \ No newline at end of file diff --git a/app/css/font.css b/app/less/font.less similarity index 99% rename from app/css/font.css rename to app/less/font.less index 78e61300..ac463fb7 100644 --- a/app/css/font.css +++ b/app/less/font.less @@ -34,7 +34,6 @@ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } - @font-face { font-family: 'Open Sans'; font-style: normal; diff --git a/app/less/lib/mixins.less b/app/less/lib/mixins.less new file mode 100644 index 00000000..7e39c35a --- /dev/null +++ b/app/less/lib/mixins.less @@ -0,0 +1,76 @@ +@user_colors: '#8365ab', + '#539e4f', + '#ae9661', + '#4979a3', + '#b7635d', + '#b3577a', + '#5397b4', + '#c07844'; + +@user_bgcolors: '#cc90e2', + '#80d066', + '#ecd074', + '#6fb1e4', + '#e57979', + '#f98bae', + '#73cdd0', + '#fba76f'; + +.generate_user(@arr, @isColor) { + .-(@i: 1) when (@i <= length(@arr)) { + @color: e(extract(@arr, @i)); + & when (@isColor) { + &_color_@{i}, + &_color_@{i}:hover { + color: @color; + } + } + & when not (@isColor) { + &_bgcolor_@{i} { + background: @color; + } + } + .-((@i + 1)); + } .-; +} + +.user-select(@argument: none) { + -webkit-user-select: @argument; + -moz-user-select: @argument; + -ms-user-select: @argument; + user-select: @argument; +} + +.box-shadow(@arguments) { + -webkit-box-shadow: @arguments; + -moz-box-shadow: @arguments; + box-shadow: @arguments; +} + +.transform(@arguments) { + -webkit-transform: @arguments; + -moz-transform: @arguments; + -o-transform: @arguments; + -ms-transform: @arguments; + transform: @arguments; +} + +.box-sizing(@sizing: border-box) { + -ms-box-sizing: @sizing; + -moz-box-sizing: @sizing; + -webkit-box-sizing: @sizing; + box-sizing: @sizing; +} + +.rounded(@radius: 2px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} + +.noTransition() { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; +} \ No newline at end of file diff --git a/app/less/mobile.less b/app/less/mobile.less new file mode 100644 index 00000000..a65479c1 --- /dev/null +++ b/app/less/mobile.less @@ -0,0 +1,1688 @@ +@import "lib/mixins"; + +/* app mobile css */ + +html { + background: #fff; +} + +.dropdown-menu { + border-radius: 0; + + & > li > a { + padding: 15px 17px 14px; + font-size: 14px; + } + + .divider { + margin: 0; + } +} + +.tg_page_head { + .navbar-quick-nav, + .navbar-toggle { + display: none; + } + + .container { + display: block; + width: auto; + padding-left: 0; + padding-right: 0; + + .navbar-header { + margin: 0; + } + } + + .navbar-inverse { + background: #5682a3; + border: 0; + + .box-shadow(0px 1px 1px rgba(0, 0, 0, 0.11)); + + margin: 0; + } + + .ios_standalone & { + .navbar > .container { + margin-top: 20px; + } + } + + .navbar > .container { + .navbar-brand { + padding: 8px 15px; + margin-left: 0; + margin-right: 20px; + display: block; + line-height: 0; + height: auto; + } + } + + .navbar-menu { + .navbar-nav.navbar-right { + margin-right: 0; + } + } + + .navbar-inverse { + .navbar-nav > li > a { + padding-top: 13px; + padding-bottom: 13px; + color: #b9cfe3; + font-size: 13px; + + &:hover { + color: #fff; + } + } + + .navbar-toggle { + border-color: #497495; + outline: 0; + border: 0; + } + + .navbar-collapse, + .navbar-form { + border-color: #497495; + } + + .navbar-toggle { + &:hover, + &:active, + &:focus { + background-color: rgba(255,255,255,0.1); + } + } + } + + .navbar > .container { + .navbar-brand { + padding-left: 9px; + outline: none; + } + } +} + +.ios_standalone { + .modal.mobile_modal { + border-top: 20px solid #497495; + } +} + +.im_history_panel_edit_link { + margin-right: 0; +} +.navbar-header { + float: none; +} +.navbar-toggle-wrap { + float: right; + display: block; + margin: 0; + + .navbar-toggle { + float: none; + display: block; + margin: 0; + padding: 12px 20px 11px; + border-radius: 0; + } +} + +.tg_page_head { + .navbar-inverse { + .navbar-toggle:hover, + .open .navbar-toggle { + background-color: rgba(0,0,0,0.1); + } + } +} + +.navbar_peer_not_selected .navbar-toggle-wrap .navbar-toggle { + padding: 16px 17px; +} + +.navbar-toggle-wrap { + .navbar-toggle { + .icon-bar { + background-color: #d7e5f0; + width: 5px; + height: 5px; + border-radius: 3px; + margin-left: 6px; + margin-right: 6px; + + & + .icon-bar { + margin-top: 3px; + } + + .navbar_peer_not_selected & { + background-color: #fefeff; + width: 21px; + height: 2px; + border-radius: 1px; + margin-left: 0; + margin-right: 0; + } + } + } + + .dropdown-menu { + margin-top: 6px; + right: -40px; + left: auto; + width: 195px; + + .navbar_peer_not_selected &, + .tg_modal_head & { + right: 6px; + } + } +} + +// ?! why not into the "& + .icon-bar" +.navbar-toggle-wrap .navbar-toggle .icon-bar + .icon-bar { + margin-top: 4px; +} + +.navbar-toggle { + .dropdown-toggle { + display: block; + } +} + +.navbar-search-wrap { + display: none; + float: right; + margin: 0; + line-height: 0; + padding: 12px 14px 11px; + border: 1px solid transparent; + border-radius: 4px; + + &:hover, + &:link, + &:active { + background-color: rgba(0,0,0,0.1); + } +} + +.icon-search { + 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); + } +} + +.tg_page_head .navbar_peer_not_selected .navbar-search-wrap, +.tg_modal_head .navbar-search-wrap { + display: block; +} + +.tg_page_head { + .navbar-quick-nav { + display: block; + float: none; + margin: 0; + + li { + float: left; + } + + a { + padding-top: 15px; + padding-bottom: 15px; + } + } +} + +.icon-back { + display: inline-block; + 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); + } +} + +.tg_page_head { + .navbar-quick-nav { + a:active { + .icon-back { + opacity: 1; + } + } + } + + .navbar > .container .navbar-brand { + display: none; + } + + .navbar_peer_not_selected > .container .navbar-brand { + display: block; + } + + .navbar_offline > .container .navbar-brand.tg_logo_wrap { + display: none; + } + + .navbar { + min-height: 46px; + } + + .navbar-inverse .navbar-quick-nav > li > a { + padding-left: 16px; + padding: 6px 10px 2px 28px; + color: #b9cfe3; + font-size: 13px; + height: 46px; + + /*&:active,*/ + &:hover { + background-color: rgba(0,0,0,0.1); + } + } +} + +.navbar-quick-nav { + .icon-back { + position: absolute; + margin-left: -18px; + margin-top: 8px; + } + + h4 { + font-size: 15px; + color: #fff; + margin: 0; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } +} + +.navbar-quick { + &-back-title { + max-width: 160px; + overflow: hidden; + text-overflow: ellipsis; + } + + &-media-back h4 { + margin: 9px 0 12px 0; + line-height: 120%; + } + + &-profile-back, + &-group-back { + h4 { + font-weight: bold; + } + + small { + font-size: 13px; + white-space: nowrap; + overflow: hidden; + margin-left: 0; + } + + .status_online { + color: #fff; + } + } +} + +.navbar-menu { + display: none; + + .navbar_offline & { + display: block; + } +} + +.navbar-offline { + .navbar_offline & { + float: left; + margin: 0; + } + + & > li > a { + padding-right: 0; + padding-left: 0; + } + + &-text { + color: #fff; + font-size: 15px; + } + + .tg_page_head .navbar-inverse & { + & > li > a { + padding-top: 13px; + padding-bottom: 12px; + color: #fff; + font-size: 15px; + } + } +} + +.navbar_offline { + .tg_page_head & { + & > .container .navbar-brand { + margin-right: 0; + } + } + + .navbar-quick-nav li > a > .navbar-quick-back-title, + .navbar-search-wrap, + .navbar-history-edit { + display: none; + } +} + +.navbar-peer-wrap { + display: block; + float: right; + width: 46px; + height: 46px; + padding: 5px; + + img { + width: 36px; + height: 36px; + border-radius: 18px; + overflow: hidden; + } + + .navbar_peer_not_selected & { + display: none; + } +} + +.navbar_history_select { + .navbar-peer-wrap, + .navbar-toggle-wrap { + display: none; + } +} + +.tg_page_head { + .navbar-quick-nav { + li.navbar-quick-right { + float: right; + } + + li.navbar-quick-left { + float: left; + } + + li.navbar-quick-title { + position: static; + float: none; + color: #fff; + font-size: 15px; + font-weight: bold; + padding: 14px 0; + text-align: center; + } + } + + .navbar-inverse { + .navbar-quick-nav { + & > .navbar-quick-right > a, + & > .navbar-quick-left > a { + font-size: 15px; + color: #fff; + padding: 14px 15px; + } + } + } +} + +.mobile_scrollable_wrap { + overflow: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; +} + +.login { + &_head_bg { + display: none; + } + + &_page { + margin-top: 0; + margin-bottom: 30px; + } + + &_head_wrap { + height: 75px; + background: #537c9a; + } + + &_form_wrap { + border-radius: 0; + border-top: 0; + border-left: 0; + border-right: 0; + box-shadow: none; + padding: 44px 40px 44px; + } + + &_footer_about_wrap { + border-radius: 0; + border-top: 0; + border-left: 0; + border-right: 0; + box-shadow: none; + padding: 44px 40px 44px; + } +} + +.icon-next-submit { + margin-top: -3px; +} + +.im_dialogs { + &_empty_header { + font-size: 19px; + margin-bottom: 10px; + } + + &_empty_lead { + font-size: 14px; + line-height: 160%; + } + + &_add_contact, + &_import_phonebook { + padding: 12px 13px; + } + + &_add_contact + &_import_phonebook { + margin-top: 10px; + } +} + +.im_page_wrap { + background: none; + box-shadow: none; + border: 0; + overflow: hidden; +} +.im_history_selectable .im_message_outer_wrap:hover, +.im_message_selected { + background: #e1e9f0; +} + +.im_message_focus { + .im_message_outer_wrap { + background: rgba(225, 233, 240, 0.35); + } +} + +.im_message_body { + padding: 7px 10px; + border-radius: 3px; + background: #f1f1f1; + + .im_message_out & { + background: #e4ecf2; + } +} + +.im_message_body_media, +.im_message_out .im_message_body_media { + padding: 0; + border-radius: 0; + background: none; +} + +.im_message_selected { + .im_message_body, + .im_message_document, + .im_message_audio { + background: #497495; + color: #fff; + } + .im_message_body_media { + background: none; + color: inherit; + } +} + +.im_service_message { + font-size: 13px; +} +.audio_player_button { + margin-right: 8px; +} + +.im_message_body_media { + .im_message_document, + .im_message_audio { + padding: 5px; + border-radius: 3px; + background: #f1f1f1; + margin-top: 0; + } + + a.im_message_photo_thumb, + .im_message_video { + margin-top: 0; + } + + .im_message_out & { + .im_message_document, + .im_message_audio { + background: #e4ecf2; + } + } +} + +.im_message { + &_document { + position: relative; + width: auto; + max-width: 250px; + + .icon-document, + &_thumb_wrap { + position: absolute; + } + + .im_message_out & { + .icon-document { + background-color: #e4ecf2; + } + } + + &_thumb_wrap { + background-color: transparent; + position: absolute; + } + + &_info { + float: none; + margin-left: 43px; + width: auto; + min-height: 38px; + + .cancelable_progress_wrap { + margin-top: 4px; + } + } + + &_thumbed &_info { + margin-left: 110px; + min-height: 100px; + } + + &_size { + display: block; + padding-left: 0; + } + + &_thumbed &_name_wrap, + &_name_wrap { + width: auto; + } + + &_progress &_size { + display: inline; + } + + &_progress &_name { + max-width: 50%; + } + + &_progress&_thumbed &_name { + display: inline; + max-width: none; + } + + &_thumbed &_name { + white-space: normal; + } + } + + &_video { + width: auto; + max-width: 250px; + } + + &_contact { + width: 200px; + + &_name, + &_phone { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 150px; + } + } + + &_document_thumbed &_upload_progress_wrap, + &_document_thumbed &_download_progress_wrap { + width: 130px; + } +} + +.img_gif_label, +.img_gif_size, +.im_message_video_duration { + font-size: 13px; +} +a.im_message_video_thumb { + margin-right: 0; +} +img.im_message_video_thumb, +.img_gif_thumb { + -webkit-filter: none; + -moz-filter: none; + -o-filter: none; + -ms-filter: none; + filter: none; +} + +.im_grouped { + .im_message_body { + margin-left: 0; + } +} + +.im_history_panel_wrap { + display: none; + margin: 0 15px; +} +.im_send_panel_wrap { + padding: 10px 0 12px; +} +.im_history_scrollable_wrap.im_history_to_bottom { + overflow: hidden; + position: relative; +} +.im_history { + position: static; +} +.icon-select-tick { + margin: 10px 0 0 -24px +} +.im_message_wrap { + padding: 0 8px; +} + +.im_content_message_wrap { + font-size: 15px; + float: left; + position: relative; + margin: 8px 0 8px; + max-width: 100%; + + &.im_message_out { + padding-left: 80px; + padding-right: 0; + float: right; + } + + &.im_message_in { + padding-left: 0; + padding-right: 60px; + } + + .im_history_messages_group &.im_message_in, + .im_history_messages_group .im_grouped_short &.im_message_in, + .im_history_messages_group .im_grouped &.im_message_in { + padding-left: 45px; + } + + .im_grouped_short &, + .im_grouped & { + margin-top: 0; + } +} + +.im_message_reply { + &_wrap { + margin-top: 2px; + } + + &_author { + font-weight: normal; + font-size: 13px; + } +} + +.im_message_fwd_header { + font-size: 12px; +} + +.im_message_meta { + float: none; + position: absolute; + bottom: 5px; + left: 100%; + white-space: nowrap; + margin-left: -60px; + width: 60px; + padding: 0 0 0 8px; + overflow: hidden; + + .im_message_out & { + width: 80px; + left: 0; + text-align: right; + margin-left: 0; + padding: 0 8px 0 0; + } +} + +.im_message_date { + font-size: 10px; + padding: 0; +} + +.im_message_out { + .im_message_fwd_date { + color: #93a2ae; + } + + .icon-document { + background-color: #dae6f0; + background-position: -2px -542px; + } +} + +.im_message_out .im_message_document_size, +.im_message_out .audio_player_duration, +.im_message_out .audio_player_size, +.im_message_out .im_message_fwd_date, +.im_message_selected .im_message_document_size, +.im_message_selected .audio_player_duration, +.im_message_selected .audio_player_size, +.im_message_selected .im_message_fwd_date, +.im_message_focus .im_message_document_size, +.im_message_focus .audio_player_duration, +.im_message_focus .audio_player_size, +.im_message_focus .im_message_fwd_date, +.im_history_selectable .im_message_outer_wrap:hover .im_message_document_size, +.im_history_selectable .im_message_outer_wrap:hover .audio_player_duration, +.im_history_selectable .im_message_outer_wrap:hover .audio_player_size, +.im_history_selectable .im_message_outer_wrap:hover .im_message_fwd_date { + color: #68839c; +} + +.im_message_from_photo, +.im_message_fwd_photo { + width: 40px; + height: 40px; +} +a.im_message_from_photo { + margin: 0; + display: none; +} + +.im_history_messages_group { + a.im_message_from_photo { + display: block; + position: absolute; + margin-left: -45px; + } +} + +.im_message_author { + display: none; +} + +.im_history_messages_group { + a.im_message_author { + display: inline; + font-size: 13px; + font-weight: normal; + } +} + +.im_grouped_short a.im_message_from_photo, +.im_grouped_short a.im_message_author, +.im_grouped a.im_message_from_photo, +.im_grouped a.im_message_author, +.im_grouped_fwd a.im_message_author, +.im_grouped_fwd a.im_message_from_photo, +.im_grouped_fwd_short a.im_message_author, +.im_grouped_fwd_short a.im_message_from_photo, +.im_message_out a.im_message_author, +.im_message_out a.im_message_from_photo, +.im_message_body_media a.im_message_author { + display: none; +} +.im_message_wrap { + padding: 0 7px; +} + + + + +.im_message_out { + .icon-message-status-tick { + border: 0; + display: inline-block; + width: 10px; + height: 10px; + line-height: 18px; + border-radius: 7px; + position: static; + vertical-align: text-top; + margin-right: 2px; + 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, +.contacts_modal_search_field { + font-size: 1.2em; +} +.im_edit_selected_actions { + text-align: center; +} +.im_edit_delete_btn, +.im_edit_forward_btn { + border-radius: 2px; + font-weight: normal; + line-height: 18px; + background: none !important; + border: 0 !important; + width: 50%; + margin: 0; + font-size: 15px; + padding: 13px 0; +} +.im_edit_forward_btn { + color: #497495 !important; +} +.im_edit_delete_btn { + color: #c3584d !important; +} +.im_edit_delete_btn strong, +.im_edit_forward_btn strong { + font-weight: normal; +} +.im_edit_panel_wrap { + padding: 5px 0; + margin: 0; +} +.im_dialogs_col_wrap { + border: 0; + padding-bottom: 0; +} +.im_dialogs_col_wrap, +.im_history_col_wrap { + float: none; + width: auto; + max-width: auto; + min-width: auto; +} +.im_dialogs_col_wrap, +.im_page_peer_not_selected .im_history_col_wrap { + display: none; +} +.im_page_peer_not_selected .im_dialogs_col_wrap { + display: block; +} + +.im_dialogs_panel { + display: none; + padding-left: 9px; + padding-right: 9px; + + &.im_dialogs_panel_search { + display: block; + } +} + +.im_page_split { + .im_dialogs_search { + margin-right: 0; + } +} + +a.im_dialog { + .im_dialogs_scrollable_wrap & { + border-bottom: 1px solid #eee; + border-top: 1px solid #eee; + margin-top: -1px; + border-radius: 0 !important; + padding-right: 11px; + } + + .im_dialog_wrap:last-child & { + border-bottom: 0; + } +} + +.im_dialog_photo { + width: 54px; + height: 54px; + border-radius: 50%; + overflow: hidden; + + div& { + margin: 0 12px 0 0; + } +} + +.im_dialog_peer, +.im_dialog_message { + font-size: 1.3em; +} +.im_dialog_peer { + margin-bottom: 7px; + margin-top: 5px; +} +.im_dialog_meta { + margin-top: 6px; +} + +.im_dialog_date { + &, + a.im_dialog:hover &, + a.im_dialog_selected & { + color: #b3b3b3; + font-size: 12px; + margin-right: 3px; + } +} + +.im_dialog_unread { + &, + .active &, + a.im_dialog:hover &, + a.im_dialog_selected & { + background: #7cacc7; + } +} + +.im_dialog_message_text { + &, + a.im_dialog:hover &, + a.im_dialog_selected & { + color: #8f8f8f; + } +} + +.im_message_fwd_title { + display: none; + + .im_grouped_fwd_start & { + display: block; + color: #8a8a8a; + font-size: 13px; + font-weight: normal; + margin-bottom: 5px; + } + + .im_history_messages_group .im_message_in & { + margin-top: 5px; + } + + .im_message_out & { + color: #798791; + } +} + +.im_message_selected .im_message_body a, +.im_message_selected .im_message_fwd_title, +.im_message_selected .im_message_fwd_date, +.im_message_selected .im_message_document_name, +.im_message_selected .im_message_document_size, +.im_message_selected .audio_player_title, +.im_message_selected .audio_player_duration, +.im_message_selected .audio_player_size, +.im_history_selectable .im_message_selected:hover .im_message_document_size, +.im_history_selectable .im_message_selected:hover .audio_player_duration, +.im_history_selectable .im_message_selected:hover .audio_player_size, +.im_history_selectable .im_message_selected:hover .im_message_fwd_date { + color: #fff; +} +a.im_message_fwd_author { + color: #323232; +} +.im_dialogs_scrollable_wrap a.im_dialog:hover, +.im_dialogs_scrollable_wrap a.im_dialog_selected, +.im_dialogs_scrollable_wrap .active a.im_dialog, +.im_dialogs_scrollable_wrap .active a.im_dialog:hover, +.im_dialogs_scrollable_wrap .active a.im_dialog_selected { + border-radius: 0; + background-color: #f4f4f4; +} + +.mobile_modal { + &.modal { + background: #fff; + padding: 0; + } + + .modal-content { + border-radius: 0; + box-shadow: none; + + .modal-body { + padding-left: 0; + padding-right: 0; + } + } + + .modal-dialog { + margin: 0 auto; + } + + .modal-footer { + padding-left: 0; + padding-right: 0; + padding-bottom: 9px; + } + + &_body, + .modal-content .mobile_modal_body { + padding: 9px; + } +} + +.mobile { + &_user_modal_photo_profile_wrap { + padding: 3px; + margin-bottom: 15px; + } + + &_user_modal_image_wrap { + display: block; + width: 64px; + height: 64px; + margin-right: 14px; + } + + &_chat_modal_image { + margin-right: 14px; + float: left; + } + + &_user_modal_image { + width: 64px; + height: 64px; + overflow: hidden; + border-radius: 32px; + } + + &_user_modal_info_wrap { + padding-top: 2px; + } + + &_user_modal_header { + font-size: 16px; + font-weight: bold; + margin-bottom: 7px; + margin-top: 11px + } + + &_user_modal_status { + font-size: 14px; + color: #999; + } + + &_modal_action_wrap { + border-bottom: 1px solid #e0e0e0; + } + + &_modal_select_wrap { + margin: 7px 12px 0; + } + + a&_modal_action, + span&_modal_action { + color: #000; + display: block; + line-height: 47px; + font-size: 15px; + padding: 0 12px; + margin: 0; + } + + span&_modal_upload_action { + position: relative; + overflow: hidden; + } + + a&_modal_action:hover, + a&_modal_action:active { + text-decoration: none; + } + + a&_modal_action .icon-checkbox-outer { + float: right; + margin-top: 16px; + margin-right: 1px; + } + + a&_modal_action .tg_checkbox_label { + vertical-align: baseline; + line-height: inherit; + } + + &_modal_section { + display: block; + border-bottom: 1px solid #e0e0e0; + padding: 15px 0; + } + + &_modal_section:last-child { + border-bottom: 0; + } + + &_modal_section_header { + font-size: 12px; + margin-bottom: 3px; + margin-top: 0; + color: #999; + padding: 0 12px; + } + + &_modal_section_value { + font-size: 15px; + padding: 0 12px; + } + + &_modal_section_body { + padding: 0 12px; + } +} + +.user_modal_other_btn { + button { + padding-right: 0; + } + + .dropdown-menu { + left: auto; + right: -9px; + } +} + +.chat_modal { + &_actions_wrap { + clear: both; + } + + &_other_btn { + button { + padding-right: 0; + } + + .dropdown-menu { + left: auto; + right: -9px; + } + } +} + +.modal-content { + .photo_modal_window &, + .video_modal_window & { + border-radius: 0; + } +} + +.media_modal_wrap { + .modal-body { + padding: 0 0 0; + } +} + +.media_modal_actions, +.media_modal_info{ + margin: 10px; +} + +.im_send_form { + position: relative; + left: 0; + right: 0; + max-width: none; +} + +.im_submit { + width: 50px; + min-width: 0; + height: 32px; + padding: 0; + border: 0; + position: absolute; + right: 0; + top: 0; + + &, + &: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); + } +} + +.icon-paperclip { + display: inline-block; + 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); + } +} + +.im_attach { + cursor: pointer; + display: none; + overflow: hidden; + position: absolute; + right: 0; + top: 0; + margin: 0; + width: 50px; + height: 32px; + padding: 3px 13px 4px 16px; + + &:hover, + &:active { + .icon-paperclip { + background-position: -12px -100px; + opacity: 1; + } + } +} + +.im_send_form_empty { + .im_submit { + display: none; + } + + .im_attach { + display: block; + } +} + +.icon-emoji { + display: inline-block; + width: 22px; + height: 22px; + 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); + } +} + +.composer_emoji_insert_btn { + position: absolute; + left: 0; + top: 0; + margin: 0; + padding: 3px 13px 4px 13px; + width: 48px; + height: 32px; + + &.on, + &:active, + .is_1x &.on, + .is_1x &:active { + .icon-emoji { + background-position: -10px -803px; + } + } +} + +.im_send_field_wrap { + margin-right: 50px; + margin-left: 48px; + + .form-control { + border-radius: 4px; + } +} + +.composer_rich_textarea { + min-height: 18px; + max-height: 136px; + margin-bottom: 0; + font-size: 15px; + + &:empty { + background: #f1f1f1; + border-color: #f1f1f1; + + &:before { + color: #999; + } + } + + &:active, + &:focus { + box-shadow: none; + outline: 0; + background: #fff; + border-color: #d9dbde; + content: none; + } +} + +.composer_emoji_tooltip { + margin-left: 6px; + margin-top: -170px; + width: 262px; + z-index: 10000; + padding: 5px 2px 5px 5px; + + + & &_content_wrap { + height: 106px; + } + + &_tabs { + margin-bottom: 3px; + } + + & &_content { + .composer_emoji_btn { + padding: 5px; + margin: -1px 0 0 -1px; + } + } + + &_tab { + margin: 0 5px; + } +} + +.icon-tooltip-tail { + display: none; +} + +.composer_sticker { + &_btn { + width: 80px; + height: 80px; + padding: 3px; + } + &_image { + max-width: 64px; + max-height: 64px; + } +} + +.contacts_modal { + &_search { + padding: 3px 0 12px; + } + + &_col { + margin: 0 -9px; + } + + &_members_list { + a.contacts_modal_contact { + padding: 8px 9px; + border-radius: 0; + border-bottom: 1px solid #eee; + + &:hover { + background: inherit; + } + } + + li.contacts_modal_contact_wrap { + margin: 0; + } + + li:last-child a { + border-bottom: 0; + } + } +} + +.mobile_modal { + .peer_select_modal_wrap { + .modal-body { + padding: 0; + } + } +} + +.settings_about_section_body { + padding-right: 0; +} + +.countries_modal { + &_search { + padding: 3px 3px 12px; + margin: 0; + position: relative; + } + + &_col { + margin: 0 -9px; + } + + &_members_list { + padding: 0 12px 0 12px; + } + + .countries_scrollable_wrap a&_country { + padding: 8px 8px; + } +} + +.import_modal_phonebook_wrap { + margin-top: 40px; + text-align: center; +} + +.media_modal_bottom { + &_panel_wrap { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 46px; + background: rgba(0,0,0,0.6); + z-index: 1030; + } + + &_panel { + color: #fff; + } +} + +.media_modal_top { + &_panel_wrap { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 46px; + background: rgba(0,0,0,0.6); + z-index: 1030; + } + + &_panel { + color: #fff; + } + + &_actions { + .navbar-quick-media-back { + color: inherit; + position: relative; + display: block; + padding-left: 16px; + padding: 6px 10px 2px 28px; + font-size: 13px; + height: 46px; + + &:hover { + text-decoration: none; + } + + .icon-back { + position: absolute; + margin-left: -18px; + margin-top: 8px; + } + } + } +} + +h4.media_modal_title_wrap { + color: inherit; + margin: 8px 0 11px 0; +} +.media_modal_info_wrap { + line-height: 16px; + padding: 7px 20px; + text-align: center; + max-width: 150px; + margin: 0 auto; +} +.media_modal_author { + display: inline-block; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 150px; + font-size: 14px; +} +.media_modal_date, +a.media_modal_date:hover { + font-size: 12px; + color: #999; +} +.photo_modal_window, +.video_modal_window, +.document_modal_window { + padding: 0; + background: #000; +} + +.photo_modal_window, +.video_modal_window, +.document_modal_window { + .modal-content { + background: none; + box-shadow: none; + } +} + +.video_modal_window .modal-body { + padding: 0; +} + +.media_modal_action_btn { + float: left; + display: block; + width: 46px; + height: 46px; + + .tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-right > a&, + .tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-left > a& { + padding: 0; + } + + i { + background: url(../img/icons/PhotoIcons.png) 0 0 no-repeat; + background-size: 40px 200px; + display: block; + opacity: 0.8; + } + + &:active { + i { + opacity: 1; + } + } + + .is_1x & { + i { + background-image: url(../img/icons/PhotoIcons_1x.png); + } + } + + & i&_download { + background-position: -12px -163px; + width: 16px; + height: 20px; + margin: 14px 15px; + } + + & i&_forward { + background-position: -9px -109px; + width: 23px; + height: 15px; + margin: 14px 13px; + } + + & i&_delete { + background-position: -13px -135px; + width: 14px; + height: 18px; + margin: 13px 17px; + } +} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index bc1ae8dd..0b7073a4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -7,6 +7,8 @@ var path = require('path'); var http = require('http'); var livereload = require('gulp-livereload'); var st = require('st'); +var less = require('gulp-less'); +var runSequence = require('run-sequence'); // The generated file is being created at src // so it can be fetched by usemin. @@ -37,6 +39,14 @@ gulp.task('imagemin', function() { .pipe(gulp.dest('dist/img')); }); +gulp.task('less', function () { + gulp.src('app/less/*.less') + .pipe(less({ + paths: [path.join(__dirname, 'less', 'includes')] + })) + .pipe(gulp.dest('app/css')); +}); + gulp.task('copy-images', function() { return gulp.src(['app/img/**/*', '!app/img/screenshot*', '!app/img/*.wav']) .pipe(gulp.dest('dist/img')); @@ -115,7 +125,6 @@ gulp.task('update-version-comments', function() { .pipe(gulp.dest('app')); }); - gulp.task('enable-production', function() { return es.concat( gulp.src('app/**/*.html') @@ -143,7 +152,6 @@ gulp.task('disable-production', function() { }); gulp.task('add-appcache-manifest', function() { - var sources = [ './dist/**/*', '!dist/manifest.*', @@ -221,6 +229,7 @@ gulp.task('watchhtml', function() { gulp.task('watch', ['server'], function() { livereload.listen({ basePath: 'app' }); gulp.watch('app/css/*.css', ['watchcss']); + gulp.watch('app/less/*.less', ['less']); gulp.watch('app/partials/**/*.html', ['watchhtml']); }); @@ -230,18 +239,22 @@ gulp.task('server', function(done) { ).listen(8000, done); }); - gulp.task('clean', function() { - return gulp.src(['dist/*', 'app/js/templates.js', '!dist/.git']).pipe($.clean()); + return gulp.src(['dist/*', 'app/js/templates.js', 'app/css/*', '!dist/.git']).pipe($.clean()); }); gulp.task('bump', ['update-version-manifests', 'update-version-config'], function () { gulp.start('update-version-comments'); }); -gulp.task('build', ['usemin', 'copy', 'copy-locales', 'copy-images'], function () { - gulp.start('disable-production'); +gulp.task('build', function(callback) { + runSequence('less', 'usemin', + ['copy', 'copy-locales', 'copy-images'], function() { + gulp.start('disable-production'); + } + ); }); + gulp.task('package', ['cleanup-dist']); gulp.task('publish', ['build'], function() { diff --git a/package.json b/package.json index cf9d048e..2819e80e 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "gulp-concat": "^2.1.7", "gulp-grep-stream": "0.0.2", "gulp-imagemin": "^0.1.5", + "gulp-less": "^3.0.0", "gulp-livereload": "^3.0.2", "gulp-load-plugins": "^0.4.0", "gulp-manifest": "0.0.3", @@ -60,6 +61,7 @@ "gulp-usemin": "^0.3.11", "gulp-zip": "^0.1.2", "http": "0.0.0", + "run-sequence": "^1.0.2", "st": "^0.5.2" } } From 375e3fcb25e078a1df8afad44a9dec5d58717c37 Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Mon, 23 Mar 2015 00:40:15 +0300 Subject: [PATCH 2/2] Minor fixes --- gulpfile.js | 2 +- webogram.sublime-project | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 0b7073a4..385f6afe 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -226,7 +226,7 @@ gulp.task('watchhtml', function() { .pipe(livereload()); }); -gulp.task('watch', ['server'], function() { +gulp.task('watch', ['server', 'less'], function() { livereload.listen({ basePath: 'app' }); gulp.watch('app/css/*.css', ['watchcss']); gulp.watch('app/less/*.less', ['less']); diff --git a/webogram.sublime-project b/webogram.sublime-project index 2fe5e951..de78285e 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"], + "folder_exclude_patterns": ["*dist", "node_modules", "releases", ".tx", "css"], "file_exclude_patterns": ["*.zip", "templates.js"] } ]