test.css

/** 全局设置  -----------------------------------------------------------------------------------------------*/
/** 背景设置 */

/* div#fakebody {
	background-color:#fff;
}
*/

#example-container {
	width:800px;
	/* height:700px !important;
	*/
}
html {
	background-color:transparent;
}
body {
	/* 背景颜色测试 */
  background-color:transparent;
}
yt-live-chat-item-list-renderer {
	padding:0px 8px;
	/* margin-right:16px;
	*/
}
/** 全局【字体】设定 */
html * {
	font-family:"MiSans","\624b \4e66 \4f53 ","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5FAE \8F6F \96C5 \9ED1 ",SimHei,Arial,sans-serif !important;
	font-weight:900;
}
/** 用户名字【字体】设定 */
#author-name {
	font-family:"MiSans","\624b \4e66 \4f53 ","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5FAE \8F6F \96C5 \9ED1 ",SimHei,Arial,sans-serif !important;
	font-weight:900 !important;
}
/* 背景透明化设置*/
yt-live-chat-renderer {
	background-color:transparent !important;
}
yt-live-chat-author-chip #author-name {
	background-color:transparent !important;
}
/* 隐藏滚动条 */::-webkit-scrollbar {
	display:none;
}
/** 【可修改】*/
/** 全局block设置(一般弹幕,SC,MB) */
yt-live-chat-text-message-renderer {
	/** 每个block间距离,block包括一般弹幕消息条,打赏条 */
  /* margin:6px 0 8px 6px !important;
	*/
  padding:0 !important;
	clear:both;
}
yt-live-chat-paid-message-renderer,yt-live-chat-membership-item-renderer {
	/** 每个block间距离,block包括一般弹幕消息条,打赏条 */
  /* margin:6px 0 8px 6px !important;
	*/

  /** 每条弹幕&打赏的底板的圆角大小 */
  border-radius:0px;
	/* 若不了解CSS,请勿修改下方参数 */
  clear:both;
}
yt-live-chat-text-message-renderer #card {
	/* 若不了解CSS,请勿修改下方参数 */
  clear:both;
}
/** 【可修改】*/
/** 消息条长度是否和文字长度等长 */
/* 
  1. width:100%;
	(无论内容长度,消息条左右铺满,完全显示)
  2. width:fit-content;
	(对话框也就是背景,和内容(一般是文字)等长)
*/
/** 一般消息 */
yt-live-chat-text-message-renderer {
	/* width:98%;
	*/
  max-width:98%;
	width:fit-content;
}
/** MB上舰 */
yt-live-chat-membership-item-renderer {
	/* width:100%;
	*/
  width:fit-content;
}
/** SC打赏 */
yt-live-chat-paid-message-renderer {
	/* width:100%;
	*/
  width:fit-content;
}
/** 弹幕消息内容 -----------------------------------------------------------------------------------------------*/
/** 总体设置 -----------------------------------------------------------------------------------------------*/
/** 【消息】区块 */
yt-live-chat-text-message-renderer {
	margin:6px;
}
yt-live-chat-text-message-renderer #content {
	/** 【可修改】*/
  background:none !important;
	position:relative;
	margin:0px;
}
/** 全局 card */
yt-live-chat-text-message-renderer #card {
	width:100%;
	overflow:hidden !important;
}
yt-live-chat-text-message-renderer #card::before {
	content:"";
	display:block;
	position:absolute;
	width:12px;
	height:100%;
	/* border-top:24px solid white;
	*/
/* border-right:24px solid white;
	*/

/* top:4px;
	*/
/* left:4px;
	*/
