* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Inter", sans-serif; scroll-behavior: smooth; overflow-wrap: break-word; background-color: #121212; color: #FFF; text-align: center; padding: 30px; font-size: 16px; } a { color: #ffcc00; } #chat-divided { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 30px; } #chat-settings { width: 640px; } #chat-preview { width: calc(100% - 640px); } #chat-preview iframe { position: sticky; top: 30px; left: 0; width: 100%; height: calc(100vh - 60px); } .url-bar { margin: 0 0 20px 0; font-size: 16px; } .url-bar input[type=text] { /*font-family: "Inter", sans-serif; border: none; background: #171717; color: #FFF; padding: 15px 30px; border-radius: 10px; width: 100%; text-align: center; outline: none; font-size: 14px;*/ display: none; } .url-bar button { font-family: "Inter", sans-serif; font-weight: bold; border: none; padding: 15px 30px; margin-top: 10px; border-radius: 10px; cursor: pointer; background: #252525; color: #FFF; transition: .4s; width: 100%; font-size: 14px; } .url-bar button:hover { background: #292929; } .tab-content { padding: 20px 30px; border-radius: 20px; background: #171717; margin: 20px auto; text-align: left; } .tab-content h2 { margin-bottom: 15px; font-size: 20px; padding: 15px 0px; border-bottom: 1px solid #222; } .tab-content h2 i { margin-right: 5px; } .tab-content h2 svg { width: 26px; vertical-align: bottom; fill: #FFF; } .tab-content h2 img { width: 26px; vertical-align: bottom; } .tab-content .setting { display: flex; justify-content: space-between; padding: 5px 0px; flex-direction: row; flex-wrap: nowrap; align-items: center; } .tab-content .setting.column { flex-direction: column; } .tab-content .setting.column label { width: 100%; } .tab-content .setting.column .emote-list { width:100%; display: flex; flex-wrap: wrap; /* allow items to wrap */ gap: 10px; margin-top: 15px; } .tab-content .setting.column .emote-list .emote-item { width: 96px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; background: #222; border-radius: 10px; } .tab-content .setting.column .emote-list .emote-item button { position: absolute; top: 0; right: 0; width: 36px; height: 36px; border-radius: 10px; transition: .4s; text-align: center; background: none; border: none; cursor: pointer; } .tab-content .setting.column .emote-list .emote-item button.add { top: 50%; left: 50%; right: unset; transform: translate(-50%,-50%); width: 100%; height: 100%; font-size: 36px; } .tab-content .setting.column .emote-list .emote-item button.add:hover { background-color: #333; } .tab-content .setting.column .emote-list .emote-item button.add i { vertical-align: middle; } .tab-content .setting.column .emote-list .emote-item em { display: block; margin-top: 5px; font-size: 9px; } .tab-content .setting.column .emote-list .emote-item img { height: 24px; } .tab-content .setting i { font-size: 14px; color: #666; margin: 0 10px; } .tab-content .setting i.fa-arrow-turn-up { transform: rotate(90deg); } .tab-content .setting small { color: #777; } .tab-content .setting input[type=text], .tab-content .setting input[type=number], .tab-content .setting textarea { font-family: "Inter", sans-serif; border: none; background:#222; color: #FFF; padding: 10px 20px; border-radius: 10px; outline: none; } .tab-content .setting textarea { width: 100%; height: 200px; margin-top: 15px; } .tab-content .setting.select select { font-family: "Inter", sans-serif; border: none; background:#222; color: #FFF; padding: 10px 20px 10px 10px; border-radius: 10px; outline: none; } .tab-content .setting .switch { position: relative; display: inline-block; width: 50px; height: 27px; } /* Hide default HTML checkbox */ .tab-content .setting .switch input[type=checkbox] { opacity: 1; width: 0; height: 0; } /* The slider */ .tab-content .setting .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #CCC; transition: .4s; border-radius: 30px; } .tab-content .setting .slider:before { position: absolute; content: ""; height: 1.3em; width: 1.2em; border-radius: 16px; left: 5px; top: 3px; bottom: 0; background-color: white; transition: .4s; } .tab-content .setting input[type=color] { background: #111; padding: 0 2px; } .tab-content .setting input[type=checkbox]:checked + .slider { background-color: #03c4de; } .tab-content .setting input[type=checkbox]:checked + .slider:before { transform: translateX(1.4em); } .tab-content#twitch .setting input[type=checkbox]:checked + .slider { background-color: #a970ff; } .tab-content#youtube .setting input[type=checkbox]:checked + .slider { background-color: #FF0000; } .tab-content#tiktok .setting input[type=checkbox]:checked + .slider { background-color: #ff0050; } .tab-content#kick .setting input[type=checkbox]:checked + .slider { background-color: #48d415; } .tab-content#extras .setting input[type=checkbox]:checked + .slider { background-color: #00dd63; } .tab-content#patreon .setting input[type=checkbox]:checked + .slider { background-color: #ff5900; } .tab-content#tipeee .setting input[type=checkbox]:checked + .slider { background-color: #e02f44; } .tab-content#kofi .setting input[type=checkbox]:checked + .slider { background-color: #72a5f2; } .tab-content#fourthwall .setting input[type=checkbox]:checked + .slider { background-color: #0042ff; } .tab-content .setting input[type=checkbox]:disabled + .slider { background-color: #000 !important; } .slider-value { display: inline-block; font-style: normal; font-size: 14px; width: 100%; padding: 5px; background: #121212; text-align: center; border-radius: 100px; } footer { position: sticky; bottom: 0; padding: 20px; background: rgba(18,18,18,0.5); backdrop-filter: blur(10px); margin-top: 80px; font-size: 14px; } footer a { display: inline-block; margin: 10px 5px; font-size: 20px; color: #ffcc00; } footer a svg { width: 24px; vertical-align: bottom; fill: #ffcc00; } footer a img { width: 24px; vertical-align: bottom; } footer .nav-bar { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; font-size: 12px; width: 100%; } footer .nav-bar a { display: inline-block; border-radius: 100px; padding: 10px 15px; margin: 0; font-size: 16px; text-decoration: none; color: #FFF; transition: all ease-in-out 300ms; } footer .nav-bar a:hover { color: #ffcc00; background: rgba(0,0,0,0.40); } footer .nav-bar a svg { width: 20px; fill: #FFF; transition: all ease-in-out 300ms; } footer .nav-bar a:hover svg { fill: #ffcc00; } footer .nav-bar a.active { color: #ffcc00; background: rgba(0,0,0,0.20); } footer .nav-bar a.active svg { fill: #ffcc00; } @media only screen and (max-width: 768px) { #chat-divided { flex-direction: column; } #chat-settings { width: 100%; } #chat-settings .field { width: 100%; display: block; } #chat-settings .field input { width: 100%; margin: 10px 0; } #chat-preview { display: none; } footer { font-size: 12px; } } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; z-index: 999; } .modal.hidden { display: none; } .modal-content { background: #121212; padding: 1.5em; border-radius: 1em; width: 640px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; gap: 1em; } .modal-content input[type=text], .modal-content input[type=number], .modal-content textarea { font-family: "Inter", sans-serif; border: none; background:#222; color: #FFF; padding: 10px 20px; border-radius: 10px; outline: none; margin-top: 10px; } .modal-content button { font-family: "Inter", sans-serif; font-weight: bold; border: none; padding: 15px 30px; margin-top: 10px; border-radius: 10px; cursor: pointer; background: #252525; color: #FFF; transition: .4s; width: 100%; font-size: 14px; } .modal-content #confirmAddEmote { background: #00dd63; } .modal-content #cancelAddEmote { background: #ff0000; } .modal-content h3 { margin: 0 0 0.5em; } .modal-content label { display: flex; flex-direction: column; font-size: 0.9em; } .modal-buttons { display: flex; justify-content: flex-end; gap: 1em; } #memberemotesbstatus.online i { color: #00dd63; text-shadow: 0 0 5px #00dd63; } #memberemotesbstatus.offline i { color: #ff0000; text-shadow: 0 0 5px #ff0000; }