2 lines
7.3 KiB
CSS
2 lines
7.3 KiB
CSS
@import"https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i";@import"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap";.chat-widget{position:fixed;bottom:23px;right:26px;font-family:Arial,sans-serif}.chat-widget .fa-times{font-size:24px}.chat-widget .toggle-button{background-color:#748c62;color:#fff;border:none;padding:10px 20px;cursor:pointer;outline:none;width:100%;border-radius:50px;width:60px;height:60px;box-shadow:#0000001a 0 4px 12px}.chat-widget .chat__box .fa{font-size:24px;display:flex;justify-content:center;align-items:center}.chat-widget .chat-box{background-color:#fff;width:412px;height:650px;border:1px solid #ddd;border-radius:5px;display:flex;flex-direction:column;justify-content:space-between;padding:10px}.chat-widget .user-msg{text-align:left;margin:5px;padding:5px;background-color:#dcf8c6;display:inline-block;border-radius:10px}.chat-widget .message-box{padding:10px;display:flex;flex-direction:column;gap:10px}.message-box input,.message-box textarea{padding:10px;border:1px solid #ccc;border-radius:5px}.message-box textarea{resize:none;height:140px}.chat-widget input,.chat-widget textarea:focus{outline:none}.chat-widget .media{background:#383f33;transform:translate(-20px,-20px);width:410px;padding:9px;border-top-left-radius:5px;border-top-right-radius:5px;color:#fff}.message-box button{padding:10px 20px;background-color:#748c62;color:#fff;border:none;cursor:pointer;border-radius:5px;position:absolute;bottom:14px;width:90%;font-size:16px}.error{color:red;font-size:12px;margin-top:-10px}.policy-box{display:flex;align-items:center;gap:10px}@media only screen and (max-width: 475px){.chat-widget .chat-box{width:352px;height:650px}.chat-widget .media{width:351px}}@media only screen and (max-width: 392px){.chat-widget .chat-box{width:280px;height:650px}.chat-widget .media{width:277px}}@media only screen and (max-width: 317px){.chat-widget .chat-box{width:250px;height:650px}.chat-widget .media{width:249px}}ul{list-style:none}.chat-messages .chatbox-holder{position:fixed;right:0;bottom:0;display:flex;align-items:flex-end;height:0}.chat-messages .chatbox{width:420px;height:673px;margin:0 20px 0 0;position:relative;box-shadow:0 0 5px #0003;display:flex;flex-flow:column;border-radius:10px 10px 0 0;background:#fff;bottom:0;transition:.1s ease-out}.chat-messages .chatbox-top{position:relative;display:flex;padding:10px 0;border-radius:10px 10px 0 0;background:#0000000d;background:#383f33}.chat-messages .chatbox-icons{padding:0 10px 0 0;display:flex;position:relative}.chat-messages .chatbox-icons .fa{background:#dc000099;padding:3px 5px;margin:0 0 0 3px;color:#fff;border-radius:0 5px;transition:.3s}.chat-messages .chatbox-icons .fa:hover{border-radius:5px 0;background:#dc0000}.chatbox-icons a,.chatbox-icons a:link,.chatbox-icons a:visited{color:#fff}.chat-messages .chat-partner-name,.chat-group-name{flex:1;padding:0 0 0 95px;font-size:15px;font-weight:700;color:#fff!important;transition:.1s ease-out}.chat-messages .status{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 3px #0003;border:1px solid rgba(0,0,0,.15);background:#cacaca;margin:0 3px 0 0}.chat-messages .online{background:#b7fb00}.away{background:#ffae00}.donot-disturb{background:#ff4343}.chat-messages .chatbox-avatar{width:80px;height:80px;overflow:hidden;border-radius:50%;background:#fff;padding:3px;box-shadow:0 0 5px #0003;position:absolute;transition:.1s ease-out;bottom:0;left:6px}.chat-messages .chatbox-avatar img{width:100%;height:100%;border-radius:50%}.chat-messages .chat-messages{border-top:1px solid rgba(0,0,0,.05);padding:10px;overflow:auto;display:flex;flex-flow:row wrap;align-content:flex-start;flex:1}.chat-messages .message-box-holder{width:100%;margin:0 0 15px;display:flex;flex-flow:column;align-items:flex-end}.chat-messages .message-sender{font-size:12px;margin:0 0 15px;color:#30649c;align-self:flex-start}.message-sender a,.message-sender a:link,.message-sender a:visited,.chat-partner-name a,.chat-partner-name a:link,.chat-partner-name a:visited{color:#fff;text-decoration:none}.chat-messages .message-box{padding:6px 10px;border-radius:6px 0;position:relative;background:#64aa001a;border:2px solid rgba(100,170,0,.1);color:#6c6c6c;font-size:12px;text-align:left}.chat-messages .message-box:after{content:"";position:absolute;border:10px solid transparent;border-top:10px solid rgba(100,170,0,.2);border-right:none;bottom:-22px;right:10px}.chat-messages .message-partner{background:#0072871a;border:2px solid rgba(0,114,135,.1);align-self:flex-start}.chat-messages .message-partner:after{right:auto;bottom:auto;top:-22px;left:9px;border:10px solid transparent;border-bottom:10px solid rgba(0,114,135,.2);border-left:none}.chat-messages .chat-input-holder{display:flex;border-top:1px solid rgba(0,0,0,.1)}.chat-messages .chat-input{resize:none;padding:5px 10px;height:40px;font-family:Lato,sans-serif;font-size:14px;color:#999;flex:1;border:none;background:#0000000d;border-bottom:1px solid rgba(0,0,0,.05)}.chat-input:focus,.message-send:focus{outline:none}.message-send::-moz-focus-inner{border:0;padding:0}.chat-messages .message-send{background:#9cc900;background-color:#748c62;color:#fff;font-size:12px;padding:0 15px;border:none;text-shadow:1px 1px 0 rgba(0,0,0,.3)}.attachment-panel{padding:3px 10px;text-align:right}.attachment-panel a,.attachment-panel a:link,.attachment-panel a:visited{margin:0 0 0 7px;text-decoration:none;color:#00000080}.chatbox-min{margin-bottom:-362px}.chatbox-min .chatbox-avatar{width:60px;height:60px}.chatbox-min .chat-partner-name,.chatbox-min .chat-group-name{padding:0 0 0 75px}.chat-messages .settings-popup{background:#fff;border-radius:20px/10px;box-shadow:0 3px 5px #0003;font-size:13px;opacity:0;padding:10px 0;position:absolute;right:0;text-align:left;top:33px;transition:.15s;transform:scaleY(0);transform-origin:50% 0;width:120px;z-index:2;border-top:1px solid rgba(0,0,0,.2);border-bottom:2px solid rgba(0,0,0,.3)}.settings-popup:after,.settings-popup:before{border:7px solid transparent;border-bottom:7px solid white;border-top:none;content:"";position:absolute;left:45px;top:-10px;border-top:3px solid rgba(0,0,0,.2)}.settings-popup:before{border-bottom:7px solid rgba(0,0,0,.25);top:-11px}.settings-popup:after{border-top-color:transparent}#chkSettings{display:none}#chkSettings:checked+.settings-popup{opacity:1;transform:scale(1)}.settings-popup ul li a,.settings-popup ul li a:link,.settings-popup ul li a:visited{color:#999;text-decoration:none;display:block;padding:5px 10px}.settings-popup ul li a:hover{background:#0000000d}.file-input-label{position:relative}.file-input-label input[type=file]{position:absolute;left:0;top:0;opacity:0;display:none}.file-input-label i{margin-left:-30px;padding:8px;background-color:transparent;color:#748c62;font-size:25px;border-radius:5px;cursor:pointer}input{cursor:pointer}@media only screen and (max-width: 475px){.chat-messages .chatbox{width:358px;height:674px}}@media only screen and (max-width: 392px){.chat-messages .chatbox{width:286px;height:675px}}@media only screen and (max-width: 317px){.chat-messages .chatbox{width:257px;height:675px}}.message-box-holder.user{text-align:right}.message-box-holder.partner{text-align:left}.chat-messages img{width:170px}*{padding:0;margin:0;box-sizing:border-box;font-family:Outfit,sans-serif}body{min-height:100vh;background-color:#fcfcfc}a{text-decoration:none;color:inherit}hr{border:none;height:1px;background-color:#a9a9a9}
|