ethanholz.com
A Rust project for overlaying your stream.place chat in OBS
1:root {
2 --bg-primary: #0f0f0f;
3 --bg-secondary: #1a1a1a;
4 --bg-tertiary: #252525;
5 --text-primary: #e0e0e0;
6 --text-secondary: #b0b0b0;
7 --accent: #3b82f6;
8 --accent-hover: #2563eb;
9 --handle-bg: #1e3a5f;
10}
11
12body {
13 background: var(--bg-primary);
14 color: var(--text-primary);
15 font-family: system-ui, -apple-system, sans-serif;
16 margin: 0;
17 padding: 0;
18 min-height: 100vh;
19 position: relative;
20 overflow-x: hidden;
21}
22
23body::before {
24 content: '';
25 position: fixed;
26 top: 0;
27 left: 0;
28 right: 0;
29 bottom: 0;
30 background: rgba(15, 15, 15, 0.6);
31 backdrop-filter: blur(2px);
32 z-index: -1;
33 pointer-events: none;
34}
35
36#messages {
37 width: 100%;
38 height: 100vh;
39 overflow-y: auto;
40 padding: 20px;
41 box-sizing: border-box;
42}
43
44.chat-message {
45 background: var(--bg-secondary);
46 border-radius: 12px;
47 padding: 12px 16px;
48 margin-bottom: 12px;
49 border-left: 4px solid var(--accent);
50 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
51 animation: fadeInSlideUp 0.4s ease-out;
52 width: 100%;
53 box-sizing: border-box;
54}
55
56.handle {
57 font-size: 14px;
58 font-weight: 600;
59 color: var(--text-secondary);
60 margin-bottom: 6px;
61 display: inline-block;
62 padding: 4px 8px;
63 background: var(--handle-bg);
64 border-radius: 6px;
65}
66
67.message {
68 font-size: 16px;
69 color: var(--text-primary);
70 line-height: 1.5;
71 word-wrap: break-word;
72}
73
74@keyframes fadeInSlideUp {
75 from {
76 opacity: 0;
77 transform: translateY(20px);
78 }
79 to {
80 opacity: 1;
81 transform: translateY(0);
82 }
83}