From c66a47c3e50a141c4da7c9a55e57bdfa67cd455c Mon Sep 17 00:00:00 2001 From: John Smith Date: Sat, 12 Sep 2020 10:51:29 +0800 Subject: [PATCH 01/12] =?UTF-8?q?git=E5=BF=BD=E7=95=A5=E6=97=A5=E5=BF=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 4d3c09a4..a34edba4 100644 --- a/.gitignore +++ b/.gitignore @@ -106,3 +106,4 @@ venv.bak/ .idea/ data/database.db +*.log* From 3808609963bc54f87d18541866550ea3807fb2aa Mon Sep 17 00:00:00 2001 From: John Smith Date: Sat, 12 Sep 2020 11:33:11 +0800 Subject: [PATCH 02/12] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=BA=93=E5=A4=B4?= =?UTF-8?q?=E5=83=8FURL=E7=B1=BB=E5=9E=8B=E6=94=B9=E6=88=90VARCHAR?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/chat.py | 16 +++++++++++----- models/avatar.py | 2 +- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/api/chat.py b/api/chat.py index 9ea1ad77..50da1928 100644 --- a/api/chat.py +++ b/api/chat.py @@ -246,13 +246,10 @@ async def _translate_and_response(self, text, msg_id): return self.send_message_if( lambda client: client.auto_translate, - Command.UPDATE_TRANSLATION, - [ - # 0: id + Command.UPDATE_TRANSLATION, make_translation_message( msg_id, - # 1: translation translation - ] + ) ) @@ -289,6 +286,15 @@ def make_text_message(avatar_url, timestamp, author_name, author_type, content, ] +def make_translation_message(msg_id, translation): + return [ + # 0: id + msg_id, + # 1: translation + translation + ] + + class RoomManager: def __init__(self): self._rooms: Dict[int, Room] = {} diff --git a/models/avatar.py b/models/avatar.py index 6ca23cb4..5668343e 100644 --- a/models/avatar.py +++ b/models/avatar.py @@ -200,5 +200,5 @@ def _update_avatar_cache_in_database(user_id, avatar_url): class BilibiliUser(models.database.OrmBase): __tablename__ = 'bilibili_users' uid = sqlalchemy.Column(sqlalchemy.Integer, primary_key=True) - avatar_url = sqlalchemy.Column(sqlalchemy.Text) + avatar_url = sqlalchemy.Column(sqlalchemy.String(100)) update_time = sqlalchemy.Column(sqlalchemy.DateTime) From 2ec6096d4dfe6c289cdf0dd3147685a58c0d091f Mon Sep 17 00:00:00 2001 From: John Smith Date: Sat, 12 Sep 2020 15:50:16 +0800 Subject: [PATCH 03/12] =?UTF-8?q?=E6=8A=8AYouTube=E7=9A=84CSS=E7=A7=BB?= =?UTF-8?q?=E5=88=B0=E5=8D=95=E7=8B=AC=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/css/youtube/yt-html.css | 362 ++++++++ frontend/src/assets/css/youtube/yt-icon.css | 30 + .../src/assets/css/youtube/yt-img-shadow.css | 68 ++ .../yt-live-chat-author-badge-renderer.css | 36 + .../css/youtube/yt-live-chat-author-chip.css | 64 ++ .../yt-live-chat-item-list-renderer.css | 140 +++ .../yt-live-chat-membership-item-renderer.css | 360 ++++++++ .../yt-live-chat-paid-message-renderer.css | 378 ++++++++ .../css/youtube/yt-live-chat-renderer.css | 252 ++++++ .../yt-live-chat-text-message-renderer.css | 230 +++++ ...chat-ticker-paid-message-item-renderer.css | 80 ++ .../youtube/yt-live-chat-ticker-renderer.css | 65 ++ .../components/ChatRenderer/AuthorBadge.vue | 75 +- .../src/components/ChatRenderer/ImgShadow.vue | 72 +- .../ChatRenderer/MembershipItem.vue | 364 +------- .../components/ChatRenderer/PaidMessage.vue | 381 +------- .../components/ChatRenderer/TextMessage.vue | 303 +------ .../src/components/ChatRenderer/Ticker.vue | 154 +--- .../src/components/ChatRenderer/index.vue | 820 +----------------- frontend/src/layout/index.vue | 2 +- 20 files changed, 2078 insertions(+), 2158 deletions(-) create mode 100644 frontend/src/assets/css/youtube/yt-html.css create mode 100644 frontend/src/assets/css/youtube/yt-icon.css create mode 100644 frontend/src/assets/css/youtube/yt-img-shadow.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-author-badge-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-author-chip.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-item-list-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-membership-item-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-paid-message-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-text-message-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-ticker-paid-message-item-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css diff --git a/frontend/src/assets/css/youtube/yt-html.css b/frontend/src/assets/css/youtube/yt-html.css new file mode 100644 index 00000000..75dc6fce --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-html.css @@ -0,0 +1,362 @@ +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; +} + +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; + ; +} diff --git a/frontend/src/assets/css/youtube/yt-icon.css b/frontend/src/assets/css/youtube/yt-icon.css new file mode 100644 index 00000000..c21acf27 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-icon.css @@ -0,0 +1,30 @@ +canvas.yt-icon, caption.yt-icon, center.yt-icon, cite.yt-icon, code.yt-icon, dd.yt-icon, del.yt-icon, dfn.yt-icon, div.yt-icon, dl.yt-icon, dt.yt-icon, em.yt-icon, embed.yt-icon, fieldset.yt-icon, font.yt-icon, form.yt-icon, h1.yt-icon, h2.yt-icon, h3.yt-icon, h4.yt-icon, h5.yt-icon, h6.yt-icon, hr.yt-icon, i.yt-icon, iframe.yt-icon, img.yt-icon, ins.yt-icon, kbd.yt-icon, label.yt-icon, legend.yt-icon, li.yt-icon, menu.yt-icon, object.yt-icon, ol.yt-icon, p.yt-icon, pre.yt-icon, q.yt-icon, s.yt-icon, samp.yt-icon, small.yt-icon, span.yt-icon, strike.yt-icon, strong.yt-icon, sub.yt-icon, sup.yt-icon, table.yt-icon, tbody.yt-icon, td.yt-icon, tfoot.yt-icon, th.yt-icon, thead.yt-icon, tr.yt-icon, tt.yt-icon, u.yt-icon, ul.yt-icon, var.yt-icon { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-icon[hidden] { + display: none !important; +} + +yt-icon, .yt-icon-container.yt-icon { + 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; + position: relative; + vertical-align: middle; + fill: currentcolor; + stroke: none; + width: var(--iron-icon-width, 24px); + height: var(--iron-icon-height, 24px); +} + +yt-icon.external-container { + display: none !important; +} diff --git a/frontend/src/assets/css/youtube/yt-img-shadow.css b/frontend/src/assets/css/youtube/yt-img-shadow.css new file mode 100644 index 00000000..e4ea828e --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-img-shadow.css @@ -0,0 +1,68 @@ +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; +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-author-badge-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-author-badge-renderer.css new file mode 100644 index 00000000..9a0b8409 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-author-badge-renderer.css @@ -0,0 +1,36 @@ +canvas.yt-live-chat-author-badge-renderer, caption.yt-live-chat-author-badge-renderer, center.yt-live-chat-author-badge-renderer, cite.yt-live-chat-author-badge-renderer, code.yt-live-chat-author-badge-renderer, dd.yt-live-chat-author-badge-renderer, del.yt-live-chat-author-badge-renderer, dfn.yt-live-chat-author-badge-renderer, div.yt-live-chat-author-badge-renderer, dl.yt-live-chat-author-badge-renderer, dt.yt-live-chat-author-badge-renderer, em.yt-live-chat-author-badge-renderer, embed.yt-live-chat-author-badge-renderer, fieldset.yt-live-chat-author-badge-renderer, font.yt-live-chat-author-badge-renderer, form.yt-live-chat-author-badge-renderer, h1.yt-live-chat-author-badge-renderer, h2.yt-live-chat-author-badge-renderer, h3.yt-live-chat-author-badge-renderer, h4.yt-live-chat-author-badge-renderer, h5.yt-live-chat-author-badge-renderer, h6.yt-live-chat-author-badge-renderer, hr.yt-live-chat-author-badge-renderer, i.yt-live-chat-author-badge-renderer, iframe.yt-live-chat-author-badge-renderer, img.yt-live-chat-author-badge-renderer, ins.yt-live-chat-author-badge-renderer, kbd.yt-live-chat-author-badge-renderer, label.yt-live-chat-author-badge-renderer, legend.yt-live-chat-author-badge-renderer, li.yt-live-chat-author-badge-renderer, menu.yt-live-chat-author-badge-renderer, object.yt-live-chat-author-badge-renderer, ol.yt-live-chat-author-badge-renderer, p.yt-live-chat-author-badge-renderer, pre.yt-live-chat-author-badge-renderer, q.yt-live-chat-author-badge-renderer, s.yt-live-chat-author-badge-renderer, samp.yt-live-chat-author-badge-renderer, small.yt-live-chat-author-badge-renderer, span.yt-live-chat-author-badge-renderer, strike.yt-live-chat-author-badge-renderer, strong.yt-live-chat-author-badge-renderer, sub.yt-live-chat-author-badge-renderer, sup.yt-live-chat-author-badge-renderer, table.yt-live-chat-author-badge-renderer, tbody.yt-live-chat-author-badge-renderer, td.yt-live-chat-author-badge-renderer, tfoot.yt-live-chat-author-badge-renderer, th.yt-live-chat-author-badge-renderer, thead.yt-live-chat-author-badge-renderer, tr.yt-live-chat-author-badge-renderer, tt.yt-live-chat-author-badge-renderer, u.yt-live-chat-author-badge-renderer, ul.yt-live-chat-author-badge-renderer, var.yt-live-chat-author-badge-renderer { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-live-chat-author-badge-renderer[hidden] { + display: none !important; +} + +yt-live-chat-author-badge-renderer { + display: inline-block; +} + +yt-live-chat-author-badge-renderer[type='moderator'] { + color: var(--yt-live-chat-moderator-color, #5e84f1); +} + +yt-live-chat-author-badge-renderer[type='owner'] { + color: var(--yt-live-chat-owner-color, #ffd600); +} + +yt-live-chat-author-badge-renderer[type='member'] { + color: var(--yt-live-chat-sponsor-color, #107516); +} + +yt-live-chat-author-badge-renderer[type='verified'] { + color: #999; +} + +img.yt-live-chat-author-badge-renderer, yt-icon.yt-live-chat-author-badge-renderer { + display: block; + width: 16px; + height: 16px; +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-author-chip.css b/frontend/src/assets/css/youtube/yt-live-chat-author-chip.css new file mode 100644 index 00000000..2ce7ed44 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-author-chip.css @@ -0,0 +1,64 @@ +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; +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-item-list-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-item-list-renderer.css new file mode 100644 index 00000000..7eaad8b4 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-item-list-renderer.css @@ -0,0 +1,140 @@ +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; +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-membership-item-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-membership-item-renderer.css new file mode 100644 index 00000000..3338121d --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-membership-item-renderer.css @@ -0,0 +1,360 @@ +#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%); +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-paid-message-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-paid-message-renderer.css new file mode 100644 index 00000000..00a6ce97 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-paid-message-renderer.css @@ -0,0 +1,378 @@ +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; +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-renderer.css new file mode 100644 index 00000000..5e805f6c --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-renderer.css @@ -0,0 +1,252 @@ +yt-live-chat-renderer, yt-live-chat-item-list-renderer #item-scroller { + height: 100%; +} + +yt-live-chat-renderer ::-webkit-scrollbar { + content: ''; +} + +yt-live-chat-renderer ::-webkit-scrollbar-thumb { + background-color: hsla(0, 0%, 53.3%, .2); + border: 2px solid #fcfcfc; + min-height: 30px; +} + +yt-live-chat-renderer ::-webkit-scrollbar-track { + background-color: #fcfcfc; +} + + +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); + } +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-text-message-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-text-message-renderer.css new file mode 100644 index 00000000..932f3fd6 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-text-message-renderer.css @@ -0,0 +1,230 @@ +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); +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-ticker-paid-message-item-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-ticker-paid-message-item-renderer.css new file mode 100644 index 00000000..4844b66c --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-ticker-paid-message-item-renderer.css @@ -0,0 +1,80 @@ +canvas.yt-live-chat-ticker-paid-message-item-renderer, caption.yt-live-chat-ticker-paid-message-item-renderer, center.yt-live-chat-ticker-paid-message-item-renderer, cite.yt-live-chat-ticker-paid-message-item-renderer, code.yt-live-chat-ticker-paid-message-item-renderer, dd.yt-live-chat-ticker-paid-message-item-renderer, del.yt-live-chat-ticker-paid-message-item-renderer, dfn.yt-live-chat-ticker-paid-message-item-renderer, div.yt-live-chat-ticker-paid-message-item-renderer, dl.yt-live-chat-ticker-paid-message-item-renderer, dt.yt-live-chat-ticker-paid-message-item-renderer, em.yt-live-chat-ticker-paid-message-item-renderer, embed.yt-live-chat-ticker-paid-message-item-renderer, fieldset.yt-live-chat-ticker-paid-message-item-renderer, font.yt-live-chat-ticker-paid-message-item-renderer, form.yt-live-chat-ticker-paid-message-item-renderer, h1.yt-live-chat-ticker-paid-message-item-renderer, h2.yt-live-chat-ticker-paid-message-item-renderer, h3.yt-live-chat-ticker-paid-message-item-renderer, h4.yt-live-chat-ticker-paid-message-item-renderer, h5.yt-live-chat-ticker-paid-message-item-renderer, h6.yt-live-chat-ticker-paid-message-item-renderer, hr.yt-live-chat-ticker-paid-message-item-renderer, i.yt-live-chat-ticker-paid-message-item-renderer, iframe.yt-live-chat-ticker-paid-message-item-renderer, img.yt-live-chat-ticker-paid-message-item-renderer, ins.yt-live-chat-ticker-paid-message-item-renderer, kbd.yt-live-chat-ticker-paid-message-item-renderer, label.yt-live-chat-ticker-paid-message-item-renderer, legend.yt-live-chat-ticker-paid-message-item-renderer, li.yt-live-chat-ticker-paid-message-item-renderer, menu.yt-live-chat-ticker-paid-message-item-renderer, object.yt-live-chat-ticker-paid-message-item-renderer, ol.yt-live-chat-ticker-paid-message-item-renderer, p.yt-live-chat-ticker-paid-message-item-renderer, pre.yt-live-chat-ticker-paid-message-item-renderer, q.yt-live-chat-ticker-paid-message-item-renderer, s.yt-live-chat-ticker-paid-message-item-renderer, samp.yt-live-chat-ticker-paid-message-item-renderer, small.yt-live-chat-ticker-paid-message-item-renderer, span.yt-live-chat-ticker-paid-message-item-renderer, strike.yt-live-chat-ticker-paid-message-item-renderer, strong.yt-live-chat-ticker-paid-message-item-renderer, sub.yt-live-chat-ticker-paid-message-item-renderer, sup.yt-live-chat-ticker-paid-message-item-renderer, table.yt-live-chat-ticker-paid-message-item-renderer, tbody.yt-live-chat-ticker-paid-message-item-renderer, td.yt-live-chat-ticker-paid-message-item-renderer, tfoot.yt-live-chat-ticker-paid-message-item-renderer, th.yt-live-chat-ticker-paid-message-item-renderer, thead.yt-live-chat-ticker-paid-message-item-renderer, tr.yt-live-chat-ticker-paid-message-item-renderer, tt.yt-live-chat-ticker-paid-message-item-renderer, u.yt-live-chat-ticker-paid-message-item-renderer, ul.yt-live-chat-ticker-paid-message-item-renderer, var.yt-live-chat-ticker-paid-message-item-renderer { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-live-chat-ticker-paid-message-item-renderer[hidden] { + display: none !important; +} + +canvas.yt-live-chat-ticker-paid-message-item-renderer, caption.yt-live-chat-ticker-paid-message-item-renderer, center.yt-live-chat-ticker-paid-message-item-renderer, cite.yt-live-chat-ticker-paid-message-item-renderer, code.yt-live-chat-ticker-paid-message-item-renderer, dd.yt-live-chat-ticker-paid-message-item-renderer, del.yt-live-chat-ticker-paid-message-item-renderer, dfn.yt-live-chat-ticker-paid-message-item-renderer, div.yt-live-chat-ticker-paid-message-item-renderer, dl.yt-live-chat-ticker-paid-message-item-renderer, dt.yt-live-chat-ticker-paid-message-item-renderer, em.yt-live-chat-ticker-paid-message-item-renderer, embed.yt-live-chat-ticker-paid-message-item-renderer, fieldset.yt-live-chat-ticker-paid-message-item-renderer, font.yt-live-chat-ticker-paid-message-item-renderer, form.yt-live-chat-ticker-paid-message-item-renderer, h1.yt-live-chat-ticker-paid-message-item-renderer, h2.yt-live-chat-ticker-paid-message-item-renderer, h3.yt-live-chat-ticker-paid-message-item-renderer, h4.yt-live-chat-ticker-paid-message-item-renderer, h5.yt-live-chat-ticker-paid-message-item-renderer, h6.yt-live-chat-ticker-paid-message-item-renderer, hr.yt-live-chat-ticker-paid-message-item-renderer, i.yt-live-chat-ticker-paid-message-item-renderer, iframe.yt-live-chat-ticker-paid-message-item-renderer, img.yt-live-chat-ticker-paid-message-item-renderer, ins.yt-live-chat-ticker-paid-message-item-renderer, kbd.yt-live-chat-ticker-paid-message-item-renderer, label.yt-live-chat-ticker-paid-message-item-renderer, legend.yt-live-chat-ticker-paid-message-item-renderer, li.yt-live-chat-ticker-paid-message-item-renderer, menu.yt-live-chat-ticker-paid-message-item-renderer, object.yt-live-chat-ticker-paid-message-item-renderer, ol.yt-live-chat-ticker-paid-message-item-renderer, p.yt-live-chat-ticker-paid-message-item-renderer, pre.yt-live-chat-ticker-paid-message-item-renderer, q.yt-live-chat-ticker-paid-message-item-renderer, s.yt-live-chat-ticker-paid-message-item-renderer, samp.yt-live-chat-ticker-paid-message-item-renderer, small.yt-live-chat-ticker-paid-message-item-renderer, span.yt-live-chat-ticker-paid-message-item-renderer, strike.yt-live-chat-ticker-paid-message-item-renderer, strong.yt-live-chat-ticker-paid-message-item-renderer, sub.yt-live-chat-ticker-paid-message-item-renderer, sup.yt-live-chat-ticker-paid-message-item-renderer, table.yt-live-chat-ticker-paid-message-item-renderer, tbody.yt-live-chat-ticker-paid-message-item-renderer, td.yt-live-chat-ticker-paid-message-item-renderer, tfoot.yt-live-chat-ticker-paid-message-item-renderer, th.yt-live-chat-ticker-paid-message-item-renderer, thead.yt-live-chat-ticker-paid-message-item-renderer, tr.yt-live-chat-ticker-paid-message-item-renderer, tt.yt-live-chat-ticker-paid-message-item-renderer, u.yt-live-chat-ticker-paid-message-item-renderer, ul.yt-live-chat-ticker-paid-message-item-renderer, var.yt-live-chat-ticker-paid-message-item-renderer { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-live-chat-ticker-paid-message-item-renderer[hidden] { + display: none !important; +} + +yt-live-chat-ticker-paid-message-item-renderer { + display: inline-block; + font-size: 14px; + outline: none; + transition: width 0.2s; + vertical-align: top; + cursor: pointer; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; +} + +#container.yt-live-chat-ticker-paid-message-item-renderer { + border-radius: 999px; + padding: 4px; +} + +yt-live-chat-ticker-paid-message-item-renderer.sliding-down #container.yt-live-chat-ticker-paid-message-item-renderer { + opacity: 0.5; + transform: translateY(44px); + transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0.0, 1, 1); +} + +yt-live-chat-ticker-paid-message-item-renderer.collapsing { + margin-right: 0; + transition: margin-right 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0.0, 0.2, 1); +} + +yt-live-chat-ticker-paid-message-item-renderer[dimmed] { + opacity: 0.5; +} + +yt-img-shadow.yt-live-chat-ticker-paid-message-item-renderer { + margin-right: -4px; + overflow: hidden; + border-radius: 50%; +} + +#content.yt-live-chat-ticker-paid-message-item-renderer { + height: 24px; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} + +#text.yt-live-chat-ticker-paid-message-item-renderer { + margin: 0 8px; + font-weight: 500; +} + +yt-live-chat-ticker-paid-message-item-renderer[is-deleted] #author-photo.yt-live-chat-ticker-paid-message-item-renderer { + display: none; +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css new file mode 100644 index 00000000..029720d1 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css @@ -0,0 +1,65 @@ +canvas.yt-live-chat-ticker-renderer, caption.yt-live-chat-ticker-renderer, center.yt-live-chat-ticker-renderer, cite.yt-live-chat-ticker-renderer, code.yt-live-chat-ticker-renderer, dd.yt-live-chat-ticker-renderer, del.yt-live-chat-ticker-renderer, dfn.yt-live-chat-ticker-renderer, div.yt-live-chat-ticker-renderer, dl.yt-live-chat-ticker-renderer, dt.yt-live-chat-ticker-renderer, em.yt-live-chat-ticker-renderer, embed.yt-live-chat-ticker-renderer, fieldset.yt-live-chat-ticker-renderer, font.yt-live-chat-ticker-renderer, form.yt-live-chat-ticker-renderer, h1.yt-live-chat-ticker-renderer, h2.yt-live-chat-ticker-renderer, h3.yt-live-chat-ticker-renderer, h4.yt-live-chat-ticker-renderer, h5.yt-live-chat-ticker-renderer, h6.yt-live-chat-ticker-renderer, hr.yt-live-chat-ticker-renderer, i.yt-live-chat-ticker-renderer, iframe.yt-live-chat-ticker-renderer, img.yt-live-chat-ticker-renderer, ins.yt-live-chat-ticker-renderer, kbd.yt-live-chat-ticker-renderer, label.yt-live-chat-ticker-renderer, legend.yt-live-chat-ticker-renderer, li.yt-live-chat-ticker-renderer, menu.yt-live-chat-ticker-renderer, object.yt-live-chat-ticker-renderer, ol.yt-live-chat-ticker-renderer, p.yt-live-chat-ticker-renderer, pre.yt-live-chat-ticker-renderer, q.yt-live-chat-ticker-renderer, s.yt-live-chat-ticker-renderer, samp.yt-live-chat-ticker-renderer, small.yt-live-chat-ticker-renderer, span.yt-live-chat-ticker-renderer, strike.yt-live-chat-ticker-renderer, strong.yt-live-chat-ticker-renderer, sub.yt-live-chat-ticker-renderer, sup.yt-live-chat-ticker-renderer, table.yt-live-chat-ticker-renderer, tbody.yt-live-chat-ticker-renderer, td.yt-live-chat-ticker-renderer, tfoot.yt-live-chat-ticker-renderer, th.yt-live-chat-ticker-renderer, thead.yt-live-chat-ticker-renderer, tr.yt-live-chat-ticker-renderer, tt.yt-live-chat-ticker-renderer, u.yt-live-chat-ticker-renderer, ul.yt-live-chat-ticker-renderer, var.yt-live-chat-ticker-renderer { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-live-chat-ticker-renderer[hidden] { + display: none !important; +} + +yt-live-chat-ticker-renderer { + display: block; + background-color: var(--yt-live-chat-header-background-color); +} + +#container.yt-live-chat-ticker-renderer { + position: relative; +} + +#items.yt-live-chat-ticker-renderer { + height: 32px; + overflow: hidden; + white-space: nowrap; + padding: 0 24px 8px 24px; +} + +#items.yt-live-chat-ticker-renderer>*.yt-live-chat-ticker-renderer { + margin-right: 8px; +} + +#left-arrow-container.yt-live-chat-ticker-renderer { + background: linear-gradient(to right, var(--yt-live-chat-ticker-arrow-background) 0, var(--yt-live-chat-ticker-arrow-background) 52px, transparent 60px); + left: 0; + padding: 0 16px 0 12px; +} + +#right-arrow-container.yt-live-chat-ticker-renderer { + background: linear-gradient(to left, var(--yt-live-chat-ticker-arrow-background) 0, var(--yt-live-chat-ticker-arrow-background) 52px, transparent 60px); + right: 0; + padding: 0 12px 0 16px; +} + +#container.yt-live-chat-ticker-renderer:hover #left-arrow-container.yt-live-chat-ticker-renderer, #container.yt-live-chat-ticker-renderer:hover #right-arrow-container.yt-live-chat-ticker-renderer { + opacity: 1; +} + +#left-arrow-container.yt-live-chat-ticker-renderer, #right-arrow-container.yt-live-chat-ticker-renderer { + height: 32px; + opacity: 0; + position: absolute; + text-align: center; + top: 0; + transition: opacity 0.3s 0.1s; +} + +yt-icon.yt-live-chat-ticker-renderer { + background-color: #2196f3; + border-radius: 999px; + color: #fff; + cursor: pointer; + height: 24px; + padding: 4px; + width: 24px; +} diff --git a/frontend/src/components/ChatRenderer/AuthorBadge.vue b/frontend/src/components/ChatRenderer/AuthorBadge.vue index 840c0104..257b9c0d 100644 --- a/frontend/src/components/ChatRenderer/AuthorBadge.vue +++ b/frontend/src/components/ChatRenderer/AuthorBadge.vue @@ -46,76 +46,5 @@ export default { } - - - - - + + diff --git a/frontend/src/components/ChatRenderer/ImgShadow.vue b/frontend/src/components/ChatRenderer/ImgShadow.vue index 1060dd3a..10c2c327 100644 --- a/frontend/src/components/ChatRenderer/ImgShadow.vue +++ b/frontend/src/components/ChatRenderer/ImgShadow.vue @@ -15,74 +15,4 @@ export default { } - - + diff --git a/frontend/src/components/ChatRenderer/MembershipItem.vue b/frontend/src/components/ChatRenderer/MembershipItem.vue index 3bd5525e..5e3ad2e4 100644 --- a/frontend/src/components/ChatRenderer/MembershipItem.vue +++ b/frontend/src/components/ChatRenderer/MembershipItem.vue @@ -56,366 +56,4 @@ export default { } - - + diff --git a/frontend/src/components/ChatRenderer/PaidMessage.vue b/frontend/src/components/ChatRenderer/PaidMessage.vue index 4809d7d2..f445527a 100644 --- a/frontend/src/components/ChatRenderer/PaidMessage.vue +++ b/frontend/src/components/ChatRenderer/PaidMessage.vue @@ -63,383 +63,4 @@ export default { - + diff --git a/frontend/src/components/ChatRenderer/TextMessage.vue b/frontend/src/components/ChatRenderer/TextMessage.vue index 6d0ebd7c..5f3e8031 100644 --- a/frontend/src/components/ChatRenderer/TextMessage.vue +++ b/frontend/src/components/ChatRenderer/TextMessage.vue @@ -94,304 +94,5 @@ yt-live-chat-text-message-renderer>#content>#message>.el-badge .el-badge__conten } - - - - - + + diff --git a/frontend/src/components/ChatRenderer/Ticker.vue b/frontend/src/components/ChatRenderer/Ticker.vue index 0f8e4599..4913f70c 100644 --- a/frontend/src/components/ChatRenderer/Ticker.vue +++ b/frontend/src/components/ChatRenderer/Ticker.vue @@ -160,155 +160,5 @@ export default { } - - - - - + + diff --git a/frontend/src/components/ChatRenderer/index.vue b/frontend/src/components/ChatRenderer/index.vue index 34674336..213bbe3e 100644 --- a/frontend/src/components/ChatRenderer/index.vue +++ b/frontend/src/components/ChatRenderer/index.vue @@ -536,820 +536,6 @@ export default { } - - - - - - - - - - - - - + + + diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue index 153c22a9..4ff66043 100644 --- a/frontend/src/layout/index.vue +++ b/frontend/src/layout/index.vue @@ -53,7 +53,7 @@ export default { diff --git a/frontend/src/views/Room.vue b/frontend/src/views/Room.vue index f31c7d72..d285eafb 100644 --- a/frontend/src/views/Room.vue +++ b/frontend/src/views/Room.vue @@ -5,18 +5,10 @@ From adeba8f552821cbf11c219d12460f2023d103fbd Mon Sep 17 00:00:00 2001 From: John Smith Date: Sun, 11 Oct 2020 14:36:23 +0800 Subject: [PATCH 11/12] =?UTF-8?q?=E4=BC=98=E5=8C=96SC=E5=9B=BA=E5=AE=9A?= =?UTF-8?q?=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ChatRenderer/Ticker.vue | 93 ++++++++++--------- .../src/components/ChatRenderer/index.vue | 4 +- 2 files changed, 50 insertions(+), 47 deletions(-) diff --git a/frontend/src/components/ChatRenderer/Ticker.vue b/frontend/src/components/ChatRenderer/Ticker.vue index 7cbe8908..93f45381 100644 --- a/frontend/src/components/ChatRenderer/Ticker.vue +++ b/frontend/src/components/ChatRenderer/Ticker.vue @@ -1,28 +1,24 @@