@uimkit/uikit-react
Version:
<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>
1 lines • 21.9 kB
CSS
.uim-kit-icon{align-items:center;cursor:pointer;display:flex;position:relative;text-align:center}.uim-kit-icon .icon-image{height:100%;width:100%}.uim-kit-icon:hover{border-color:currentColor;color:#4169e1}.uim-kit-icon:after{border-radius:inherit;box-shadow:0 0 0 6px #4169e1;content:"";inset:0;opacity:0;position:absolute;transition:.3s}.uim-kit-icon:active:after{box-shadow:none;opacity:.4;transition:0s}.uim-kit-avatar{align-items:center;cursor:pointer;display:flex;position:relative}.uim-kit-avatar.circle .avatar-image{border-radius:50%}.uim-kit-avatar.square .avatar-image{border-radius:4px}.uim-kit-avatar img{height:100%;width:100%}.uim-kit-avatar:hover .uim-kit-avatar-edit{display:flex}.uim-kit-avatar-edit{align-items:center;background:rgba(0,0,0,.33);border-radius:100%;display:none;height:100%;left:0;top:0}.uim-kit-avatar-edit,.uim-kit-avatar-list{justify-content:center;position:absolute;width:100%}.uim-kit-avatar-list{background:#fff;border-radius:5px;box-shadow:0 11px 20px 0 rgba(0,0,0,.3);display:flex;flex-wrap:wrap;max-width:400px;min-width:200px;padding:10px;top:100%;z-index:2}.uim-kit-avatar-list-item{padding:10px}.uim-kit-avatar-list-item img{width:40px}.popup{opacity:0}.popup-show{opacity:1}.plugin{align-items:center;display:flex;gap:12px;height:100%;padding:8px}.plugin-item{cursor:pointer}.plugin-popup{align-items:center;display:flex;height:100%;position:relative}.plugin-popup-box{background:#fff;border-radius:8px;bottom:100%;box-shadow:0 0 10px rgba(0,0,0,.1);position:absolute;z-index:2}.uim-chat-header{flex-direction:row;justify-content:space-between;padding:16px 20px}.uim-chat-header,.uim-chat-header-left{align-items:center;display:flex}.uim-chat-header .header-content{flex:1;padding:0 8px}.uim-chat-header-right .header-handle-more{padding:10px 3px}.uim-chat-header .title{font-family:PingFangSC-Medium;font-size:14px;font-style:normal;font-weight:700;line-height:17px}.uim-chat-header .system{height:32px}.uim__emoji-item{margin-top:8px}.str-chat__suggestion-list-container{bottom:var(--str-chat__spacing-7);padding:var(--str-chat__spacing-2) 0;position:absolute;width:100%}.str-chat__suggestion-list-container .str-chat__suggestion-list{display:flex;flex-direction:column;list-style:none;margin:unset;max-height:calc(var(--str-chat__spacing-px)*320);padding:unset}.rta__list .rta__list-header{background:var(--dark-grey);border:1px solid var(--white5);box-shadow:0 2px 1px 0 var(--black5);color:var(--white)}.uim-message-input{display:flex;flex-direction:column}.uim-message-input-main{align-items:center;display:flex;flex:1;gap:12px;padding:8px}.uim-message-input-main .input-box{border-radius:0;display:flex;flex:1;max-height:400px;min-height:120px;overflow:hidden;padding:10px;position:relative}.uim-message-input-main .input-box textarea{background:none;border:none;flex:1;font-family:PingFangSC;font-size:14px;font-style:normal;height:auto;line-height:17px;margin:0;resize:none;width:-webkit-fill-available}.uim-message-input-main .input-box textarea:active,.uim-message-input-main .input-box textarea:focus{border:none;outline:none}.uim-message-input-main .disabled{display:none}.uim-message-input-box{display:flex;flex:1;max-height:400px;min-height:120px}.input-plugin-popup{position:relative}.input-plugin-popup-box{bottom:30px;position:absolute;z-index:2}.input-plugin-item{display:flex;font-family:PingFangSC-Medium;font-size:16px;font-style:normal;font-weight:500;line-height:19px}.input-plugin-item span{padding:0 17px}.emoji-picker .face-list{display:flex;flex-wrap:wrap;max-height:120px;min-width:265px;overflow-y:auto;padding:10px 5px}.emoji-picker .face-list-item{cursor:pointer;padding:5px}.emoji-picker .face-list-item img{width:20px}.emoji-picker .face-list-item .face-img{width:38px}.emoji-picker .face-tab{align-items:center;display:flex;min-width:265px}.emoji-picker .face-tab-item{cursor:pointer;padding:10px;width:24px}.emoji-picker .face-tab-item img{width:100%}.emoji-picker .emoji-plugin-right{right:0}.upload-picker{position:relative}.upload-picker:hover{background:rgba(0,110,255,.1);color:#147aff}.upload-picker input{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.input-quote{align-items:center;background:#f9f9f9;display:flex;padding:7px 16px}.input-quote-content{background:#fff;color:#000;display:flex;flex:1;flex-direction:column;font-family:PingFangSC-Medium;font-size:14px;font-weight:500;line-height:17px;padding:2px 14px;position:relative}.input-quote-content:before{background:#999;content:"";height:100%;left:0;position:absolute;top:0;width:6px}.input-quote-content span{opacity:.6;padding-top:8px}.input-quote .icon{margin:0 5px 0 16px}.uim-forward{background:#fff;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;width:300px}.uim-forward-header{align-items:center;display:flex;padding:24px 20px}.uim-forward-title{font-family:PingFangSC-Medium;font-size:14px;font-style:normal;font-weight:700;line-height:17px;padding:0 16px}.uim-forward-main{max-height:calc(100vh - 200px);overflow-y:auto;padding:0 20px}.uim-forward-main .no-result{color:#999;font-family:PingFangSC-Medium;font-size:14px;font-style:normal;line-height:20px;padding:10px;text-align:center}.uim-forward-search{padding:10px 15px}.uim-forward-list{padding:13px 0}.uim-forward-list-title{font-weight:600}.uim-forward-list-item,.uim-forward-list-title{font-family:PingFangSC-Medium;font-size:14px;font-style:normal;line-height:20px}.uim-forward-list-item{font-weight:400;justify-content:space-between;padding:6px 0}.uim-forward-list-item,.uim-forward-list-item .info{align-items:center;display:flex}.uim-forward-list-item .info-nick{font-family:PingFangSC-Medium;font-size:14px;font-style:normal;font-weight:400;line-height:20px;max-width:300px;min-width:180px;overflow:hidden;padding:0 13px;text-overflow:ellipsis;white-space:nowrap}.uim-forward-footer{align-items:center;background:hsla(0,0%,98%,.94);display:flex;justify-content:space-between;padding:13px 10px}.uim-forward-footer .button{background:#0365f9;border:none;border-radius:31px;color:#fff;cursor:pointer;font-family:PingFangSC-Medium;font-size:14px;font-style:normal;font-weight:400;line-height:20px;padding:10px 21px}.uim-forward-footer-name{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;flex:1;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.transmitter{padding:0 10px}.transmitter .icon-send{transform:rotate(90deg)}.uim-emojisearch{background:var(--white95);bottom:100%;box-shadow:0 0 1px 0 var(--black30),0 0 6px 0 var(--black10);left:0;margin:0 var(--xs-m);max-height:360px;overflow-y:auto;position:absolute;width:calc(100% - 20px);z-index:10001}.uim-emojisearch,.uim-emojisearch__list{border-radius:var(--border-radius-sm) var(--border-radius-sm) 0 0}.uim-emojisearch__list{list-style-type:none;margin:0;padding:0}.uim-message-textarea-react-host{display:flex;justify-content:center;position:relative;width:100%}.uim-message-textarea{background:none;border:none;display:flex;font-family:PingFangSC;font-size:14px;font-style:normal;line-height:17px;margin:0;max-height:100%;overflow-x:hidden;overflow-y:auto;resize:none;width:100%}.uim-message-textarea:active,.uim-message-textarea:focus{border:none;outline:none}.uim-message-input .input-box{background:#fff}.input-plugin-popup-box{background:hsla(0,0%,98%,.94);border-radius:16px;box-shadow:0 0 10px rgba(0,0,0,.25)}div,label,li,p,span,ul{margin:0;padding:0}ul li{list-style:none}.uim-message-list{flex:1;height:100%;overflow-x:hidden;overflow-y:auto;padding:0 20px;position:relative}.uim-message-list.hide{opacity:0}.uim-message-list-item{display:grid;padding:5px 0}.uim-message-list .no-more{color:#999;font-family:PingFangSC-Medium;font-size:14px;font-style:normal;font-weight:500;line-height:17px;text-align:center}.uim-message-list-time{color:#7a7a7a;font-family:PingFangSC-Medium;font-size:12px;font-weight:400;line-height:14px;padding:10px;text-align:center}.toast{border-radius:5px;box-shadow:0 11px 20px 0 rgba(0,0,0,.3);margin:20px;max-width:50%;padding:10px;position:fixed;top:0;word-break:break-all;z-index:10}.info{background:#fff}.warn{background:#faad14;color:#fff}.error{background:#ff4d4f;color:#fff}.chat{box-sizing:border-box;display:flex;flex:1;flex-direction:column;height:100%;position:relative;width:100%}.conversation-list-container{height:100%;overflow-x:hidden}.conversation-preview-container{align-items:center;border:none;cursor:pointer;display:flex;height:64px;line-height:17px;padding:0 20px;width:100%}.conversation-preview-container .content{flex:1;margin-left:10px;max-width:58%;min-width:58%;text-align:left}.conversation-preview-container .content .title{font-family:PingFangSC-Medium;font-size:14px;font-style:normal;font-weight:700;line-height:17px;padding:1px 0}.conversation-preview-container .content .message{color:#7a7a7a;font-family:PingFangSC-Medium;font-size:12px;font-style:normal;font-weight:400;line-height:14px;overflow:hidden;padding:1px 0;text-overflow:ellipsis;white-space:nowrap}.conversation-preview-container .external{display:flex;flex:1;flex-direction:column;min-width:90px;text-align:right}.conversation-preview-container .external .unread{height:19px;padding:1px 0}.conversation-preview-container .external .time{color:#7a7a7a;font-family:PingFangSC-Medium;font-size:12px;font-style:normal;font-weight:400;line-height:14px;padding:1px 0}.conversation-preview-container .external .more--hover{display:flex;justify-content:right}.conversation-preview-container .external .more--hover .icon-more{transform:scale(1.5)}.conversation-preview-container .external .more--hover .more-handle-box{bottom:auto;box-shadow:0 0 10px rgba(0,0,0,.1);box-sizing:border-box;padding:14px 0;right:0;text-align:start;top:0;white-space:nowrap}.conversation-preview-container .external .more--hover .more-handle-box .more-handle-item{box-sizing:border-box;cursor:pointer;font-family:PingFangSC-Medium;font-size:16px;font-weight:500;line-height:19px;padding:6px 16px}.conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover{background:#147aff;color:#fff;opacity:.6}.conversation-preview-container:hover{background-color:rgba(0,110,255,.1)}.conversation-preview-container.conversation-preview-content--pin{background-color:hsla(0,0%,95%,.831)}.conversation-preview-container.conversation-preview-content--active{background-color:rgba(0,110,255,.1)}.conversation-preview-container.conversation-preview-content--active .title{color:#147aff}.conversation-preview-container.conversation-preview-content--unread .unread{align-items:center;background:#ff3742;border-radius:16px;color:#fff;display:flex;font-size:11px;font-weight:700;height:13px;justify-content:center;margin:2px 0 2px auto;padding:2px 5px 1px;width:16px}.uim-conversation-list{border-right:1px solid #f9fafb;display:flex;flex-direction:column;height:100%;max-width:400px;min-width:300px;overflow-x:hidden;overflow-y:auto;position:relative;text-align:initial;width:300px}.uim-conversation-list .uim-conversation-header{display:flex;padding:10px 20px}.uim-conversation-list .uim-conversation-header .uim-conversation-create-icon{align-items:center;display:flex;justify-content:center;margin-left:10px}.uim-conversation-list .no-result{align-items:center;display:flex;flex-direction:column;padding:0 20px}.uim-conversation-list .no-result-icon{margin:100px auto 50px}.uim-conversation-list .no-result-message{color:#999;font-family:PingFangSC-Medium;font-size:16px;font-weight:400;line-height:22px}a,abbr,acronym,address,article,aside,audio,b,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,i,iframe,ins,kbd,label,legend,li,mark,menu,nav,ol,output,p,pre,q,ruby,s,samp,section,small,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}a,a:active,a:hover,a:link,a:visited{color:inherit;text-decoration:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.uim-kit{display:flex;height:100%;position:relative;text-align:initial;width:100%}.contact-list-container{height:100%;overflow-x:hidden}.contact-preview-container{align-items:center;border:none;cursor:pointer;display:flex;height:64px;line-height:17px;padding:0 20px;width:100%}.contact-preview-container .content{flex:1;margin-left:10px;max-width:58%;min-width:58%;text-align:left}.contact-preview-container .content .title{font-family:PingFangSC-Medium;font-size:14px;font-style:normal;font-weight:700;line-height:17px;padding:1px 0}.contact-preview-container .external{display:flex;flex:1;flex-direction:column;min-width:90px;text-align:right}.contact-preview-container .external .more--hover{display:flex;justify-content:right}.contact-preview-container .external .more--hover .icon-more{transform:scale(1.5)}.contact-preview-container .external .more--hover .more-handle-box{bottom:auto;box-shadow:0 0 10px rgba(0,0,0,.1);box-sizing:border-box;padding:14px 0;right:0;text-align:start;top:0;white-space:nowrap}.contact-preview-container .external .more--hover .more-handle-box .more-handle-item{box-sizing:border-box;cursor:pointer;font-family:PingFangSC-Medium;font-size:16px;font-weight:500;line-height:19px;padding:6px 16px}.contact-preview-container .external .more--hover .more-handle-box .more-handle-item:hover{background:#147aff;color:#fff;opacity:.6}.contact-preview-container:hover{background-color:rgba(0,110,255,.1)}.contact-preview-container.contact-preview-content--pin{background-color:hsla(0,0%,95%,.831)}.contact-preview-container.contact-preview-content--active{background-color:rgba(0,110,255,.1)}.contact-preview-container.contact-preview-content--active .title{color:#147aff}.uim-contact-list{border-right:1px solid #f9fafb;display:flex;flex-direction:column;height:100%;max-width:400px;min-width:300px;overflow-x:hidden;overflow-y:auto;position:relative;text-align:initial;width:300px}.uim-contact-list .uim-contact-header{display:flex;padding:10px 20px}.uim-contact-list .no-result{align-items:center;display:flex;flex-direction:column;padding:0 20px}.uim-contact-list .no-result-icon{margin:100px auto 50px}.uim-contact-list .no-result-message{color:#999;font-family:PingFangSC-Medium;font-size:16px;font-weight:400;line-height:22px}.uim-group-list{border-right:1px solid #f9fafb;display:flex;flex-direction:column;height:100%;max-width:400px;min-width:300px;overflow-x:hidden;overflow-y:auto;position:relative;text-align:initial;width:300px}.uim-group-list .no-result{align-items:center;display:flex;flex-direction:column;padding:0 20px}.uim-group-list .no-result-icon{margin:100px auto 50px}.uim-moment-list{width:400px}.message-default{align-items:center;display:flex;flex:1;font-family:SF Pro Text;font-family:PingFangSC-Medium;font-size:14px;font-style:normal;font-weight:500;line-height:17px;width:100%}.message-default .avatar,.message-default .avatar img{width:45px}.message-default .content{align-items:flex-start;display:flex;flex-direction:column;padding:0 10px}.message-default .content .name{display:inline-block;padding-bottom:3px}.in{display:flex;flex:1;flex-direction:row;justify-self:flex-start}.in .content{align-items:flex-start;flex:1}.out{display:flex;flex:1;flex-direction:row-reverse;justify-self:flex-end}.out .content{align-items:flex-end;flex:1}.tip{justify-self:center;width:auto}.bubble{padding:8px 16px}.bubble-in{border-radius:16px 16px 16px 0}.bubble-in.group{border-radius:0 16px 16px 16px}.bubble-out{border-radius:16px 16px 0 16px}.message-status{align-items:flex-end;align-self:flex-end;display:flex}.message-status .time{color:#7a7a7a;font-family:PingFangSC-Medium;font-size:12px;font-weight:400;line-height:14px;padding:5px 0 0 10px;text-align:right;width:-moz-max-content;width:max-content}.message-image,.message-video{position:relative}.message-image .message-status,.message-video .message-status{bottom:10px;position:absolute;right:10px}.message-image .message-status .time,.message-video .message-status .time{color:#fff}.message-text{display:flex}.message-text-content{display:inline;font-family:PingFangSC-Regular;font-size:14px;font-style:normal;font-weight:500;line-height:17px;word-break:break-word}.message-text-content-p{display:inline;vertical-align:middle}.message-text-content .message-status{clear:right;display:inline-flex;float:right}.message-text,.message-tip{font-family:PingFangSC-Regular;font-size:14px;font-style:normal;font-weight:500;line-height:17px}.message-text .text-img,.message-tip .text-img{height:20px;vertical-align:middle;width:20px}.message-image{background:#fff}.message-image img{max-width:300px}.message-image .big-image{max-height:95%;max-width:95%}.message-video{max-width:300px}.message-video .snap-video{position:relative}.message-video .snap-video:before{border:15px solid transparent;border-left:20px solid #fff;bottom:0;content:"";height:0;left:0;margin:auto;position:absolute;right:0;top:0;width:0;z-index:1}.message-video video{border-radius:10px;width:100%}.message-video .play-video{max-height:95%;max-width:95%}.message-file{border:1px solid #ddd;display:flex;flex-direction:column}.message-file-main{align-items:center;background:#fff;border-radius:4px;display:flex;padding:12px}.message-file-main .icon{margin-right:7px}.message-file-footer{align-items:flex-end;display:flex;justify-content:space-between}.message-file-footer .time{padding-top:10px}.message-file-size{color:#7a7a7a;font-family:PingFangSC-Medium;font-size:12px;font-weight:400;line-height:14px;padding-top:10px}.message-merger{background:#ecebeb;display:flex;flex-direction:column}.message-merger h3{border-bottom:1px solid #a1a1a1;padding-bottom:4px}.message-merger-list{opacity:.6}.message-merger-item{padding-top:4px}.meesage-bubble-reply{background:#ecebeb;padding:8px 16px}.meesage-bubble-reply-in{border-radius:16px 16px 16px 0}.meesage-bubble-reply-out{border-radius:16px 16px 0 16px}.meesage-bubble-reply .message-text{border:none;border-radius:none}.meesage-bubble-reply .bubble{padding:0}.meesage-bubble-reply .bubble-in{border-radius:0}.meesage-bubble-reply-main{background:#fff;margin-bottom:10px;padding:10px 14px;position:relative}.meesage-bubble-reply-main:before{background:#d9d9d9;content:"";height:100%;left:0;position:absolute;top:0;width:6px}.meesage-bubble-reply-main .title{font-family:PingFangSC-Medium;font-size:14px;font-style:normal;font-weight:500;line-height:17px;padding-bottom:10px}.meesage-bubble-reply-main .message-context{opacity:.6}.meesage-bubble{align-items:flex-end;display:flex}.meesage-bubble-status{margin:3px}.meesage-bubble-context{align-items:center;display:flex;padding:0 8px}.meesage-bubble-context .message-context{flex:1}.icon-fail{align-items:center;background:#fa5151;border-radius:14px;display:inline-flex;height:14px;justify-content:center;position:relative;width:14px}.icon-fail:before{color:#fff;content:"!";font-family:PingFangSC-Medium;font-size:12px;position:absolute}.message-face{display:flex;flex-direction:column}.message-face .img{max-width:88px}.loading{display:inline-block;position:relative}.loading .img,.loading video{border-radius:10px;max-width:300px;min-height:60px;min-width:60px}.loading:before{background:rgba(0,0,0,.5);border-radius:10px;height:100%;width:100%}.loading:after,.loading:before{content:"";left:0;position:absolute;top:0}.loading:after{animation:spin 2s linear infinite;border:5px solid #f3f3f3;border-radius:50%;border-top-color:#555;bottom:0;display:inline-block;height:30px;margin:auto;right:0;width:30px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.message-plugin{cursor:pointer;margin:0 5px;width:32px}.message-plugin .icon-more{transform:scale(1.5)}.message-plugin .plugin-popup-box{bottom:auto;top:100%}.message-plugin-top{bottom:100%;top:auto}.message-plugin-left{left:-140px}.message-plugin-box{padding:6px 0}.message-plugin-item{align-items:center;display:flex;font-family:PingFangSC-Medium;font-size:12.8px;font-weight:500;justify-content:space-between;line-height:15px;min-width:144px;padding:6px 13px}.message-plugin-item:hover{background:rgba(0,110,255,.1);color:#147aff}.message-plugin-item .del{color:#ff584c}.message-custom{display:flex;word-break:break-all}.message-custom a{color:#679ce1;font-family:PingFangSC-Regular;font-size:14px;font-style:normal;font-weight:500;line-height:17px;text-decoration:none}.message-revoke{color:#999}.message-audio{align-items:center;display:flex}.message-audio .out{transform:rotate(180deg)}.message-audio-none{display:none}.message-audio-content{align-items:center;display:flex;gap:10px}.message-audio-out{flex-direction:row-reverse}.message-audio .playing{animation:playingAnimation 1s ease-in-out infinite}@keyframes playingAnimation{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.high-lighted{animation:highLightedAnimation 1s ease-in-out forwards}@keyframes highLightedAnimation{0%{opacity:1}25%{opacity:.3}50%{opacity:1}75%{opacity:.3}to{opacity:1}}.progress-box{display:flex;height:5px;justify-content:flex-start;width:100%}.progress-box .progress{background:#147aff;border-radius:2px;box-shadow:0 0 10px rgba(0,0,0,.25);display:inline-block;height:5px;width:0}.message-custom,.message-text{border:1px solid #ddd}.bubble-out{border:1px solid #f2f7ff}.bubble-out,.meesage-bubble-reply-out{background:#f2f7ff}.meesage-bubble-reply-out .meesage-bubble-reply-main .message-text{background:none}.message-tip{color:#999}.tip .bubble .edit{color:#147aff}.modal{align-items:center;background:rgba(0,0,0,.5);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2}