#screenreadertrick { position: absolute !important; /* Outside the DOM flow */ height: 1px; width: 1px; /* Nearly collapsed */ overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */ clip: rect(1px, 1px, 1px, 1px); /* All other browsers */ } /* old opener */ body { font-family: 'Roboto', sans-serif; } .chat-btn { position: fixed; bottom: /*2rem*/45px; right: /*2rem*/45px; z-index: 999999; text-decoration: none; display: -moz-flex; display: -o-flex; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; width: 60px; height: 60px; background: linear-gradient( 135deg , #000 0%, #3F3D39 100%); color: #ffffff; border-radius: 50%; font-size: 30px; will-change: transform; transition: all 0.2s ease-in-out 0s; box-shadow: rgb(170 170 170 / 50%) 0px 4px 24px; } .chat-btn div { display: inline; transition: transform 0.8s; visibility: visible; opacity: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotateZ(0); } .chat-btn div.hide { visibility: hidden; opacity: 0; transform: translate(-50%, -50%) rotateZ(180deg); transition: transform 0.8s; } .chat-btn .fa-comment-dots { display: block; } .chat-btn .fa-pencil-alt { display: none; } .chat-btn:hover i.fas.fa-comment-dots { display: none; } .chat-btn:hover i.fas.fa-pencil-alt { display: block; } .chat-btn:hover { transform: scale(1.2); background: #3f3d39 !important; color: #fff; } /*Chatbot Starts*/ .chat-icon button { font-size: 32px; line-height: 55px; -webkit-transition: all .7s ease-out; -moz-transition: all .7s ease-in-out; transition: all .7s ease-in-out; color: #fff; background: transparent; border: none; /*width: 50px;*/ height: 50px; line-height: 50px; border-radius: 50px; } /* country selector */ .chat-bottom select { float: left; margin-left: 10px; margin-top: 10px; } #chat_countrycode { display: none; } #chat_countrycode.visible { display: inline; } .chat-bottom a button { color: #3f3d39; transition: 0.4s all ease-in; cursor: pointer; font-size: 18px; } .chat-bottom a button:hover { color: #f16e00; } button.fa-paper-plane { border: none; padding: 0; background: none; height: 30px; } /* get rid of this? */ .chatbot { font-family: 'Roboto', sans-serif; } .chatbot .chat-box { bottom: 20px; position: fixed; margin: 1em; right: 0; z-index: 10998; } .chat-icon { /* latest fixes */ /*display: block;*/ display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; text-align: center; color: #f0f0f0; margin: 25px auto 0; box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28); cursor: pointer; -webkit-transition: all .1s ease-out; transition: all .1s ease-out; position: relative; z-index: 10998; overflow: hidden; background: #42a5f5; } .chat-icon i { font-size: 2em; line-height: 55px; -webkit-transition: all .2s ease-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } /*Chatbox*/ .chat { width: 450px; /* default chat width */ position: fixed; right: 85px; bottom: 20px; /*font-size: 14px;*/ line-height: 25px; font-weight: 500; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; opacity: 0; display: none; /* XXX */ box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22); border-radius: 10px; -webkit-transition: all .2s ease-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .chat_fullscreen { position: fixed; right: 0px; bottom: 0px; top: 0px; } .chat, .chat_header { font-family: 'Roboto', sans-serif; } .chat_header { text-align: center; font-weight: 500; color: #fff; height: 55px; background: #42a5f5; border-top-left-radius: 10px; border-top-right-radius: 10px; display: flex; align-items: center; background: linear-gradient(135deg, #000 0%, #3F3D39 100%) !important; padding: 25px; } .chat_header { position: relative; } .chat_header img.header-user { width: 50px; height: 50px; border-radius: 50px; margin-right: 10px; } .chat_header h2 { font-size: 24px; margin: 0; color: #ffffff; font-weight: normal; } .chat_header button { background: transparent; border: none; color: #fff; padding: 0; margin: 0; font-size: 20px !important; } .chat_header button { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); background-color: transparent !important; } .header-bottom { padding: 25px; background-image: linear-gradient(135deg, rgba(42, 39, 218, 0.72) 0%, rgba(0, 204, 255, 0.72) 100%); color: #fff; position: relative; clear: both; } .header-bottom::before { content: ""; display: block; width: 12px; height: 12px; position: absolute; top: calc(50% - 4px); background: rgb(117 218 95); border-radius: 50%; left: 25px; } .header-bottom::after { content: ""; position: absolute; width: 100%; bottom: -8px; left: 0px; border-image-source: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNzIgMTUiPgogIDxwYXRoIGQ9Ik0zNDkuOCAxLjRDMzM0LjUuNCAzMTguNSAwIDMwMiAwaC0yLjVjLTkuMSAwLTE4LjQuMS0yNy44LjQtMzQuNSAxLTY4LjMgMy0xMDIuMyA0LjctMTQgLjUtMjggMS4yLTQxLjUgMS42Qzg0IDcuNyA0MS42IDUuMyAwIDIuMnY4LjRjNDEuNiAzIDg0IDUuMyAxMjguMiA0LjEgMTMuNS0uNCAyNy41LTEuMSA0MS41LTEuNiAzMy45LTEuNyA2Ny44LTMuNiAxMDIuMy00LjcgOS40LS4zIDE4LjctLjQgMjcuOC0uNGgyLjVjMTYuNSAwIDMyLjQuNCA0Ny44IDEuNCA4LjQuMyAxNS42LjcgMjIgMS4yVjIuMmMtNi41LS41LTEzLjgtLjUtMjIuMy0uOHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==); border-image-slice: 0 0 100%; border-image-repeat: stretch; border-width: 0px 0px 15px; border-bottom-style: solid; } .header-bottom .online { color: #fff; padding-left: 25px; font-size: 18px; font-weight: normal; } .chat_header .span { float: right; } .chat.is-visible { display: block; /* XXX */ opacity: 1; -webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1); animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1); } .is-hide { opacity: 0 } .chat_field { position: relative; margin: 5px 0 5px 0; width: 65%; font-size: 17px; line-height: 30px; font-weight: 500; color: #4b4b4b; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; border: none; outline: none; display: inline-block; } .chat_field.chat_message { height: 30px; resize: none; font-size: 17px; line-height: 20px; font-weight: 400; font-family: inherit; } .chat-bottom { width: 100%; display: inline-block; text-align: center; background: #fff; border-top: 1px solid #eee; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .chat-bottom a { display: inline-block; text-align: center; } .chat-bottom .camera-icon { float: left; background: rgba(0, 0, 0, 0); } .chat-bottom .send-icon { float: right; background: rgba(0, 0, 0, 0); } .chat-bottom a { width: 35px; height: 35px; box-shadow: none; margin: 5px 10px 5px 5px; } .chat-bottom a i { font-size: 1.6em; line-height: 35px; color: #bbb; } .chat-bottom a i:hover { color: #42a5f5; } .chat_converse:focus, button.fas:focus, .chat_message:focus { outline: .2rem solid #8c9856; /* avor gold */ } .chat-icon button:focus { outline: none !important; box-shadow: 0 0 3pt 2pt #8c9856; /* avor gold */ } .chat-icon { padding: 3px; } .chat_converse { position: relative; background: #3F3D39; margin: 0px; height: 250px; /* default chat height */ /*max-height: 250px; min-height: 150px;*/ font-size: 17px; /* chat font size */ line-height: 25px; overflow-y: auto; width: 100%; float: right; padding-bottom: 50px; } .chat .chat_converse .chat_msg_item { position: relative; margin: 8px 0 15px 0; padding: 8px 15px; max-width: 75%; display: block; word-wrap: break-word; border-radius: 20px; -webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); clear: both; z-index: 10999; font-weight: normal; font-size: 14px; line-height: 25px; } .status { margin: 45px -50px 0 0; float: right; font-size: 11px; opacity: 0.3; } .status2 { margin: -10px 20px 0 0; float: right; display: block; font-size: 11px; opacity: 0.3; clear: both; } .chat .chat_converse .chat_msg_item .chat_avatar { position: absolute; top: 0; } .chat .chat_converse .chat_msg_item.chat_msg_item_admin .chat_avatar { left: -42px; background: rgb(240, 242, 247); } .chat .chat_converse .chat_msg_item .chat_avatar, .chat_avatar img { width: 40px; height: 40px; text-align: center; border-radius: 50%; } .chat .chat_converse .chat_msg_item.chat_msg_item_admin { margin-left: 60px; float: left; /*background: rgb(240, 242, 247);*/ color: #fff; } .chat .chat_converse .chat_msg_item.chat_msg_item_user { margin-right: 20px; float: right; background: linear-gradient(135deg, #000 0%, #3F3D39 100%); color: #eceff1; } .chat .chat_converse .chat_msg_item.chat_msg_item_admin:before { /*content: ''; position: absolute; top: 15px; left: -12px; z-index: 10998; border: 6px solid transparent; border-right-color: rgba(255, 255, 255, .4);*/ } #otherSideTyping { background-color: #fff; margin-left: 30px; display: flex; width: 50%; align-items: center; } #otherSideTyping h4 { margin-right: 10px; margin-left: 15px; } #otherSideTyping .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 3px; background: #303131; animation: wave 1.3s linear infinite; } #otherSideTyping .dot:nth-child(2) { animation-delay: -1.1s; } #otherSideTyping .dot:nth-child(3) { animation-delay: -0.9s; } .chat_username { clear: both; } .chat_username p { position: relative; float: right; margin: 0px 20px -5px 0px; font-size: 12px; color: #ccc; } .chat_botname { clear: both; } .chat_botname p { position: relative; float: left; margin: 0px 0px -6px 60px; font-size: 12px; color: #42a5f5; } .chat-btn, .chat_header, .chat .chat_converse .chat_msg_item.chat_msg_item_user, .chat_header .fa-redo { background-color: #3f3d39; color: #ffffff; } /* limit embedded videos to chat width */ .chat_converse iframe { max-width: 100% !important; } @keyframes wave { 0%, 60%, 100% { transform: initial; } 30% { transform: translateY(-15px); } } /*Chatbox scrollbar*/ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { border-radius: 0; } ::-webkit-scrollbar-thumb { margin: 2px; border-radius: 10px; background: rgba(0, 0, 0, 0.2); } /*Element state*/ .is-active { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .is-float { box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32); } /*Animation*/ @-webkit-keyframes zoomIn { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes zoomIn { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes load { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.0; } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes load { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.0; } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @media only screen and (min-width: 360px) and (max-width: 399px) { .chat { width: 275px; /* adapted chat width */ } /*.chat_field { width: 50%; }*/ } @media only screen and (min-width: 400px) and (max-width: 1023px) { .chat { width: 400px; /* adapted chat width */ } /*.chat_field { width: 50%;/*65%;*/ }*/ } /* safari fixes */ @media (min-width: 375px) and (max-width: 812px) { .chat_converse { height: 280px; /* adapted chat height */ /*max-height: 280px;*/ } .chat-icon { width: 90px!important; height: 90px!important; } .chat-icon button { margin-top: 17px; margin-left: -47px; font-size: 48px!important; } } @media (min-width: 768px) and (max-width: 1024px) { .chat-icon { width: 90px!important; height: 90px!important; } .chat-icon button { margin-top: 17px; margin-left: -47px; font-size: 48px!important; } } /* Make the icon link position relative*/ .chat-icon { position: relative; } /* Make the icon link position absolute and position it in center */ .chat-icon button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0 !important; } /* smaller heading on mobile */ @media (max-width: 614px) { .chat_header h2 { font-size: 1.5em; } }
Began life as a copy of #1029808
Travelled to 3 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx
No comments. add comment
Snippet ID: | #1031825 |
Snippet name: | style.css for AVOR Demonstrator 2021 |
Eternal ID of this version: | #1031825/14 |
Text MD5: | 0c70aa4636864cfa3f480fc3de9b494f |
Author: | stefan |
Category: | javax / css |
Type: | Document |
Public (visible to everyone): | Yes |
Archived (hidden from active list): | No |
Created/modified: | 2021-07-14 20:06:42 |
Source code size: | 14976 bytes / 722 lines |
Pitched / IR pitched: | No / No |
Views / Downloads: | 170 / 163 |
Version history: | 13 change(s) |
Referenced in: | #1029802 - concierge.avor.ag |