mirror of
https://github.com/xfgryujk/blivechat.git
synced 2025-02-07 10:10:19 +08:00
更高仿YouTube
This commit is contained in:
John Smith
parent
846e830f9c
commit
45173e5162
@ -1,209 +0,0 @@
|
||||
yt-live-chat-text-message-renderer {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
padding: 4px 24px;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #content {
|
||||
-ms-align-self: center;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #timestamp {
|
||||
display: none;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #author-name {
|
||||
margin-right: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #author-photo {
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #author-badges {
|
||||
vertical-align: text-bottom;
|
||||
display: -ms-inline-flexbox;
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #message {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
yt-live-chat-author-badge-renderer {
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: currentColor;
|
||||
margin-right: 4px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 8px 24px;
|
||||
padding: 8px 16px;
|
||||
background-color: #0f9d58;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
min-height: 40px;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer #author-photo {
|
||||
background-color: transparent;
|
||||
margin-right: 16px;
|
||||
overflow: hidden;
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
-ms-align-self: flex-start;
|
||||
-webkit-align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer #content {
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer #event-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer #detail-text {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
margin: 8px 24px;
|
||||
font-size: 15px;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer #header {
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
padding: 8px 16px;
|
||||
min-height: 20px;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer #header-content {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer #author-photo {
|
||||
background-color: transparent;
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer #author-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer #content {
|
||||
padding: 4px 16px 8px 16px;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-paid-message-item-renderer {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
border-radius: 200px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-paid-message-item-renderer #content {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-paid-message-item-renderer #fake-avatar {
|
||||
display: inline-block;
|
||||
background-color: red;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 4px;
|
||||
border-radius: 24px;
|
||||
|
||||
}
|
||||
@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<yt-live-chat-legacy-paid-message-renderer>
|
||||
<div id="author-photo" :style="`background-image: url(${avatarUrl})`"></div>
|
||||
<div id="content">
|
||||
<div id="event-text">{{title}}</div>
|
||||
<div id="detail-text">{{content}}</div>
|
||||
<yt-live-chat-legacy-paid-message-renderer class="style-scope yt-live-chat-item-list-renderer">
|
||||
<div id="card" class="style-scope yt-live-chat-legacy-paid-message-renderer">
|
||||
<yt-img-shadow id="author-photo" class="style-scope yt-live-chat-legacy-paid-message-renderer no-transition"
|
||||
height="40" width="40" style="background-color: transparent;" loaded
|
||||
>
|
||||
<img id="img" class="style-scope yt-img-shadow" alt="" height="40" width="40" :src="avatarUrl">
|
||||
</yt-img-shadow>
|
||||
<div id="content" class="style-scope yt-live-chat-legacy-paid-message-renderer">
|
||||
<div id="content-primary-column" class="style-scope yt-live-chat-legacy-paid-message-renderer">
|
||||
<div id="author-name" class="style-scope yt-live-chat-legacy-paid-message-renderer">{{authorName}}</div>
|
||||
<div id="event-text" class="style-scope yt-live-chat-legacy-paid-message-renderer">{{title}}</div>
|
||||
<div id="detail-text" class="style-scope yt-live-chat-legacy-paid-message-renderer">{{content}}</div>
|
||||
</div>
|
||||
<div id="timestamp" class="style-scope yt-live-chat-legacy-paid-message-renderer">{{time}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="inline-action-button-container" class="style-scope yt-live-chat-legacy-paid-message-renderer" aria-hidden="true">
|
||||
<div id="inline-action-buttons" class="style-scope yt-live-chat-legacy-paid-message-renderer"></div>
|
||||
</div>
|
||||
</yt-live-chat-legacy-paid-message-renderer>
|
||||
</template>
|
||||
@ -13,8 +26,272 @@ export default {
|
||||
name: 'LegacyPaidMessage',
|
||||
props: {
|
||||
avatarUrl: String,
|
||||
authorName: String,
|
||||
title: String,
|
||||
content: String
|
||||
content: String,
|
||||
time: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- yt-live-chat-legacy-paid-message-renderer -->
|
||||
<style>
|
||||
canvas.yt-live-chat-legacy-paid-message-renderer, caption.yt-live-chat-legacy-paid-message-renderer, center.yt-live-chat-legacy-paid-message-renderer, cite.yt-live-chat-legacy-paid-message-renderer, code.yt-live-chat-legacy-paid-message-renderer, dd.yt-live-chat-legacy-paid-message-renderer, del.yt-live-chat-legacy-paid-message-renderer, dfn.yt-live-chat-legacy-paid-message-renderer, div.yt-live-chat-legacy-paid-message-renderer, dl.yt-live-chat-legacy-paid-message-renderer, dt.yt-live-chat-legacy-paid-message-renderer, em.yt-live-chat-legacy-paid-message-renderer, embed.yt-live-chat-legacy-paid-message-renderer, fieldset.yt-live-chat-legacy-paid-message-renderer, font.yt-live-chat-legacy-paid-message-renderer, form.yt-live-chat-legacy-paid-message-renderer, h1.yt-live-chat-legacy-paid-message-renderer, h2.yt-live-chat-legacy-paid-message-renderer, h3.yt-live-chat-legacy-paid-message-renderer, h4.yt-live-chat-legacy-paid-message-renderer, h5.yt-live-chat-legacy-paid-message-renderer, h6.yt-live-chat-legacy-paid-message-renderer, hr.yt-live-chat-legacy-paid-message-renderer, i.yt-live-chat-legacy-paid-message-renderer, iframe.yt-live-chat-legacy-paid-message-renderer, img.yt-live-chat-legacy-paid-message-renderer, ins.yt-live-chat-legacy-paid-message-renderer, kbd.yt-live-chat-legacy-paid-message-renderer, label.yt-live-chat-legacy-paid-message-renderer, legend.yt-live-chat-legacy-paid-message-renderer, li.yt-live-chat-legacy-paid-message-renderer, menu.yt-live-chat-legacy-paid-message-renderer, object.yt-live-chat-legacy-paid-message-renderer, ol.yt-live-chat-legacy-paid-message-renderer, p.yt-live-chat-legacy-paid-message-renderer, pre.yt-live-chat-legacy-paid-message-renderer, q.yt-live-chat-legacy-paid-message-renderer, s.yt-live-chat-legacy-paid-message-renderer, samp.yt-live-chat-legacy-paid-message-renderer, small.yt-live-chat-legacy-paid-message-renderer, span.yt-live-chat-legacy-paid-message-renderer, strike.yt-live-chat-legacy-paid-message-renderer, strong.yt-live-chat-legacy-paid-message-renderer, sub.yt-live-chat-legacy-paid-message-renderer, sup.yt-live-chat-legacy-paid-message-renderer, table.yt-live-chat-legacy-paid-message-renderer, tbody.yt-live-chat-legacy-paid-message-renderer, td.yt-live-chat-legacy-paid-message-renderer, tfoot.yt-live-chat-legacy-paid-message-renderer, th.yt-live-chat-legacy-paid-message-renderer, thead.yt-live-chat-legacy-paid-message-renderer, tr.yt-live-chat-legacy-paid-message-renderer, tt.yt-live-chat-legacy-paid-message-renderer, u.yt-live-chat-legacy-paid-message-renderer, ul.yt-live-chat-legacy-paid-message-renderer, var.yt-live-chat-legacy-paid-message-renderer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.yt-live-chat-legacy-paid-message-renderer[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#timestamp.yt-live-chat-legacy-paid-message-renderer {
|
||||
display: var(--yt-live-chat-item-timestamp-display, inline);
|
||||
margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0);
|
||||
color: var(--yt-live-chat-tertiary-text-color);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#author-photo.yt-live-chat-legacy-paid-message-renderer {
|
||||
display: block;
|
||||
margin-right: 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
#menu-button.yt-live-chat-legacy-paid-message-renderer {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#menu.yt-live-chat-legacy-paid-message-renderer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: translateX(100px);
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer:hover #menu.yt-live-chat-legacy-paid-message-renderer, yt-live-chat-legacy-paid-message-renderer[menu-visible] #menu.yt-live-chat-legacy-paid-message-renderer {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer:focus-within #menu.yt-live-chat-legacy-paid-message-renderer {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#inline-action-button-container.yt-live-chat-legacy-paid-message-renderer {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 0;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
background-color: var(--yt-live-chat-moderation-mode-hover-background-color);
|
||||
display: none;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-legacy-paid-message-renderer {
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
display: var(--yt-live-chat-inline-action-button-container-display, none);
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-legacy-paid-message-renderer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-legacy-paid-message-renderer {
|
||||
display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block);
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>*.yt-live-chat-legacy-paid-message-renderer, #additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>*.yt-live-chat-legacy-paid-message-renderer {
|
||||
--yt-button-icon-size: 36px;
|
||||
--yt-button-icon-padding: 6px;
|
||||
color: hsl(0, 0%, 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>*.yt-live-chat-legacy-paid-message-renderer {
|
||||
background: hsla(0, 0%, 6.7%, .8);
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>.yt-live-chat-legacy-paid-message-renderer:hover {
|
||||
background: hsl(0, 0%, 6.7%);
|
||||
}
|
||||
|
||||
#additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>*.yt-live-chat-legacy-paid-message-renderer {
|
||||
color: var(--yt-live-chat-additional-inline-action-button-color);
|
||||
background: var(--yt-live-chat-additional-inline-action-button-background-color);
|
||||
}
|
||||
|
||||
#additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>.yt-live-chat-legacy-paid-message-renderer:hover {
|
||||
background: var(--yt-live-chat-additional-inline-action-button-background-color-hover);
|
||||
}
|
||||
|
||||
#additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer:not(:empty) {
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>*.yt-live-chat-legacy-paid-message-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>*.yt-live-chat-legacy-paid-message-renderer:not(:first-child) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer {
|
||||
position: relative;
|
||||
display: block;
|
||||
--yt-live-chat-sponsor-color: #0f9d58;
|
||||
--yt-live-chat-item-timestamp-display: var(--yt-live-chat-paid-message-timestamp-display, none);
|
||||
padding: 4px 24px;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#card.yt-live-chat-legacy-paid-message-renderer {
|
||||
position: relative;
|
||||
padding: 8px 16px;
|
||||
background-color: var(--yt-live-chat-sponsor-color);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #card.yt-live-chat-legacy-paid-message-renderer {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background-color: var(--yt-live-chat-background-color);
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
#author-photo.yt-live-chat-legacy-paid-message-renderer {
|
||||
-ms-align-self: flex-start;
|
||||
-webkit-align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
#author-name.yt-live-chat-legacy-paid-message-renderer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-legacy-paid-message-renderer {
|
||||
display: block;
|
||||
margin-right: 8px;
|
||||
color: var(--yt-live-chat-secondary-text-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#content.yt-live-chat-legacy-paid-message-renderer {
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #content.yt-live-chat-legacy-paid-message-renderer {
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #content-primary-column.yt-live-chat-legacy-paid-message-renderer {
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-align: baseline;
|
||||
-webkit-align-items: baseline;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
#event-text.yt-live-chat-legacy-paid-message-renderer {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #event-text.yt-live-chat-legacy-paid-message-renderer {
|
||||
display: inline;
|
||||
height: 24px;
|
||||
min-width: 16px;
|
||||
border-radius: 12px;
|
||||
margin-right: 8px;
|
||||
padding: 0 12px;
|
||||
background-color: var(--yt-live-chat-sponsor-color);
|
||||
color: hsl(0, 0%, 100%);
|
||||
display: inline-flex;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
|
||||
#detail-text.yt-live-chat-legacy-paid-message-renderer {
|
||||
font-size: 15px;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
#detail-text.yt-live-chat-legacy-paid-message-renderer .emoji.yt-live-chat-legacy-paid-message-renderer {
|
||||
width: var(--yt-live-chat-emoji-size);
|
||||
height: var(--yt-live-chat-emoji-size);
|
||||
margin: -1px 2px 1px 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #detail-text.yt-live-chat-legacy-paid-message-renderer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.yt-live-chat-legacy-paid-message-renderer {
|
||||
display: inline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#detail-text.yt-live-chat-legacy-paid-message-renderer a.yt-live-chat-legacy-paid-message-renderer {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
#detail-text.yt-live-chat-legacy-paid-message-renderer a.yt-live-chat-legacy-paid-message-renderer .mention.yt-live-chat-legacy-paid-message-renderer {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#menu.yt-live-chat-legacy-paid-message-renderer {
|
||||
background: linear-gradient(to right, transparent, var(--yt-live-chat-sponsor-color) 100%);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #menu.yt-live-chat-legacy-paid-message-renderer {
|
||||
margin-top: 8px;
|
||||
background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,69 +1,497 @@
|
||||
<template>
|
||||
<yt-live-chat-paid-message-renderer>
|
||||
<div id="header" :style="'background-color: ' + headerColor">
|
||||
<div id="author-photo" :style="`background-image: url(${avatarUrl})`"></div>
|
||||
<div id="header-content">
|
||||
<div id="author-name">{{authorName}}</div>
|
||||
<div id="purchase-amount">CN¥{{price}}</div>
|
||||
<yt-live-chat-paid-message-renderer class="style-scope yt-live-chat-item-list-renderer" allow-animations :style="{
|
||||
'--yt-live-chat-paid-message-primary-color': getColor('contentBg'),
|
||||
'--yt-live-chat-paid-message-secondary-color': getColor('headerBg'),
|
||||
'--yt-live-chat-paid-message-header-color': getColor('header'),
|
||||
'--yt-live-chat-paid-message-author-name-color': getColor('authorName'),
|
||||
'--yt-live-chat-paid-message-timestamp-color': getColor('time'),
|
||||
'--yt-live-chat-paid-message-color': getColor('content'),
|
||||
}"
|
||||
>
|
||||
<div id="card" class="style-scope yt-live-chat-paid-message-renderer">
|
||||
<div id="header" class="style-scope yt-live-chat-paid-message-renderer">
|
||||
<yt-img-shadow id="author-photo" class="style-scope yt-live-chat-legacy-paid-message-renderer no-transition"
|
||||
height="40" width="40" style="background-color: transparent;" loaded
|
||||
>
|
||||
<img id="img" class="style-scope yt-img-shadow" alt="" height="40" width="40" :src="avatarUrl">
|
||||
</yt-img-shadow>
|
||||
<div id="header-content" class="style-scope yt-live-chat-paid-message-renderer">
|
||||
<div id="header-content-primary-column" class="style-scope yt-live-chat-paid-message-renderer">
|
||||
<div id="author-name" class="style-scope yt-live-chat-paid-message-renderer">{{authorName}}</div>
|
||||
<div id="purchase-amount" class="style-scope yt-live-chat-paid-message-renderer">CN¥{{price}}</div>
|
||||
</div>
|
||||
<span id="timestamp" class="style-scope yt-live-chat-paid-message-renderer">{{time}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="content" class="style-scope yt-live-chat-paid-message-renderer">
|
||||
<div id="message" dir="auto" class="style-scope yt-live-chat-paid-message-renderer">
|
||||
{{content}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="content" :style="'background-color: ' + contentColor">
|
||||
<div id="message" dir="auto">{{content}}</div>
|
||||
</div>
|
||||
</yt-live-chat-paid-message-renderer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const LEVEL_TO_HEADER_COLOR = [
|
||||
'rgba(21,101,192,1)', //$1蓝
|
||||
'rgba(0,184,212,1)', // $2浅蓝
|
||||
'rgba(0,191,165,1)', // $5绿
|
||||
'rgba(255,179,0,1)', // $10黄
|
||||
'rgba(230,81,0,1)', // $20橙
|
||||
'rgba(194,24,91,1)', // $50品红
|
||||
'rgba(208,0,0,1)' // $100红
|
||||
]
|
||||
const LEVEL_TO_CONTENT_COLOR = [
|
||||
'rgba(30,136,229,1)', //$1蓝
|
||||
'rgba(0,229,255,1)', // $2浅蓝
|
||||
'rgba(29,233,182,1)', // $5绿
|
||||
'rgba(255,202,40,1)', // $10黄
|
||||
'rgba(245,124,0,1)', // $20橙
|
||||
'rgba(233,30,99,1)', // $50品红
|
||||
'rgba(230,33,23,1)' // $100红
|
||||
const COLORS = [
|
||||
{ // $100红
|
||||
price: 1245, // >= 1245，小电视飞船
|
||||
contentBg: 'rgba(230,33,23,1)',
|
||||
headerBg: 'rgba(208,0,0,1)',
|
||||
header: 'rgba(255,255,255,1)',
|
||||
authorName: 'rgba(255,255,255,0.701961)',
|
||||
time: 'rgba(255,255,255,0.501961)',
|
||||
content: 'rgba(255,255,255,1)'
|
||||
}, { // $50品红
|
||||
price: 450, // 450~1245，摩天大楼
|
||||
contentBg: 'rgba(233,30,99,1)',
|
||||
headerBg: 'rgba(194,24,91,1)',
|
||||
header: 'rgba(255,255,255,1)',
|
||||
authorName: 'rgba(255,255,255,0.701961)',
|
||||
time: 'rgba(255,255,255,0.501961)',
|
||||
content: 'rgba(255,255,255,1)'
|
||||
}, { // $20橙
|
||||
price: 100, // 100~450，节奏风暴、天空之翼
|
||||
contentBg: 'rgba(245,124,0,1)',
|
||||
headerBg: 'rgba(230,81,0,1)',
|
||||
header: 'rgba(255,255,255,0.87451)',
|
||||
authorName: 'rgba(255,255,255,0.701961)',
|
||||
time: 'rgba(255,255,255,0.501961)',
|
||||
content: 'rgba(255,255,255,0.87451)'
|
||||
}, { // $10黄
|
||||
price: 52, // 52~100，疯狂打call
|
||||
contentBg: 'rgba(255,202,40,1)',
|
||||
headerBg: 'rgba(255,179,0,1)',
|
||||
header: 'rgba(0,0,0,0.87451)',
|
||||
authorName: 'rgba(0,0,0,0.541176)',
|
||||
time: 'rgba(0,0,0,0.501961)',
|
||||
content: 'rgba(0,0,0,0.87451)'
|
||||
}, { // $5绿
|
||||
price: 28, // 28~52，礼花
|
||||
contentBg: 'rgba(29,233,182,1)',
|
||||
headerBg: 'rgba(0,191,165,1)',
|
||||
header: 'rgba(0,0,0,1)',
|
||||
authorName: 'rgba(0,0,0,0.541176)',
|
||||
time: 'rgba(0,0,0,0.501961)',
|
||||
content: 'rgba(0,0,0,1)'
|
||||
}, { // $2浅蓝
|
||||
price: 9.9, // 9.9~28，B坷垃
|
||||
contentBg: 'rgba(0,229,255,1)',
|
||||
headerBg: 'rgba(0,184,212,1)',
|
||||
header: 'rgba(0,0,0,1)',
|
||||
authorName: 'rgba(0,0,0,0.701961)',
|
||||
time: 'rgba(0,0,0,0.501961)',
|
||||
content: 'rgba(0,0,0,1)'
|
||||
}, { // $1蓝
|
||||
price: 0, // 0~9.9，丢人
|
||||
contentBg: 'rgba(30,136,229,1)',
|
||||
headerBg: 'rgba(21,101,192,1)',
|
||||
header: 'rgba(255,255,255,1)',
|
||||
authorName: 'rgba(255,255,255,0.701961)',
|
||||
time: 'rgba(255,255,255,0.501961)',
|
||||
content: 'rgba(255,255,255,1)'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'PaidMessage',
|
||||
props: {
|
||||
price: Number, // 价格，人民币
|
||||
avatarUrl: String,
|
||||
authorName: String,
|
||||
price: Number, // 价格，人民币,
|
||||
time: String,
|
||||
content: String
|
||||
},
|
||||
computed: {
|
||||
level() {
|
||||
if (this.price < 9.9) // 0~9.9，丢人
|
||||
return 0
|
||||
else if (this.price < 28) // 9.9~28，B坷垃
|
||||
return 1
|
||||
else if (this.price < 52) // 28~52，礼花
|
||||
return 2
|
||||
else if (this.price < 100) // 52~100，疯狂打call
|
||||
return 3
|
||||
else if (this.price < 450) // 100~450，节奏风暴、天空之翼
|
||||
return 4
|
||||
else if (this.price < 1245) // 450~1245，摩天大楼
|
||||
return 5
|
||||
else // 1245，小电视飞船
|
||||
return 6
|
||||
},
|
||||
headerColor() {
|
||||
return LEVEL_TO_HEADER_COLOR[this.level]
|
||||
},
|
||||
contentColor() {
|
||||
return LEVEL_TO_CONTENT_COLOR[this.level]
|
||||
methods: {
|
||||
getColor(name) {
|
||||
for (const color of COLORS) {
|
||||
if (this.price >= color.price)
|
||||
return color[name]
|
||||
}
|
||||
return COLORS[0][name]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- yt-live-chat-paid-message-renderer -->
|
||||
<style>
|
||||
canvas.yt-live-chat-paid-message-renderer, caption.yt-live-chat-paid-message-renderer, center.yt-live-chat-paid-message-renderer, cite.yt-live-chat-paid-message-renderer, code.yt-live-chat-paid-message-renderer, dd.yt-live-chat-paid-message-renderer, del.yt-live-chat-paid-message-renderer, dfn.yt-live-chat-paid-message-renderer, div.yt-live-chat-paid-message-renderer, dl.yt-live-chat-paid-message-renderer, dt.yt-live-chat-paid-message-renderer, em.yt-live-chat-paid-message-renderer, embed.yt-live-chat-paid-message-renderer, fieldset.yt-live-chat-paid-message-renderer, font.yt-live-chat-paid-message-renderer, form.yt-live-chat-paid-message-renderer, h1.yt-live-chat-paid-message-renderer, h2.yt-live-chat-paid-message-renderer, h3.yt-live-chat-paid-message-renderer, h4.yt-live-chat-paid-message-renderer, h5.yt-live-chat-paid-message-renderer, h6.yt-live-chat-paid-message-renderer, hr.yt-live-chat-paid-message-renderer, i.yt-live-chat-paid-message-renderer, iframe.yt-live-chat-paid-message-renderer, img.yt-live-chat-paid-message-renderer, ins.yt-live-chat-paid-message-renderer, kbd.yt-live-chat-paid-message-renderer, label.yt-live-chat-paid-message-renderer, legend.yt-live-chat-paid-message-renderer, li.yt-live-chat-paid-message-renderer, menu.yt-live-chat-paid-message-renderer, object.yt-live-chat-paid-message-renderer, ol.yt-live-chat-paid-message-renderer, p.yt-live-chat-paid-message-renderer, pre.yt-live-chat-paid-message-renderer, q.yt-live-chat-paid-message-renderer, s.yt-live-chat-paid-message-renderer, samp.yt-live-chat-paid-message-renderer, small.yt-live-chat-paid-message-renderer, span.yt-live-chat-paid-message-renderer, strike.yt-live-chat-paid-message-renderer, strong.yt-live-chat-paid-message-renderer, sub.yt-live-chat-paid-message-renderer, sup.yt-live-chat-paid-message-renderer, table.yt-live-chat-paid-message-renderer, tbody.yt-live-chat-paid-message-renderer, td.yt-live-chat-paid-message-renderer, tfoot.yt-live-chat-paid-message-renderer, th.yt-live-chat-paid-message-renderer, thead.yt-live-chat-paid-message-renderer, tr.yt-live-chat-paid-message-renderer, tt.yt-live-chat-paid-message-renderer, u.yt-live-chat-paid-message-renderer, ul.yt-live-chat-paid-message-renderer, var.yt-live-chat-paid-message-renderer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.yt-live-chat-paid-message-renderer[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#timestamp.yt-live-chat-paid-message-renderer {
|
||||
display: var(--yt-live-chat-item-timestamp-display, inline);
|
||||
margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0);
|
||||
color: var(--yt-live-chat-tertiary-text-color);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#author-photo.yt-live-chat-paid-message-renderer {
|
||||
display: block;
|
||||
margin-right: 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
#menu-button.yt-live-chat-paid-message-renderer {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#menu.yt-live-chat-paid-message-renderer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: translateX(100px);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer:hover #menu.yt-live-chat-paid-message-renderer, yt-live-chat-paid-message-renderer[menu-visible] #menu.yt-live-chat-paid-message-renderer {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer:focus-within #menu.yt-live-chat-paid-message-renderer {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#inline-action-button-container.yt-live-chat-paid-message-renderer {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 0;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
background-color: var(--yt-live-chat-moderation-mode-hover-background-color);
|
||||
display: none;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-paid-message-renderer {
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
display: var(--yt-live-chat-inline-action-button-container-display, none);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-paid-message-renderer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-paid-message-renderer {
|
||||
display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block);
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer, #additional-inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer {
|
||||
--yt-button-icon-size: 36px;
|
||||
--yt-button-icon-padding: 6px;
|
||||
color: hsl(0, 0%, 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer {
|
||||
background: hsla(0, 0%, 6.7%, .8);
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-paid-message-renderer>.yt-live-chat-paid-message-renderer:hover {
|
||||
background: hsl(0, 0%, 6.7%);
|
||||
}
|
||||
|
||||
#additional-inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer {
|
||||
color: var(--yt-live-chat-additional-inline-action-button-color);
|
||||
background: var(--yt-live-chat-additional-inline-action-button-background-color);
|
||||
}
|
||||
|
||||
#additional-inline-action-buttons.yt-live-chat-paid-message-renderer>.yt-live-chat-paid-message-renderer:hover {
|
||||
background: var(--yt-live-chat-additional-inline-action-button-background-color-hover);
|
||||
}
|
||||
|
||||
#additional-inline-action-buttons.yt-live-chat-paid-message-renderer:not(:empty) {
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer:not(:first-child) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 4px 24px;
|
||||
font-size: 15px;
|
||||
--yt-live-chat-paid-message-background-color: var(--yt-live-chat-paid-message-primary-color);
|
||||
--yt-live-chat-paid-message-header-background-color: var(--yt-live-chat-paid-message-secondary-color);
|
||||
--yt-live-chat-text-input-field-placeholder-color: var(--yt-live-chat-paid-message-color);
|
||||
--yt-live-chat-item-timestamp-display: var(--yt-live-chat-paid-message-timestamp-display, none);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] {
|
||||
padding: 0;
|
||||
padding-bottom: 8px;
|
||||
--yt-live-chat-paid-message-background-color: transparent;
|
||||
--yt-live-chat-paid-message-header-background-color: transparent;
|
||||
--yt-live-chat-item-timestamp-display: block;
|
||||
}
|
||||
|
||||
#card.yt-live-chat-paid-message-renderer {
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #card.yt-live-chat-paid-message-renderer {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#header.yt-live-chat-paid-message-renderer {
|
||||
position: relative;
|
||||
background-color: var(--yt-live-chat-paid-message-header-background-color, #125aac);
|
||||
color: var(--yt-live-chat-paid-message-header-color, #fff);
|
||||
font-weight: 500;
|
||||
padding: 8px 16px;
|
||||
min-height: 20px;
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[show-only-header] #header.yt-live-chat-paid-message-renderer {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #header.yt-live-chat-paid-message-renderer {
|
||||
color: var(--yt-live-chat-secondary-text-color);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#author-photo.yt-live-chat-paid-message-renderer {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
yt-icon#author-photo.yt-live-chat-paid-message-renderer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] yt-icon#author-photo.yt-live-chat-paid-message-renderer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#header-content.yt-live-chat-paid-message-renderer {
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
-ms-flex-align: baseline;
|
||||
-webkit-align-items: baseline;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #header-content.yt-live-chat-paid-message-renderer {
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#header-content-primary-column.yt-live-chat-paid-message-renderer {
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #header-content-primary-column.yt-live-chat-paid-message-renderer {
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-align: baseline;
|
||||
-webkit-align-items: baseline;
|
||||
align-items: baseline;
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
#author-name.yt-live-chat-paid-message-renderer {
|
||||
color: var(--yt-live-chat-paid-message-author-name-color, rgba(255, 255, 255, 0.7));
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #purchase-amount.yt-live-chat-paid-message-renderer {
|
||||
display: inline;
|
||||
height: 24px;
|
||||
min-width: 16px;
|
||||
border-radius: 12px;
|
||||
margin-right: 8px;
|
||||
padding: 0 12px;
|
||||
background-color: var(--yt-live-chat-paid-message-primary-color);
|
||||
color: var(--yt-live-chat-paid-message-color);
|
||||
display: inline-flex;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer {
|
||||
display: block;
|
||||
color: var(--yt-live-chat-secondary-text-color);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer[is-deleted] {
|
||||
margin: 4px 0 0;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer[is-deleted].yt-live-chat-paid-message-renderer::before {
|
||||
content: '​';
|
||||
display: inline;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
#menu.yt-live-chat-paid-message-renderer {
|
||||
background: linear-gradient(to right, transparent, var(--yt-live-chat-paid-message-header-background-color, #125aac) 100%);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #menu.yt-live-chat-paid-message-renderer {
|
||||
margin-top: 8px;
|
||||
background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[allow-animations] #content.yt-live-chat-paid-message-renderer, yt-live-chat-paid-message-renderer[allow-animations] #header.yt-live-chat-paid-message-renderer {
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
#content.yt-live-chat-paid-message-renderer {
|
||||
background-color: var(--yt-live-chat-paid-message-background-color, #1565c0);
|
||||
color: var(--yt-live-chat-paid-message-color, #fff);
|
||||
padding: 8px 16px;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
#content.yt-live-chat-paid-message-renderer img.yt-live-chat-paid-message-renderer {
|
||||
width: var(--yt-live-chat-emoji-size);
|
||||
height: var(--yt-live-chat-emoji-size);
|
||||
margin: -1px 2px 1px 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #content.yt-live-chat-paid-message-renderer {
|
||||
padding: 0;
|
||||
padding-left: 72px;
|
||||
color: var(--yt-live-chat-secondary-text-color);
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[show-only-header] #content.yt-live-chat-paid-message-renderer {
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a.yt-live-chat-paid-message-renderer {
|
||||
display: inline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#message.yt-live-chat-paid-message-renderer a.yt-live-chat-paid-message-renderer {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #message.yt-live-chat-paid-message-renderer {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#message.yt-live-chat-paid-message-renderer a.yt-live-chat-paid-message-renderer .mention.yt-live-chat-paid-message-renderer {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#message.yt-live-chat-paid-message-renderer:empty, #author-name.yt-live-chat-paid-message-renderer:empty:not([is-deleted]).yt-live-chat-paid-message-renderer, #deleted-state.yt-live-chat-paid-message-renderer:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#deleted-state.yt-live-chat-paid-message-renderer {
|
||||
display: block;
|
||||
font-style: italic;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #deleted-state.yt-live-chat-paid-message-renderer[is-deleted] {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer {
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[show-footer-divider] #footer.yt-live-chat-paid-message-renderer::before {
|
||||
content: "";
|
||||
display: flex;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer[is-user-editable] #footer.yt-live-chat-paid-message-renderer:not(:empty) {
|
||||
padding-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,22 @@
|
||||
<template>
|
||||
<yt-live-chat-text-message-renderer :author-type="authorTypeText">
|
||||
<div id="author-photo" :style="`background-image: url(${avatarUrl})`"></div>
|
||||
<div id="content">
|
||||
<span id="timestamp">{{time}}</span>
|
||||
<span id="author-name" :type="authorTypeText">{{authorName}}</span>
|
||||
<span id="message">{{content}}</span>
|
||||
<el-badge :value="repeated" :max="99" v-show="repeated > 1"
|
||||
:style="`--repeated-mark-color: ${repeatedMarkColor}`"
|
||||
<yt-img-shadow id="author-photo" class="no-transition style-scope yt-live-chat-text-message-renderer" height="24"
|
||||
width="24" style="background-color: transparent;" loaded
|
||||
>
|
||||
<img id="img" class="style-scope yt-img-shadow" alt="" height="24" width="24" :src="avatarUrl">
|
||||
</yt-img-shadow>
|
||||
<div id="content" class="style-scope yt-live-chat-text-message-renderer">
|
||||
<span id="timestamp" class="style-scope yt-live-chat-text-message-renderer">{{time}}</span>
|
||||
<yt-live-chat-author-chip class="style-scope yt-live-chat-text-message-renderer">
|
||||
<span id="author-name" dir="auto" class="style-scope yt-live-chat-author-chip" :type="authorTypeText">
|
||||
{{authorName}}
|
||||
<span id="chip-badges" class="style-scope yt-live-chat-author-chip"></span>
|
||||
</span>
|
||||
<span id="chat-badges" class="style-scope yt-live-chat-author-chip"></span>
|
||||
</yt-live-chat-author-chip>
|
||||
<span id="message" class="style-scope yt-live-chat-text-message-renderer">{{content}}</span>
|
||||
<el-badge :value="repeated" :max="99" v-show="repeated > 1" class="style-scope yt-live-chat-text-message-renderer"
|
||||
:style="{'--repeated-mark-color': repeatedMarkColor}"
|
||||
></el-badge>
|
||||
</div>
|
||||
</yt-live-chat-text-message-renderer>
|
||||
@ -56,13 +66,387 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
yt-live-chat-text-message-renderer #content .el-badge {
|
||||
yt-live-chat-text-message-renderer>#content>.el-badge {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #content .el-badge * {
|
||||
yt-live-chat-text-message-renderer>#content>.el-badge .el-badge__content {
|
||||
text-shadow: none !important;
|
||||
font-family: sans-serif !important;
|
||||
background-color: var(--repeated-mark-color) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- yt-live-chat-text-message-renderer -->
|
||||
<style>
|
||||
canvas.yt-live-chat-text-message-renderer, caption.yt-live-chat-text-message-renderer, center.yt-live-chat-text-message-renderer, cite.yt-live-chat-text-message-renderer, code.yt-live-chat-text-message-renderer, dd.yt-live-chat-text-message-renderer, del.yt-live-chat-text-message-renderer, dfn.yt-live-chat-text-message-renderer, div.yt-live-chat-text-message-renderer, dl.yt-live-chat-text-message-renderer, dt.yt-live-chat-text-message-renderer, em.yt-live-chat-text-message-renderer, embed.yt-live-chat-text-message-renderer, fieldset.yt-live-chat-text-message-renderer, font.yt-live-chat-text-message-renderer, form.yt-live-chat-text-message-renderer, h1.yt-live-chat-text-message-renderer, h2.yt-live-chat-text-message-renderer, h3.yt-live-chat-text-message-renderer, h4.yt-live-chat-text-message-renderer, h5.yt-live-chat-text-message-renderer, h6.yt-live-chat-text-message-renderer, hr.yt-live-chat-text-message-renderer, i.yt-live-chat-text-message-renderer, iframe.yt-live-chat-text-message-renderer, img.yt-live-chat-text-message-renderer, ins.yt-live-chat-text-message-renderer, kbd.yt-live-chat-text-message-renderer, label.yt-live-chat-text-message-renderer, legend.yt-live-chat-text-message-renderer, li.yt-live-chat-text-message-renderer, menu.yt-live-chat-text-message-renderer, object.yt-live-chat-text-message-renderer, ol.yt-live-chat-text-message-renderer, p.yt-live-chat-text-message-renderer, pre.yt-live-chat-text-message-renderer, q.yt-live-chat-text-message-renderer, s.yt-live-chat-text-message-renderer, samp.yt-live-chat-text-message-renderer, small.yt-live-chat-text-message-renderer, span.yt-live-chat-text-message-renderer, strike.yt-live-chat-text-message-renderer, strong.yt-live-chat-text-message-renderer, sub.yt-live-chat-text-message-renderer, sup.yt-live-chat-text-message-renderer, table.yt-live-chat-text-message-renderer, tbody.yt-live-chat-text-message-renderer, td.yt-live-chat-text-message-renderer, tfoot.yt-live-chat-text-message-renderer, th.yt-live-chat-text-message-renderer, thead.yt-live-chat-text-message-renderer, tr.yt-live-chat-text-message-renderer, tt.yt-live-chat-text-message-renderer, u.yt-live-chat-text-message-renderer, ul.yt-live-chat-text-message-renderer, var.yt-live-chat-text-message-renderer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.yt-live-chat-text-message-renderer[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#timestamp.yt-live-chat-text-message-renderer {
|
||||
display: var(--yt-live-chat-item-timestamp-display, inline);
|
||||
margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0);
|
||||
color: var(--yt-live-chat-tertiary-text-color);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#author-photo.yt-live-chat-text-message-renderer {
|
||||
display: block;
|
||||
margin-right: 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
#menu-button.yt-live-chat-text-message-renderer {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#menu.yt-live-chat-text-message-renderer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: translateX(100px);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer:hover #menu.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[menu-visible] #menu.yt-live-chat-text-message-renderer {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer:focus-within #menu.yt-live-chat-text-message-renderer {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#inline-action-button-container.yt-live-chat-text-message-renderer {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 0;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
background-color: var(--yt-live-chat-moderation-mode-hover-background-color);
|
||||
display: none;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-text-message-renderer {
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
display: var(--yt-live-chat-inline-action-button-container-display, none);
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-text-message-renderer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-text-message-renderer {
|
||||
display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block);
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer, #additional-inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer {
|
||||
--yt-button-icon-size: 36px;
|
||||
--yt-button-icon-padding: 6px;
|
||||
color: hsl(0, 0%, 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer {
|
||||
background: hsla(0, 0%, 6.7%, .8);
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-text-message-renderer>.yt-live-chat-text-message-renderer:hover {
|
||||
background: hsl(0, 0%, 6.7%);
|
||||
}
|
||||
|
||||
#additional-inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer {
|
||||
color: var(--yt-live-chat-additional-inline-action-button-color);
|
||||
background: var(--yt-live-chat-additional-inline-action-button-background-color);
|
||||
}
|
||||
|
||||
#additional-inline-action-buttons.yt-live-chat-text-message-renderer>.yt-live-chat-text-message-renderer:hover {
|
||||
background: var(--yt-live-chat-additional-inline-action-button-background-color-hover);
|
||||
}
|
||||
|
||||
#additional-inline-action-buttons.yt-live-chat-text-message-renderer:not(:empty) {
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer:not(:first-child) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer {
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
padding: 4px 24px;
|
||||
overflow: hidden;
|
||||
--yt-endpoint-color: var(--yt-live-chat-primary-text-color, hsl(0, 0%, 6.7%));
|
||||
--yt-endpoint-hover-color: var(--yt-live-chat-primary-text-color, var(--yt-endpoint-color));
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer:hover {
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[author-is-owner] {
|
||||
background-color: var(--yt-live-chat-message-highlight-background-color);
|
||||
}
|
||||
|
||||
#content.yt-live-chat-text-message-renderer {
|
||||
-ms-align-self: center;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#message.yt-live-chat-text-message-renderer {
|
||||
color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color));
|
||||
line-height: 16px;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
font-style: var(--yt-live-chat-text-message-renderer-message-message-style_-_font-style);
|
||||
opacity: var(--yt-live-chat-text-message-renderer-message-message-style_-_opacity);
|
||||
}
|
||||
|
||||
#message.yt-live-chat-text-message-renderer .emoji.yt-live-chat-text-message-renderer {
|
||||
width: var(--yt-live-chat-emoji-size);
|
||||
height: var(--yt-live-chat-emoji-size);
|
||||
margin: -1px 2px 1px 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a.yt-live-chat-text-message-renderer {
|
||||
display: inline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#message.yt-live-chat-text-message-renderer a.yt-live-chat-text-message-renderer {
|
||||
display: inline;
|
||||
text-decoration: underline;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
#message.yt-live-chat-text-message-renderer a.yt-live-chat-text-message-renderer .mention.yt-live-chat-text-message-renderer {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#show-original.yt-live-chat-text-message-renderer {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
#message.yt-live-chat-text-message-renderer:empty, #deleted-state.yt-live-chat-text-message-renderer:empty, #show-original.yt-live-chat-text-message-renderer:empty, yt-live-chat-text-message-renderer[show-original] #deleted-state.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[show-original] #show-original.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[is-deleted]:not([show-original]) #message.yt-live-chat-text-message-renderer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu.yt-live-chat-text-message-renderer {
|
||||
color: var(--yt-live-chat-secondary-text-color);
|
||||
background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color, hsl(0, 0%, 100%)) 100%);
|
||||
}
|
||||
|
||||
.mention.yt-live-chat-text-message-renderer {
|
||||
background: var(--yt-live-chat-mention-background-color);
|
||||
color: var(--yt-live-chat-mention-text-color);
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#deleted-state.yt-live-chat-text-message-renderer, #show-original.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[is-deleted] #message.yt-live-chat-text-message-renderer {
|
||||
font-style: italic;
|
||||
color: var(--yt-live-chat-deleted-message-color, rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[show-bar]::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 8px;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
width: 4px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[is-deleted]::before {
|
||||
background: var(--yt-live-chat-deleted-message-bar-color, rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[is-dimmed] #message.yt-live-chat-text-message-renderer {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[is-dimmed]::before {
|
||||
background: var(--yt-live-chat-error-message-color, #f44336);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- yt-img-shadow -->
|
||||
<style>
|
||||
canvas.yt-img-shadow, caption.yt-img-shadow, center.yt-img-shadow, cite.yt-img-shadow, code.yt-img-shadow, dd.yt-img-shadow, del.yt-img-shadow, dfn.yt-img-shadow, div.yt-img-shadow, dl.yt-img-shadow, dt.yt-img-shadow, em.yt-img-shadow, embed.yt-img-shadow, fieldset.yt-img-shadow, font.yt-img-shadow, form.yt-img-shadow, h1.yt-img-shadow, h2.yt-img-shadow, h3.yt-img-shadow, h4.yt-img-shadow, h5.yt-img-shadow, h6.yt-img-shadow, hr.yt-img-shadow, i.yt-img-shadow, iframe.yt-img-shadow, img.yt-img-shadow, ins.yt-img-shadow, kbd.yt-img-shadow, label.yt-img-shadow, legend.yt-img-shadow, li.yt-img-shadow, menu.yt-img-shadow, object.yt-img-shadow, ol.yt-img-shadow, p.yt-img-shadow, pre.yt-img-shadow, q.yt-img-shadow, s.yt-img-shadow, samp.yt-img-shadow, small.yt-img-shadow, span.yt-img-shadow, strike.yt-img-shadow, strong.yt-img-shadow, sub.yt-img-shadow, sup.yt-img-shadow, table.yt-img-shadow, tbody.yt-img-shadow, td.yt-img-shadow, tfoot.yt-img-shadow, th.yt-img-shadow, thead.yt-img-shadow, tr.yt-img-shadow, tt.yt-img-shadow, u.yt-img-shadow, ul.yt-img-shadow, var.yt-img-shadow {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.yt-img-shadow[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
yt-img-shadow {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
yt-img-shadow.no-transition {
|
||||
opacity: 1;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
yt-img-shadow.with-placeholder {
|
||||
background-color: transparent;
|
||||
min-height: unset;
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
yt-img-shadow[loaded] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
yt-img-shadow.empty img.yt-img-shadow {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
yt-img-shadow[object-fit="FILL"] img.yt-img-shadow, yt-img-shadow[fit] img.yt-img-shadow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
yt-img-shadow[object-fit="COVER"] img.yt-img-shadow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
yt-img-shadow[object-fit="CONTAIN"] img.yt-img-shadow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
yt-img-shadow[object-position="LEFT"] img.yt-img-shadow {
|
||||
object-position: left;
|
||||
}
|
||||
|
||||
img.yt-img-shadow {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-height: none;
|
||||
max-width: 100%;
|
||||
border-radius: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- yt-live-chat-author-chip -->
|
||||
<style>
|
||||
canvas.yt-live-chat-author-chip, caption.yt-live-chat-author-chip, center.yt-live-chat-author-chip, cite.yt-live-chat-author-chip, code.yt-live-chat-author-chip, dd.yt-live-chat-author-chip, del.yt-live-chat-author-chip, dfn.yt-live-chat-author-chip, div.yt-live-chat-author-chip, dl.yt-live-chat-author-chip, dt.yt-live-chat-author-chip, em.yt-live-chat-author-chip, embed.yt-live-chat-author-chip, fieldset.yt-live-chat-author-chip, font.yt-live-chat-author-chip, form.yt-live-chat-author-chip, h1.yt-live-chat-author-chip, h2.yt-live-chat-author-chip, h3.yt-live-chat-author-chip, h4.yt-live-chat-author-chip, h5.yt-live-chat-author-chip, h6.yt-live-chat-author-chip, hr.yt-live-chat-author-chip, i.yt-live-chat-author-chip, iframe.yt-live-chat-author-chip, img.yt-live-chat-author-chip, ins.yt-live-chat-author-chip, kbd.yt-live-chat-author-chip, label.yt-live-chat-author-chip, legend.yt-live-chat-author-chip, li.yt-live-chat-author-chip, menu.yt-live-chat-author-chip, object.yt-live-chat-author-chip, ol.yt-live-chat-author-chip, p.yt-live-chat-author-chip, pre.yt-live-chat-author-chip, q.yt-live-chat-author-chip, s.yt-live-chat-author-chip, samp.yt-live-chat-author-chip, small.yt-live-chat-author-chip, span.yt-live-chat-author-chip, strike.yt-live-chat-author-chip, strong.yt-live-chat-author-chip, sub.yt-live-chat-author-chip, sup.yt-live-chat-author-chip, table.yt-live-chat-author-chip, tbody.yt-live-chat-author-chip, td.yt-live-chat-author-chip, tfoot.yt-live-chat-author-chip, th.yt-live-chat-author-chip, thead.yt-live-chat-author-chip, tr.yt-live-chat-author-chip, tt.yt-live-chat-author-chip, u.yt-live-chat-author-chip, ul.yt-live-chat-author-chip, var.yt-live-chat-author-chip {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.yt-live-chat-author-chip[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
yt-live-chat-author-chip {
|
||||
display: inline-flex;
|
||||
-ms-flex-align: baseline;
|
||||
-webkit-align-items: baseline;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
#author-name.yt-live-chat-author-chip {
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
color: var(--yt-live-chat-secondary-text-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip {
|
||||
padding: 2px 4px;
|
||||
color: var(--yt-live-chat-author-chip-verified-text-color);
|
||||
background-color: var(--yt-live-chat-author-chip-verified-background-color);
|
||||
}
|
||||
|
||||
#author-name.yt-live-chat-author-chip[type='moderator'] {
|
||||
color: var(--yt-live-chat-moderator-color);
|
||||
}
|
||||
|
||||
yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip[type='owner'], #author-name.yt-live-chat-author-chip[type='owner'] {
|
||||
background-color: #ffd600;
|
||||
color: var(--yt-live-chat-author-chip-owner-text-color);
|
||||
}
|
||||
|
||||
#author-name.yt-live-chat-author-chip[type='member'] {
|
||||
color: var(--yt-live-chat-sponsor-color);
|
||||
}
|
||||
|
||||
#chip-badges.yt-live-chat-author-chip:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
yt-live-chat-author-chip[is-highlighted] #chat-badges.yt-live-chat-author-chip:not(:empty) {
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
yt-live-chat-author-badge-renderer.yt-live-chat-author-chip {
|
||||
margin: 0 0 0 2px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
yt-live-chat-author-chip[is-highlighted] #chip-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer.yt-live-chat-author-chip {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#chip-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer.yt-live-chat-author-chip:last-of-type {
|
||||
margin-right: -2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<yt-live-chat-renderer>
|
||||
<yt-live-chat-renderer class="style-scope yt-live-chat-app" style="--scrollbar-width:11px;" hide-timestamps>
|
||||
<!-- <yt-live-chat-ticker-renderer>
|
||||
<yt-live-chat-ticker-paid-message-item-renderer style="background-color: rgba(0,184,212,1);">
|
||||
<div id="content">
|
||||
@ -14,18 +14,22 @@
|
||||
</div>
|
||||
</yt-live-chat-ticker-paid-message-item-renderer>
|
||||
</yt-live-chat-ticker-renderer> -->
|
||||
<yt-live-chat-item-list-renderer>
|
||||
<yt-live-chat-item-list-renderer ref="list" class="style-scope yt-live-chat-renderer">
|
||||
<template v-for="message in messages">
|
||||
<text-message :key="message.id" v-if="message.type == 0"
|
||||
class="style-scope yt-live-chat-item-list-renderer"
|
||||
:avatarUrl="message.avatarUrl" :time="message.time" :authorName="message.authorName"
|
||||
:authorType="message.authorType" :content="message.content" :repeated="message.repeated"
|
||||
></text-message>
|
||||
<legacy-paid-message :key="message.id" v-else-if="message.type == 1"
|
||||
class="style-scope yt-live-chat-item-list-renderer"
|
||||
:avatarUrl="message.avatarUrl" :title="message.title" :content="message.content"
|
||||
:time="message.time"
|
||||
></legacy-paid-message>
|
||||
<paid-message :key="message.id" v-else
|
||||
class="style-scope yt-live-chat-item-list-renderer"
|
||||
:price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
|
||||
:content="message.content"
|
||||
:time="message.time" :content="message.content"
|
||||
></paid-message>
|
||||
</template>
|
||||
</yt-live-chat-item-list-renderer>
|
||||
@ -89,7 +93,7 @@ export default {
|
||||
this.websocket.close()
|
||||
},
|
||||
updated() {
|
||||
window.scrollTo(0, document.body.scrollHeight)
|
||||
this.$refs.list.scrollTo(0, this.$refs.list.scrollHeight)
|
||||
},
|
||||
methods: {
|
||||
onWsOpen() {
|
||||
@ -114,7 +118,7 @@ export default {
|
||||
id: this.nextId++,
|
||||
type: 0, // TextMessage
|
||||
avatarUrl: body.data.avatarUrl,
|
||||
time: `${time.getHours()}:${time.getMinutes()}`,
|
||||
time: `${time.getMinutes()}:${time.getSeconds()}`,
|
||||
authorName: body.data.authorName,
|
||||
authorType: body.data.authorType,
|
||||
content: body.data.content,
|
||||
@ -125,20 +129,25 @@ export default {
|
||||
price = body.data.totalCoin / 1000
|
||||
if (price < this.config.minGiftPrice) // 丢人
|
||||
break
|
||||
time = new Date(body.data.timestamp * 1000)
|
||||
message = {
|
||||
id: this.nextId++,
|
||||
type: 2, // PaidMessage
|
||||
price: price,
|
||||
avatarUrl: body.data.avatarUrl,
|
||||
authorName: body.data.authorName,
|
||||
price: price,
|
||||
time: `${time.getMinutes()}:${time.getSeconds()}`,
|
||||
content: `Sent ${body.data.giftName}x${body.data.giftNum}`
|
||||
}
|
||||
break
|
||||
case COMMAND_ADD_VIP:
|
||||
time = new Date(body.data.timestamp * 1000)
|
||||
message = {
|
||||
id: this.nextId++,
|
||||
type: 1, // LegacyPaidMessage
|
||||
avatarUrl: body.data.avatarUrl,
|
||||
time: `${time.getMinutes()}:${time.getSeconds()}`,
|
||||
authorName: body.data.authorName,
|
||||
title: 'NEW MEMBER!',
|
||||
content: `Welcome ${body.data.authorName}`
|
||||
}
|
||||
@ -193,4 +202,528 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="@/assets/css/room.css"></style>
|
||||
<style>
|
||||
yt-live-chat-renderer {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
yt-live-chat-item-list-renderer {
|
||||
overflow-y: scroll !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- html -->
|
||||
<style>
|
||||
html:not(.style-scope) {
|
||||
--yt-live-chat-background-color: hsl(0, 0%, 100%);
|
||||
--yt-live-chat-action-panel-background-color: hsla(0, 0%, 93.3%, .4);
|
||||
--yt-live-chat-action-panel-background-color-transparent: hsla(0, 0%, 97%, .8);
|
||||
--yt-live-chat-mode-change-background-color: hsla(0, 0%, 93.3%, .4);
|
||||
--yt-live-chat-primary-text-color: hsl(0, 0%, 6.7%);
|
||||
--yt-live-chat-secondary-text-color: hsla(0, 0%, 6.7%, .6);
|
||||
--yt-live-chat-tertiary-text-color: hsla(0, 0%, 6.7%, .4);
|
||||
--yt-live-chat-text-input-field-inactive-underline-color: #b8b8b8;
|
||||
--yt-live-chat-text-input-field-placeholder-color: hsla(0, 0%, 6.7%, .6);
|
||||
--yt-live-chat-icon-button-color: hsla(0, 0%, 6.7%, .4);
|
||||
--yt-live-chat-enabled-send-button-color: #4285f4;
|
||||
--yt-live-chat-disabled-icon-button-color: hsla(0, 0%, 6.7%, .2);
|
||||
--yt-live-chat-picker-button-color: hsla(0, 0%, 6.7%, .4);
|
||||
--yt-live-chat-picker-button-active-color: hsla(0, 0%, 6.7%, .8);
|
||||
--yt-live-chat-picker-button-disabled-color: var(--yt-live-chat-disabled-icon-button-color);
|
||||
--yt-live-chat-picker-button-hover-color: hsla(0, 0%, 6.7%, .6);
|
||||
--yt-live-chat-mention-background-color: #ff5722;
|
||||
--yt-live-chat-mention-text-color: hsl(0, 0%, 100%);
|
||||
--yt-live-chat-deleted-message-color: rgba(0, 0, 0, .5);
|
||||
--yt-live-chat-deleted-message-bar-color: rgba(11, 11, 11, .2);
|
||||
--yt-live-chat-disabled-button-background-color: hsl(0, 0%, 93.3%);
|
||||
--yt-live-chat-disabled-button-text-color: hsla(0, 0%, 6.7%, .4);
|
||||
--yt-live-chat-sub-panel-background-color: hsl(0, 0%, 93.3%);
|
||||
--yt-live-chat-sub-panel-background-color-transparent: hsla(0, 0%, 93%, .7);
|
||||
--yt-live-chat-header-background-color: hsla(0, 0%, 93.3%, .4);
|
||||
--yt-live-chat-header-button-color: hsl(0, 0%, 6.7%);
|
||||
--yt-live-chat-error-message-color: hsl(10, 51%, 49%);
|
||||
--yt-live-chat-reconnect-message-color: hsla(0, 0%, 7%, 0.2);
|
||||
--yt-live-chat-moderator-color: hsl(225, 84%, 66%);
|
||||
--yt-live-chat-owner-color: hsl(40, 76%, 55%);
|
||||
--yt-live-chat-author-chip-owner-text-color: rgba(0,0,0,0.87);
|
||||
--yt-live-chat-author-chip-verified-background-color: #CCCCCC;
|
||||
--yt-live-chat-author-chip-verified-text-color: #606060;
|
||||
--yt-live-chat-message-highlight-background-color: #f8f8f8;
|
||||
--yt-live-chat-sponsor-color: #107516;
|
||||
--yt-live-chat-overlay-color: hsla(0, 0%, 0%, 0.6);
|
||||
--yt-live-chat-dialog-background-color: hsl(0, 0%, 100%);
|
||||
--yt-live-chat-dialog-text-color: hsla(0, 0%, 6.7%, .6);
|
||||
--yt-live-chat-poll-choice-text-color: var(--yt-spec-text-secondary);
|
||||
--yt-live-chat-poll-choice-border-color: var(--yt-spec-10-percent-layer);
|
||||
--yt-live-chat-poll-choice-vote-bar-background-color: hsla(0, 0%, 93.3%, .8);
|
||||
--yt-live-chat-poll-choice-vote-bar-background-color-selected: #F2F8FF;
|
||||
--yt-live-chat-poll-choice-color-selected: #065FD4;
|
||||
--yt-live-chat-moderation-mode-hover-background-color: hsla(0, 0%, 6.7%, .2);
|
||||
--yt-live-chat-additional-inline-action-button-color: hsl(0, 0%, 100%);
|
||||
--yt-live-chat-additional-inline-action-button-background-color: hsla(0, 0%, 26%, 0.8);
|
||||
--yt-live-chat-additional-inline-action-button-background-color-hover: hsla(0, 0%, 26%, 1.0);
|
||||
--yt-formatted-string-emoji-size: 24px;
|
||||
--yt-live-chat-emoji-size: 24px;
|
||||
--yt-live-chat-text-input-field-suggestion-background-color: hsl(0, 0%, 100%);
|
||||
--yt-live-chat-text-input-field-suggestion-background-color-hover: #eee;
|
||||
--yt-live-chat-text-input-field-suggestion-text-color: #666;
|
||||
--yt-live-chat-text-input-field-suggestion-text-color-hover: #333;
|
||||
--yt-live-chat-ticker-arrow-background: hsl(0, 0%, 97.3%);
|
||||
--yt-emoji-picker-category-background-color: var(--yt-live-chat-action-panel-background-color-transparent);
|
||||
--yt-emoji-picker-category-color: var(--yt-live-chat-secondary-text-color);
|
||||
--yt-emoji-picker-category-button-color: var(--yt-live-chat-picker-button-color);
|
||||
--yt-emoji-picker-search-background-color: hsla(0, 0%, 100%, .6);
|
||||
--yt-emoji-picker-search-color: hsla(0, 0%, 6.7%, .8);
|
||||
--yt-emoji-picker-search-placeholder-color: hsla(0, 0%, 6.7%, .6);
|
||||
--yt-live-chat-slider-active-color: #2196f3;
|
||||
--yt-live-chat-slider-container-color: #c8c8c8;
|
||||
--yt-live-chat-slider-markers-color: #505050;
|
||||
--yt-live-chat-toast-background-color: hsl(0, 0%, 20%);
|
||||
--yt-live-chat-toast-text-color: hsl(0, 0%, 100%);
|
||||
--yt-live-chat-automod-button-background-color: hsl(0, 0%, 93.3%);
|
||||
--yt-live-chat-automod-button-background-color-hover: hsla(0, 0%, 6.7%, .2);
|
||||
--yt-live-chat-countdown-opacity: 0.3;
|
||||
--yt-live-chat-shimmer-background-color: rgba(136, 136, 136, 0.2);
|
||||
--yt-live-chat-shimmer-linear-gradient: linear-gradient(0deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 65%);
|
||||
--yt-live-chat-vem-background-color: hsl(0, 0%, 93.3%);
|
||||
--yt-live-chat-upsell-dialog-renderer-button-padding: 10px 16px;
|
||||
--yt-live-chat-product-picker-icon-color: rgba(17, 17, 17, 0.6);
|
||||
--yt-live-chat-product-picker-hover-color: rgba(17, 17, 16, 0.1);
|
||||
--yt-live-chat-product-picker-disabled-icon-color: rgba(17, 17, 17, 0.4);
|
||||
--yt-pdg-paid-stickers-tab-selection-bar-color: #065FD4;
|
||||
--yt-pdg-paid-stickers-author-name-font-size: 13px;
|
||||
--yt-pdg-paid-stickers-margin-left: 38px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- yt-live-chat-app -->
|
||||
<style>
|
||||
canvas.yt-live-chat-app, caption.yt-live-chat-app, center.yt-live-chat-app, cite.yt-live-chat-app, code.yt-live-chat-app, dd.yt-live-chat-app, del.yt-live-chat-app, dfn.yt-live-chat-app, div.yt-live-chat-app, dl.yt-live-chat-app, dt.yt-live-chat-app, em.yt-live-chat-app, embed.yt-live-chat-app, fieldset.yt-live-chat-app, font.yt-live-chat-app, form.yt-live-chat-app, h1.yt-live-chat-app, h2.yt-live-chat-app, h3.yt-live-chat-app, h4.yt-live-chat-app, h5.yt-live-chat-app, h6.yt-live-chat-app, hr.yt-live-chat-app, i.yt-live-chat-app, iframe.yt-live-chat-app, img.yt-live-chat-app, ins.yt-live-chat-app, kbd.yt-live-chat-app, label.yt-live-chat-app, legend.yt-live-chat-app, li.yt-live-chat-app, menu.yt-live-chat-app, object.yt-live-chat-app, ol.yt-live-chat-app, p.yt-live-chat-app, pre.yt-live-chat-app, q.yt-live-chat-app, s.yt-live-chat-app, samp.yt-live-chat-app, small.yt-live-chat-app, span.yt-live-chat-app, strike.yt-live-chat-app, strong.yt-live-chat-app, sub.yt-live-chat-app, sup.yt-live-chat-app, table.yt-live-chat-app, tbody.yt-live-chat-app, td.yt-live-chat-app, tfoot.yt-live-chat-app, th.yt-live-chat-app, thead.yt-live-chat-app, tr.yt-live-chat-app, tt.yt-live-chat-app, u.yt-live-chat-app, ul.yt-live-chat-app, var.yt-live-chat-app {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.yt-live-chat-app[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
yt-live-chat-app {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
--yt-report-form-modal-renderer-min-width: 0;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#contents.yt-live-chat-app {
|
||||
/* yt-live-chat-renderer.yt-live-chat-app { */
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
}
|
||||
|
||||
#contents.yt-live-chat-app>*.yt-live-chat-app {
|
||||
/* yt-live-chat-renderer.yt-live-chat-app { */
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
}
|
||||
|
||||
yt-live-chat-app[dashboard-money-feed] #contents.yt-live-chat-app>yt-live-chat-message-renderer.yt-live-chat-app {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- yt-live-chat-renderer -->
|
||||
<style>
|
||||
canvas.yt-live-chat-renderer, caption.yt-live-chat-renderer, center.yt-live-chat-renderer, cite.yt-live-chat-renderer, code.yt-live-chat-renderer, dd.yt-live-chat-renderer, del.yt-live-chat-renderer, dfn.yt-live-chat-renderer, div.yt-live-chat-renderer, dl.yt-live-chat-renderer, dt.yt-live-chat-renderer, em.yt-live-chat-renderer, embed.yt-live-chat-renderer, fieldset.yt-live-chat-renderer, font.yt-live-chat-renderer, form.yt-live-chat-renderer, h1.yt-live-chat-renderer, h2.yt-live-chat-renderer, h3.yt-live-chat-renderer, h4.yt-live-chat-renderer, h5.yt-live-chat-renderer, h6.yt-live-chat-renderer, hr.yt-live-chat-renderer, i.yt-live-chat-renderer, iframe.yt-live-chat-renderer, img.yt-live-chat-renderer, ins.yt-live-chat-renderer, kbd.yt-live-chat-renderer, label.yt-live-chat-renderer, legend.yt-live-chat-renderer, li.yt-live-chat-renderer, menu.yt-live-chat-renderer, object.yt-live-chat-renderer, ol.yt-live-chat-renderer, p.yt-live-chat-renderer, pre.yt-live-chat-renderer, q.yt-live-chat-renderer, s.yt-live-chat-renderer, samp.yt-live-chat-renderer, small.yt-live-chat-renderer, span.yt-live-chat-renderer, strike.yt-live-chat-renderer, strong.yt-live-chat-renderer, sub.yt-live-chat-renderer, sup.yt-live-chat-renderer, table.yt-live-chat-renderer, tbody.yt-live-chat-renderer, td.yt-live-chat-renderer, tfoot.yt-live-chat-renderer, th.yt-live-chat-renderer, thead.yt-live-chat-renderer, tr.yt-live-chat-renderer, tt.yt-live-chat-renderer, u.yt-live-chat-renderer, ul.yt-live-chat-renderer, var.yt-live-chat-renderer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.yt-live-chat-renderer[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
yt-live-chat-renderer {
|
||||
font-size: 13px;
|
||||
--yt-emoji-picker-renderer-height: 180px;
|
||||
--yt-button-default-text-color: var(--yt-live-chat-button-default-text-color);
|
||||
--yt-button-default-background-color: var(--yt-live-chat-button-default-background-color);
|
||||
--yt-button-dark-text-color: var(--yt-live-chat-button-dark-text-color);
|
||||
--yt-button-dark-background-color: var(--yt-live-chat-button-dark-background-color);
|
||||
--yt-button-payment-background-color: var(--yt-live-chat-sponsor-color);
|
||||
}
|
||||
|
||||
yt-live-chat-renderer {
|
||||
position: relative;
|
||||
background: var(--yt-live-chat-background-color);
|
||||
color: var(--yt-live-chat-primary-text-color);
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
yt-live-chat-renderer[hide-timestamps] {
|
||||
--yt-live-chat-item-timestamp-display: none;
|
||||
}
|
||||
|
||||
#separator.yt-live-chat-renderer {
|
||||
border-bottom: var(--yt-live-chat-header-bottom-border, none);
|
||||
}
|
||||
|
||||
#content-pages.yt-live-chat-renderer {
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
}
|
||||
|
||||
#panel-pages.yt-live-chat-renderer {
|
||||
max-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#contents.yt-live-chat-renderer {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#chat-messages.yt-live-chat-renderer, #contents.yt-live-chat-renderer, #item-list.yt-live-chat-renderer {
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
}
|
||||
|
||||
#ticker.yt-live-chat-renderer {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#chat.yt-live-chat-renderer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
}
|
||||
|
||||
#chat.yt-live-chat-renderer::after {
|
||||
content: '';
|
||||
display: none;
|
||||
animation: gradient-slide 1.2s ease infinite;
|
||||
animation-name: gradient-slide;
|
||||
background-color: var(--yt-live-chat-shimmer-background-color);
|
||||
background-image: var(--yt-live-chat-shimmer-linear-gradient);
|
||||
background-size: 300% 300%;
|
||||
transform: rotateX(180deg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
yt-live-chat-renderer[loading] #chat.yt-live-chat-renderer::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
yt-live-chat-pinned-message-renderer.yt-live-chat-renderer {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
yt-live-chat-item-list-renderer.yt-live-chat-renderer, yt-live-chat-ninja-message-renderer.yt-live-chat-renderer {
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
}
|
||||
|
||||
#action-panel.yt-live-chat-renderer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
yt-live-chat-renderer[has-action-panel-renderer] yt-live-chat-action-panel-renderer.yt-live-chat-renderer {
|
||||
animation: slideUp cubic-bezier(0.05, 0.00, 0.00, 1.00) forwards;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
#action-panel-backdrop.yt-live-chat-renderer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
yt-live-chat-renderer[has-action-panel-renderer] #action-panel-backdrop.yt-live-chat-renderer {
|
||||
visibility: visible;
|
||||
animation: fadeIn cubic-bezier(0.05, 0.00, 0.00, 1.00) forwards;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
#input-panel.yt-live-chat-renderer {
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
#input-panel.yt-live-chat-renderer:not(:empty) {
|
||||
border-top: var(--yt-live-chat-action-panel-top-border, none);
|
||||
}
|
||||
|
||||
.hide-on-collapse.yt-live-chat-renderer {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
yt-live-chat-renderer[collapsed] .hide-on-collapse.yt-live-chat-renderer {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#loading.yt-live-chat-renderer {
|
||||
height: 387px;
|
||||
background-color: var(--yt-live-chat-action-panel-background-color);
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#loading.yt-live-chat-renderer>paper-spinner-lite.yt-live-chat-renderer {
|
||||
--paper-spinner-color: var(--yt-live-chat-primary-text-color);
|
||||
}
|
||||
|
||||
#nitrate-promo.yt-live-chat-renderer>*.yt-live-chat-renderer {
|
||||
background: var(--yt-live-chat-overlay-color);
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@keyframes gradient-slide {
|
||||
0% {
|
||||
background-position: 100% 100%;
|
||||
}
|
||||
to {
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
transform: translateY(15%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
}
|
||||
100% {
|
||||
background-color: rgba(0, 0, 0, 0.60);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- yt-live-chat-item-list-renderer -->
|
||||
<style>
|
||||
canvas.yt-live-chat-item-list-renderer, caption.yt-live-chat-item-list-renderer, center.yt-live-chat-item-list-renderer, cite.yt-live-chat-item-list-renderer, code.yt-live-chat-item-list-renderer, dd.yt-live-chat-item-list-renderer, del.yt-live-chat-item-list-renderer, dfn.yt-live-chat-item-list-renderer, div.yt-live-chat-item-list-renderer, dl.yt-live-chat-item-list-renderer, dt.yt-live-chat-item-list-renderer, em.yt-live-chat-item-list-renderer, embed.yt-live-chat-item-list-renderer, fieldset.yt-live-chat-item-list-renderer, font.yt-live-chat-item-list-renderer, form.yt-live-chat-item-list-renderer, h1.yt-live-chat-item-list-renderer, h2.yt-live-chat-item-list-renderer, h3.yt-live-chat-item-list-renderer, h4.yt-live-chat-item-list-renderer, h5.yt-live-chat-item-list-renderer, h6.yt-live-chat-item-list-renderer, hr.yt-live-chat-item-list-renderer, i.yt-live-chat-item-list-renderer, iframe.yt-live-chat-item-list-renderer, img.yt-live-chat-item-list-renderer, ins.yt-live-chat-item-list-renderer, kbd.yt-live-chat-item-list-renderer, label.yt-live-chat-item-list-renderer, legend.yt-live-chat-item-list-renderer, li.yt-live-chat-item-list-renderer, menu.yt-live-chat-item-list-renderer, object.yt-live-chat-item-list-renderer, ol.yt-live-chat-item-list-renderer, p.yt-live-chat-item-list-renderer, pre.yt-live-chat-item-list-renderer, q.yt-live-chat-item-list-renderer, s.yt-live-chat-item-list-renderer, samp.yt-live-chat-item-list-renderer, small.yt-live-chat-item-list-renderer, span.yt-live-chat-item-list-renderer, strike.yt-live-chat-item-list-renderer, strong.yt-live-chat-item-list-renderer, sub.yt-live-chat-item-list-renderer, sup.yt-live-chat-item-list-renderer, table.yt-live-chat-item-list-renderer, tbody.yt-live-chat-item-list-renderer, td.yt-live-chat-item-list-renderer, tfoot.yt-live-chat-item-list-renderer, th.yt-live-chat-item-list-renderer, thead.yt-live-chat-item-list-renderer, tr.yt-live-chat-item-list-renderer, tt.yt-live-chat-item-list-renderer, u.yt-live-chat-item-list-renderer, ul.yt-live-chat-item-list-renderer, var.yt-live-chat-item-list-renderer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.yt-live-chat-item-list-renderer[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
yt-live-chat-item-list-renderer {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
yt-live-chat-item-list-renderer[moderation-mode-enabled] {
|
||||
--yt-live-chat-item-with-inline-actions-context-menu-display: none;
|
||||
--yt-live-chat-inline-action-button-container-display: flex;
|
||||
}
|
||||
|
||||
#contents.yt-live-chat-item-list-renderer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#empty-state-message.yt-live-chat-item-list-renderer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#empty-state-message.yt-live-chat-item-list-renderer>yt-live-chat-message-renderer.yt-live-chat-item-list-renderer {
|
||||
color: var(--yt-live-chat-tertiary-text-color);
|
||||
background: transparent;
|
||||
font-size: 18px;
|
||||
--yt-live-chat-message-renderer-text-align: center;
|
||||
}
|
||||
|
||||
yt-icon-button.yt-live-chat-item-list-renderer {
|
||||
background-color: #2196f3;
|
||||
border-radius: 999px;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 calc(50% - 16px) 8px calc(50% - 16px);
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
transition-property: bottom;
|
||||
transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
|
||||
transition-duration: 0.15s;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
yt-icon-button.yt-live-chat-item-list-renderer[disabled] {
|
||||
bottom: -42px;
|
||||
color: #fff;
|
||||
transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
|
||||
}
|
||||
|
||||
#item-scroller.yt-live-chat-item-list-renderer {
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
padding-right: var(--scrollbar-width);
|
||||
}
|
||||
|
||||
yt-live-chat-item-list-renderer[allow-scroll] #item-scroller.yt-live-chat-item-list-renderer {
|
||||
overflow-y: scroll;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#item-offset.yt-live-chat-item-list-renderer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#item-scroller.animated.yt-live-chat-item-list-renderer #item-offset.yt-live-chat-item-list-renderer {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#items.yt-live-chat-item-list-renderer {
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
padding: var(--yt-live-chat-item-list-renderer-padding, 4px 0);
|
||||
}
|
||||
|
||||
#items.yt-live-chat-item-list-renderer>*.yt-live-chat-item-list-renderer:not(:first-child) {
|
||||
border-top: var(--yt-live-chat-item-list-item-border, none);
|
||||
}
|
||||
|
||||
#item-scroller.animated.yt-live-chat-item-list-renderer #items.yt-live-chat-item-list-renderer {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#docked-messages.yt-live-chat-item-list-renderer {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-sticker-renderer.yt-live-chat-item-list-renderer {
|
||||
padding: 4px 24px;
|
||||
}
|
||||
|
||||
yt-live-chat-paid-sticker-renderer.yt-live-chat-item-list-renderer[dashboard-money-feed] {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -37,7 +37,7 @@ async def get_avatar_url(user_id):
|
||||
data = await r.json()
|
||||
url = data['data']['face']
|
||||
if not url.endswith('noface.gif'):
|
||||
url += '@24w_24h'
|
||||
url += '@48w_48h'
|
||||
_avatar_url_cache[user_id] = url
|
||||
|
||||
if len(_avatar_url_cache) > 10000:
|
||||
@ -134,7 +134,7 @@ class RoomManager:
|
||||
@staticmethod
|
||||
def __send_test_message(room):
|
||||
room.send_message(Command.ADD_TEXT, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@24w_24h.webp',
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': 'xfgryujk',
|
||||
'authorType': 0,
|
||||
@ -146,7 +146,7 @@ class RoomManager:
|
||||
'isMobileVerified': True
|
||||
})
|
||||
room.send_message(Command.ADD_TEXT, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@24w_24h.webp',
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': '主播',
|
||||
'authorType': 3,
|
||||
@ -158,32 +158,37 @@ class RoomManager:
|
||||
'isMobileVerified': True
|
||||
})
|
||||
room.send_message(Command.ADD_VIP, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@24w_24h.webp',
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': 'xfgryujk',
|
||||
})
|
||||
room.send_message(Command.ADD_GIFT, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@24w_24h.webp',
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': 'xfgryujk',
|
||||
'giftName': '礼花',
|
||||
'giftNum': 1,
|
||||
'totalCoin': 28000
|
||||
})
|
||||
room.send_message(Command.ADD_GIFT, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@24w_24h.webp',
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': 'xfgryujk',
|
||||
'giftName': '节奏风暴',
|
||||
'giftNum': 1,
|
||||
'totalCoin': 100000
|
||||
})
|
||||
room.send_message(Command.ADD_GIFT, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@24w_24h.webp',
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': 'xfgryujk',
|
||||
'giftName': '摩天大楼',
|
||||
'giftNum': 1,
|
||||
'totalCoin': 450000
|
||||
})
|
||||
room.send_message(Command.ADD_GIFT, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@24w_24h.webp',
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': 'xfgryujk',
|
||||
'giftName': '小电视飞船',
|
||||
'giftNum': 1,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user