/* Joinchat adminbar */ #jcadminbar { position: relative; min-height: 50px; background: #fff; filter: drop-shadow(0 0px 2px #0003); } #jcadminbar:before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: -200px; width: 200px; background: inherit; } .joinchat-header { padding-top: 5px; padding-bottom: 1px; } #jcadminbar h1 { margin: 0; } #jcadminbar~#wpbody .wrap { margin-top: 30px; } #jcadminbar~#wpbody .wp-header-end+.notice { margin-top: 40px; } [dir=rtl] #jcadminbar:before { left: auto; right: -200px; } @media screen and (max-width: 600px) { #jcadminbar { top: 46px; } } /* Onboard */ #wpbody-content { padding-bottom: 0; } #wpfooter { display: none; } #joinchat_onboard { --color: #f9603a; --hover: #de431c; color: #414141; font: normal normal normal 16px/1.625em -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif; letter-spacing: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; touch-action: manipulation; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgb(0 0 0 / 0%); } #joinchat_onboard *, #joinchat_onboard *::before, #joinchat_onboard *::after { box-sizing: border-box; } .joinchat__dialog { display: flex; flex-direction: column; justify-content: center; width: 450px; max-width: 100%; height: 100%; min-height: 90vh; margin: 0 auto; padding: 50px 0 5vh; } .joinchat__message { flex-shrink: 0; position: relative; min-height: 60px; padding: 17px 20px; margin: 0 26px 26px; border-radius: 32px; background: #fff; word-break: break-word; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); transform: translateZ(0); transform-origin: 0 50%; -webkit-animation: joinchat_msg 250ms cubic-bezier(0, 0, 0.58, 1.19) 10ms both; animation: joinchat_msg 250ms cubic-bezier(0, 0, 0.58, 1.19) 10ms both; } .joinchat__message::before { content: ''; display: block; position: absolute; bottom: 20px; left: -15px; width: 17px; height: 25px; background: inherit; -webkit-clip-path: url(#joinchat__peak_l); clip-path: url(#joinchat__peak_l); } .joinchat__dialog .joinchat__message--loading { border: none; background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><circle cx="4" cy="12" r="3"><animate id="a" begin="0;b.end+0.1s" attributeName="cy" calcMode="spline" dur="0.4s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle><circle cx="12" cy="12" r="3"><animate begin="a.begin+0.1s" attributeName="cy" calcMode="spline" dur="0.4s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle><circle cx="20" cy="12" r="3"><animate id="b" begin="a.begin+0.2s" attributeName="cy" calcMode="spline" dur="0.4s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle></svg>') 20px 20px no-repeat; transform-origin: 30px 30px; -webkit-animation: joinchat_msg 100ms ease-out 10ms both; animation: joinchat_msg 100ms ease-out 10ms both; } .joinchat__dialog .joinchat__message--loading::before { content: none; } .joinchat__dialog .joinchat__message+.joinchat__message { margin-top: -10px; } @media (prefers-reduced-motion) { .joinchat__dialog .joinchat__message { -webkit-animation: none; animation: none; } } .joinchat__dialog .joinchat__message--reply { transform-origin: 100% 50%; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: 26px; background: var(--color); color: #fff; font-weight: 700; } .joinchat__dialog .joinchat__message--reply:before { left: auto; right: -13px; -webkit-clip-path: url(#joinchat__peak_r); clip-path: url(#joinchat__peak_r); } .joinchat__dialog .joinchat__message--options { transform-origin: 50% 50%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; gap: 10px 5px; min-height: 46px; padding: 0; margin: -10px 10px 16px; background: none !important; border-radius: 0; filter: none; -webkit-animation: joinchat__fadein 300ms ease-out 10ms both; animation: joinchat__fadein 300ms ease-out 10ms both; } .joinchat__dialog .joinchat__message--options:before { content: none; } .joinchat__btn, .joinchat__option { display: inline-block; min-height: 46px; padding: 10px 15px; margin: 0; color: var(--color); border: 3px solid var(--color); border-radius: 23px; line-height: 20px; text-align: center; text-decoration: none; cursor: pointer; } .joinchat__btn:hover, .joinchat__btn:active, .joinchat__btn:focus, .joinchat__option:hover, .joinchat__option:active, .joinchat__option:focus { color: var(--hover); border-color: var(--hover); outline: none; } .joinchat__option--skip { color: #515151; border: none; } .joinchat__option--disabled, .joinchat__option--disabled:hover, .joinchat__option--disabled:active, .joinchat__option--disabled:focus { color: #515151; border-color: #515151; cursor: default; } .joinchat__option--link { order: -1; width: 100%; border-radius: 7px; background: var(--color); color: #fff; font-weight: 700; } .joinchat__option--link:hover, .joinchat__option--link:active, .joinchat__option--link:focus { color: #fff; background: var(--hover); border-color: var(--hover); } .joinchat__message a { color: var(--color) !important; font-size: 1em; text-decoration: underline; } .joinchat__message a:hover, .joinchat__message a:active { color: var(--hover) !important; border-color: var(--hover); } .joinchat__message img { max-width: 100%; height: auto; margin: 0.2em 0; border-radius: 4px; } .joinchat__message--media { padding: 5px; } .joinchat__message--media img { display: block; margin: 0; border-radius: 28px; } @-webkit-keyframes joinchat_msg { from { opacity: 0; transform: scale3d(0, 0, 0); } to { opacity: 1; transform: scale3d(1, 1, 1); } } @keyframes joinchat_msg { from { opacity: 0; transform: scale3d(0, 0, 0); } to { opacity: 1; transform: scale3d(1, 1, 1); } } @-webkit-keyframes joinchat__fadein { from { opacity: 0 } to { opacity: 1 } } @keyframes joinchat__fadein { from { opacity: 0 } to { opacity: 1 } } /* inputs */ .joinchat__message input, .joinchat__message textarea, .joinchat__message .iti { max-width: 100%; margin-top: 12px; font-size: 18px; } .joinchat__optin { margin: 20px 0 10px 2px; font-size: 13px; line-height: 1.33; } .joinchat__optin a { display: inline; padding: 0; color: inherit !important; text-decoration: underline; } .joinchat__optin a:hover { text-decoration-thickness: 2px; } .joinchat__optin input { position: absolute; opacity: 0; } .joinchat__optin label { position: relative; display: block; margin: 0; padding: 0 0 0 30px; color: inherit; font: inherit; cursor: pointer; } .joinchat__optin label::before { content: ''; display: block; position: absolute; top: min(50% - 11px, 5px); left: 0; width: 22px; height: 22px; border: 3px solid var(--color); border-radius: 4px; background: #fff; transition: box-shadow 0.3s ease-in-out; } .joinchat__optin label::after { content: ''; display: none; position: absolute; top: min(50% - 8px, 8px); left: 8px; width: 6px; height: 14px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate3d(0, 0, 1, 45deg); } [dir="rtl"] .joinchat__optin label { padding: 0 30px 0 0; } [dir="rtl"] .joinchat__optin label::before { left: auto; right: 0; } [dir="rtl"] .joinchat__optin label::after { left: auto; right: 8px; } .joinchat__optin input:focus+label::before, .joinchat__optin input:active+label::before { outline: 2px solid #2271b1; } .joinchat__optin input:checked+label::before { box-shadow: inset 0 0 0 10px var(--color); } .joinchat__optin input:checked+label::after { display: block; } .joinchat__optin input[readonly]+label { cursor: default; }