Server IP : 80.87.202.40 / Your IP : 216.73.216.169 Web Server : Apache System : Linux rospirotorg.ru 5.14.0-539.el9.x86_64 #1 SMP PREEMPT_DYNAMIC Thu Dec 5 22:26:13 UTC 2024 x86_64 User : bitrix ( 600) PHP Version : 8.2.27 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/bitrix/ext_www/cvetdv.ru/bitrix/js/im/component/dialog/dist/ |
Upload File : |
/* GENERAL */ .bx-mobilechat-wrapper { display: block; width: 100%; height: 100%; overflow: hidden; } .bx-mobilechat-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; height: 100%; overflow: hidden; -webkit-overflow-scrolling: touch; } .bx-mobilechat-body { position: relative; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 1; flex-shrink: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; -webkit-overflow-scrolling: touch; } .bx-mobilechat-body { -webkit-box-sizing: border-box; box-sizing: border-box; } .bx-im-quote-panel, .bx-mobilechat-dialog { -webkit-box-sizing: border-box; box-sizing: border-box; } .bx-mobilechat-body .bx-im-dialog { position: relative; } .bx-mobilechat-help-container { margin: 0 auto; } .bx-mobilechat-help-container .bx-mobilechat-help-title-sm { display: none; } .bx-mobilechat-help-title { display: block; margin: 0 0 29px 0; font: 26px var(--ui-font-family-secondary, var(--ui-font-family-open-sans)); font-weight: var(--ui-font-weight-regular, 400); color: #333; text-align: center; opacity: .6; width: 100%; } .bx-mobilechat-box-dark-background .bx-mobilechat-help-title { color: #949494; } .bx-mobilechat-help-title-lg { font: 26px var(--ui-font-family-secondary, var(--ui-font-family-open-sans)); font-weight: var(--ui-font-weight-regular, 400); letter-spacing: -.27px; } .bx-mobilechat-help-title-md { font: 24px var(--ui-font-family-secondary, var(--ui-font-family-open-sans)); font-weight: var(--ui-font-weight-regular, 400); letter-spacing: -.25px; } .bx-mobilechat-help-title-sm { font: 20px/27px var(--ui-font-family-secondary, var(--ui-font-family-open-sans)); font-weight: var(--ui-font-weight-regular, 400); letter-spacing: -.21px; } .bx-mobilechat-help-subtitle { font: 14px var(--ui-font-family-secondary, var(--ui-font-family-open-sans)); font-weight: var(--ui-font-weight-regular, 400); } .bx-mobilechat-chat-start .bx-mobilechat-body { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; overflow: hidden; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bx-mobilechat-chat-start .bx-mobilechat-body-with-message { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .bx-mobilechat-dialog { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; overflow: hidden; -webkit-animation: bx-mobilechat-dialog-opacity .2s ease-in-out; animation: bx-mobilechat-dialog-opacity .2s ease-in-out; } /* END OF CHAT */ /* END OF BODY */ /* MEDIAQUERIES */ .bx-mobilechat-mobile.bx-mobilechat-wrapper { position: fixed; left: 0; bottom: 0; width: 100%; height: 100%; } /* END OF MEDIAQUERIES */ /* LOADER */ .bx-mobilechat-loading-window { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; } .bx-mobilechat-loading-circular { margin: 0 0 53px 0; height: 80px; width: 80px; -webkit-animation: bx-mobilechat-loading-rotate 2s linear infinite; animation: bx-mobilechat-loading-rotate 2s linear infinite; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; } .bx-mobilechat-loading-inner-path { stroke: rgba(215,220,223,.17); stroke-width: 1.5; stroke-dasharray: 200, 200; stroke-dashoffset: 0; stroke-linecap: round; } .bx-mobilechat-loading-path { stroke: rgba(215,220,223,.74); stroke-width: 1.5; stroke-dasharray: 20, 200; stroke-dashoffset: 0; -webkit-animation: bx-mobilechat-loading-dash 1.5s ease-in-out infinite; animation: bx-mobilechat-loading-dash 1.5s ease-in-out infinite; stroke-linecap: round; } .bx-mobilechat-loading-msg { margin: 0; } .bx-mobilechat-placeholder-wrap { height: 100%; min-height: 100%; width: 100%; min-width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } .bx-mobilechat-placeholder-wrap-visible { position: absolute; bottom: 0; width: 100%; } .bx-mobilechat-placeholder-self { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin-right: 15px; } .bx-mobilechat-placeholder-opponent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin-left: 65px; } .bx-mobilechat-placeholder-content { height: 51px; width: 100px; margin: 10px 0 5px; background: #ced0d6; border-radius: 12px; } /* END OF LOADER */ /* WARNING */ .bx-mobilechat-warning-window { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; max-width: 290px; } .bx-mobilechat-warning-icon { display: block; margin: 0 0 26px 0; width: 53px; height: 48px; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2255%22%20height%3D%2248%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%28.805%20.74%29%22%3E%3Cpath%20stroke%3D%22%23A8ADB4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.7%22%20d%3D%22M26.688.27L52.64%2045.685H.737z%22/%3E%3Cpath%20fill%3D%22%23A8ADB4%22%20d%3D%22M25.546%2015.714h2.283v16.625h-2.283z%22/%3E%3Ccircle%20cx%3D%2226.688%22%20cy%3D%2236.771%22%20r%3D%221.478%22%20fill%3D%22%23A8ADB4%22/%3E%3C/g%3E%3C/svg%3E'); background-repeat: no-repeat; } .bx-mobilechat-warning-msg { opacity: .9; } .bx-mobilechat-warning-msg > a { color: #000; } /* END OF WARNING */ @-webkit-keyframes bx-mobilechat-loading-rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes bx-mobilechat-loading-rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes bx-mobilechat-loading-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @keyframes bx-mobilechat-loading-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @-webkit-keyframes bx-mobilechat-dialog-opacity { from { opacity: 0; } to { opacity: 1; } } @keyframes bx-mobilechat-dialog-opacity { from { opacity: 0; } to { opacity: 1; } } /* quotePanel */ .bx-im-quote-panel { border-top: 1px solid rgba(31,170,241,.26); background: #fff; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .bx-im-quote-panel-wrap { position: relative; } .bx-im-quote-panel-box { font: 14px/19px var(--ui-font-family-primary, var(--ui-font-family-helvetica)); color: #333; position: relative; border-left: 2px solid #333; margin: 8px 16px; padding-left: 10px; } .bx-im-quote-panel-box > div { -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; height: 20px; overflow: hidden; } .bx-im-quote-panel-box-title { font-weight: var(--ui-font-weight-bold); margin-right: 16px; } .bx-im-quote-panel-close { position: absolute; top: 4px; right: 4px; display: inline-block; width: 30px; height: 30px; background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%23525C69%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.722%204.747L10.108.36a.69.69%200%200%201%20.975.974L6.697%205.722l4.386%204.386a.69.69%200%200%201-.975.975L5.722%206.696l-4.386%204.387a.69.69%200%201%201-.975-.975l4.386-4.386L.361%201.335a.69.69%200%201%201%20.975-.974l4.386%204.386z%22/%3E%3C/svg%3E') center no-repeat; -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; opacity: .2; -webkit-appearance: none; outline: none; cursor: pointer; z-index: 10; } .bx-im-quote-panel-close:hover { opacity: .8; } .bx-im-quote-panel-animation-show { -webkit-animation: bx-im-quote-panel-animation-show .2s ease-out forwards; animation: bx-im-quote-panel-animation-show .2s ease-out forwards; } .bx-im-quote-panel-animation-close { -webkit-animation: bx-im-quote-panel-animation-close .2s linear forwards; animation: bx-im-quote-panel-animation-close .2s linear forwards; } @-webkit-keyframes bx-im-quote-panel-animation-show { 0% { height: 0; } 100% { height: 57px; } } @keyframes bx-im-quote-panel-animation-show { 0% { height: 0; } 100% { height: 57px; } } @-webkit-keyframes bx-im-quote-panel-animation-close { 0% { height: 57px; } 100% { height: 0; } } @keyframes bx-im-quote-panel-animation-close { 0% { height: 57px; } 100% { height: 0; } } .bx-im-dialog { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; overflow: hidden; } .bx-im-dialog-ajax { -webkit-text-decoration: dotted; text-decoration: dotted; } .bx-im-dialog-list { -webkit-overflow-scrolling: touch; overflow-y: auto; width: 100%; } .bx-im-dialog-list-scroll-blocked { overflow: hidden; } .bx-im-dialog-list-box { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto; padding: 10px 0; } .bx-im-dialog-scroll-button-box { position: absolute; right: 0; bottom: 0; width: 55px; height: 55px; z-index: 100; -webkit-tap-highlight-color: transparent; outline: none; } .bx-im-dialog-scroll-button { background: #fff; border: 1px solid #ececec; -webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2); border-radius: 50%; width: 34px; height: 34px; margin-top: 10px; margin-left: 7px; cursor: pointer; -webkit-transition: background-color .2s; -o-transition: background-color .2s; transition: background-color .2s; text-align: center; } .bx-im-dialog-scroll-button:hover { background-color: #f9f9f9; } .bx-im-dialog-scroll-button-arrow { display: inline-block; width: 7px; height: 7px; border-top: 3px solid #bbb8b8; border-right: 3px solid #bbb8b8; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); margin-top: 11px; cursor: pointer; -webkit-box-sizing: content-box; box-sizing: content-box; } .bx-im-dialog-scroll-button-counter { width: 100%; text-align: center; margin-top:-7px; position: absolute; } .bx-im-dialog-scroll-button-counter-digit { display: inline-block; font: 11px/16px var(--ui-font-family-primary, var(--ui-font-family-helvetica)); color: #fff; padding: 0 5px 0 5px; border: 2px solid #fff; border-radius: 10px; background-color: #17b0e1; } .bx-im-dialog-scroll-button-enter-active, .bx-im-dialog-scroll-button-leave-active { -webkit-transition: bottom .2s ease-out; -o-transition: bottom .2s ease-out; transition: bottom .2s ease-out; } .bx-im-dialog-scroll-button-enter, .bx-im-dialog-scroll-button-leave-to { bottom: -60px; } .bx-im-dialog-message-animation-enter-active, .bx-im-dialog-message-animation-leave-active { -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .bx-im-dialog-message-animation-enter, .bx-im-dialog-message-animation-leave-to { opacity: 0; } .bx-im-dialog-list-item {} .bx-im-dialog-group { font: 14px/19px var(--ui-font-family-primary, var(--ui-font-family-helvetica)); -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; text-align: center; position: relative; } .bx-im-dialog-group-date { background-color: rgba(7, 5, 27, 0.62); border: 1px solid rgba(7, 5, 27, 0.1); text-shadow: none; color: #fff!important; display: inline-block; padding: 5px 15px; border-radius: 15px; font-size: 14px; text-decoration: none; margin: 10px 15px; } .bx-im-dialog-group-float.bx-im-dialog-group-date { position: absolute; display: block; margin-top: 32px; z-index: 30; -webkit-transform: translateZ(0); transform: translateZ(0); } .bx-im-dialog-load-more { position: relative; text-align: center; } .bx-im-dialog-load-more + .bx-im-dialog-list-box { padding-top: 0; } .bx-im-dialog-load-more-history { padding-bottom: 0; } .bx-im-dialog-load-more-unread { padding-top: 0; padding-bottom: 13px; } .bx-im-dialog-load-more-text:before { position: absolute; margin-left: -30px; margin-top: 4px; width: 20px; height: 20px; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%2010c0%204.9706%204.0294%209%209%209s9-4.0294%209-9-4.0294-9-9-9c-2.4048%200-4.5893.9432-6.2038%202.4798%22%20stroke%3D%22%23677B8F%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E'); background-repeat: no-repeat; -webkit-animation: bx-im-dialog-load-more .8s linear infinite; animation: bx-im-dialog-load-more .8s linear infinite; content: "" } .bx-im-dialog-load-more-text { display: inline-block; height: 29px; font: 15px/29px var(--ui-font-family-primary, var(--ui-font-family-helvetica)); color: #687B8C; vertical-align: top; padding: 10px 15px; padding-left: 30px; } .bx-im-dialog-dark-background .bx-im-dialog-load-more-text { color: #949494; } @-webkit-keyframes bx-im-dialog-load-more { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } } @keyframes bx-im-dialog-load-more { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } } .bx-im-dialog-status { padding: 0 20px 10px; display: block; font: 14px/19px var(--ui-font-family-primary, var(--ui-font-family-helvetica)); color: #585858; word-wrap: break-word; vertical-align: middle; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; cursor: default; position: relative; } .bx-im-dialog-dark-background .bx-im-dialog-status { color: #bfbfbf; } .bx-im-dialog-status-placeholder { height: 29px; } .bx-im-dialog-status-enter-active, .bx-im-dialog-status-leave-active { -webkit-transition: opacity .1s ease-out; -o-transition: opacity .1s ease-out; transition: opacity .1s ease-out; } .bx-im-dialog-status-leave-active { -webkit-transition: opacity .05s ease-out; -o-transition: opacity .05s ease-out; transition: opacity .05s ease-out; } .bx-im-dialog-status-enter, .bx-im-dialog-status-leave-to { opacity: 0; } .bx-im-dialog-status-writing { width: 20px; height: 11px; display: inline-block; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%228%22%20height%3D%222%22%3E%0A%20%20%3Cg%20fill%3D%22%23717171%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Crect%20width%3D%221.6%22%20height%3D%222%22%20rx%3D%22.8%22/%3E%0A%20%20%20%20%3Crect%20width%3D%221.6%22%20height%3D%222%22%20x%3D%223.2%22%20rx%3D%22.8%22/%3E%0A%20%20%20%20%3Crect%20width%3D%221.6%22%20height%3D%222%22%20x%3D%226.4%22%20rx%3D%22.8%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A'); background-repeat: no-repeat; background-position: bottom left; vertical-align: middle; } .bx-im-dialog-status-writing:before { -webkit-animation: imWriting 1.4s linear infinite; animation: imWriting 1.4s linear infinite; content: ''; height: 16px; position: absolute; width: 19px; margin-left: 10px; margin-top:-1px; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%2210%22%3E%0A%20%20%3Cpath%20fill%3D%22%23717171%22%20fill-rule%3D%22evenodd%22%20d%3D%22M7.8128%204.807L5.1751%202.1694a.041.041%200%200%200-.0578%200L.0328%207.2538c-.0739.0733%200%202.696%200%202.696s2.6222.0734%202.6961%200l5.0845-5.0844a.0416.0416%200%200%200-.0006-.0583zM1.0647%208.9376v-1.047h1.0495V8.94H1.0647v-.0025zm8.8785-6.2584L7.3054.0413a.0421.0421%200%200%200-.0578%200L6.1144%201.1746a.0416.0416%200%200%200%200%20.0577l2.6378%202.6378a.041.041%200%200%200%20.0577%200l1.1338-1.1333a.0427.0427%200%200%200-.0028-.0577h.0023z%22/%3E%0A%3C/svg%3E%0A'); background-repeat: no-repeat; zoom:1; } @-webkit-keyframes imWriting { 0% { margin-left: 1px; margin-top:-0px; } 20% { margin-left: 4px; margin-top:-1px; } 60% { margin-left: 8px; margin-top:-2px; } 65% { margin-left: 8px; margin-top:-2px; } 70% { margin-left: 8px; margin-top:-3px; -webkit-transform:rotate(-20deg); transform:rotate(-20deg); } 90% { margin-left: 8px; margin-top:-5px; -webkit-transform:rotate(-40deg); transform:rotate(-40deg); } 100% { margin-left: 1px; margin-top:-3px; } } @keyframes imWriting { 0% { margin-left: 1px; margin-top:-0px; } 20% { margin-left: 4px; margin-top:-1px; } 60% { margin-left: 8px; margin-top:-2px; } 65% { margin-left: 8px; margin-top:-2px; } 70% { margin-left: 8px; margin-top:-3px; -webkit-transform:rotate(-20deg); transform:rotate(-20deg); } 90% { margin-left: 8px; margin-top:-5px; -webkit-transform:rotate(-40deg); transform:rotate(-40deg); } 100% { margin-left: 1px; margin-top:-3px; } } /* Placeholders */ .bx-im-dialog-placeholder-self { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin-right: 15px; } .bx-im-dialog-placeholder-opponent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin-left: 65px; } .bx-im-dialog-placeholder-content { height: 51px; width: 100px; margin: 10px 0 5px; background: #ced0d6; border-radius: 12px; } /* New placeholders */ .im-skeleton-item { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 18px; } .im-skeleton-item.im-skeleton-item-self { margin-right: 12.5px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .im-skeleton-item.im-skeleton-item-self .im-skeleton-logo { margin-left: 12.5px; } .im-skeleton-item.im-skeleton-item-opponent { margin-left: 12.5px; } .im-skeleton-item.im-skeleton-item-opponent .im-skeleton-logo { margin-right: 12.5px; } .im-skeleton-logo { position: relative; display: block; margin-top: 10px; min-width: 40px; height: 40px; border-radius: 100%; background-color: #9ea6ad; opacity: .31; overflow: hidden; } .im-skeleton-logo:before, .im-skeleton-line:before { content: ''; display: block; position: absolute; left: -100%; top: 0; height: 100%; width: 100%; /*background: linear-gradient(to right, transparent 0%, #ededed 50%, transparent 100%);*/ /*animation: im-skeleton-load 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;*/ } .im-skeleton-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 14px; width: 100%; border: 1px solid #e3e3e3; border-radius: 10px; background: #fff; } .im-skeleton-item--sm .im-skeleton-content { max-width: 40%; } .im-skeleton-item--md .im-skeleton-content { max-width: 60%; } .im-skeleton-item--lg .im-skeleton-content { max-width: 80%; } .im-skeleton-line-row { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 18px; width: 100%; } .im-skeleton-line-row:first-child { margin-top: 0; } .im-skeleton-line { position: relative; display: block; width: 100%; height: 9px; border-radius: 2px; background-color: #9ea6ad; opacity: .2; overflow: hidden; } /*@keyframes im-skeleton-load {*/ /* 0% {*/ /* left: -100%;*/ /* }*/ /* 100% {*/ /* left: 100%;*/ /* }*/ /*}*/ .im-skeleton-like { position: absolute; right: 5px; bottom: -9px; display: block; width: 17px; height: 17px; border: 1px solid rgba(86,90,95,.16); border-radius: 100%; background-color: #fff; }