animation-timing-function:cubic-bezier(0.8,0,0.2,1);
	animation:anim_prefix_line 800ms !important;
	animation-fill-mode:forwards !important;
}
@keyframes anim_prefix_line {
	0% {
	transform:translate(-12px,0%);
}
100% {
	transform:translate(0px,0%);
}
}yt-live-chat-text-message-renderer[privilegetype="1"] #card::before {
	border-top-color:#f43845;
	background-color:#f43845;
}
yt-live-chat-text-message-renderer[privilegetype="2"] #card::before {
	border-top-color:#8c4afa;
	background-color:#8c4afa;
}
yt-live-chat-text-message-renderer[privilegetype="3"] #card::before {
	border-top-color:#26c779;
	background-color:#26c779;
}
#images img {
	border-radius:14px;
	margin-right:6px;
}
/** 弹幕发送人的【内容】*/
#content.yt-live-chat-text-message-renderer {
	/* 设置每行字的最大宽度,和OBS内的浏览器宽度关联 */
/* max-width:450px;
	*/
  /* 让尾部标签紧贴左侧与否 */
  flex:1;
	/* 若不了解CSS,请勿修改下方参数 */
  display:flex;
	/** 全局弹幕的【文字】的【位置】  */
  align-self:baseline !important;
	position:relative;
	font-size:48px;
	font-weight:bold;
	/* 消息内容行高 */
  line-height:80px;
}
/** 自定义弹幕图片的设定 */

/** 弹幕发送人的【头像】大小 */
img.yt-img-shadow,#author-photo.yt-img-shadow,#author-photo.yt-live-chat-text-message-renderer {
	/* 一般来讲,宽度Width和高度Height会设置为相同的值 */
  /* overflow:visible !important;
	*/
  height:54px;
	width:54px;
	/* 圆角的大小 */
  border-radius:100%;
	/* border:#26c779 solid 4px;
	*/
}
#author-photo.yt-live-chat-text-message-renderer {
	display:none;
}
yt-live-chat-text-message-renderer #content {
	padding-left:20px;
}
/** 总体设置【名字】区块 */
/* 消除主播消息名字处的margin */
yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
	/* 让名字block以全部文本为一个blcok呈现 */
  display:flex;
	/* 让名字block以单行blcok呈现 */
  /* display:block;
	*/
  justify-content:flex-start;
	/** 启用下一行float,让消息跟在名字后边,而不会从下一行开始 */
  /* float:left;
	*/
  margin:0px !important;
}
/** 弹幕发送人的【勋章】 */
.yt-live-chat-author-medal-renderer {
	font-size:18px;
	line-height:18px;
}
yt-live-chat-author-medal-renderer {
	display:none;
}
yt-live-chat-author-medal-renderer[is-fan-group] {
	display:flex;
}
/* 官方表情包大小 */
yt-live-chat-text-message-renderer #image-and-message .emoji {
	width:auto !important;
	height:80px !important;
}
/* 换行表情包圆角大小 */
#image-and-message img[display="block"] {
	border-radius:8px;
}
/* 同行表情包圆角大小 */
#image-and-message img[display="inline"] {
	border-radius:2px;
	margin:0px 2px;
}
/** 弹幕消息样式【单独设定】 -----------------------------------------------------------------------------------------------*/

/** 除了owner以外的弹幕的【文字】的【位置】 */
yt-live-chat-text-message-renderer[author-type=""] #content {
	display:block !important;
	width:100% !important;
	margin-left:0px;
	margin-right:0;
}
/** 舰长弹幕后缀 */
yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer {
	overflow:visible;
}
/** 打赏相关(SC Super chat,MB Membership)内容 -----------------------------------------------------------------------------------------------*/
/** SC和MB,打赏和上舰的总体设置 --------------------------------------------------------------------------------------------------------------*/
yt-live-chat-paid-message-renderer,yt-live-chat-membership-item-renderer {
	padding:0;
}
/** SC和MB card */
#card.yt-live-chat-membership-item-renderer,#card.yt-live-chat-paid-message-renderer {
	background-color:transparent;
	box-shadow:none;
	overflow:visible;
	margin:0;
	border-radius:0;
}
/** SC和MB 上下两部分 */
yt-live-chat-membership-item-renderer[show-only-header] #header.yt-live-chat-membership-item-renderer,#header.yt-live-chat-paid-message-renderer,#content.yt-live-chat-paid-message-renderer {
	background-color:transparent;
	border-radius:0;
}
/** SC 消息内容  */

