@cobuildlab/8base-chat/dist/8base-chat.css

Chat component that uses 8base

:root{--chat-primary-color:#3eb7f9;--chat-primary-bg-color:#fff;--chat-hover-bg-color:#f4f7f9;--chat-primary-text-color:#323c47;--chat-secondary-text-color:#939ea7;--chat-primary-border-color:#d0d7dd;--chat-placeholder-color:var(--chat-secondary-text-color);--chat-active-presence-color:#00bb6e;--chat-message-bg-color:#4da1ff;--chat-message-text-color:#fff;--chat-message-link-color:var(--chat-message-text-color);--chat-my-message-bg-color:var(--chat-primary-bg-color);--chat-my-message-text-color:var(--chat-primary-text-color);--chat-my-message-link-color:var(--chat-primary-color)}.emoji-mart.emoji-mart{font-family:inherit;color:var(--chat-primary-text-color);border:1px solid var(--chat-primary-border-color)}.emoji-mart.emoji-mart,.emoji-mart.emoji-mart .emoji-mart-category-label span{background:var(--chat-primary-bg-color)}.emoji-mart.emoji-mart .emoji-mart-anchor-bar{background-color:var(--chat-primary-color)}.mca04a1eb8_u-sidebar-horiz-pd{padding-left:24px;padding-right:20px}.mca04a1eb8_u-dialog-browser-list{margin:0 -24px}.mca04a1eb8_f1{font-size:24px}.mca04a1eb8_f2{font-size:20px}.mca04a1eb8_f3{font-size:16px}.mca04a1eb8_f4{font-size:14px}.mca04a1eb8_f5{font-size:12px}.mca04a1eb8_f6{font-size:10px}.mca04a1eb8_txt-ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mca04a1eb8_btn-reset{display:flex;padding:0;border:none;font-family:inherit;color:inherit;background-color:transparent;cursor:pointer}.mc0332c294_base{position:fixed;right:0;z-index:1000;display:flex;align-items:flex-end;box-sizing:border-box;color:var(--chat-primary-text-color);margin-right:0!important}.mc0332c294_base *{box-sizing:inherit}.mc0332c294_base ::-webkit-input-placeholder{color:var(--chat-placeholder-color);opacity:1}.mc0332c294_base ::-moz-placeholder{color:var(--chat-placeholder-color);opacity:1}.mc0332c294_base :-ms-input-placeholder{color:var(--chat-placeholder-color);opacity:1}.mc0332c294_base ::-ms-input-placeholder{color:var(--chat-placeholder-color);opacity:1}.mc0332c294_base ::placeholder{color:var(--chat-placeholder-color);opacity:1}.mcffb11d07_list{list-style:none}.mcffb11d07_item{display:flex;align-items:center;padding:14px 24px;color:var(--chat-secondary-text-color);border-bottom:1px solid var(--chat-primary-border-color);cursor:pointer}.mcffb11d07_item:hover{color:var(--chat-primary-text-color);background-color:var(--chat-hover-bg-color)}.mc9cc640c5_base{display:flex;align-items:center}.mc9cc640c5_stacked-avatar{position:relative;box-sizing:content-box;border:1px solid var(--chat-primary-bg-color)}.mc9cc640c5_stacked-avatar:not(:first-child){margin-left:-8px}.mc9cc640c5_rest-user-count{margin-left:2px;color:var(--chat-secondary-text-color);font-weight:600}.mcd1005020_option-body{display:flex;justify-content:space-between;align-items:center;width:100%}.mcb1c929e9_form{max-height:70vh}.mc83798da4_wrapper{display:flex;flex-direction:column;width:100vw;height:100%}.mc83798da4_header{display:flex;align-content:center;justify-content:space-between;padding:12px 20px;background-color:var(--chat-primary-bg-color)}.mc83798da4_header>*{display:flex}.mc83798da4_back-btn{align-items:center;color:var(--chat-primary-color);outline:none}.mc83798da4_back-btn-icon{margin-right:8px}.mc83798da4_info{flex-direction:column;margin:0 12px;text-align:center}.mc83798da4_date{color:var(--chat-secondary-text-color)}.mc83798da4_preview-frame{flex:1}.mc89212e8a_base{border-radius:50%}.mc89212e8a_color-primary{background-color:var(--chat-primary-color)}.mc89212e8a_size-md{width:6px;height:6px}.mc0e3a9eaf_action:not(:last-child){margin-right:12px}.mc0e3a9eaf_squared-action:hover{color:var(--chat-primary-color)}.mc0e3a9eaf_action-transparent{transition:all .2s;cursor:pointer;outline:none}.mc0e3a9eaf_owner-action{color:var(--chat-primary-border-color)}.mc0e3a9eaf_owner-action:hover{color:var(--chat-primary-color)}.mc0e3a9eaf_foreign-action{color:var(--chat-message-text-color)}.mc0e3a9eaf_tooltip{display:flex}.mc977b3425_base{display:flex;align-items:center}.mc977b3425_input{width:100%;margin-left:14px;background-color:transparent;border:none;font-family:inherit}.mc977b3425_input:focus{outline:none}.mc10430a93_content,.mc10430a93_normal{display:flex;align-items:flex-start}.mc10430a93_content{flex-direction:column;width:100%}.mc10430a93_body{position:relative;padding:12px 18px;max-width:70%;background-color:var(--chat-message-bg-color);color:var(--chat-message-text-color);border-radius:4px;overflow-wrap:break-word;white-space:pre-wrap}.mc10430a93_body-with-arrow:before{content:"";position:absolute;top:10px;left:-4px;width:0;height:0;border-right:4px solid var(--chat-message-bg-color);border-top:3px solid transparent;border-bottom:3px solid transparent}.mc10430a93_timestamp{margin-top:4px;color:var(--chat-secondary-text-color)}.mc10430a93_avatar{margin-right:10px;flex-shrink:0}.mc10430a93_own .mc10430a93_avatar{order:1;margin-left:10px}.mc10430a93_own .mc10430a93_content{align-items:flex-end}.mc10430a93_own .mc10430a93_body{background-color:var(--chat-my-message-bg-color);color:var(--chat-my-message-text-color);border:1px solid var(--chat-primary-border-color)}.mc10430a93_own .mc10430a93_body-with-arrow:before{left:unset;right:-6px;border-right:unset;border-left:6px solid var(--chat-primary-border-color);border-top-width:5px;border-bottom-width:5px}.mc10430a93_own .mc10430a93_body-with-arrow:after{content:"";position:absolute;top:12px;right:-4px;width:0;height:0;border-left:4px solid var(--chat-my-message-bg-color);border-top:3px solid transparent;border-bottom:3px solid transparent}.mc651066b8_body{display:flex;align-items:center}.mc651066b8_body:hover .mc651066b8_actions{opacity:1}.mc651066b8_icon{margin-right:14px}.mc651066b8_actions{display:flex;align-items:center;margin-left:14px;opacity:0;transition:all .2s}.mc27668e3b_base{position:relative;display:flex;border-radius:inherit}.mc27668e3b_img{min-width:150px;height:180px;border-radius:inherit;-o-object-fit:contain;object-fit:contain}.mc27668e3b_actions{position:absolute;top:10px;right:10px;display:flex;align-items:center;opacity:0;transition:all .2s}.mc27668e3b_body{padding:0}.mc27668e3b_body:hover .mc27668e3b_actions{opacity:1}.mc99c2c001_base{text-decoration:underline}.mc99c2c001_normal,.mc99c2c001_normal:active,.mc99c2c001_normal:visited{color:var(--chat-message-link-color)}.mc99c2c001_own,.mc99c2c001_own:active,.mc99c2c001_own:visited{color:var(--chat-my-message-link-color)}.mc48bd1f67_wrapper{position:relative;width:100%}.mc48bd1f67_value{visibility:hidden;width:100%;white-space:pre-wrap;overflow-wrap:break-word}.mc48bd1f67_textarea{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;resize:none;line-height:inherit}.mc6739a50e_avatar,.mcd671c518_option-avatar{margin-right:8px}.mcbf067ef4_base{position:relative;display:flex;justify-content:space-between;align-items:center;padding-top:4px;padding-bottom:4px;height:28px}.mcbf067ef4_channel-name{opacity:.85}.mcbf067ef4_members-count{display:flex;justify-content:center;align-items:center;min-width:20px;height:20px;padding:3px 6px;border:1px solid var(--chat-primary-border-color);border-radius:500px;font-weight:600}.mcbf067ef4_dot-indicator{position:absolute;left:9px}.mc730956d3_heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 18px;text-transform:uppercase;font-weight:600}.mc730956d3_heading-add-btn{color:var(--chat-primary-color);outline:none}.mc730956d3_clickable-heading{cursor:pointer}.mc0650cdac_base{display:flex;align-items:center;padding-top:4px;padding-bottom:4px}.mc0650cdac_avatar{margin-right:14px}.mc34d09784_base{display:flex;align-items:center;justify-content:space-between;width:100%;height:60px;padding:20px 24px;background-color:var(--chat-primary-bg-color);border-top:1px solid var(--chat-primary-border-color);color:var(--chat-primary-border-color)}.mc34d09784_base>:not(:last-child){margin-right:14px}.mc34d09784_icon{transition:all .2s}.mc34d09784_icon:hover{color:var(--chat-primary-color)}.mc34d09784_closeBtn{background-color:transparent;color:#626262;transition:all .2s;outline:none;border:none;cursor:pointer}.mc34d09784_closeBtn:hover{color:var(--chat-primary-color)}.mce9fc1f2f_base{position:relative;display:flex;flex-direction:column;height:100%;width:265px;flex-shrink:0;background-color:var(--chat-primary-bg-color);border-left:1px solid var(--chat-primary-border-color);transform:translateX(100%);transition:transform .3s cubic-bezier(.075,.905,.865,.625)}.mce9fc1f2f_slideIn{transform:translateX(0)}.mce9fc1f2f_sections{flex:1;overflow-y:auto;padding:24px 0}.mce9fc1f2f_section:not(:last-child){margin-bottom:48px}.mce9fc1f2f_section-item{margin-bottom:10px;transition:all .2s;cursor:pointer}.mce9fc1f2f_section-item:hover{color:var(--chat-primary-color)}.mc263f1efa_base{display:flex;flex-direction:column;flex-shrink:0;background-color:var(--chat-primary-bg-color);border-left:1px solid var(--chat-primary-border-color)}.mc263f1efa_horizontal-padding{padding-left:20px;padding-right:20px}.mc263f1efa_window{height:100%;width:47vw;min-width:350px}.mc263f1efa_tab{height:380px;width:300px;border:none;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0 2px 10px 0 rgba(0,0,0,.16)}.mc263f1efa_tab .mc263f1efa_horizontal-padding{padding-left:14px;padding-right:14px}.mc263f1efa_shrinked-tab{height:auto}.mc263f1efa_hidden{display:none!important}.mc3a67043a_body:hover{box-shadow:0 1px 4px 0 rgba(0,0,0,.1)}.mc3a67043a_body-cursor{cursor:zoom-in}.mc2a487e7b_message:not(:last-child){margin-bottom:14px}.mc2a487e7b_optimistic-message{opacity:.5}.mc9ab83a10_base{position:relative;flex:1;overflow-y:auto;overflow-x:hidden}.mc9ab83a10_wrapper{padding:20px 32px}.mc9ab83a10_history-loader{margin-bottom:20px;text-align:center}.mca2ecc1bb_base{position:relative;display:flex;padding:20px 32px;min-height:60px;max-height:200px;border-top:1px solid var(--chat-primary-border-color)}.mca2ecc1bb_message-actions{display:flex;position:absolute;right:0;top:0;padding-top:inherit;padding-right:inherit;color:var(--chat-primary-border-color)}.mca2ecc1bb_message-actions>*{cursor:pointer}.mca2ecc1bb_message-actions>:not(:last-child){margin-right:18px}.mca2ecc1bb_textarea-wrapper{width:calc(100% - 76px)}.mca2ecc1bb_textarea{border:none;background-color:transparent;color:var(--chat-primary-text-color);font-family:inherit}.mca2ecc1bb_textarea:focus{outline:none}.mc68cb57c2_base{display:flex;padding:20px 32px;border-bottom:1px solid var(--chat-primary-border-color)}.mc68cb57c2_left-side{display:flex;flex:1;align-items:center;overflow-x:hidden;margin-right:18px}.mc68cb57c2_right-side{display:flex;align-items:center;margin-left:auto;color:var(--chat-primary-border-color)}.mc68cb57c2_right-side>:not(:last-child){margin-right:22px}.mc68cb57c2_avatars{margin-right:12px}.mc68cb57c2_channel-name{font-weight:600}.mc68cb57c2_icon-btn{outline:none;transition:all .2s}.mc68cb57c2_icon-btn:hover{color:var(--chat-primary-text-color)}.mc68cb57c2_primary-icon-btn:hover{color:var(--chat-primary-color)}