pixelated screen style for chat

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;
+}