/* 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_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; height: 42px; overflow: hidden; } .im_message_reply_wrap:hover { text-decoration: none; color: inherit; background: rgba(242, 246, 250, 0.5); } .im_message_reply { border: 0 #77b7e4 solid; border-left-width: 2px; padding-left: 8px; } .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; margin-top: 2px; margin-bottom: 3px; } .im_message_reply_loading { padding: 12px 0; } .im_reply_message_service { color: #999; } .im_message_reply_body { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .im_message_reply_thumbed .im_message_reply_author, .im_message_reply_thumbed .im_message_reply_body { margin-left: 52px; } 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_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: 220px; margin-left: -100px; margin-top: -248px; 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 5px; } .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-bottom: 8px; margin-top: 3px; } .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 3px; } .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: -1px 0 0 -1px; padding: 5px; 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; /*max-width: 100%;*/ border-radius: 2px; padding: 6px 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); } .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: 67px; height: 67px; display: block; display: inline-block; text-align: center; padding: 3px; } .composer_sticker_btn:hover { background: #f2f6fa; } .composer_sticker_image { max-width: 64px; max-height: 64px; } .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; }