#header.yt-live-chat-paid-message-renderer {
	padding:4px 28px 0px 16px;
}
#content.yt-live-chat-paid-message-renderer {
	padding:4px 28px 0px 16px;
	margin:0;
}
#header.yt-live-chat-paid-message-renderer::before {
	background-color:var(--yt-live-chat-paid-message-header-background-color,#125aac);
}
#card.yt-live-chat-paid-message-renderer::before {
	z-index:-2;
	background-color:var(--yt-live-chat-paid-message-background-color,#1565c0);
	box-shadow:6px 6px 0 0 rgba(0,0,0,1.0);
}
yt-live-chat-membership-item-renderer #card::before {
	z-index:-1;
	box-shadow:6px 6px 0 0 rgba(0,0,0,1.0);
}
#card.yt-live-chat-membership-item-renderer::before,#card.yt-live-chat-paid-message-renderer::before,#header.yt-live-chat-paid-message-renderer::before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:0%;
	height:100%;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	animation-duration:1000ms;
	animation-name:anim_text_background;
}
yt-live-chat-paid-message-renderer * {
	color:#fafafa;
	font-size:48px;
}
#header-subtext.yt-live-chat-membership-item-renderer {
	font-family:"MiSans","\624b \4e66 \4f53 ","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5FAE \8F6F \96C5 \9ED1 ",SimHei,Arial,sans-serif !important;
	font-weight:900;
	font-size:48px;
}
/** 名字【颜色】 */
#author-name.yt-live-chat-paid-message-renderer,#author-name.member.yt-live-chat-author-chip {
	font-size:36px;
	font-weight:400;
	color:#ffffff !important;
}
/** SC 和 上舰者的头像avatar大小 */
yt-live-chat-paid-message-renderer #author-photo,yt-live-chat-paid-message-renderer #author-photo img,yt-live-chat-membership-item-renderer #author-photo,yt-live-chat-membership-item-renderer #author-photo img {
	width:80px !important;
	height:80px !important;
}
/* 舰长、提督、总督、icon */
img.yt-live-chat-author-badge-renderer {
	display:block;
	width:36px;
	height:36px;
}
#chat-badges {
	font-size:36px;
}
/** 当打赏为上舰,或打赏内容为空的时候 border 为完全矩形 */
yt-live-chat-membership-item-renderer[show-only-header],yt-live-chat-paid-message-renderer[show-only-header] {
	border-radius:0px !important;
}
/** SC打赏设置 --------------------------------------------------------------------------------------------------------------*/
/** 当SC没有内容时候隐藏下方 */
yt-live-chat-paid-message-renderer[show-only-header] #content.yt-live-chat-paid-message-renderer {
	display:none;
}
yt-live-chat-paid-message-renderer[show-only-header] #author-name {
	font-size:36px !important;
}
yt-live-chat-paid-message-renderer[show-only-header] #purchase-amount {
	font-size:48px !important;
}
/* yt-live-chat-paid-message-renderer[show-only-header] #header-content {
	padding-bottom:4px !important;
}
*/

