Aku mau berbagi css tampilan live chat youtube untuk OBS yang agak unik
Guys coba tampilan ini... keliatan bagus gak?
/* === GLOBAL === */
body, html {
background: transparent !important;
overflow: hidden !important;
}
/* === SEMBUNYIKAN HEADER & INPUT === */
#header,
#input-panel,
yt-live-chat-message-input-renderer,
yt-live-chat-header-renderer,
yt-live-chat-renderer #header {
display: none !important;
}
/* === AREA CHAT UTAMA === */
yt-live-chat-renderer,
yt-live-chat-item-list-renderer,
#item-scroller,
#item-offset,
#items {
background: transparent !important;
}
/* === TIAP PESAN === */
yt-live-chat-text-message-renderer {
background: rgba(255, 255, 255, 0.055) !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
backdrop-filter: blur(14px) saturate(180%) !important;
-webkit-backdrop-filter: blur(14px) saturate(180%) !important;
border-radius: 12px !important;
margin: 5px 10px !important;
padding: 9px 13px !important;
transition: background 0.25s ease, border-color 0.25s ease !important;
animation: chatSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
will-change: transform, opacity;
}
yt-live-chat-text-message-renderer:hover {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.20) !important;
}
/* === NAMA AUTHOR === */
#author-name,
yt-live-chat-text-message-renderer #author-name {
font-size: 12px !important;
font-weight: 700 !important;
color: #7dd3fc !important;
text-shadow: 0 0 8px rgba(125, 211, 252, 0.5) !important;
letter-spacing: 0.01em !important;
}
/* === TEKS PESAN === */
#message,
yt-live-chat-text-message-renderer #message {
font-size: 14px !important;
color: rgba(255, 255, 255, 0.92) !important;
line-height: 1.45 !important;
}
/* === AVATAR === */
#author-photo,
yt-live-chat-text-message-renderer #author-photo {
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
border: 1px solid rgba(255,255,255,0.15) !important;
}
/* === BADGE MOD / MEMBER === */
yt-live-chat-author-badge-renderer img {
width: 14px !important;
height: 14px !important;
opacity: 0.85;
}
/* === SUPERCHAT (bonus) === */
yt-live-chat-paid-message-renderer {
border-radius: 12px !important;
margin: 5px 10px !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
}
/* === SEMBUNYIKAN SCROLLBAR === */
::-webkit-scrollbar {
display: none !important;
}
* {
scrollbar-width: none !important;
}
/* === ANIMASI === */
@keyframes chatSlideIn {
from {
opacity: 0;
transform: translateX(-12px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* === SEMBUNYIKAN PESAN ENGAGEMENT YOUTUBE === */
yt-live-chat-viewer-engagement-message-renderer {
display: none !important;
}
Komentar
Posting Komentar