diff options
| -rw-r--r-- | scripts/chat.js | 1 | ||||
| -rw-r--r-- | style.css | 38 | ||||
| -rw-r--r-- | twitch.html | 1 |
3 files changed, 40 insertions, 0 deletions
diff --git a/scripts/chat.js b/scripts/chat.js index a845b06..b718660 100644 --- a/scripts/chat.js +++ b/scripts/chat.js @@ -56,6 +56,7 @@ function addMessage(message) { if ("color" in message.tags) { usernameElem.style.color = message.tags["color"]; } + usernameElem.classList.add("author"); usernameElem.textContent = `${message.nick}:`; // message text diff --git a/style.css b/style.css new file mode 100644 index 0000000..32f689f --- /dev/null +++ b/style.css @@ -0,0 +1,38 @@ +:root { + --message-background: linear-gradient(0deg, #2e2d31, #252425); + --message-background-alt: linear-gradient(0deg, #3a393e, #282628); + --message-color: #f0f0f0; + --message-shadow-color: #1d1d1d; +} + +* { + padding: 0; + margin: 0; +} + +.messages { + display: flex; + flex-direction: column; +} + +.message { + background: var(--message-background); + text-shadow: 1px 1px 2px var(--message-shadow-color); + color: var(--message-color); + padding: 4px; + border-bottom: 1px solid var(--message-shadow-color); + font-family: Arial, Helvetica, sans-serif; + font-size: 16px; +} + +.message .author { + font-weight: bold; +} + +.message:nth-child(even) { + background: var(--message-background-alt); +} + +.message:last-child { + border-bottom: none; +}
\ No newline at end of file diff --git a/twitch.html b/twitch.html index ca9db0a..a2cd48d 100644 --- a/twitch.html +++ b/twitch.html @@ -2,6 +2,7 @@ <html> <head> <title>chat widget</title> + <link rel="stylesheet" href="/style.css"> </head> <body class="messages" id="messages"> <noscript> |