lin-view-ui/lib/theme-chalk/live-comment.css

vue components library

@charset "UTF-8";.lin-image{display:inline-block;vertical-align:top}.lin-image-img{display:block;width:100%;height:100%;padding:0;margin:0}.lin-image-error{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;height:100%;font-size:14px;color:#c0c4cc;background:#f5f7fa}.lin-image-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;height:100%;background-color:rgba(0,0,0,.5);transition:all .5s}.lin-image-close{position:absolute;top:15px;right:15px;width:30px;height:30px;border:2px solid #111;border-radius:50%}.lin-image-line{position:absolute;top:0;left:50%;width:2px;height:100%;background-color:#111}.lin-image-line-left{transform:rotate(45deg)}.lin-image-line-right{transform:rotate(-45deg)}.lin-image-animation-enter,.lin-image-animation-leave-to{opacity:0;transform:scale(.3)}.lin-image-animation-enter-to,.lin-image-animation-leave{opacity:1;transform:scale(1)}.lin-image-object-fill{-o-object-fit:fill;object-fit:fill}.lin-image-object-contain{-o-object-fit:contain;object-fit:contain}.lin-image-object-cover{-o-object-fit:cover;object-fit:cover}.lin-image-object-none{-o-object-fit:none;object-fit:none}.lin-image-object-scale-down{-o-object-fit:scale-down;object-fit:scale-down}.lin-live-comment{position:relative;display:flex;flex-direction:column;width:320px;height:500px;background:#101a2a}.lin-live-comment-login-btn{color:#ef7237;cursor:pointer}.lin-live-comment-title{width:100%;height:40px;margin:0;font-size:14px;font-weight:400;line-height:40px;color:#c4d0e3;text-align:center;background:#283a56}.lin-live-comment-content{position:relative;box-sizing:border-box;flex:1;height:0;padding:10px;overflow:auto;background:#101a2a}.lin-live-comment-content::-webkit-scrollbar{width:4px;height:4px}.lin-live-comment-content::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:5px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2)}.lin-live-comment-content::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:0;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2)}.lin-live-comment-input{position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:center;height:72px;background:#223452}.lin-live-comment-textarea{box-sizing:border-box;width:238px;height:52px;padding:5px;margin:0;color:#767891;resize:none;background:#192436;border:none;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.lin-live-comment-textarea::-webkit-scrollbar{width:4px;height:4px}.lin-live-comment-textarea::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:5px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2)}.lin-live-comment-textarea::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:0;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2)}.lin-live-comment-send-btn{width:62px;height:52px;font-size:14px;font-weight:400;line-height:52px;color:#fff;text-align:center;cursor:pointer;background:#3b5785}.lin-live-comment-mask{position:absolute;top:10px;left:15px;box-sizing:border-box;width:238px;height:52px;padding:5px}.lin-live-comment-mask-default{font-size:14px;color:#767891}.lin-live-comment-item{display:flex;flex-direction:row}.lin-live-comment-item>.lin-live-comment-user-avator{width:26px;height:26px;border-radius:50%}.lin-live-comment-info-box{box-sizing:border-box;width:264px;padding-left:10px}.lin-live-comment-user-name{display:flex;flex-direction:row;margin-bottom:5px;line-height:26px}.lin-live-comment-user-name>span:nth-child(1){max-width:127px;margin-right:5px;font-size:14px;font-weight:400;color:#b8c6d8;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.lin-live-comment-user-name>span:nth-child(2){flex:1;width:0;font-size:12px;font-weight:400;color:#788aa1;text-align:right}.lin-live-comment-view-count{box-sizing:border-box;padding:0 10px;margin:0;font-size:12px;font-weight:400;line-height:30px;color:#788aa1;text-align:right}.lin-live-comment-info{box-sizing:border-box;width:254px;padding:5px;font-size:12px;font-weight:400;line-height:20px;color:#b8c6d8;word-break:normal;word-wrap:break-word;background:#2e3e55;border-radius:2px}.lin-live-comment-fix{position:absolute;bottom:71px;left:0;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;width:100%;height:32px;padding:0 7px;font-size:12px;font-weight:400;color:#faf7eb;background:#665c47}.lin-live-comment-fix>span:nth-child(1){width:50px;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.lin-live-comment-fix>span:nth-child(2){width:216px;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.lin-live-comment-fix>span:nth-child(3){display:flex;flex-direction:row;align-items:center;cursor:pointer}