#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 */ } /*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; } .chat-bottom a button { color: #737373; 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; } .chatbot { font-family: 'Poppins', sans-serif; /*background-color: #f4faff; height: 100vh; display: flex; justify-content: center; align-items: center;*/ } .chatbot .chat-box { bottom: 20px; position: fixed; margin: 1em; right: 0; z-index: 10998; } .chat-icon { display: block; 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 { position: fixed; right: 85px; bottom: 20px; width: 400px; 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_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; justify-content: center; } .chat_header h2 { font-size: 2.5em; margin: 0; } .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: 50%; font-size: 14px; 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: 14px; 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; } .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 #f16e00; } .chat-icon button:focus { outline: none !important; box-shadow: 0 0 3pt 2pt #f16e00; } .chat-icon { padding: 3px; } .chat_converse { position: relative; background: #fff; margin: 0; /*margin: 6px 0 0px 0;*/ height: 300px; min-height: 0; font-size: 14px; 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 10px; max-width: 60%; display: block; word-wrap: break-word; border-radius: 3px; -webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); clear: both; z-index: 10999; } .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: -52px; background: rgba(0, 0, 0, 0.03); } .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: rgba(0, 0, 0, 0.03); color: #666; } .chat .chat_converse .chat_msg_item.chat_msg_item_user { margin-right: 20px; float: right; background: #42a5f5; 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: 100%; 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; } @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) { .chat { width: 275px; } .chat_field { width: 80%;/*65%;*/ } } @media only screen and (min-width: 400px) { .chat { width: 300px; } } /* TABLETS PORTRAIT */ @media only screen and (min-width: 768px) { .chat { width: 300px; } .chat_field { width: 80%;/*65%;*/ } } /* TABLET LANDSCAPE / DESKTOP */ @media only screen and (min-width: 1024px) { .chat { width: 300px; } .chat_field { width: 65%; } } /* new-changes.css */ .chat-icon { background: #27fa00; } .chat_header { background: #27fa00; } .chat_header h2 { font-size: 25px; } .chat .chat_converse .chat_msg_item.chat_msg_item_user { background: #15b5d4; color: #fff; } .chat .chat_converse .chat_msg_item.chat_msg_item_admin { margin-left: 85px; } .chat_msg_item button { background: #27fa00; box-shadow: none; border: none; color: #fff; border-radius: 5px; } .chat .chat_converse .chat_msg_item.chat_msg_item_admin .chat_avatar { left: -70px; } .chat .chat_converse .chat_msg_item .chat_avatar, .chat_avatar img { width: 60px; height: 60px; } .chat_converse { height: 300px; padding-top: 25px; } .chat-bottom { padding: 5px 0px; display: flex; justify-content: space-around; } .chat_field.chat_message { background: #ececec; height: 40px; border-radius: 50px; line-height: 35px; padding-left: 15px; width: 75%; margin-left: 30px; } .chat-bottom a { width: 40px; height: 40px; } .chat-bottom a button { background: #15b5d4; color: #fff; width: 40px; height: 40px; border-radius: 50px; } @media only screen and (min-width: 1024px) { .chat { width: 500px; } } @media only screen and (min-width: 768px) { .chat { width: 500px; } } .chat_avatar.glowing { animation: spin 4s linear infinite; box-shadow: inset 0px 0 0px #0ff, 0 0 10px #fff, -2px 0 30px #0ff; } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* progress bar stuff */ .my_progressbar { margin: 0; background: #fff; padding: 15px 0px; text-align: center; } .my_progressbar .progress { margin: 0 auto; width: 400px; background: #ecfcff; padding: 4px; border-radius: 50px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); height: auto; } .my_progressbar .progress-bar { height: 16px; border-radius: 50px; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; -webkit-transition-property: width, background-color; -moz-transition-property: width, background-color; -o-transition-property: width, background-color; transition-property: width, background-color; -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); } .my_progressbar #five:checked ~ .progress > .progress-bar { width: 5%; background-color: #f63a0f; } .my_progressbar #twentyfive:checked ~ .progress > .progress-bar { width: 25%; background-color: #29d8fb; } .my_progressbar #fifty:checked ~ .progress > .progress-bar { width: 50%; background-color: #f2b01e; } .my_progressbar #seventyfive:checked ~ .progress > .progress-bar { width: 75%; background-color: #f2d31b; } .my_progressbar #onehundred:checked ~ .progress > .progress-bar { width: 100%; background-color: #86e01e; } .my_progressbar .radio { display: none; } .my_progressbar .label { display: inline-block; margin: 0 5px 20px; padding: 3px 8px; color: #aaa; border-radius: 3px; cursor: pointer; } .my_progressbar .radio:checked + .label { color: #fff; background: #27fa00; } .chat_home_btn { float: right; }
Began life as a copy of #1028274
Travelled to 7 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, vouqrxazstgt, xrpafgyirdlv
No comments. add comment
Snippet ID: | #1028492 |
Snippet name: | style.css for ContractBox (extended with new-changes.css + progress bar + glowing) |
Eternal ID of this version: | #1028492/19 |
Text MD5: | 1f42d59237172ce74f8397d8e766fb04 |
Author: | stefan |
Category: | javax / css |
Type: | Document |
Public (visible to everyone): | Yes |
Archived (hidden from active list): | No |
Created/modified: | 2020-07-04 21:29:17 |
Source code size: | 13898 bytes / 694 lines |
Pitched / IR pitched: | No / No |
Views / Downloads: | 199 / 324 |
Version history: | 18 change(s) |
Referenced in: | [show references] |