[READ-ONLY] Mirror of https://github.com/aaronateataco/robloxbanwave. Real-time Roblox ban wave tracker powered by community reports from r/robloxhackers.
robloxbanwave.vercel.app
feat: enhance CSS styles for improved visual consistency and responsiveness
Fascinating Pistachio
(May 27, 2026, 4:12 PM +0100)
d331c306
d7536ca5
+30
-29
+30
-29
index.html
+30
-29
index.html
···
17
17
18
18
:root{
19
19
--bg:#030e1b;--bg2:#020c17;
20
-
--surface:rgba(56,140,220,.11);--surface-h:rgba(56,140,220,.19);
21
-
--border:rgba(56,140,220,.18);--border-h:rgba(56,140,220,.32);
20
+
--surface:rgba(56,140,220,.14);--surface-h:rgba(56,140,220,.22);
21
+
--border:rgba(56,140,220,.2);--border-h:rgba(56,140,220,.36);
22
22
--text:#eef7ff;--text2:#82c8e8;--text3:#5896b4;
23
23
--accent:#38bdf8;--accent-dim:rgba(56,189,248,.1);
24
24
--accent-glow:rgba(56,189,248,.22);--accent-border:rgba(56,189,248,.35);
···
28
28
--mono:'JetBrains Mono',monospace;
29
29
--r:14px;--t:.2s cubic-bezier(.4,0,.2,1);
30
30
}
31
-
body.active {--accent:#f87171;--accent-dim:rgba(248,113,113,.09);--accent-glow:rgba(248,113,113,.28);--accent-border:rgba(248,113,113,.44);}
32
-
body.warning {--accent:#fbbf24;--accent-dim:rgba(251,191,36,.08);--accent-glow:rgba(251,191,36,.2);--accent-border:rgba(251,191,36,.36);}
33
-
body.clear {--accent:#34d399;--accent-dim:rgba(52,211,153,.07);--accent-glow:rgba(52,211,153,.16);--accent-border:rgba(52,211,153,.3);}
31
+
body.active {--accent:#f87171;--accent-dim:rgba(248,113,113,.09);--accent-glow:rgba(248,113,113,.28);--accent-border:rgba(248,113,113,.44);--surface:rgba(248,113,113,.07);--surface-h:rgba(248,113,113,.13);--border:rgba(248,113,113,.18);--border-h:rgba(248,113,113,.32);}
32
+
body.warning {--accent:#fbbf24;--accent-dim:rgba(251,191,36,.08);--accent-glow:rgba(251,191,36,.2);--accent-border:rgba(251,191,36,.36);--surface:rgba(251,191,36,.06);--surface-h:rgba(251,191,36,.11);--border:rgba(251,191,36,.16);--border-h:rgba(251,191,36,.28);}
33
+
body.clear {--accent:#34d399;--accent-dim:rgba(52,211,153,.07);--accent-glow:rgba(52,211,153,.16);--accent-border:rgba(52,211,153,.3);--surface:rgba(52,211,153,.07);--surface-h:rgba(52,211,153,.13);--border:rgba(52,211,153,.16);--border-h:rgba(52,211,153,.28);}
34
34
35
-
body{background-color:#030e1b;background-image:radial-gradient(circle,rgba(56,140,220,.045) 1px,transparent 1px),linear-gradient(180deg,#040f1e 0%,#030c18 55%,#020b16 100%);background-size:28px 28px,100% 100%;color:var(--text);font-family:var(--sans);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
35
+
body{background-color:#030e1b;background-image:radial-gradient(circle,rgba(56,140,220,.04) 1px,transparent 1px),linear-gradient(180deg,#040f1e 0%,#030c18 55%,#020b16 100%);background-size:28px 28px,100% 100%;color:var(--text);font-family:var(--sans);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
36
36
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 130% 45% at 50% -5%,rgba(14,76,160,.18) 0%,transparent 65%);pointer-events:none;z-index:0;transition:background 1.2s}
37
37
body.active::before{background:radial-gradient(ellipse 130% 45% at 50% -5%,rgba(180,20,20,.16) 0%,transparent 65%)}
38
38
body.warning::before{background:radial-gradient(ellipse 130% 45% at 50% -5%,rgba(140,90,0,.14) 0%,transparent 65%)}
39
-
body.active::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(248,113,113,.012) 3px,rgba(248,113,113,.012) 4px);pointer-events:none;z-index:9998;animation:scanlines 7s linear infinite}
39
+
body.active::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(248,113,113,.012) 3px,rgba(248,113,113,.012) 4px);pointer-events:none;z-index:90;animation:scanlines 7s linear infinite}
40
40
@keyframes scanlines{0%{background-position:0 0}100%{background-position:0 80px}}
41
+
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
42
+
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
41
43
42
44
header,section,.sep,.feed,.graph-wrap,.section-wrap,.wh-wrap,footer{position:relative;z-index:1}
43
45
···
86
88
body.clear .live-pill{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.08);color:#34d399}
87
89
/* Card elevation */
88
90
.info-card,.graph-card,.wh-card,.report-card{box-shadow:0 1px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.03);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
89
-
.post-card{box-shadow:0 1px 3px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.025)}
91
+
.post-card{box-shadow:0 1px 3px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.025);transition:background var(--t),border-color var(--t),transform var(--t),box-shadow var(--t)}
90
92
.info-card:hover,.resource-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.5),0 0 0 1px var(--border-h);transform:translateY(-2px)}
91
-
.post-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.5),0 0 0 1px var(--border-h)}
92
-
/* Gradient separators */
93
-
.sep::before,.sep::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
94
-
/* Graph bars use accent */
95
-
.g-bar.has-data{background:rgba(56,189,248,.2)}
96
-
.g-bar.has-data:hover{background:rgba(56,189,248,.55)}
93
+
.post-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.5),0 0 0 1px var(--border-h);transform:translateX(3px)}
97
94
/* Button glow on hover */
98
95
.wh-btn:hover,.report-btn:hover,.modal-submit:hover,.bn-btn:hover{box-shadow:0 4px 20px rgba(56,189,248,.22)}
99
96
body.active .wh-btn:hover,body.active .report-btn:hover,body.active .modal-submit:hover{box-shadow:0 4px 20px rgba(248,113,113,.28)}
···
118
115
.rp-arrow{margin-left:auto;font-size:13px;color:var(--text3)}
119
116
.score-meter{display:flex;align-items:center;gap:10px;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--text3)}
120
117
.meter-track{width:140px;height:4px;background:var(--border);border-radius:100px;overflow:hidden}
121
-
.meter-fill{height:100%;background:linear-gradient(90deg,rgba(56,189,248,.35),var(--accent));border-radius:100px;transition:width .9s cubic-bezier(.4,0,.2,1),background var(--t)}
122
-
.data-notice{margin-top:10px;font-family:var(--mono);font-size:9px;color:var(--text3);text-align:center}
118
+
.meter-fill{height:100%;background:linear-gradient(90deg,var(--accent),rgba(255,255,255,.85));border-radius:100px;transition:width .9s cubic-bezier(.4,0,.2,1),background 1.2s}
119
+
.data-notice{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--text3);text-align:center}
123
120
124
121
/* Sep */
125
122
.sep{display:flex;align-items:center;gap:14px;padding:0 28px;margin-bottom:20px}
126
123
.sep span{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);white-space:nowrap}
127
-
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--border)}
124
+
.sep::before,.sep::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
128
125
129
126
/* Feed */
130
127
.feed{max-width:720px;margin:0 auto;padding:0 20px 32px}
···
139
136
.post-card[data-type="alert"]{border-left:2px solid var(--accent)}
140
137
.pc-votes{text-align:center}
141
138
.pc-votes-num{font-family:var(--display);font-size:17px;font-weight:800;color:var(--text);line-height:1}
142
-
.pc-votes-lbl{font-family:var(--mono);font-size:9px;color:var(--text3);margin-top:2px}
139
+
.pc-votes-lbl{font-family:var(--mono);font-size:10px;color:var(--text3);margin-top:2px}
143
140
.pc-body{min-width:0}
144
141
.pc-title{font-size:13px;font-weight:500;color:var(--text);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
145
142
.pc-meta{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:10px;color:var(--text3);flex-wrap:wrap}
146
-
.tag{padding:1px 7px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
143
+
.tag{padding:1px 7px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
147
144
.tag-alert{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border)}
148
145
.tag-question{background:rgba(148,163,184,.1);color:#8aafc8;border:1px solid rgba(148,163,184,.2)}
149
146
.tag-verified{background:rgba(52,211,153,.1);color:#34d399;border:1px solid rgba(52,211,153,.25)}
···
159
156
.graph-stats{display:flex;gap:16px;flex-shrink:0}
160
157
.gs-item{text-align:center}
161
158
.gs-item strong{font-family:var(--display);font-size:18px;font-weight:800;color:var(--text);display:block;line-height:1}
162
-
.gs-item span{font-family:var(--mono);font-size:9px;color:var(--text3)}
159
+
.gs-item span{font-family:var(--mono);font-size:10px;color:var(--text3)}
163
160
.graph-chart{display:flex;align-items:flex-end;gap:3px;height:88px;margin-bottom:6px}
164
161
.g-bar{flex:1;border-radius:3px 3px 0 0;background:rgba(255,255,255,.05);min-height:2px;cursor:pointer;transition:background var(--t)}
165
-
.g-bar.has-data{background:rgba(239,68,68,.25)}
166
-
.g-bar.has-data:hover{background:var(--red)}
162
+
.g-bar.has-data{background:rgba(56,189,248,.22)}
163
+
.g-bar.has-data:hover{background:rgba(56,189,248,.6)}
164
+
body.active .g-bar.has-data{background:rgba(248,113,113,.3)}
165
+
body.active .g-bar.has-data:hover{background:rgba(248,113,113,.7)}
166
+
body.warning .g-bar.has-data{background:rgba(251,191,36,.28)}
167
+
body.warning .g-bar.has-data:hover{background:rgba(251,191,36,.65)}
167
168
.g-bar.cur{outline:1px solid rgba(255,255,255,.15)}
168
169
.graph-labels{display:flex;gap:3px}
169
-
.g-lbl{flex:1;font-family:var(--mono);font-size:8px;color:var(--text3);text-align:center;line-height:1.2}
170
+
.g-lbl{flex:1;font-family:var(--mono);font-size:10px;color:var(--text3);text-align:center;line-height:1.2}
170
171
171
172
/* Section */
172
173
.section-wrap{max-width:720px;margin:0 auto;padding:0 20px 32px}
···
192
193
.rc-icon{font-size:18px;flex-shrink:0;margin-top:1px}
193
194
.rc-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px}
194
195
.rc-desc{font-size:11px;color:var(--text3);line-height:1.4}
195
-
.rc-tag{font-family:var(--mono);font-size:9px;color:var(--text3);margin-top:4px}
196
+
.rc-tag{font-family:var(--mono);font-size:10px;color:var(--text3);margin-top:4px}
196
197
197
198
/* Webhooks */
198
199
.wh-wrap{max-width:720px;margin:0 auto;padding:0 20px 32px}
···
287
288
.modal-submit{background:var(--accent);color:#fff;border:none;padding:11px;border-radius:9px;font-family:var(--mono);font-size:13px;font-weight:700;cursor:pointer;transition:opacity var(--t);width:100%}
288
289
.modal-submit:hover{opacity:.85}
289
290
.modal-submit:disabled{opacity:.35;cursor:not-allowed}
290
-
.modal-note{font-family:var(--mono);font-size:10px;color:var(--text3);text-align:center;line-height:1.5}
291
+
.modal-note{font-family:var(--mono);font-size:11px;color:var(--text3);text-align:center;line-height:1.5}
291
292
292
293
/* Toasts */
293
294
.toast-container{position:fixed;bottom:24px;right:24px;z-index:600;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
···
344
345
345
346
/* Per-post vote buttons (alert cards only) */
346
347
.pc-vote-row{display:flex;gap:5px;align-items:center;margin-top:7px;flex-wrap:wrap}
347
-
.pc-vote-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text3);padding:2px 8px;border-radius:5px;font-family:var(--mono);font-size:9px;font-weight:700;cursor:pointer;transition:all var(--t);display:inline-flex;align-items:center;gap:3px;line-height:1.6}
348
+
.pc-vote-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text3);padding:2px 8px;border-radius:5px;font-family:var(--mono);font-size:10px;font-weight:700;cursor:pointer;transition:all var(--t);display:inline-flex;align-items:center;gap:3px;line-height:1.6}
348
349
.pc-vote-btn:hover:not(:disabled){background:var(--surface-h);border-color:var(--border-h);color:var(--text2)}
349
350
.pc-vote-btn.voted-up{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.35);color:#34d399}
350
351
.pc-vote-btn.voted-down{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3);color:#ef4444}
351
352
.pc-vote-btn:disabled{opacity:.55;cursor:not-allowed}
352
-
.pc-vote-lbl{font-family:var(--mono);font-size:9px;color:var(--text3)}
353
+
.pc-vote-lbl{font-family:var(--mono);font-size:10px;color:var(--text3)}
353
354
354
355
/* Contact modal */
355
356
.contact-textarea{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:8px;font-family:var(--mono);font-size:12px;outline:none;resize:vertical;min-height:120px;transition:border-color var(--t);line-height:1.6}
···
373
374
.footer-gh-btn{display:inline-flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--border);color:var(--text2);padding:4px 10px;border-radius:6px;font-family:var(--mono);font-size:10px;font-weight:700;text-decoration:none;transition:all var(--t);flex-shrink:0}
374
375
.footer-gh-btn:hover{background:var(--surface-h);border-color:var(--border-h);color:var(--text)}
375
376
.footer-gh-btn svg{width:12px;height:12px;flex-shrink:0}
376
-
.footer-disclaimer{font-size:9px;color:var(--text3);text-align:center}
377
+
.footer-disclaimer{font-family:var(--mono);font-size:10px;color:var(--text3);text-align:center;opacity:.65}
377
378
img.emoji{height:1em;width:1em;margin:0 .05em 0 .1em;vertical-align:-.1em}
378
379
379
380
@media(max-width:600px){
···
557
558
</div>
558
559
<div class="wh-id" id="whIdRow" style="display:none">
559
560
<span>Webhook ID:</span><code id="whIdCode">-</code>
560
-
<button class="wh-btn-sm" style="padding:2px 8px;font-size:9px" onclick="copyWebhookId()" title="Copy webhook ID">Copy</button>
561
+
<button class="wh-btn-sm" style="padding:2px 8px;font-size:10px" onclick="copyWebhookId()" title="Copy webhook ID">Copy</button>
561
562
</div>
562
563
<div class="wh-update-form" id="whUpdateForm">
563
564
<div class="wh-input-row">