obs里设置后看不到弹幕了？ #250
Description
自己用的一个css，上次直播还是好好的，现在貌似啥都看不见了...OBS还是run as admin的
用的css是这个
@import url("https://fonts.googleapis.com/css?family=Noto%20Sans%20SC");
:root {
/** 是否显示上方superchat固定栏 显示:display 不显示:none **/
--main-ticker-display: none;
/** 消息背景颜色 **/
--main-message-background-color: #f1f2f6;
/** 普通用户边框颜色 **/
--main-message-name-background: #747d8c;
/** 舰长用户边框颜色 **/
--member-j-message-name-background: #5E88DB;
/** 房管用户边框颜色 **/
--member-t-message-name-background: #5C65F2;
/** 主播边框颜色 **/
--member-z-message-name-background: #7958E8;
/** 消息昵称颜色 **/
--main-message-name-color: #ffffff;
/** 消息文字颜色 **/
--main-message-color: #000000;
/** 整体字体 **/
--main-font-family: Noto Sans SC;
}
/* Transparent background */
yt-live-chat-renderer {
background-color: transparent !important;
}
yt-live-chat-item-list-renderer #item-scroller {
overflow: hidden !important;
}
yt-live-chat-membership-item-renderer #content {
overflow: visible !important;
position: relative;
}
/* Hide header and input */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
display: none !important;
}
/* Hide unimportant messages */
yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-membership-item-renderer[is-deleted] {
display: none !important;
}
yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-restricted-participation-renderer {
display: none !important;
}
yt-live-chat-text-message-renderer a,
yt-live-chat-membership-item-renderer a {
text-decoration: none !important;
}
/* Global Setting */
yt-live-chat-renderer {
}
#item-scroller {
}
/* Reduce side padding */
yt-live-chat-text-message-renderer {
padding-left: 4px !important;
padding-right: 4px !important;
}
/* Outlines */
yt-live-chat-renderer * {
font-family: var(--main-font-family);
}
/* Avatars */
@keyframes anim-header-border-rotate {
0% { opacity: 0; transform: rotate(90deg); }
40% { opacity: 0; transform: rotate(90deg); }
100% { opacity: 1; transform: rotate(0); }
}
@keyframes anim {
0% { opacity: 0; transform: translateX(-16px); }
100% { opacity: 1; transform: none; }
}
yt-live-chat-text-message-renderer #author-photo {
display: block !important;
animation: anim 210ms;
animation-fill-mode: both;
position: relative;
overflow: visible !important;
margin-top: 23px;
width: 34px !important;
height: 34px !important;
border-radius: 34px !important;
}
yt-live-chat-text-message-renderer #author-photo img {
width: 34px !important;
height: 34px !important;
border-radius: 34px !important;
}
yt-live-chat-text-message-renderer #author-photo:before {
content: '';
animation: anim-header-border-rotate 500ms;
width: 34px;
height: 34px;
border-radius: 34px !important;
position: absolute;
left: -4px;
top: -4px;
border: 4px solid var(--main-message-name-background);
}
yt-live-chat-text-message-renderer[author-type="member"] #author-photo:before {
border: 4px inset var(--member-j-message-name-background) !important;
}
yt-live-chat-text-message-renderer[author-type="moderator"] #author-photo:before {
border: 4px inset var(--member-t-message-name-background) !important;
}
yt-live-chat-text-message-renderer[author-type="owner"] #author-photo:before {
border: 4px inset var(--member-z-message-name-background) !important;
}
yt-live-chat-membership-item-renderer #author-photo,
yt-live-chat-membership-item-renderer #author-photo img {
display: block !important;
width: 24px !important;
height: 24px !important;
border-radius: 24px !important;
margin-right: 6px !important;
}
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo img {
display: block !important;
width: 24px !important;
height: 24px !important;
border-radius: 24px !important;
margin-right: 6px !important;
}
/* Channel names */
@keyframes anim-msg-in-name {
0% { transform: translateY(11px); }
80% { transform: translateY(11px); }
100% { transform: translateY(11px); }
}
yt-live-chat-text-message-renderer yt-live-chat-author-chip {
animation: anim-msg-in-name 250ms;
transform-origin: 0 0;
position: relative;
transform: translateY(11px);
margin: 0 0 0 4px !important;
background-color: var(--main-message-name-background);
padding: 2px 6px;
border-radius: 12px;
}
yt-live-chat-text-message-renderer[author-type="member"] yt-live-chat-author-chip {
background-color: var(--member-j-message-name-background) !important;
}
yt-live-chat-text-message-renderer[author-type="moderator"] yt-live-chat-author-chip {
background-color: var(--member-t-message-name-background) !important;
}
yt-live-chat-text-message-renderer[author-type="owner"] yt-live-chat-author-chip {
background-color: var(--member-z-message-name-background) !important;
}
yt-live-chat-text-message-renderer #author-name {
color: var(--main-message-name-color) !important;
font-family: var(--main-font-family);
font-size: 14px !important;
line-height: 14px !important;
max-width: calc(100% - 0px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: transparent !important;
}
#medal-name.yt-live-chat-author-medal-renderer {
visibility: hidden;
width: 0;
height: 0;
padding: 0;
font-size: 14px !important;
line-height: 14px !important;
}
#medal-level.yt-live-chat-author-medal-renderer {
visibility: hidden;
width: 0;
height: 0;
padding: 0;
font-size: 14px !important;
line-height: 14px !important;
}
/* Messages */
@keyframes anim-msg-in {
0% { opacity: 0; transform: scale(0.7); }
85% { opacity: 0.8; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
yt-live-chat-text-message-renderer #card {
max-width: 100%;
}
yt-live-chat-text-message-renderer #content {
/** 动画相关 **/
animation: anim-msg-in 240ms;
transform-origin: left center;
/** 基本属性相关 **/
display: block;
position: relative;
max-width: calc(100% - 48px);
}
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
color: var(--main-message-color) !important;
font-family: var(--main-font-family);
font-size: 16px !important;
line-height: 16px !important;
}
yt-live-chat-text-message-renderer #message {
max-width: 100%;
display: block !important;
border-radius: 20px;
padding: 11px 12px;
border: 2px solid var(--main-message-name-background);
background: var(--main-message-background-color);
}
yt-live-chat-text-message-renderer[author-type="member"] #message {
border: 2px solid var(--member-j-message-name-background) !important;
}
yt-live-chat-text-message-renderer[author-type="moderator"] #message {
border: 2px solid var(--member-t-message-name-background) !important;
}
yt-live-chat-text-message-renderer[author-type="owner"] #message {
border: 2px solid var(--member-z-message-name-background) !important;
}
/* member */
@keyframes anim-member-in {
0% { opacity: 0; transform: scale(0.8); }
85% { opacity: 0.8; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes anim-member-text-in {
0% { opacity: 0; transform: scale(0.8); }
75% { opacity: 0.3; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}
yt-live-chat-membership-item-renderer {
animation: anim-member-in 240ms;
transform-origin: center center;
}
yt-live-chat-membership-item-renderer #card {
margin: 4px 0 !important;
border-radius: 12px !important;
}
yt-live-chat-membership-item-renderer #header {
margin: 4px 0 !important;
flex-wrap: wrap;
}
yt-live-chat-membership-item-renderer #header::after {
animation: anim-member-text-in 300ms;
font-size: 16px;
width: 100%;
margin-top: 6px;
border-radius: 20px;
padding: 7px 12px;
color: var(--main-message-color);
background-color: var(--main-message-background-color);
}
yt-live-chat-membership-item-renderer #header::after {
content: '欢迎新会员';
}
yt-live-chat-membership-item-renderer #header-content-primary-column {
width: 100%;
}
yt-live-chat-membership-item-renderer yt-live-chat-author-chip {
width: 100%;
justify-content: space-between;
}
yt-live-chat-membership-item-renderer #header-content-inner-column,
yt-live-chat-membership-item-renderer #header-content-inner-column * {
color: #ffffff !important;
font-family: var(--main-font-family);
font-size: 18px !important;
line-height: 18px !important;
}
yt-live-chat-membership-item-renderer #header-subtext,
yt-live-chat-membership-item-renderer #header-subtext * {
display: none;
}
/* SuperChat/Fan Funding Messages */
yt-live-chat-paid-message-renderer {
animation: anim-member-in 240ms;
transform-origin: center center;
margin: 4px 0 !important;
}
yt-live-chat-paid-message-renderer #card {
border-radius: 12px !important;
overflow: hidden;
}
yt-live-chat-paid-message-renderer #header-content {
width: calc(100% - 30px);
}
yt-live-chat-paid-message-renderer #header-content-primary-column {
width: 100%;
flex-direction: row !important;
}
yt-live-chat-paid-message-renderer #author-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name * {
color: #ffffff !important;
font-family: var(--main-font-family);
font-size: 16px !important;
line-height: 16px !important;
}
yt-live-chat-paid-message-renderer #purchase-amount {
flex-shrink: 0;
}
yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount * {
color: #ffffff !important;
font-family: var(--main-font-family);
font-size: 18px !important;
line-height: 18px !important;
}
yt-live-chat-paid-message-renderer #content {
width: calc(100% - 32px);
position: relative;
padding-top: 0 !important;
}
yt-live-chat-paid-message-renderer #content #message {
animation: anim-member-text-in 300ms;
font-size: 16px;
margin-top: 6px;
border-radius: 20px;
padding: 7px 12px;
font-family: var(--main-font-family);
color: var(--main-message-color);
background-color: var(--main-message-background-color);
}
/* SuperChat Ticker */
yt-live-chat-ticker-renderer {
display: var(--main-ticker-display);
background-color: transparent !important;
box-shadow: none !important;
}
yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
color: #ffffff !important;
font-family: var(--main-font-family);
}
/* Hide badges */
yt-live-chat-text-message-renderer #chat-badges {
display: none !important;
}
/* Medal */
yt-live-chat-author-medal-renderer {
display: none;
}
/* Background colors */
body {
overflow: hidden;
background-color: rgba(0, 0, 0, 0);
}
按理来说应该不是css的问题，然后用的url是用自己的身份码，所以连接用的是
https://blive.chat/room/xxxxxxxx?roomKeyType=2&lang=zh
因为想着自己在加拿大多伦多么..也试过用cloudflare.blive.chat 但好像也不行....一片空白...
