@charset "UTF-8"; $chatBg: #34363c; $chatContBg: #eeeeee; $chatUiFont: #ffffff; $offsetBottom: 5px; $offsetRight: 5px; @keyframes tipFade{ 0%{ opacity: 1; transform: scale(1); } 100%{ opacity: 0.4; transform: scale(1.1); } } .mini-wrap{ z-index: 123456789; height: 100%; .back-bar{ display: none; } } .mini-body{ height: 100%; box-sizing: border-box; padding: 0 2px 2px; background: rgba($color: $chatBg, $alpha: 0.9); } .box{ position: relative; height: 100%; display: flex; flex-direction: column; } .box-hd{ height: 36px; position: relative; padding: 0 110px 0 25px; .btn-menu{ position: absolute; cursor: pointer; left: 0; top: 0; width: 25px; height: 36px; background: url("./img/icon-menu.png") center no-repeat; &.active{ &::before{ display: block; } } &::before{ content: ""; position: absolute; top: 2px; right: 0; width: 6px; height: 6px; border-radius: 50%; background: #ff0000; display: none; } } .btn-close{ position: absolute; cursor: pointer; right: 0; top: -2px; width: 36px; height: 36px; background: url("./img/icon-close.png") center 16px no-repeat; &:hover{ background-color: #2a2b30; } } .menu-extra{ position: absolute; top: 36px; z-index: 10; left: 4px; background: #ffffff; border-radius: 2px; box-shadow: 0px 1px 5px 1px #cdcdcd; .info { padding: 8px 0; margin: 0 10px; .avatar { float: left; width: 36px; height: 36px; margin-right: 6px; margin-top: 6px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); } .avatar-bg{ background-color: #f5882b; text-align: center; line-height: 32px; color: #ffffff; font-size: 14px; } .account-info{ float: left; margin-top: 5px; line-height: 18px; } em { font-size: 12px; color: #000000; } } .icon-arrow{ display: inline-block; vertical-align: middle; margin-left: 10px; background: url('../chatMini/img/icon-arrow.png') no-repeat; width: 8px; height: 12px; } .login-out{ display: block; line-height: 1.5; color: #7194c3; font-size: 12px; cursor: pointer; } li{ line-height: 30px; font-size: 12px; padding: 0 10px; display: block; &:hover{ background: #dcdddf; } em{ display: inline-block; background: #ff0000; color: #fff; font-size: 12px; padding: 2px 5px; border-radius: 12px; z-index: 99; line-height: 1; margin-left: 4px; } } a{ color: #333333; display: block; text-decoration: none; border-top: 1px solid #eeeeee; span{ color: #7194c3; text-decoration:underline; } } } .box-title{ font-size: 14px; line-height: 36px; color: $chatUiFont; cursor:pointer; @include ellipsis(); } .user-tips{ position: absolute; top: 0px; right: 38px; max-width: 50px; height: 36px; line-height: 36px; font-size: 0; text-align: right; cursor: pointer; padding-left: 20px; background: url(./img/icon-service.png) 0 center / 13px auto no-repeat; text-decoration: none; &.active{ &:before{ display: block; } } &:before{ position: absolute; top: -6px; right: -17px; z-index: 2; width: 14px; height: 12px; background: url(./img/icon-msg-tip.png) 0 center/100% no-repeat; animation:tipFade .2s infinite alternate; display: none; } em{ vertical-align: middle; color: $chatUiFont; font-size: 12px; } } } .box-bd{ height: 0; flex: 1; position: relative; background: $chatContBg; .msg-unread{ position: absolute; width: 120px; left: 50%; bottom: 10px; border-radius: 20px; background: rgba(#000000, 0.5); padding: 0 5px; text-align: center; line-height: 32px; margin-left: -65px; cursor: pointer; &:hover{ background: rgba(#000000, 0.3); } em{ color: #ffffff; font-size: 14px; } i{ transform: rotate(90deg); margin-right: 5px; } } } .box-ft{ position: relative; background: $chatContBg; border-top: 1px solid #d6d6d6; .btn-join{ color: #438aff; font-size: 16px; text-align: center; padding: px2rem(30) 0; background: #FFF; } .input-con{ position: relative; display: flex; align-items: flex-end; background-color: #fafafa; padding: 6px 0; } .input-wrap{ flex: 1; padding: 10px 0; background-color: #ffffff; border-radius: 4px; } .more-icon{ width: 38px; height: 38px; background: url('../../assets/more-icon.png') center center no-repeat; background-size: 22px 22px; cursor: pointer; &:hover{ opacity: .6; } } .emoji-icon{ width: 38px; height: 38px; background: url('../../assets/m-face-icon.png') center center no-repeat; background-size: 22px 22px; cursor: pointer; &:hover{ opacity: .6; } } .btn-send{ margin-right: 4px; font-size: 12px; color: #ffffff; padding: 0 10px; height: 28px; line-height: 28px; margin-bottom: 3px; background: #2b9ff6; border-radius: 3px; cursor: pointer; &:hover{ opacity: 0.8; } } form{ @include flex(1); } textarea { display: block; width: 100%; height: 18px; max-height: 175px; font-size: 14px; color: #000000; line-height: 16px; padding: 1px; padding-left: 8px; margin: 0; border: none; outline: none; background: none; box-sizing: border-box; resize: none; } .input-ctrl{ span{ width: 120px; margin: 4px auto; height: 30px; line-height: 30px; color: #ffffff; font-size: 12px; text-align: center; display: block; background-image: -webkit-linear-gradient( 90deg, rgb(25,145,235) 0%, rgb(46,161,248) 100%); border-radius: 3px; &.enable{ cursor: pointer; &:hover{ opacity: 0.7; } } } } } .scroller{ height: 100%; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { width: 8px; height: 6px; } &::-webkit-scrollbar-thumb { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: rgba($color: #8d8a8a, $alpha: 0.2); } &::-webkit-scrollbar-track { background-color: transparent; } } .mini-control{ position: fixed; right: $offsetBottom; bottom: $offsetRight; user-select: none; .at-tip{ position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; background: #e0273a; border-radius: 50%; overflow: hidden; font-size: 12px; line-height: 18px; color: #fff; text-align: center; } ul{ @include webkitbox(1); background: $chatBg; opacity: .9; border-radius: 4px; overflow: hidden; } li{ width: 60px; height: 40px; line-height: 40px; text-align: center; font-size: 0; cursor: pointer; &:hover{ background: #42454c; } em{ font-size: 12px; color: $chatUiFont; vertical-align: middle; padding-left: 4px; } } .msg-tips{ &:before{ content: ""; background: url("./img/icon-meechat.png") center center no-repeat; background-size: 100%; width: 22px; height: 20px; display: inline-block; vertical-align: middle; } } } .user-tips{ &:before{ content: ""; background: url("./img/icon-user.png") no-repeat; background-size: 100%; width: 8px; height: 9px; display: inline-block; vertical-align: middle; margin-right: 4px; } } .meechat-icon { background: rgba(52,54,60,0.9); border-radius: 4px; padding: 10px 14px; cursor: pointer; &:hover{ opacity: .8; } em{ color: #ffffff; font-size: 12px; margin-left: 8px; } .icon-logo{ display: inline-block; vertical-align: middle; width: 22px; height: 20px; background: url('./img/icon-meechat.png') center/100% no-repeat; } } .msg-wrap{ margin-bottom: 16px; } .msg-top-more{ margin-top: 10px; text-align: center; i{ font-size: 30px; } em{ font-size: 12px; line-height: 20px; color: #999999; } } .msg-loading-icon{ display: block; background: url('../../assets/loading-icon.png') no-repeat; background-size: 100%; width: 16px; height: 16px; margin: 12px auto; animation: rotate 2s linear infinite; }