Nih cobain nih, keren gak
Ini kodenya:
/* IMPORTS - GAMER FONTS */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Press+Start+2P&family=Rajdhani:wght@600&display=swap");
/* ==========================================
CORE RESET & BACKGROUND
========================================== */
body {
overflow: hidden;
background-color: rgba(0, 0, 0, 0);
}
/* Transparansi full untuk semua container bawaan */
yt-live-chat-renderer,
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted],
yt-live-chat-author-chip #author-name {
background-color: transparent !important;
}
/* ==========================================
GAMER UI STYLE (HUD & BOX CHAT)
========================================== */
yt-live-chat-text-message-renderer {
padding: 8px 12px !important;
margin: 6px 4px !important;
background: rgba(10, 10, 15, 0.65) !important; /* Dark HUD translucent background */
border-left: 4px solid #00f0ff !important; /* Cyberpunk Cyan Left Border */
border-radius: 0 8px 8px 0;
box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
transition: all 0.3s ease;
/* Animasi Spawn Chat Baru */
animation: slideInChat 0.25s ease-out forwards;
}
@keyframes slideInChat {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
/* Global Text Outline & Font Fix */
yt-live-chat-renderer * {
text-shadow: 1px 1px 2px #000000, -1px -1px 2px #000000, -1px 1px 2px #000000, 1px -1px 2px #000000 !important;
font-family: "Orbitron", sans-serif;
}
/* Hide Scrollbar */
yt-live-chat-item-list-renderer #items,
yt-live-chat-item-list-renderer #item-scroller {
overflow: hidden !important;
}
/* ==========================================
AVATAR / PLAYER ICON
========================================== */
yt-live-chat-text-message-renderer #author-photo {
width: 28px !important;
height: 28px !important;
border-radius: 4px !important; /* Kotak rounded biar ala avatar game retro */
border: 2px solid #ffffff;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
margin-right: 10px !important;
}
/* ==========================================
PLAYER ROLES & COLORS (RGB / NEON EFFECT)
========================================== */
/* 1. Streamer / OWNER (BOSS LEVEL) */
yt-live-chat-text-message-renderer[author-type="owner"] {
border-left: 4px solid #ff0055 !important;
background: rgba(40, 5, 15, 0.75) !important;
box-shadow: 0 0 15px rgba(255, 0, 85, 0.2);
}
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer #author-name.owner {
color: #ff0055 !important;
font-weight: bold;
text-shadow: 0 0 8px rgba(255, 0, 85, 0.6) !important;
}
/* 2. Moderators (GUILD LEADERS) */
yt-live-chat-text-message-renderer[author-type="moderator"] {
border-left: 4px solid #00ff66 !important;
}
yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer #author-name.moderator {
color: #00ff66 !important;
text-shadow: 0 0 8px rgba(0, 255, 102, 0.6) !important;
}
/* 3. Members / Sponsors (PREMIUM PLAYERS) */
yt-live-chat-text-message-renderer[author-type="member"] {
border-left: 4px solid #ffaa00 !important;
}
yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer #author-name.member {
color: #ffaa00 !important;
text-shadow: 0 0 8px rgba(255, 170, 0, 0.6) !important;
}
/* 4. Regular Viewers (PEASANTS) */
yt-live-chat-text-message-renderer #author-name {
color: #00f0ff !important;
font-family: "Rajdhani", sans-serif;
font-size: 18px !important;
font-weight: 700;
letter-spacing: 0.5px;
}
yt-live-chat-text-message-renderer #author-name::after {
content: " >"; /* Gaya prompt command line / game chat */
color: #ffffff;
margin-left: 4px;
}
/* ==========================================
CHAT MESSAGES
========================================== */
yt-live-chat-text-message-renderer #message {
color: #e2e8f0 !important;
font-family: "Orbitron", sans-serif;
font-size: 16px !important;
line-height: 22px !important;
font-weight: 500;
}
/* Timestamps */
yt-live-chat-text-message-renderer #timestamp {
color: #64748b !important;
font-family: "Rajdhani", sans-serif;
font-size: 13px !important;
}
/* ==========================================
SUPER CHAT / DONATION (LEGENDARY LOOT Drop)
========================================== */
yt-live-chat-paid-message-renderer {
border: 2px solid #ffea00 !important;
background: linear-gradient(135deg, #9400d3, #4b0082) !important; /* Epic Purple/Gold Loot Vibe */
border-radius: 6px !important;
box-shadow: 0 0 20px rgba(255, 234, 0, 0.4) !important;
margin: 12px 4px !important;
animation: pulseGold 2s infinite alternate;
}
@keyframes pulseGold {
from { box-shadow: 0 0 10px rgba(255, 234, 0, 0.3); }
to { box-shadow: 0 0 20px rgba(255, 234, 0, 0.6); }
}
/* Font SuperChat ala Retro Arcade */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #purchase-amount {
font-family: "Press Start 2P", cursive !important;
font-size: 12px !important; /* Font pixel art emang kudu rada kecil biar rapi */
color: #ffea00 !important;
}
yt-live-chat-paid-message-renderer #content {
font-family: "Orbitron", sans-serif !important;
font-size: 16px !important;
color: #ffffff !important;
}
/* ==========================================
CLEAN UP (HIDE BLOATWARE ELEMENTS)
========================================== */
yt-live-chat-renderer #guide,
yt-live-chat-renderer .yt-live-chat-renderer-join-chat,
yt-live-chat-renderer yt-live-chat-join-chat-renderer,
yt-live-chat-restricted-participation-renderer,
yt-live-chat-renderer #input-panel,
yt-live-chat-renderer #show-hide-button,
yt-live-chat-renderer yt-live-chat-message-input-renderer,
yt-live-chat-header-renderer,
yt-live-chat-toast-renderer,
yt-live-chat-banner-manager,
yt-live-chat-ticker-renderer,
yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-text-message-renderer #author-badges,
yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-text-message-renderer[is-deleted] {
display: none !important;
}
Yang ini lebih rapi dan rapat
/* ==========================================
GAMER LIVE CHAT V2 — COMPACT HUD EDITION
========================================== */
/* FONTS */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Rajdhani:wght@600;700&display=swap");
/* ==========================================
BASE
========================================== */
body {
overflow: hidden;
background: transparent;
}
/* Transparan semua */
yt-live-chat-renderer,
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted],
yt-live-chat-author-chip #author-name {
background: transparent !important;
}
/* Hide scrollbar */
yt-live-chat-item-list-renderer #items,
yt-live-chat-item-list-renderer #item-scroller {
overflow: hidden !important;
}
/* ==========================================
GLOBAL FONT
========================================== */
yt-live-chat-renderer * {
font-family: "Orbitron", sans-serif !important;
text-shadow:
1px 1px 2px #000,
-1px -1px 2px #000;
}
/* ==========================================
MAIN CHAT BOX
========================================== */
yt-live-chat-text-message-renderer {
margin: 2px 2px !important;
padding: 4px 8px !important;
background: linear-gradient(
90deg,
rgba(0,0,0,0.78),
rgba(12,12,20,0.62)
) !important;
border-left: 3px solid #00e5ff !important;
border-radius: 0 8px 8px 0 !important;
box-shadow:
0 0 6px rgba(0,229,255,0.18),
inset 0 0 8px rgba(255,255,255,0.02);
backdrop-filter: blur(3px);
animation: chatSpawn 0.18s ease-out;
}
/* Spawn animation */
@keyframes chatSpawn {
from {
opacity: 0;
transform: translateX(-12px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ==========================================
AVATAR
========================================== */
yt-live-chat-text-message-renderer #author-photo {
width: 22px !important;
height: 22px !important;
border-radius: 5px !important;
border: 1px solid rgba(255,255,255,0.7);
margin-right: 6px !important;
box-shadow: 0 0 6px rgba(255,255,255,0.2);
}
/* ==========================================
USERNAME
========================================== */
yt-live-chat-text-message-renderer #author-name {
font-family: "Rajdhani", sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #00e5ff !important;
letter-spacing: 0.3px;
}
/* Gamer prompt style */
yt-live-chat-text-message-renderer #author-name::after {
content: ":";
color: white;
margin-left: 3px;
}
/* ==========================================
CHAT MESSAGE
========================================== */
yt-live-chat-text-message-renderer #message {
font-size: 14px !important;
line-height: 18px !important;
color: #f1f5f9 !important;
font-weight: 500;
margin-left: 2px !important;
}
/* ==========================================
TIMESTAMP
========================================== */
yt-live-chat-text-message-renderer #timestamp {
font-size: 10px !important;
color: rgba(255,255,255,0.35) !important;
margin-right: 4px !important;
}
/* ==========================================
OWNER
========================================== */
yt-live-chat-text-message-renderer[author-type="owner"] {
border-left: 3px solid #ff0055 !important;
background: linear-gradient(
90deg,
rgba(40,0,15,0.88),
rgba(20,0,8,0.62)
) !important;
box-shadow:
0 0 10px rgba(255,0,85,0.28);
}
yt-live-chat-text-message-renderer #author-name.owner,
yt-live-chat-text-message-renderer #author-name[type="owner"] {
color: #ff2f75 !important;
}
/* ==========================================
MODERATOR
========================================== */
yt-live-chat-text-message-renderer[author-type="moderator"] {
border-left: 3px solid #00ff88 !important;
}
yt-live-chat-text-message-renderer #author-name.moderator,
yt-live-chat-text-message-renderer #author-name[type="moderator"] {
color: #00ff88 !important;
}
/* ==========================================
MEMBER
========================================== */
yt-live-chat-text-message-renderer[author-type="member"] {
border-left: 3px solid #ffaa00 !important;
}
yt-live-chat-text-message-renderer #author-name.member,
yt-live-chat-text-message-renderer #author-name[type="member"] {
color: #ffaa00 !important;
}
/* ==========================================
SUPER CHAT
========================================== */
yt-live-chat-paid-message-renderer {
margin: 4px 2px !important;
padding: 6px !important;
border-radius: 8px !important;
background: linear-gradient(
135deg,
rgba(92,0,255,0.95),
rgba(255,0,140,0.88)
) !important;
border: 1px solid #ffe600 !important;
box-shadow:
0 0 14px rgba(255,230,0,0.35);
animation: superPulse 1.8s infinite alternate;
}
@keyframes superPulse {
from {
transform: scale(1);
}
to {
transform: scale(1.015);
}
}
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #purchase-amount {
color: #ffe600 !important;
font-size: 13px !important;
font-weight: 700 !important;
}
yt-live-chat-paid-message-renderer #content {
color: white !important;
font-size: 14px !important;
}
/* ==========================================
REMOVE YOUTUBE CLUTTER
========================================== */
yt-live-chat-renderer #input-panel,
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer,
yt-live-chat-toast-renderer,
yt-live-chat-banner-manager,
yt-live-chat-ticker-renderer,
yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-restricted-participation-renderer,
yt-live-chat-text-message-renderer #author-badges,
yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-text-message-renderer[is-deleted] {
display: none !important;
}
Yang ini cocok buat background gelap:
/* ==========================================
GAMER LIVE CHAT V2 — COMPACT HUD EDITION
========================================== */
/* FONTS */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Rajdhani:wght@600;700&display=swap");
/* ==========================================
BASE
========================================== */
body {
overflow: hidden;
background: transparent;
}
/* Transparan semua */
yt-live-chat-renderer,
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted],
yt-live-chat-author-chip #author-name {
background: transparent !important;
}
/* Hide scrollbar */
yt-live-chat-item-list-renderer #items,
yt-live-chat-item-list-renderer #item-scroller {
overflow: hidden !important;
}
/* ==========================================
GLOBAL FONT
========================================== */
yt-live-chat-renderer * {
font-family: "Orbitron", sans-serif !important;
text-shadow:
1px 1px 2px #000,
-1px -1px 2px #000;
}
/* ==========================================
MAIN CHAT BOX
========================================== */
yt-live-chat-text-message-renderer {
margin: 2px 2px !important;
padding: 4px 8px !important;
background: linear-gradient(
90deg,
rgba(0,0,0,0.78),
rgba(12,12,20,0.62)
) !important;
border-left: 3px solid #00e5ff !important;
border-radius: 0 8px 8px 0 !important;
box-shadow:
0 0 6px rgba(0,229,255,0.18),
inset 0 0 8px rgba(255,255,255,0.02);
backdrop-filter: blur(3px);
animation: chatSpawn 0.18s ease-out;
}
/* Spawn animation */
@keyframes chatSpawn {
from {
opacity: 0;
transform: translateX(-12px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ==========================================
AVATAR
========================================== */
yt-live-chat-text-message-renderer #author-photo {
width: 22px !important;
height: 22px !important;
border-radius: 5px !important;
border: 1px solid rgba(255,255,255,0.7);
margin-right: 6px !important;
box-shadow: 0 0 6px rgba(255,255,255,0.2);
}
/* ==========================================
USERNAME
========================================== */
yt-live-chat-text-message-renderer #author-name {
font-family: "Rajdhani", sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #00e5ff !important;
letter-spacing: 0.3px;
}
/* Gamer prompt style */
yt-live-chat-text-message-renderer #author-name::after {
content: ":";
color: white;
margin-left: 3px;
}
/* ==========================================
CHAT MESSAGE
========================================== */
yt-live-chat-text-message-renderer #message {
font-size: 14px !important;
line-height: 18px !important;
color: #f1f5f9 !important;
font-weight: 500;
margin-left: 2px !important;
}
/* ==========================================
TIMESTAMP
========================================== */
yt-live-chat-text-message-renderer #timestamp {
font-size: 10px !important;
color: rgba(255,255,255,0.35) !important;
margin-right: 4px !important;
}
/* ==========================================
OWNER
========================================== */
yt-live-chat-text-message-renderer[author-type="owner"] {
border-left: 3px solid #ff0055 !important;
background: linear-gradient(
90deg,
rgba(40,0,15,0.88),
rgba(20,0,8,0.62)
) !important;
box-shadow:
0 0 10px rgba(255,0,85,0.28);
}
yt-live-chat-text-message-renderer #author-name.owner,
yt-live-chat-text-message-renderer #author-name[type="owner"] {
color: #ff2f75 !important;
}
/* ==========================================
MODERATOR
========================================== */
yt-live-chat-text-message-renderer[author-type="moderator"] {
border-left: 3px solid #00ff88 !important;
}
yt-live-chat-text-message-renderer #author-name.moderator,
yt-live-chat-text-message-renderer #author-name[type="moderator"] {
color: #00ff88 !important;
}
/* ==========================================
MEMBER
========================================== */
yt-live-chat-text-message-renderer[author-type="member"] {
border-left: 3px solid #ffaa00 !important;
}
yt-live-chat-text-message-renderer #author-name.member,
yt-live-chat-text-message-renderer #author-name[type="member"] {
color: #ffaa00 !important;
}
/* ==========================================
SUPER CHAT
========================================== */
yt-live-chat-paid-message-renderer {
margin: 4px 2px !important;
padding: 6px !important;
border-radius: 8px !important;
background: linear-gradient(
135deg,
rgba(92,0,255,0.95),
rgba(255,0,140,0.88)
) !important;
border: 1px solid #ffe600 !important;
box-shadow:
0 0 14px rgba(255,230,0,0.35);
animation: superPulse 1.8s infinite alternate;
}
@keyframes superPulse {
from {
transform: scale(1);
}
to {
transform: scale(1.015);
}
}
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #purchase-amount {
color: #ffe600 !important;
font-size: 13px !important;
font-weight: 700 !important;
}
yt-live-chat-paid-message-renderer #content {
color: white !important;
font-size: 14px !important;
}
/* ==========================================
REMOVE YOUTUBE CLUTTER
========================================== */
yt-live-chat-renderer #input-panel,
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer,
yt-live-chat-toast-renderer,
yt-live-chat-banner-manager,
yt-live-chat-ticker-renderer,
yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-restricted-participation-renderer,
yt-live-chat-text-message-renderer #author-badges,
yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-text-message-renderer[is-deleted] {
display: none !important;
}
Untuk berikutnya, stay tuned...
Komentar
Posting Komentar