diff --git a/src/themes/pixel-knitting.css b/src/themes/pixel-knitting.css new file mode 100644 index 0000000..fe57aa2 --- /dev/null +++ b/src/themes/pixel-knitting.css @@ -0,0 +1,92 @@ +@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap'); + +* { + box-sizing: border-box; +} + +html, +body { + font-family: 'VT323', 'Press Start 2P', monospace; + overflow: hidden; + height: 100vh; + margin-top: 0; + display: grid; + place-items: center; +} + +:root { + --large-font: 'Press Start 2P'; + --body-font: 'VT323'; + --darker-pink: #a2337a; + --lighter-pink: #c364a0; + --glow-color: var(--screen-light); + --screen-text: #3872b1; + --screen-light: hsl(179deg 64% 76%); + --screen-scan: hsl(184deg 52% 64%); +} + +/* Style the entire list of messages */ +[data-twitch-chat] { + list-style: none; + margin: 0; + padding: 0; + padding-inline: 1em; + height: 95vh; + min-width: 95vw; + border-radius: 10px; + overflow: hidden; + background-image: repeating-linear-gradient( + to bottom, + var(--screen-light), + var(--screen-light) 0.75%, + var(--screen-scan) 1% + ); + + /* This is the part that adds new messages to the bottom and lifts up old messages */ + display: flex; + flex-direction: column; + justify-content: flex-end; + gap: 1em; +} + +/* Style an individual message list item (this includes sender, reply snippets, etc) */ +[data-twitch-message] { + /* Message item styles here */ +} + +/* Style snippet of replied-to messages */ +[data-twitch-message-reply] { + display: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +/* Style the sender's username in each message item */ +.twitch-chat-sender { + font-size: 175%; + color: var(--screen-text); + text-shadow: 0 0 calc(3px / 1.75) var(--glow-color), + 0 0 calc(7px / 1.75) var(--glow-color), + 0 0 calc(7px / 1.75) var(--glow-color); +} + +/* Style the message contents themselves */ +.twitch-chat-message { + /* Message contents styles here */ + font-size: 150%; + color: var(--screen-text); + word-break: break-word; +} + +/* Style chat emotes */ +[data-twitch-emote] { + width: 1.2em; +} + +/* Style @-mentions */ +[data-twitch-mentioned-user] { + background: none; + color: inherit; + font-weight: bold; +}