diff --git a/css/app.css b/css/app.css deleted file mode 100644 index fc06f95..0000000 --- a/css/app.css +++ /dev/null @@ -1,365 +0,0 @@ -/* Basic reset and styling */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -.sn-notify-outline { --sn-notify-background-color: #27272a; } -.sn-notify-outline .sn-notify-title { --sn-notify-title-color: #FFFFFF; } -.sn-notify-outline .sn-notify-text { --sn-notify-text-color: rgba(255,255,255,0.5); } - -/* Full-page container styling */ -html { - width: 100vw; - height: 100vh; - font-family: "Inter", sans-serif; - scroll-behavior: smooth; - overflow-wrap: break-word; -} - - -body { - background-color: #121212; - overflow: hidden; -} - -.wrapper { - position: absolute; - width: 100%; - height: 100%; -} - -#chat { - position: absolute; - width: 100%; - bottom: 0px; - padding: 20px; -} - -#chat .message { - color: #FFF; - font-size: 18px; - line-height: 150%; - text-shadow: 2px 2px 2px rgba(0,0,0,0.75); - transition: all ease-in-out 300ms; - margin: 5px 0; -} - -#chat .message img { height: 22px; vertical-align: middle; } - -#chat .message .text img.gigantify { - height: 84px; - display: block; - margin: 10px 0 5px 0; -} - -#chat .message .user { font-weight: bold; } - -#chat .message .time { - display: inline-block; - background: rgba(18, 18, 18, 0.5); - font-size: 12px; - padding: 0px 10px; - border-radius: 5px; -} - -#chat .message .avatar { - display: inline-block; - margin: 2px 0px; -} - -#chat .message .avatar img { - height: 28px; - border-radius: 100px; -} - -#chat .message .platform { - display: inline-flex; - justify-content: center; - align-items: center; - background: #000; - width: 24px; - height: 24px; - font-size: 14px; - border-radius: 5px; - text-shadow: 2px 2px 2px rgba(0,0,0,0.25); -} - -#chat .message .badges i { - display: inline-flex; - justify-content: center; - align-items: center; - background: #000; - width: 24px; - height: 24px; - font-size: 12px; - border-radius: 5px; - margin: 0 5px 0 0; - text-shadow: 2px 2px 2px rgba(0,0,0,0.25); -} - -#chat .message .reply { - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - display: block; - - font-size: 14px; - color: #999; -} - -#chat .message .reply i { - transform: rotate(90deg); - margin: 0 5px; -} - - -#chat .message .shared { - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - display: block; - text-shadow: none; - font-size: 14px; - margin: 2px 0; - color: #999; -} - -#chat .message .shared span { - display: inline-block; - border-radius: 5px; - padding: 2px 10px 2px 5px; - background: #a970ff; - color: #fff; -} - -#chat .message .shared i { - margin: 0 3px; -} - - -#chat .message.event { - text-shadow: 2px 2px 2px rgba(0,0,0,0.25); - font-size: 16px; -} - -#chat .message.event .platform { - background: none; - margin: 2px 7px 0 6px; -} - -#chat .message.event > div { - padding: 5px 15px 5px 5px; - margin: 2px 0 0 0; - border-radius: 5px; - background: rgba(0,0,0,0.15); - display: inline-flex; -} - - -#chat .message.twitch .platform { background: #a970ff; } -#chat .message.twitch .badges img { margin: 0 2px; } -#chat .message.twitch.event > div { - background: rgb(169,112,255); - background: linear-gradient(180deg, rgba(169,112,255,1) 0%, rgba(95,67,138,1) 100%); -} -#chat .message.twitch.event .platform { background: transparent; } - -#chat .message.twitch.announcement > div { - padding: 10px 15px 13px 10px; - display: inline-block; - border-bottom: 2px solid #ffcc00; - background: rgb(18,18,18); - background: linear-gradient(180deg, rgba(18,18,18,1) 1%, rgba(0,0,0,1) 100%); -} - -#chat .message.twitch.announcement .reply { - padding: 2px; - color: #ffcc00; -} - -#chat .message.twitch.announcement .reply i { - transform: rotate(0deg); -} - -#chat .message.twitch.announcement .platform { - margin: 0; -} - -#chat .message.twitch.rewards-redemption > div { - padding: 10px 15px 13px 10px; - display: inline-block; - border-bottom: 2px solid #ffcc00; - background: rgb(18,18,18); - background: linear-gradient(180deg, rgba(18,18,18,1) 1%, rgba(0,0,0,1) 100%); -} -#chat .message.twitch.rewards-redemption .reply { - padding: 2px; - color: #FFF; -} - -#chat .message.twitch.rewards-redemption .reply i { - transform: rotate(0deg); - color: #ffcc00; -} - -#chat .message.twitch.rewards-redemption .platform { - margin: 0; -} - - - - - - - - -#chat .message.youtube .platform { background: #ff0000; } -#chat .message.youtube.event > div { - background: rgb(255,0,0); - background: linear-gradient(180deg, rgba(255,0,0,1) 1%, rgba(136,0,0,1) 100%); -} -#chat .message.youtube.event .platform { background: transparent; } - - -#chat .message.youtube.owner .user { - background: #ffd600; - color: #121212 !important; - border-radius: 5px; - padding: 2px 5px; - margin-right: 5px; - text-shadow: 2px 2px 2px rgba(0,0,0,0); -} - -#chat .message.youtube.owner .badges i.fa-solid.fa-video { background: #ff0000 } - -#chat .message.youtube.mod .user { color: #5e84f1 !important; } -#chat .message.youtube.mod .badges i.fa-solid.fa-wrench { background: #5e84f1 } - -#chat .message.youtube.sub .user { color: #2ba640 !important; } -#chat .message.youtube.sub .badges i.fa-solid.fa-star { background: #2ba640; } - -#chat .message.youtube .badges i.fa-solid.fa-check { background: #999; } - - - - - - -#chat .message.streamlabs .platform { background: #80f5d2; } -#chat .message.streamlabs.event > div { - background: rgb(128,245,210); - background: linear-gradient(180deg, rgba(128,245,210,1) 1%, rgba(8,108,78,1) 100%); -} -#chat .message.streamlabs.event .platform { background: transparent; } - - - -#chat .message.streamelements .platform { background: #2700ff; } -#chat .message.streamelements.event > div { - background: rgb(39,0,255); - background: linear-gradient(180deg, rgba(39,0,255,1) 1%, rgba(13,0,88,1) 100%); -} -#chat .message.streamelements.event .platform { background: transparent; } - - - - - - - -#chat .message.tiktok .platform { background: #000; } - - -#chat .message.tiktok.event > div { - background: rgb(255,0,80); - background: linear-gradient(180deg, rgba(255,0,80,1) 1%, rgba(120,0,38,1) 100%); -} -#chat .message.tiktok.event .platform { background: transparent; } - -#chat .message.tiktok.mod .badges i.fa-solid.fa-wrench { - background: #121212; -} - - - - - - - - -#chat.horizontal { - display: flex; - align-items: center; - width: max-content; - right: 0; - gap: 15px; -} - -#chat.horizontal .message { - margin: 0; -} - -#chat.horizontal .message.twitch.announcement > div { - display: inline-flex; -} - -#chat.horizontal .message.twitch.rewards-redemption > div { - display: inline-flex; -} - - - - -#statistics { - position: fixed; - z-index: 11; - width: 100%; - top: 0; left: 0; - padding: 20px; - font-size: 14px; - display: flex; - gap: 15px; - justify-content: flex-end; - backdrop-filter: blur(5px); - font-weight: bold; - -webkit-mask-image: linear-gradient(to top, transparent, black 40%); - mask-image: linear-gradient(to top, transparent, black 40%); -} - - -#statistics .platform { - background: #000; - color: #FFF; - padding: 10px 15px; - border-radius: 100px; - - display: flex; - flex-direction: row; - align-items: center; - flex-wrap: nowrap; -} - -#statistics .platform i.fa-brands { - margin-right: 5px; -} - -#statistics .platform > span { - display: inline-block; - margin: 0 5px; -} - -#statistics .platform#twitch { - background: #a970ff; -} - -#statistics .platform#youtube { - background: #FF0000; -} - -#statistics .platform#tiktok { - background: #ff0050; -} \ No newline at end of file diff --git a/css/settings.css b/css/settings.css deleted file mode 100644 index 11f6bc7..0000000 --- a/css/settings.css +++ /dev/null @@ -1,413 +0,0 @@ -* { - 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: 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; -} - - -.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 .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=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#extras .setting input[type=checkbox]:checked + .slider { - background-color: #00dd63; -} - -.tab-content .setting input[type=checkbox]:disabled + .slider { - background-color: #000 !important; -} - - -footer { - position: sticky; - bottom: 0; - padding: 20px; - background: rgba(18,18,18,0.5); - backdrop-filter: blur(10px); - margin-top: 20px; - font-size: 14px; -} - -footer a { - display: inline-block; - margin: 10px 5px; - font-size: 20px; - color: #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; -}