mirror of
https://github.com/xfgryujk/blivechat.git
synced 2025-01-29 22:00:30 +08:00
修改样式
This commit is contained in:
John Smith
parent
49d58a9a60
commit
a89b64b454
@ -71,7 +71,7 @@ class Room(blivedm.BLiveClient):
|
||||
def __parse_buy_guard(self, command):
|
||||
data = command['data']
|
||||
return self._on_buy_guard(blivedm.GuardBuyMessage(
|
||||
data['uid'], data['username'], None, None, None,
|
||||
data['uid'], data['username'], data['guard_level'], None, None,
|
||||
None, None, data['start_time'], None
|
||||
))
|
||||
|
||||
@ -206,7 +206,8 @@ class Room(blivedm.BLiveClient):
|
||||
'id': id_,
|
||||
'avatarUrl': await models.avatar.get_avatar_url(message.uid),
|
||||
'timestamp': message.start_time,
|
||||
'authorName': message.username
|
||||
'authorName': message.username,
|
||||
'privilegeType': message.guard_level
|
||||
})
|
||||
|
||||
async def _on_super_chat(self, message: blivedm.SuperChatMessage):
|
||||
@ -427,7 +428,8 @@ class ChatHandler(tornado.websocket.WebSocketHandler):
|
||||
]
|
||||
member_data = {
|
||||
**base_data,
|
||||
'id': uuid.uuid4().hex
|
||||
'id': uuid.uuid4().hex,
|
||||
'privilegeType': 3
|
||||
}
|
||||
gift_data = {
|
||||
**base_data,
|
||||
|
||||
@ -1,306 +0,0 @@
|
||||
<template>
|
||||
<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">
|
||||
<img-shadow id="author-photo" height="40" width="40" class="style-scope yt-live-chat-legacy-paid-message-renderer"
|
||||
:imgUrl="avatarUrl"
|
||||
></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">{{timeText}}</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>
|
||||
|
||||
<script>
|
||||
import ImgShadow from './ImgShadow.vue'
|
||||
import * as utils from '@/utils'
|
||||
|
||||
export default {
|
||||
name: 'LegacyPaidMessage',
|
||||
components: {
|
||||
ImgShadow
|
||||
},
|
||||
props: {
|
||||
avatarUrl: String,
|
||||
authorName: String,
|
||||
title: String,
|
||||
content: String,
|
||||
time: Date
|
||||
},
|
||||
computed: {
|
||||
timeText() {
|
||||
return utils.getTimeTextMinSec(this.time)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
421
frontend/src/components/ChatRenderer/MembershipItem.vue
Normal file
421
frontend/src/components/ChatRenderer/MembershipItem.vue
Normal file
@ -0,0 +1,421 @@
|
||||
<template>
|
||||
<yt-live-chat-membership-item-renderer class="style-scope yt-live-chat-item-list-renderer" show-only-header>
|
||||
<div id="card" class="style-scope yt-live-chat-membership-item-renderer">
|
||||
<div id="header" class="style-scope yt-live-chat-membership-item-renderer">
|
||||
<img-shadow id="author-photo" height="40" width="40" class="style-scope yt-live-chat-membership-item-renderer"
|
||||
:imgUrl="avatarUrl"
|
||||
></img-shadow>
|
||||
<div id="header-content" class="style-scope yt-live-chat-membership-item-renderer">
|
||||
<div id="header-content-primary-column" class="style-scope yt-live-chat-membership-item-renderer">
|
||||
<div id="header-content-inner-column" class="style-scope yt-live-chat-membership-item-renderer">
|
||||
<yt-live-chat-author-chip class="style-scope yt-live-chat-membership-item-renderer">
|
||||
<span id="author-name" dir="auto" class="member style-scope yt-live-chat-author-chip">{{
|
||||
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">
|
||||
<author-badge class="style-scope yt-live-chat-author-chip"
|
||||
:isAdmin="false" :privilegeType="privilegeType"
|
||||
></author-badge>
|
||||
</span>
|
||||
</yt-live-chat-author-chip>
|
||||
</div>
|
||||
<div id="header-subtext" class="style-scope yt-live-chat-membership-item-renderer">{{title}}</div>
|
||||
</div>
|
||||
<div id="timestamp" class="style-scope yt-live-chat-membership-item-renderer">{{timeText}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</yt-live-chat-membership-item-renderer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImgShadow from './ImgShadow.vue'
|
||||
import AuthorBadge from './AuthorBadge.vue'
|
||||
import * as utils from '@/utils'
|
||||
|
||||
export default {
|
||||
name: 'MembershipItem',
|
||||
components: {
|
||||
ImgShadow,
|
||||
AuthorBadge
|
||||
},
|
||||
props: {
|
||||
avatarUrl: String,
|
||||
authorName: String,
|
||||
privilegeType: Number,
|
||||
title: String,
|
||||
time: Date
|
||||
},
|
||||
computed: {
|
||||
timeText() {
|
||||
return utils.getTimeTextHourMin(this.time)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- yt-live-chat-membership-item-renderer -->
|
||||
<style>
|
||||
#timestamp.yt-live-chat-membership-item-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-membership-item-renderer {
|
||||
display: block;
|
||||
margin-right: 16px;
|
||||
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
|
||||
-ms-flex: var(--layout-flex-none_-_-ms-flex);
|
||||
-webkit-flex: var(--layout-flex-none_-_-webkit-flex);
|
||||
flex: var(--layout-flex-none_-_flex);
|
||||
}
|
||||
|
||||
#menu-button.yt-live-chat-membership-item-renderer {
|
||||
width: var(--yt-live-chat-32px-icon-button_-_width);
|
||||
height: var(--yt-live-chat-32px-icon-button_-_height);
|
||||
padding: var(--yt-live-chat-32px-icon-button_-_padding);
|
||||
}
|
||||
|
||||
#menu.yt-live-chat-membership-item-renderer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
|
||||
transform: translateX(100px);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer:hover #menu.yt-live-chat-membership-item-renderer,
|
||||
yt-live-chat-membership-item-renderer[menu-visible] #menu.yt-live-chat-membership-item-renderer {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer:focus-within #menu.yt-live-chat-membership-item-renderer {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#inline-action-button-container.yt-live-chat-membership-item-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: var(--layout-center-center_-_-ms-flex-align);
|
||||
-webkit-align-items: var(--layout-center-center_-_-webkit-align-items);
|
||||
align-items: var(--layout-center-center_-_align-items);
|
||||
-ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack);
|
||||
-webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content);
|
||||
justify-content: var(--layout-center-center_-_justify-content);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-membership-item-renderer {
|
||||
display: var(--layout-horizontal_-_display);
|
||||
-ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
|
||||
-webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
|
||||
flex-direction: var(--layout-horizontal_-_flex-direction);
|
||||
|
||||
|
||||
display: var(--yt-live-chat-inline-action-button-container-display, none);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-membership-item-renderer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-membership-item-renderer {
|
||||
display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block);
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer,
|
||||
#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer {
|
||||
--yt-button-icon-size: 36px;
|
||||
--yt-button-icon-padding: 6px;
|
||||
|
||||
color: var(--yt-white);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer {
|
||||
background: var(--yt-luna-black-opacity-lighten-1);
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-membership-item-renderer>.yt-live-chat-membership-item-renderer:hover {
|
||||
background: var(--yt-luna-black);
|
||||
}
|
||||
|
||||
#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-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-membership-item-renderer>.yt-live-chat-membership-item-renderer:hover {
|
||||
background: var(--yt-live-chat-additional-inline-action-button-background-color-hover);
|
||||
}
|
||||
|
||||
#additional-inline-action-buttons.yt-live-chat-membership-item-renderer:not(:empty) {
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
#inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer:not(:first-child),
|
||||
#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer:not(:first-child) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
--yt-live-chat-sponsor-header-color: #0a8043;
|
||||
--yt-live-chat-sponsor-color: #0f9d58;
|
||||
--yt-live-chat-sponsor-text-color: #fff;
|
||||
--yt-live-chat-item-timestamp-display: var(--yt-live-chat-paid-message-timestamp-display, none);
|
||||
|
||||
padding: 4px 24px;
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[dashboard-money-feed] {
|
||||
padding: 0;
|
||||
|
||||
--yt-live-chat-item-timestamp-display: block;
|
||||
}
|
||||
|
||||
#card.yt-live-chat-membership-item-renderer {
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
|
||||
display: var(--layout-vertical_-_display);
|
||||
-ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction);
|
||||
-webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction);
|
||||
flex-direction: var(--layout-vertical_-_flex-direction);
|
||||
box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[dashboard-money-feed] #card.yt-live-chat-membership-item-renderer {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#header.yt-live-chat-membership-item-renderer {
|
||||
position: relative;
|
||||
|
||||
background-color: var(--yt-live-chat-sponsor-header-color);
|
||||
padding: 8px 16px;
|
||||
color: #fff;
|
||||
min-height: 20px;
|
||||
|
||||
display: var(--layout-horizontal_-_display);
|
||||
-ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
|
||||
-webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
|
||||
flex-direction: var(--layout-horizontal_-_flex-direction);
|
||||
-ms-flex-align: var(--layout-center_-_-ms-flex-align);
|
||||
-webkit-align-items: var(--layout-center_-_-webkit-align-items);
|
||||
align-items: var(--layout-center_-_align-items);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[show-only-header] #header.yt-live-chat-membership-item-renderer {
|
||||
background-color: var(--yt-live-chat-sponsor-color);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[dashboard-money-feed] #header.yt-live-chat-membership-item-renderer {
|
||||
color: var(--yt-live-chat-secondary-text-color);
|
||||
background-color: var(--yt-live-chat-background-color);
|
||||
-ms-flex-align: var(--layout-start_-_-ms-flex-align);
|
||||
-webkit-align-items: var(--layout-start_-_-webkit-align-items);
|
||||
align-items: var(--layout-start_-_align-items);
|
||||
}
|
||||
|
||||
#header-content.yt-live-chat-membership-item-renderer {
|
||||
display: var(--layout-horizontal_-_display);
|
||||
-ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
|
||||
-webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
|
||||
flex-direction: var(--layout-horizontal_-_flex-direction);
|
||||
-ms-flex-pack: var(--layout-justified_-_-ms-flex-pack);
|
||||
-webkit-justify-content: var(--layout-justified_-_-webkit-justify-content);
|
||||
justify-content: var(--layout-justified_-_justify-content);
|
||||
-ms-flex: var(--layout-flex_-_-ms-flex);
|
||||
-webkit-flex: var(--layout-flex_-_-webkit-flex);
|
||||
flex: var(--layout-flex_-_flex);
|
||||
-webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis);
|
||||
flex-basis: var(--layout-flex_-_flex-basis);
|
||||
-ms-flex-align: var(--layout-baseline_-_-ms-flex-align);
|
||||
-webkit-align-items: var(--layout-baseline_-_-webkit-align-items);
|
||||
align-items: var(--layout-baseline_-_align-items);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-content.yt-live-chat-membership-item-renderer {
|
||||
display: var(--layout-vertical_-_display);
|
||||
-ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction);
|
||||
-webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction);
|
||||
flex-direction: var(--layout-vertical_-_flex-direction);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-content-inner-column.yt-live-chat-membership-item-renderer {
|
||||
margin-bottom: 4px;
|
||||
|
||||
display: var(--layout-horizontal_-_display);
|
||||
-ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
|
||||
-webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
|
||||
flex-direction: var(--layout-horizontal_-_flex-direction);
|
||||
-ms-flex-align: var(--layout-center_-_-ms-flex-align);
|
||||
-webkit-align-items: var(--layout-center_-_-webkit-align-items);
|
||||
align-items: var(--layout-center_-_align-items);
|
||||
-ms-flex: var(--layout-flex-none_-_-ms-flex);
|
||||
-webkit-flex: var(--layout-flex-none_-_-webkit-flex);
|
||||
flex: var(--layout-flex-none_-_flex);
|
||||
}
|
||||
|
||||
#author-photo.yt-live-chat-membership-item-renderer {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
yt-icon#author-photo.yt-live-chat-membership-item-renderer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[dashboard-money-feed] yt-icon#author-photo.yt-live-chat-membership-item-renderer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer:not([dashboard-money-feed]) yt-live-chat-author-chip.yt-live-chat-membership-item-renderer {
|
||||
--yt-live-chat-sponsor-color: var(--yt-live-chat-sponsor-text-color);
|
||||
--yt-live-chat-secondary-text-color: var(--yt-live-chat-sponsor-text-color);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[dashboard-money-feed] yt-live-chat-author-chip.yt-live-chat-membership-item-renderer {
|
||||
margin-right: 8px;
|
||||
font-weight: 500;
|
||||
--yt-live-chat-sponsor-color: var(--yt-live-chat-secondary-text-color);
|
||||
}
|
||||
|
||||
#header-subtext.yt-live-chat-membership-item-renderer {
|
||||
margin-top: 2px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#header-subtext.yt-live-chat-membership-item-renderer:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-subtext.yt-live-chat-membership-item-renderer {
|
||||
margin: 4px 0 13px;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
color: var(--yt-live-chat-secondary-text-color);
|
||||
}
|
||||
|
||||
#header-primary-text.yt-live-chat-membership-item-renderer {
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
#header-primary-text.yt-live-chat-membership-item-renderer:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[has-primary-header-text]:not([dashboard-money-feed]) yt-live-chat-author-chip.yt-live-chat-membership-item-renderer,
|
||||
yt-live-chat-membership-item-renderer[has-primary-header-text]:not([dashboard-money-feed]) #header-subtext.yt-live-chat-membership-item-renderer {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-primary-text.yt-live-chat-membership-item-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: var(--yt-white);
|
||||
display: var(--layout-inline_-_display, inline);
|
||||
-ms-flex-align: var(--layout-center-center_-_-ms-flex-align);
|
||||
-webkit-align-items: var(--layout-center-center_-_-webkit-align-items);
|
||||
align-items: var(--layout-center-center_-_align-items);
|
||||
-ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack);
|
||||
-webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content);
|
||||
justify-content: var(--layout-center-center_-_justify-content);
|
||||
font-size: var(--ytd-badge_-_font-size);
|
||||
font-weight: var(--ytd-badge_-_font-weight);
|
||||
line-height: var(--ytd-badge_-_line-height);
|
||||
}
|
||||
|
||||
#content.yt-live-chat-membership-item-renderer {
|
||||
background-color: var(--yt-live-chat-sponsor-color);
|
||||
color: var(--yt-live-chat-sponsor-text-color);
|
||||
padding: 8px 16px;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[dashboard-money-feed] #content.yt-live-chat-membership-item-renderer {
|
||||
background-color: unset;
|
||||
font-size: unset;
|
||||
color: var(--yt-live-chat-secondary-text-color);
|
||||
padding: 0 0 16px 72px;
|
||||
}
|
||||
|
||||
#content.yt-live-chat-membership-item-renderer img.yt-live-chat-membership-item-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-membership-item-renderer[show-only-header] #content.yt-live-chat-membership-item-renderer,
|
||||
#deleted-state.yt-live-chat-membership-item-renderer:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#deleted-state.yt-live-chat-membership-item-renderer {
|
||||
display: block;
|
||||
font-style: italic;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
a.yt-live-chat-membership-item-renderer {
|
||||
display: inline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#message.yt-live-chat-membership-item-renderer a.yt-live-chat-membership-item-renderer {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
#message.yt-live-chat-membership-item-renderer a.yt-live-chat-membership-item-renderer .mention.yt-live-chat-membership-item-renderer {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#menu.yt-live-chat-membership-item-renderer {
|
||||
background: linear-gradient(to right, transparent, var(--yt-live-chat-sponsor-header-color) 100%);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[show-only-header] #menu.yt-live-chat-membership-item-renderer {
|
||||
background: linear-gradient(to right, transparent, var(--yt-live-chat-sponsor-color) 100%);
|
||||
}
|
||||
|
||||
yt-live-chat-membership-item-renderer[dashboard-money-feed] #menu.yt-live-chat-membership-item-renderer {
|
||||
margin-top: 8px;
|
||||
background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%);
|
||||
}
|
||||
</style>
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
return 'CN¥' + utils.formatCurrency(this.price)
|
||||
},
|
||||
timeText() {
|
||||
return utils.getTimeTextMinSec(this.time)
|
||||
return utils.getTimeTextHourMin(this.time)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,7 +54,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
timeText() {
|
||||
return utils.getTimeTextMinSec(this.time)
|
||||
return utils.getTimeTextHourMin(this.time)
|
||||
},
|
||||
authorTypeText() {
|
||||
return constants.AUTHOR_TYPE_TO_TEXT[this.authorType]
|
||||
|
||||
@ -26,11 +26,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="pinnedMessage">
|
||||
<legacy-paid-message :key="pinnedMessage.id" v-if="pinnedMessage.type === MESSAGE_TYPE_MEMBER"
|
||||
<membership-item :key="pinnedMessage.id" v-if="pinnedMessage.type === MESSAGE_TYPE_MEMBER"
|
||||
class="style-scope yt-live-chat-ticker-renderer"
|
||||
:avatarUrl="pinnedMessage.avatarUrl" :title="pinnedMessage.title" :content="pinnedMessage.content"
|
||||
:time="pinnedMessage.time"
|
||||
></legacy-paid-message>
|
||||
:avatarUrl="pinnedMessage.avatarUrl" :authorName="pinnedMessage.authorName" :privilegeType="pinnedMessage.privilegeType"
|
||||
:title="pinnedMessage.title" :time="pinnedMessage.time"
|
||||
></membership-item>
|
||||
<paid-message :key="pinnedMessage.id" v-else
|
||||
class="style-scope yt-live-chat-ticker-renderer"
|
||||
:price="pinnedMessage.price" :avatarUrl="pinnedMessage.avatarUrl" :authorName="pinnedMessage.authorName"
|
||||
@ -44,7 +44,7 @@
|
||||
import * as config from '@/api/config'
|
||||
import {formatCurrency} from '@/utils'
|
||||
import ImgShadow from './ImgShadow.vue'
|
||||
import LegacyPaidMessage from './LegacyPaidMessage.vue'
|
||||
import MembershipItem from './MembershipItem.vue'
|
||||
import PaidMessage from './PaidMessage.vue'
|
||||
import * as constants from './constants'
|
||||
|
||||
@ -52,7 +52,7 @@ export default {
|
||||
name: 'Ticker',
|
||||
components: {
|
||||
ImgShadow,
|
||||
LegacyPaidMessage,
|
||||
MembershipItem,
|
||||
PaidMessage
|
||||
},
|
||||
props: {
|
||||
|
||||
@ -23,11 +23,11 @@
|
||||
:price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
|
||||
:time="message.time" :content="getGiftShowContent(message)"
|
||||
></paid-message>
|
||||
<legacy-paid-message :key="message.id" v-else-if="message.type === MESSAGE_TYPE_MEMBER"
|
||||
<membership-item :key="message.id" v-else-if="message.type === MESSAGE_TYPE_MEMBER"
|
||||
class="style-scope yt-live-chat-item-list-renderer"
|
||||
:avatarUrl="message.avatarUrl" :title="message.title" :content="message.content"
|
||||
:time="message.time"
|
||||
></legacy-paid-message>
|
||||
:avatarUrl="message.avatarUrl" :authorName="message.authorName" :privilegeType="message.privilegeType"
|
||||
:title="message.title" :time="message.time"
|
||||
></membership-item>
|
||||
<paid-message :key="message.id" v-else-if="message.type === MESSAGE_TYPE_SUPER_CHAT"
|
||||
class="style-scope yt-live-chat-item-list-renderer"
|
||||
:price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
|
||||
@ -45,7 +45,7 @@
|
||||
import * as config from '@/api/config'
|
||||
import Ticker from './Ticker.vue'
|
||||
import TextMessage from './TextMessage.vue'
|
||||
import LegacyPaidMessage from './LegacyPaidMessage.vue'
|
||||
import MembershipItem from './MembershipItem.vue'
|
||||
import PaidMessage from './PaidMessage.vue'
|
||||
import * as constants from './constants'
|
||||
|
||||
@ -57,7 +57,7 @@ export default {
|
||||
components: {
|
||||
Ticker,
|
||||
TextMessage,
|
||||
LegacyPaidMessage,
|
||||
MembershipItem,
|
||||
PaidMessage
|
||||
},
|
||||
props: {
|
||||
@ -628,6 +628,288 @@ html:not(.style-scope) {
|
||||
--yt-pdg-paid-stickers-author-name-font-size: 13px;
|
||||
--yt-pdg-paid-stickers-margin-left: 38px;
|
||||
}
|
||||
|
||||
html:not(.style-scope) {
|
||||
--layout_-_display: flex;
|
||||
;
|
||||
|
||||
--layout-inline_-_display: inline-flex;
|
||||
;
|
||||
|
||||
--layout-horizontal_-_display: var(--layout_-_display);
|
||||
--layout-horizontal_-_-ms-flex-direction: row;
|
||||
--layout-horizontal_-_-webkit-flex-direction: row;
|
||||
--layout-horizontal_-_flex-direction: row;
|
||||
;
|
||||
|
||||
--layout-horizontal-reverse_-_display: var(--layout_-_display);
|
||||
--layout-horizontal-reverse_-_-ms-flex-direction: row-reverse;
|
||||
--layout-horizontal-reverse_-_-webkit-flex-direction: row-reverse;
|
||||
--layout-horizontal-reverse_-_flex-direction: row-reverse;
|
||||
;
|
||||
|
||||
--layout-vertical_-_display: var(--layout_-_display);
|
||||
--layout-vertical_-_-ms-flex-direction: column;
|
||||
--layout-vertical_-_-webkit-flex-direction: column;
|
||||
--layout-vertical_-_flex-direction: column;
|
||||
;
|
||||
|
||||
--layout-vertical-reverse_-_display: var(--layout_-_display);
|
||||
--layout-vertical-reverse_-_-ms-flex-direction: column-reverse;
|
||||
--layout-vertical-reverse_-_-webkit-flex-direction: column-reverse;
|
||||
--layout-vertical-reverse_-_flex-direction: column-reverse;
|
||||
;
|
||||
|
||||
--layout-wrap_-_-ms-flex-wrap: wrap;
|
||||
--layout-wrap_-_-webkit-flex-wrap: wrap;
|
||||
--layout-wrap_-_flex-wrap: wrap;
|
||||
;
|
||||
|
||||
--layout-wrap-reverse_-_-ms-flex-wrap: wrap-reverse;
|
||||
--layout-wrap-reverse_-_-webkit-flex-wrap: wrap-reverse;
|
||||
--layout-wrap-reverse_-_flex-wrap: wrap-reverse;
|
||||
;
|
||||
|
||||
--layout-flex-auto_-_-ms-flex: 1 1 auto;
|
||||
--layout-flex-auto_-_-webkit-flex: 1 1 auto;
|
||||
--layout-flex-auto_-_flex: 1 1 auto;
|
||||
;
|
||||
|
||||
--layout-flex-none_-_-ms-flex: none;
|
||||
--layout-flex-none_-_-webkit-flex: none;
|
||||
--layout-flex-none_-_flex: none;
|
||||
;
|
||||
|
||||
--layout-flex_-_-ms-flex: 1 1 0.000000001px;
|
||||
--layout-flex_-_-webkit-flex: 1;
|
||||
--layout-flex_-_flex: 1;
|
||||
--layout-flex_-_-webkit-flex-basis: 0.000000001px;
|
||||
--layout-flex_-_flex-basis: 0.000000001px;
|
||||
;
|
||||
|
||||
--layout-flex-2_-_-ms-flex: 2;
|
||||
--layout-flex-2_-_-webkit-flex: 2;
|
||||
--layout-flex-2_-_flex: 2;
|
||||
;
|
||||
|
||||
--layout-flex-3_-_-ms-flex: 3;
|
||||
--layout-flex-3_-_-webkit-flex: 3;
|
||||
--layout-flex-3_-_flex: 3;
|
||||
;
|
||||
|
||||
--layout-flex-4_-_-ms-flex: 4;
|
||||
--layout-flex-4_-_-webkit-flex: 4;
|
||||
--layout-flex-4_-_flex: 4;
|
||||
;
|
||||
|
||||
--layout-flex-5_-_-ms-flex: 5;
|
||||
--layout-flex-5_-_-webkit-flex: 5;
|
||||
--layout-flex-5_-_flex: 5;
|
||||
;
|
||||
|
||||
--layout-flex-6_-_-ms-flex: 6;
|
||||
--layout-flex-6_-_-webkit-flex: 6;
|
||||
--layout-flex-6_-_flex: 6;
|
||||
;
|
||||
|
||||
--layout-flex-7_-_-ms-flex: 7;
|
||||
--layout-flex-7_-_-webkit-flex: 7;
|
||||
--layout-flex-7_-_flex: 7;
|
||||
;
|
||||
|
||||
--layout-flex-8_-_-ms-flex: 8;
|
||||
--layout-flex-8_-_-webkit-flex: 8;
|
||||
--layout-flex-8_-_flex: 8;
|
||||
;
|
||||
|
||||
--layout-flex-9_-_-ms-flex: 9;
|
||||
--layout-flex-9_-_-webkit-flex: 9;
|
||||
--layout-flex-9_-_flex: 9;
|
||||
;
|
||||
|
||||
--layout-flex-10_-_-ms-flex: 10;
|
||||
--layout-flex-10_-_-webkit-flex: 10;
|
||||
--layout-flex-10_-_flex: 10;
|
||||
;
|
||||
|
||||
--layout-flex-11_-_-ms-flex: 11;
|
||||
--layout-flex-11_-_-webkit-flex: 11;
|
||||
--layout-flex-11_-_flex: 11;
|
||||
;
|
||||
|
||||
--layout-flex-12_-_-ms-flex: 12;
|
||||
--layout-flex-12_-_-webkit-flex: 12;
|
||||
--layout-flex-12_-_flex: 12;
|
||||
;
|
||||
|
||||
|
||||
|
||||
--layout-start_-_-ms-flex-align: start;
|
||||
--layout-start_-_-webkit-align-items: flex-start;
|
||||
--layout-start_-_align-items: flex-start;
|
||||
;
|
||||
|
||||
--layout-center_-_-ms-flex-align: center;
|
||||
--layout-center_-_-webkit-align-items: center;
|
||||
--layout-center_-_align-items: center;
|
||||
;
|
||||
|
||||
--layout-end_-_-ms-flex-align: end;
|
||||
--layout-end_-_-webkit-align-items: flex-end;
|
||||
--layout-end_-_align-items: flex-end;
|
||||
;
|
||||
|
||||
--layout-baseline_-_-ms-flex-align: baseline;
|
||||
--layout-baseline_-_-webkit-align-items: baseline;
|
||||
--layout-baseline_-_align-items: baseline;
|
||||
;
|
||||
|
||||
|
||||
|
||||
--layout-start-justified_-_-ms-flex-pack: start;
|
||||
--layout-start-justified_-_-webkit-justify-content: flex-start;
|
||||
--layout-start-justified_-_justify-content: flex-start;
|
||||
;
|
||||
|
||||
--layout-center-justified_-_-ms-flex-pack: center;
|
||||
--layout-center-justified_-_-webkit-justify-content: center;
|
||||
--layout-center-justified_-_justify-content: center;
|
||||
;
|
||||
|
||||
--layout-end-justified_-_-ms-flex-pack: end;
|
||||
--layout-end-justified_-_-webkit-justify-content: flex-end;
|
||||
--layout-end-justified_-_justify-content: flex-end;
|
||||
;
|
||||
|
||||
--layout-around-justified_-_-ms-flex-pack: distribute;
|
||||
--layout-around-justified_-_-webkit-justify-content: space-around;
|
||||
--layout-around-justified_-_justify-content: space-around;
|
||||
;
|
||||
|
||||
--layout-justified_-_-ms-flex-pack: justify;
|
||||
--layout-justified_-_-webkit-justify-content: space-between;
|
||||
--layout-justified_-_justify-content: space-between;
|
||||
;
|
||||
|
||||
--layout-center-center_-_-ms-flex-align: var(--layout-center_-_-ms-flex-align);
|
||||
--layout-center-center_-_-webkit-align-items: var(--layout-center_-_-webkit-align-items);
|
||||
--layout-center-center_-_align-items: var(--layout-center_-_align-items);
|
||||
--layout-center-center_-_-ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack);
|
||||
--layout-center-center_-_-webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content);
|
||||
--layout-center-center_-_justify-content: var(--layout-center-justified_-_justify-content);
|
||||
;
|
||||
|
||||
|
||||
|
||||
--layout-self-start_-_-ms-align-self: flex-start;
|
||||
--layout-self-start_-_-webkit-align-self: flex-start;
|
||||
--layout-self-start_-_align-self: flex-start;
|
||||
;
|
||||
|
||||
--layout-self-center_-_-ms-align-self: center;
|
||||
--layout-self-center_-_-webkit-align-self: center;
|
||||
--layout-self-center_-_align-self: center;
|
||||
;
|
||||
|
||||
--layout-self-end_-_-ms-align-self: flex-end;
|
||||
--layout-self-end_-_-webkit-align-self: flex-end;
|
||||
--layout-self-end_-_align-self: flex-end;
|
||||
;
|
||||
|
||||
--layout-self-stretch_-_-ms-align-self: stretch;
|
||||
--layout-self-stretch_-_-webkit-align-self: stretch;
|
||||
--layout-self-stretch_-_align-self: stretch;
|
||||
;
|
||||
|
||||
--layout-self-baseline_-_-ms-align-self: baseline;
|
||||
--layout-self-baseline_-_-webkit-align-self: baseline;
|
||||
--layout-self-baseline_-_align-self: baseline;
|
||||
;
|
||||
|
||||
|
||||
|
||||
--layout-start-aligned_-_-ms-flex-line-pack: start;
|
||||
--layout-start-aligned_-_-ms-align-content: flex-start;
|
||||
--layout-start-aligned_-_-webkit-align-content: flex-start;
|
||||
--layout-start-aligned_-_align-content: flex-start;
|
||||
;
|
||||
|
||||
--layout-end-aligned_-_-ms-flex-line-pack: end;
|
||||
--layout-end-aligned_-_-ms-align-content: flex-end;
|
||||
--layout-end-aligned_-_-webkit-align-content: flex-end;
|
||||
--layout-end-aligned_-_align-content: flex-end;
|
||||
;
|
||||
|
||||
--layout-center-aligned_-_-ms-flex-line-pack: center;
|
||||
--layout-center-aligned_-_-ms-align-content: center;
|
||||
--layout-center-aligned_-_-webkit-align-content: center;
|
||||
--layout-center-aligned_-_align-content: center;
|
||||
;
|
||||
|
||||
--layout-between-aligned_-_-ms-flex-line-pack: justify;
|
||||
--layout-between-aligned_-_-ms-align-content: space-between;
|
||||
--layout-between-aligned_-_-webkit-align-content: space-between;
|
||||
--layout-between-aligned_-_align-content: space-between;
|
||||
;
|
||||
|
||||
--layout-around-aligned_-_-ms-flex-line-pack: distribute;
|
||||
--layout-around-aligned_-_-ms-align-content: space-around;
|
||||
--layout-around-aligned_-_-webkit-align-content: space-around;
|
||||
--layout-around-aligned_-_align-content: space-around;
|
||||
;
|
||||
|
||||
|
||||
|
||||
--layout-block_-_display: block;
|
||||
;
|
||||
|
||||
--layout-invisible_-_visibility: hidden !important;
|
||||
;
|
||||
|
||||
--layout-relative_-_position: relative;
|
||||
;
|
||||
|
||||
--layout-fit_-_position: absolute;
|
||||
--layout-fit_-_top: 0;
|
||||
--layout-fit_-_right: 0;
|
||||
--layout-fit_-_bottom: 0;
|
||||
--layout-fit_-_left: 0;
|
||||
;
|
||||
|
||||
--layout-scroll_-_-webkit-overflow-scrolling: touch;
|
||||
--layout-scroll_-_overflow: auto;
|
||||
;
|
||||
|
||||
--layout-fullbleed_-_margin: 0;
|
||||
--layout-fullbleed_-_height: 100vh;
|
||||
;
|
||||
|
||||
|
||||
|
||||
--layout-fixed-top_-_position: fixed;
|
||||
--layout-fixed-top_-_top: 0;
|
||||
--layout-fixed-top_-_left: 0;
|
||||
--layout-fixed-top_-_right: 0;
|
||||
;
|
||||
|
||||
--layout-fixed-right_-_position: fixed;
|
||||
--layout-fixed-right_-_top: 0;
|
||||
--layout-fixed-right_-_right: 0;
|
||||
--layout-fixed-right_-_bottom: 0;
|
||||
;
|
||||
|
||||
--layout-fixed-bottom_-_position: fixed;
|
||||
--layout-fixed-bottom_-_right: 0;
|
||||
--layout-fixed-bottom_-_bottom: 0;
|
||||
--layout-fixed-bottom_-_left: 0;
|
||||
;
|
||||
|
||||
--layout-fixed-left_-_position: fixed;
|
||||
--layout-fixed-left_-_top: 0;
|
||||
--layout-fixed-left_-_bottom: 0;
|
||||
--layout-fixed-left_-_left: 0;
|
||||
;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- yt-live-chat-app -->
|
||||
|
||||
@ -52,6 +52,7 @@ export default {
|
||||
avatarSize: 'Avatar size',
|
||||
|
||||
userNames: 'User names',
|
||||
showUserNames: 'Show user names',
|
||||
font: 'Font',
|
||||
fontSize: 'Font size',
|
||||
lineHeight: 'Line height (0 for default)',
|
||||
|
||||
@ -52,6 +52,7 @@ export default {
|
||||
avatarSize: 'アイコンのサイズ',
|
||||
|
||||
userNames: 'ユーザー名',
|
||||
showUserNames: 'ユーザー名を表示する',
|
||||
font: 'フォント',
|
||||
fontSize: 'フォントサイズ',
|
||||
lineHeight: '行の高さ（0はデフォルト）',
|
||||
|
||||
@ -52,6 +52,7 @@ export default {
|
||||
avatarSize: '头像尺寸',
|
||||
|
||||
userNames: '用户名',
|
||||
showUserNames: '显示用户名',
|
||||
font: '字体',
|
||||
fontSize: '字体尺寸',
|
||||
lineHeight: '行高（0为默认）',
|
||||
|
||||
@ -27,8 +27,8 @@ export function formatCurrency (price) {
|
||||
}).format(price)
|
||||
}
|
||||
|
||||
export function getTimeTextMinSec (date) {
|
||||
export function getTimeTextHourMin (date) {
|
||||
let hour = date.getHours()
|
||||
let min = ('00' + date.getMinutes()).slice(-2)
|
||||
let sec = ('00' + date.getSeconds()).slice(-2)
|
||||
return `${min}:${sec}`
|
||||
return `${hour}:${min}`
|
||||
}
|
||||
|
||||
@ -188,8 +188,8 @@ export default {
|
||||
avatarUrl: data.avatarUrl,
|
||||
time: new Date(data.timestamp * 1000),
|
||||
authorName: data.authorName,
|
||||
title: 'NEW MEMBER!',
|
||||
content: `Welcome ${data.authorName}!`
|
||||
privilegeType: data.privilegeType,
|
||||
title: 'New member'
|
||||
}
|
||||
break
|
||||
case COMMAND_ADD_SUPER_CHAT:
|
||||
|
||||
@ -22,6 +22,9 @@
|
||||
</el-form-item>
|
||||
|
||||
<h3>{{$t('stylegen.userNames')}}</h3>
|
||||
<el-form-item :label="$t('stylegen.showUserNames')">
|
||||
<el-switch v-model="form.showUserNames"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('stylegen.font')">
|
||||
<el-autocomplete v-model="form.userNameFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
|
||||
</el-form-item>
|
||||
@ -219,15 +222,15 @@ let textMessageTemplate = {
|
||||
repeated: 1,
|
||||
translation: ''
|
||||
}
|
||||
let legacyPaidMessageTemplate = {
|
||||
let membershipItemTemplate = {
|
||||
id: 0,
|
||||
addTime: time,
|
||||
type: constants.MESSAGE_TYPE_MEMBER,
|
||||
avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
|
||||
time: time,
|
||||
authorName: '',
|
||||
title: 'NEW MEMBER!',
|
||||
content: ''
|
||||
privilegeType: 3,
|
||||
title: 'New member'
|
||||
}
|
||||
let paidMessageTemplate = {
|
||||
id: 0,
|
||||
@ -266,15 +269,14 @@ const EXAMPLE_MESSAGES = [
|
||||
content: 'kksk'
|
||||
},
|
||||
{
|
||||
...legacyPaidMessageTemplate,
|
||||
...membershipItemTemplate,
|
||||
id: (nextId++).toString(),
|
||||
authorName: '进击的冰糖',
|
||||
content: 'Welcome 进击的冰糖!'
|
||||
authorName: '艾米亚official'
|
||||
},
|
||||
{
|
||||
...paidMessageTemplate,
|
||||
id: (nextId++).toString(),
|
||||
authorName: '无火的残渣',
|
||||
authorName: '愛里紗メイプル',
|
||||
price: 66600,
|
||||
content: 'Sent 小电视飞船x100'
|
||||
},
|
||||
@ -288,7 +290,7 @@ const EXAMPLE_MESSAGES = [
|
||||
{
|
||||
...paidMessageTemplate,
|
||||
id: (nextId++).toString(),
|
||||
authorName: '夏色祭保護協会会長',
|
||||
authorName: 'AstralisUP',
|
||||
price: 30,
|
||||
content: '言いたいことがあるんだよ！'
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ export const DEFAULT_CONFIG = {
|
||||
showAvatars: true,
|
||||
avatarSize: 24,
|
||||
|
||||
showUserNames: true,
|
||||
userNameFont: 'Changa One',
|
||||
userNameFontSize: 20,
|
||||
userNameLineHeight: 0,
|
||||
@ -109,11 +110,11 @@ yt-live-chat-renderer * {
|
||||
${getShowOutlinesStyle(config)}
|
||||
font-family: "${config.messageFont}"${FALLBACK_FONTS};
|
||||
font-size: ${config.messageFontSize}px !important;
|
||||
line-height: ${config.messageLineHeight}px !important;
|
||||
line-height: ${config.messageLineHeight || config.messageFontSize}px !important;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer #content,
|
||||
yt-live-chat-legacy-paid-message-renderer #content {
|
||||
yt-live-chat-membership-item-renderer #content {
|
||||
overflow: initial !important;
|
||||
}
|
||||
|
||||
@ -133,12 +134,7 @@ yt-live-chat-message-input-renderer {
|
||||
}
|
||||
|
||||
/* Reduce side padding. */
|
||||
yt-live-chat-text-message-renderer,
|
||||
yt-live-chat-legacy-paid-message-renderer {
|
||||
${getPaddingStyle(config)}
|
||||
}
|
||||
|
||||
yt-live-chat-paid-message-renderer #header {
|
||||
yt-live-chat-text-message-renderer {
|
||||
${getPaddingStyle(config)}
|
||||
}
|
||||
|
||||
@ -147,8 +143,8 @@ yt-live-chat-text-message-renderer #author-photo,
|
||||
yt-live-chat-text-message-renderer #author-photo img,
|
||||
yt-live-chat-paid-message-renderer #author-photo,
|
||||
yt-live-chat-paid-message-renderer #author-photo img,
|
||||
yt-live-chat-legacy-paid-message-renderer #author-photo,
|
||||
yt-live-chat-legacy-paid-message-renderer #author-photo img {
|
||||
yt-live-chat-membership-item-renderer #author-photo,
|
||||
yt-live-chat-membership-item-renderer #author-photo img {
|
||||
${config.showAvatars ? '' : 'display: none !important;'}
|
||||
width: ${config.avatarSize}px !important;
|
||||
height: ${config.avatarSize}px !important;
|
||||
@ -189,6 +185,7 @@ yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="memb
|
||||
|
||||
/* Channel names. */
|
||||
yt-live-chat-text-message-renderer #author-name {
|
||||
${config.showUserNames ? '' : 'display: none !important;'}
|
||||
${config.userNameColor ? `color: ${config.userNameColor} !important;` : ''}
|
||||
font-family: "${config.userNameFont}"${FALLBACK_FONTS};
|
||||
font-size: ${config.userNameFontSize}px !important;
|
||||
@ -213,8 +210,8 @@ ${!config.messageOnNewLine ? '' : `yt-live-chat-text-message-renderer #message {
|
||||
/* SuperChat/Fan Funding Messages. */
|
||||
yt-live-chat-paid-message-renderer #author-name,
|
||||
yt-live-chat-paid-message-renderer #author-name *,
|
||||
yt-live-chat-legacy-paid-message-renderer #event-text,
|
||||
yt-live-chat-legacy-paid-message-renderer #event-text * {
|
||||
yt-live-chat-membership-item-renderer #header-content-inner-column,
|
||||
yt-live-chat-membership-item-renderer #header-content-inner-column * {
|
||||
${config.firstLineColor ? `color: ${config.firstLineColor} !important;` : ''}
|
||||
font-family: "${config.firstLineFont}"${FALLBACK_FONTS};
|
||||
font-size: ${config.firstLineFontSize}px !important;
|
||||
@ -223,8 +220,8 @@ yt-live-chat-legacy-paid-message-renderer #event-text * {
|
||||
|
||||
yt-live-chat-paid-message-renderer #purchase-amount,
|
||||
yt-live-chat-paid-message-renderer #purchase-amount *,
|
||||
yt-live-chat-legacy-paid-message-renderer #detail-text,
|
||||
yt-live-chat-legacy-paid-message-renderer #detail-text * {
|
||||
yt-live-chat-membership-item-renderer #header-subtext,
|
||||
yt-live-chat-membership-item-renderer #header-subtext * {
|
||||
${config.secondLineColor ? `color: ${config.secondLineColor} !important;` : ''}
|
||||
font-family: "${config.secondLineFont}"${FALLBACK_FONTS};
|
||||
font-size: ${config.secondLineFontSize}px !important;
|
||||
@ -243,17 +240,18 @@ yt-live-chat-paid-message-renderer {
|
||||
margin: 4px 0 !important;
|
||||
}
|
||||
|
||||
yt-live-chat-legacy-paid-message-renderer #card {
|
||||
yt-live-chat-membership-item-renderer #card,
|
||||
yt-live-chat-membership-item-renderer #header {
|
||||
${getShowNewMemberBgStyle(config)}
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer a,
|
||||
yt-live-chat-legacy-paid-message-renderer a {
|
||||
yt-live-chat-membership-item-renderer a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer[is-deleted],
|
||||
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
|
||||
yt-live-chat-membership-item-renderer[is-deleted] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@ -399,7 +397,8 @@ ${keyframes.join('\n')}
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer,
|
||||
yt-live-chat-legacy-paid-message-renderer {
|
||||
yt-live-chat-membership-item-renderer,
|
||||
yt-live-chat-paid-message-renderer {
|
||||
animation: anim ${totalTime}ms;
|
||||
animation-fill-mode: both;
|
||||
}`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user