/** MB上舰设置 --------------------------------------------------------------------------------------------------------------*/
/** 上舰内容【位置】 */
#header.yt-live-chat-membership-item-renderer {
	padding-left:10px;
}
/** 上舰长背景颜色 */
yt-live-chat-membership-item-renderer #card::before {
	background-color:#26c779;
}
/** 上提督背景颜色 */
yt-live-chat-membership-item-renderer[privilegeType="2"] #card::before {
	background-color:#8c4afa;
}
/** 上总督背景颜色 */
yt-live-chat-membership-item-renderer[privilegeType="1"] #card::before {
	background-color:#f43845;
}
/** 上舰消息前缀 */
yt-live-chat-membership-item-renderer #header-subtext::before {
	content:"欢迎";
	margin-right:2px;
}
/** 上舰消息后缀 */
yt-live-chat-membership-item-renderer #header-subtext::after {
	content:"上舰";
	margin-left:2px;
}
/** 顶部SC,MB 倒计时 -----------------------------------------------------------------------------------------------*/
/** ticker 顶部SC,MB的总体设定 */
#container.yt-live-chat-ticker-renderer,#items.yt-live-chat-ticker-renderer,#container.yt-live-chat-ticker-paid-message-item-renderer,#content.yt-live-chat-ticker-paid-message-item-renderer {
	height:100% !important;
}
/* ticker文字大小 */
#content.yt-live-chat-ticker-paid-message-item-renderer[type="2"] {
	padding-right:24px !important;
	line-height:32px !important;
}
#content.yt-live-chat-ticker-paid-message-item-renderer[type="2"]::after {
	content:'上舰' !important;
	font-size:32px !important;
}
/** 顶部贴纸 ticker 全局设置 */
yt-live-chat-ticker-renderer {
	display:none !important;
}
/** 动画设置 -----------------------------------------------------------------------------------------------*/
#item-offset.yt-live-chat-item-list-renderer,#item.yt-live-chat-item-list-renderer {
	animation-timing-function:cubic-bezier(0.2,0,0.8,1);
	animation-fill-mode:both;
	animation-delay:3000ms;
}
/** block 的出现动画 */
yt-live-chat-membership-item-renderer,yt-live-chat-paid-message-renderer,yt-live-chat-legacy-paid-message-renderer,yt-live-chat-ticker-paid-message-item-renderer {
	animation-timing-function:cubic-bezier(0.8,0,0.2,1);
	animation:anim_bottom_up_fade 400ms;
	animation-fill-mode:both;
}
/** 从下往上升起 + 淡入 */
@keyframes anim_bottom_up_fade {
	0% {
	opacity:0;
	transform:translateY(28px);
}
40% {
	opacity:0;
}
100% {
	opacity:1;
	transform:none;
}
}/* Thread 设定 */
#thread {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	/* background-color:white;
	*/
}
#thread img.yt-img-shadow {
	visibility:hidden;
}
#thread yt-img-shadow {
	height:0 !important;
}
#thread>#card:first-child yt-img-shadow {
	height:auto !important;
}
#thread>#card:first-child img.yt-img-shadow {
	visibility:visible;
	height:auto;
}
#thread #content::before {
	content:"";
	display:block;
	position:absolute;
	z-index:100;
	top:-4px;
	left:-37px;
	opacity:1;
	height:calc(100% + 8px);
	width:6px;
	border-radius:6px;
	background-color:#cfd9de;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	animation-duration:600ms;
	animation-name:anim_connect_line;
}
/* 竖线变化动画 */
@keyframes anim_connect_line {
	0% {
	opacity:0;
}
100% {
	opacity:1;
}
}#thread>#card:first-child #content::before {
	top:auto;
	bottom:-4px;
	height:calc(100% - 72px);
}
#thread>#card:last-child #content::before {
	height:calc(100% - 10px);
}
#thread>#card:last-child:first-child #content::before {
	display:none;
}
/* repeated badge */
.el-badge.yt-live-chat-text-message-renderer {
	margin-left:8px;
	top:8px;
}
.el-badge__content {
	height:auto;
	padding:4px 8px;
	font-size:36px !important;
	line-height:40px !important;
}
#medal-card.yt-live-chat-author-medal-renderer {
	display:none !important;
}
yt-live-chat-text-message-renderer[is-fan-group] #thread>#card:first-child yt-img-shadow::after {
	content:"";
	top:44px;
	left:48px;
	height:28px;
	width:28px;
	display:block;
	position:absolute;
	background-size:28px;
	background-image:url(/user/icon_verify.svg);
	/* background-color:white;
	*/
}
yt-live-chat-text-message-renderer,yt-live-chat-membership-item-renderer,yt-live-chat-paid-message-renderer {
	max-width:600px;
}
yt-live-chat-author-chip {
	display:none !important;
}
yt-live-chat-author-chip.yt-live-chat-membership-item-renderer {
	display:block !important;
}
/* Outlines */
/* #content {
	text-shadow:-2px -2px #333,-2px -1px #333,-2px 0px #333,-2px 1px #333,-2px 2px #333,-1px -2px #333,-1px -1px #333,-1px 0px #333,-1px 1px #333,-1px 2px #333,0px -2px #333,0px -1px #333,0px 0px #333,0px 1px #333,0px 2px #333,1px -2px #333,1px -1px #333,1px 0px #333,1px 1px #333,1px 2px #333,2px -2px #333,2px -1px #333,2px 0px #333,2px 1px #333,2px 2px #333;
}
*/

#message.yt-live-chat-text-message-renderer {
	--text-color:black;
	color:black !important;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	animation-duration:600ms;
	animation-name:anim_message_text;
}
/* 文字背景 */
#image-and-message.yt-live-chat-text-message-renderer .emoji.yt-live-chat-text-message-renderer,#image-and-message img[display="block"] {
	margin:8px 2px;
}
#image-and-message {
	padding:0 10px 0 0;
}
#author-photo,#image-and-message {
	z-index:10;
}
#card {
	position:relative !important;
}
/* 出现动画 ———————————————————— */
yt-live-chat-text-message-renderer::before {
	content:"";
	position:absolute;
	z-index:-1;
	left:0;
	display:block;
	background-color:white;
	width:0%;
	height:100%;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	animation-duration:600ms;
	animation-name:anim_text_background;
	box-shadow:6px 6px 0px 0px rgba(0,0,0,1.0);
}
/* 文字变化动画 */
@keyframes anim_message_text {
	0% {
	opacity:0;
}
100% {
	opacity:1;
}
}/* 白色背景变化动画 */
@keyframes anim_text_background {
	0% {
	width:0%;
}
100% {
	width:100%;
}
}/* 内容 mask 遮罩动画 */
#author-photo {
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	animation-duration:400ms;
	animation-name:anim_message_text;
}
#image-and-message,#header-content-primary-column,#content #message.yt-live-chat-paid-message-renderer {
	mask:linear-gradient(transparent,transparent);
	-webkit-mask:linear-gradient(90deg,transparent,transparent);
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	animation-duration:500ms;
	animation-delay:400ms;
	animation-name:anim_mask;
}
#image-and-message {
	animation-duration:500ms;
	animation-delay:200ms;
}
@keyframes anim_mask {
	0% {
	-webkit-mask:linear-gradient(90deg,white 0%,transparent 10%);
}
1% {
	-webkit-mask:linear-gradient(90deg,white 1%,transparent 11%);
}
2% {
	-webkit-mask:linear-gradient(90deg,white 2%,transparent 12%);
}
3% {
	-webkit-mask:linear-gradient(90deg,white 3%,transparent 13%);
}
4% {
	-webkit-mask:linear-gradient(90deg,white 4%,transparent 14%);
}
5% {
	-webkit-mask:linear-gradient(90deg,white 5%,transparent 15%);
}
6% {
	-webkit-mask:linear-gradient(90deg,white 6%,transparent 16%);
}
7% {
	-webkit-mask:linear-gradient(90deg,white 7%,transparent 17%);
}
8% {
	-webkit-mask:linear-gradient(90deg,white 8%,transparent 18%);
}
9% {
	-webkit-mask:linear-gradient(90deg,white 9%,transparent 19%);
}
10% {
	-webkit-mask:linear-gradient(90deg,white 10%,transparent 20%);
}
11% {
	-webkit-mask:linear-gradient(90deg,white 11%,transparent 21%);
}
12% {
	-webkit-mask:linear-gradient(90deg,white 12%,transparent 22%);
}
13% {
	-webkit-mask:linear-gradient(90deg,white 13%,transparent 23%);
}
14% {
	-webkit-mask:linear-gradient(90deg,white 14%,transparent 24%);
}
15% {
	-webkit-mask:linear-gradient(90deg,white 15%,transparent 25%);
}
16% {
	-webkit-mask:linear-gradient(90deg,white 16%,transparent 26%);
}
17% {
	-webkit-mask:linear-gradient(90deg,white 17%,transparent 27%);
}
18% {
	-webkit-mask:linear-gradient(90deg,white 18%,transparent 28%);
}
19% {
	-webkit-mask:linear-gradient(90deg,white 19%,transparent 29%);
}
20% {
	-webkit-mask:linear-gradient(90deg,white 20%,transparent 30%);
}
21% {
	-webkit-mask:linear-gradient(90deg,white 21%,transparent 31%);
}
22% {
	-webkit-mask:linear-gradient(90deg,white 22%,transparent 32%);
}
23% {
	-webkit-mask:linear-gradient(90deg,white 23%,transparent 33%);
}
24% {
	-webkit-mask:linear-gradient(90deg,white 24%,transparent 34%);
}
25% {
	-webkit-mask:linear-gradient(90deg,white 25%,transparent 35%);
}
26% {
	-webkit-mask:linear-gradient(90deg,white 26%,transparent 36%);
}
27% {
	-webkit-mask:linear-gradient(90deg,white 27%,transparent 37%);
}
28% {
	-webkit-mask:linear-gradient(90deg,white 28%,transparent 38%);
}
29% {
	-webkit-mask:linear-gradient(90deg,white 29%,transparent 39%);
}
30% {
	-webkit-mask:linear-gradient(90deg,white 30%,transparent 40%);
}
31% {
	-webkit-mask:linear-gradient(90deg,white 31%,transparent 41%);
}
32% {
	-webkit-mask:linear-gradient(90deg,white 32%,transparent 42%);
}
33% {
	-webkit-mask:linear-gradient(90deg,white 33%,transparent 43%);
}
34% {
	-webkit-mask:linear-gradient(90deg,white 34%,transparent 44%);
}
35% {
	-webkit-mask:linear-gradient(90deg,white 35%,transparent 45%);
}
36% {
	-webkit-mask:linear-gradient(90deg,white 36%,transparent 46%);
}
37% {
	-webkit-mask:linear-gradient(90deg,white 37%,transparent 47%);
}
38% {
	-webkit-mask:linear-gradient(90deg,white 38%,transparent 48%);
}
39% {
	-webkit-mask:linear-gradient(90deg,white 39%,transparent 49%);
}
40% {
	-webkit-mask:linear-gradient(90deg,white 40%,transparent 50%);
}
41% {
	-webkit-mask:linear-gradient(90deg,white 41%,transparent 51%);
}
42% {
	-webkit-mask:linear-gradient(90deg,white 42%,transparent 52%);
}
43% {
	-webkit-mask:linear-gradient(90deg,white 43%,transparent 53%);
}
44% {
	-webkit-mask:linear-gradient(90deg,white 44%,transparent 54%);
}
45% {
	-webkit-mask:linear-gradient(90deg,white 45%,transparent 55%);
}
46% {
	-webkit-mask:linear-gradient(90deg,white 46%,transparent 56%);
}
47% {
	-webkit-mask:linear-gradient(90deg,white 47%,transparent 57%);
}
48% {
	-webkit-mask:linear-gradient(90deg,white 48%,transparent 58%);
}
49% {
	-webkit-mask:linear-gradient(90deg,white 49%,transparent 59%);
}
50% {
	-webkit-mask:linear-gradient(90deg,white 50%,transparent 60%);
}
51% {
	-webkit-mask:linear-gradient(90deg,white 51%,transparent 61%);
}
52% {
	-webkit-mask:linear-gradient(90deg,white 52%,transparent 62%);
}
53% {
	-webkit-mask:linear-gradient(90deg,white 53%,transparent 63%);
}
54% {
	-webkit-mask:linear-gradient(90deg,white 54%,transparent 64%);
}
55% {
	-webkit-mask:linear-gradient(90deg,white 55%,transparent 65%);
}
56% {
	-webkit-mask:linear-gradient(90deg,white 56%,transparent 66%);
}
57% {
	-webkit-mask:linear-gradient(90deg,white 57%,transparent 67%);
}
58% {
	-webkit-mask:linear-gradient(90deg,white 58%,transparent 68%);
}
59% {
	-webkit-mask:linear-gradient(90deg,white 59%,transparent 69%);
}
60% {
	-webkit-mask:linear-gradient(90deg,white 60%,transparent 70%);
}
61% {
	-webkit-mask:linear-gradient(90deg,white 61%,transparent 71%);
}
62% {
	-webkit-mask:linear-gradient(90deg,white 62%,transparent 72%);
}
63% {
	-webkit-mask:linear-gradient(90deg,white 63%,transparent 73%);
}
64% {
	-webkit-mask:linear-gradient(90deg,white 64%,transparent 74%);
}
65% {
	-webkit-mask:linear-gradient(90deg,white 65%,transparent 75%);
}
66% {
	-webkit-mask:linear-gradient(90deg,white 66%,transparent 76%);
}
67% {
	-webkit-mask:linear-gradient(90deg,white 67%,transparent 77%);
}
68% {
	-webkit-mask:linear-gradient(90deg,white 68%,transparent 78%);
}
69% {
	-webkit-mask:linear-gradient(90deg,white 69%,transparent 79%);
}
70% {
	-webkit-mask:linear-gradient(90deg,white 70%,transparent 80%);
}
71% {
	-webkit-mask:linear-gradient(90deg,white 71%,transparent 81%);
}
72% {
	-webkit-mask:linear-gradient(90deg,white 72%,transparent 82%);
}
73% {
	-webkit-mask:linear-gradient(90deg,white 73%,transparent 83%);
}
74% {
	-webkit-mask:linear-gradient(90deg,white 74%,transparent 84%);
}
75% {
	-webkit-mask:linear-gradient(90deg,white 75%,transparent 85%);
}
76% {
	-webkit-mask:linear-gradient(90deg,white 76%,transparent 86%);
}
77% {
	-webkit-mask:linear-gradient(90deg,white 77%,transparent 87%);
}
78% {
	-webkit-mask:linear-gradient(90deg,white 78%,transparent 88%);
}
79% {
	-webkit-mask:linear-gradient(90deg,white 79%,transparent 89%);
}
80% {
	-webkit-mask:linear-gradient(90deg,white 80%,transparent 90%);
}
81% {
	-webkit-mask:linear-gradient(90deg,white 81%,transparent 91%);
}
82% {
	-webkit-mask:linear-gradient(90deg,white 82%,transparent 92%);
}
83% {
	-webkit-mask:linear-gradient(90deg,white 83%,transparent 93%);
}
84% {
	-webkit-mask:linear-gradient(90deg,white 84%,transparent 94%);
}
85% {
	-webkit-mask:linear-gradient(90deg,white 85%,transparent 95%);
}
86% {
	-webkit-mask:linear-gradient(90deg,white 86%,transparent 96%);
}
87% {
	-webkit-mask:linear-gradient(90deg,white 87%,transparent 97%);
}
88% {
	-webkit-mask:linear-gradient(90deg,white 88%,transparent 98%);
}
89% {
	-webkit-mask:linear-gradient(90deg,white 89%,transparent 99%);
}
90% {
	-webkit-mask:linear-gradient(90deg,white 90%,transparent 100%);
}
91% {
	-webkit-mask:linear-gradient(90deg,white 91%,transparent 101%);
}
92% {
	-webkit-mask:linear-gradient(90deg,white 92%,transparent 102%);
}
93% {
	-webkit-mask:linear-gradient(90deg,white 93%,transparent 103%);
}
94% {
	-webkit-mask:linear-gradient(90deg,white 94%,transparent 104%);
}
95% {
	-webkit-mask:linear-gradient(90deg,white 95%,transparent 105%);
}
96% {
	-webkit-mask:linear-gradient(90deg,white 96%,transparent 106%);
}
97% {
	-webkit-mask:linear-gradient(90deg,white 97%,transparent 107%);
}
98% {
	-webkit-mask:linear-gradient(90deg,white 98%,transparent 108%);
}
99% {
	-webkit-mask:linear-gradient(90deg,white 99%,transparent 109%);
}
100% {
	-webkit-mask:linear-gradient(90deg,white 100%,transparent 110%);
}
}/** 淡出动画 */
#image-and-message {
	display:block !important;
	font-style:normal !important;
}
/** 从右往左划出 + 缩小 + 淡出动画 */
@keyframes anim_scale_fade_out {
	0%,30% {
	opacity:1;
	transform:none;
}
100% {
	opacity:0;
	transform:translate(-100%,0%);
}
}yt-live-chat-text-message-renderer[is-deleted] #card {
	background-color:white;
}
yt-live-chat-text-message-renderer[is-deleted],yt-live-chat-membership-item-renderer[is-deleted],yt-live-chat-paid-message-renderer[is-deleted] {
	animation-timing-function:cubic-bezier(0.8,0,0.2,1);
	animation:anim_scale_fade_out 500ms !important;
	animation-fill-mode:forwards !important;
}
/** 淡出 */
@keyframes anim_fade_out {
	0% {
	opacity:1;
}
100% {
	opacity:0;
}
}yt-live-chat-text-message-renderer[is-deleted] #content,yt-live-chat-membership-item-renderer[is-deleted] #header,yt-live-chat-paid-message-renderer[is-deleted] #header,yt-live-chat-paid-message-renderer[is-deleted] #content {
	animation-timing-function:cubic-bezier(0.8,0,0.2,1);
	animation:anim_fade_out 300ms;
	animation-fill-mode:forwards;
}
/** 扫光效果 */
yt-live-chat-text-message-renderer,yt-live-chat-membership-item-renderer,yt-live-chat-paid-message-renderer {
	margin:6px !important;
	overflow:visible !important;
}
yt-live-chat-text-message-renderer[author-type="member"] #card::after {
	content:"";
	position:absolute;
	align-items:baseline;
	top:0;
	left:-1700px;
	width:100%;
	height:100%;
	opacity:0;
	background-image:linear-gradient(0deg,#26c779,#26c779 10%,#26c779 90%,#26c779);
	mask:linear-gradient(90deg,transparent 10%,white 100%);
	-webkit-mask:linear-gradient(90deg,transparent 10%,white 100%);
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation:searchLights_interval cubic-bezier(0.6,0,0.4,1) 8000ms infinite;
}
yt-live-chat-text-message-renderer[author-type="member"][privilegetype="2"] #card::after {
	background-image:linear-gradient(0deg,#8c4afa,#8c4afa 10%,#8c4afa 90%,#8c4afa);
}
yt-live-chat-text-message-renderer[author-type="member"][privilegetype="1"] #card::after {
	background-image:linear-gradient(0deg,#f43845,#f43845 10%,#f43845 90%,#f43845);
}
@keyframes searchLights_interval {
	0% {
	left:-120%;
	opacity:0;
}
17% {
	opacity:0.5;
}
34% {
	left:120%;
	opacity:0;
}
100% {
	left:120%;
}
}

yt-live-chat-text-message-renderer.leaving,
yt-live-chat-membership-item-renderer.leaving #card,
yt-live-chat-paid-message-renderer.leaving #card {
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0.0, 1, 1);
}

yt-live-chat-text-message-renderer.collapsing,
yt-live-chat-membership-item-renderer.collapsing,
yt-live-chat-paid-message-renderer.collapsing {
  transition: height 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}