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* diff --git a/README.md b/README.md index 7c34d926..2caf7038 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ ### 二、公共服务器 请优先在本地使用，使用公共服务器会有更大的弹幕延迟，而且服务器故障时可能发生直播事故 -* [第三方公共服务器](http://chat.bilisc.com/) +* [公共服务器](http://chat.bilisc.com/) * [仅样式生成器](https://style.vtbs.moe/) ### 三、源代码版（自建服务器或在Windows以外平台） diff --git a/api/chat.py b/api/chat.py index 9ea1ad77..b2d5df01 100644 --- a/api/chat.py +++ b/api/chat.py @@ -12,6 +12,7 @@ import aiohttp import tornado.websocket +import api.base import blivedm.blivedm as blivedm import config import models.avatar @@ -100,6 +101,10 @@ def __init__(self, room_id): self.clients: List['ChatHandler'] = [] self.auto_translate_count = 0 + async def init_room(self): + await super().init_room() + return True + def stop_and_close(self): if self.is_running: future = self.stop() @@ -246,13 +251,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 +291,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] = {} @@ -506,3 +517,92 @@ async def send_test_message(self): gift_data['totalCoin'] = 1245000 gift_data['giftName'] = '小电视飞船' self.send_message(Command.ADD_GIFT, gift_data) + + +# noinspection PyAbstractClass +class RoomInfoHandler(api.base.ApiHandler): + _host_server_list_cache = blivedm.DEFAULT_DANMAKU_SERVER_LIST + + async def get(self): + room_id = int(self.get_query_argument('roomId')) + logger.info('Client %s is getting room info %d', self.request.remote_ip, room_id) + room_id, owner_uid = await self._get_room_info(room_id) + host_server_list = await self._get_server_host_list(room_id) + if owner_uid == 0: + # 缓存3分钟 + self.set_header('Cache-Control', 'private, max-age=180') + else: + # 缓存1天 + self.set_header('Cache-Control', 'private, max-age=86400') + self.write({ + 'roomId': room_id, + 'ownerUid': owner_uid, + 'hostServerList': host_server_list + }) + + @staticmethod + async def _get_room_info(room_id): + try: + async with _http_session.get(blivedm.ROOM_INIT_URL, params={'room_id': room_id} + ) as res: + if res.status != 200: + logger.warning('room %d _get_room_info failed: %d %s', room_id, + res.status, res.reason) + return room_id, 0 + data = await res.json() + except aiohttp.ClientConnectionError: + logger.exception('room %d _get_room_info failed', room_id) + return room_id, 0 + + if data['code'] != 0: + logger.warning('room %d _get_room_info failed: %s', room_id, data['msg']) + return room_id, 0 + + room_info = data['data']['room_info'] + return room_info['room_id'], room_info['uid'] + + @classmethod + async def _get_server_host_list(cls, _room_id): + return cls._host_server_list_cache + + # 连接其他host必须要key + # try: + # async with _http_session.get(blivedm.DANMAKU_SERVER_CONF_URL, params={'id': room_id, 'type': 0} + # ) as res: + # if res.status != 200: + # logger.warning('room %d _get_server_host_list failed: %d %s', room_id, + # res.status, res.reason) + # return cls._host_server_list_cache + # data = await res.json() + # except aiohttp.ClientConnectionError: + # logger.exception('room %d _get_server_host_list failed', room_id) + # return cls._host_server_list_cache + # + # if data['code'] != 0: + # logger.warning('room %d _get_server_host_list failed: %s', room_id, data['msg']) + # return cls._host_server_list_cache + # + # host_server_list = data['data']['host_list'] + # if not host_server_list: + # logger.warning('room %d _get_server_host_list failed: host_server_list is empty') + # return cls._host_server_list_cache + # + # cls._host_server_list_cache = host_server_list + # return host_server_list + + +# noinspection PyAbstractClass +class AvatarHandler(api.base.ApiHandler): + async def get(self): + uid = int(self.get_query_argument('uid')) + avatar_url = await models.avatar.get_avatar_url_or_none(uid) + if avatar_url is None: + avatar_url = models.avatar.DEFAULT_AVATAR_URL + # 缓存3分钟 + self.set_header('Cache-Control', 'private, max-age=180') + else: + # 缓存1天 + self.set_header('Cache-Control', 'private, max-age=86400') + self.write({ + 'avatarUrl': avatar_url + }) diff --git a/api/main.py b/api/main.py index a24ef521..114a340d 100644 --- a/api/main.py +++ b/api/main.py @@ -7,6 +7,7 @@ import update +# noinspection PyAbstractClass class MainHandler(tornado.web.StaticFileHandler): """为了使用Vue Router的history模式，把不存在的文件请求转发到index.html""" async def get(self, path, include_body=True): diff --git a/blivedm b/blivedm index 4c64c1bd..31561420 160000 --- a/blivedm +++ b/blivedm @@ -1 +1 @@ -Subproject commit 4c64c1bd1e9fe634894d7b781eab1fef0e753907 +Subproject commit 3156142011c31343fb8acc0c14233c2b7ae0070f diff --git a/frontend/package.json b/frontend/package.json index 78ee6fbf..d5ad3f59 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,6 +13,7 @@ "downloadjs": "^1.4.7", "element-ui": "^2.9.1", "lodash": "^4.17.19", + "pako": "^1.0.11", "vue": "^2.6.10", "vue-i18n": "^8.11.2", "vue-router": "^3.0.6" diff --git a/frontend/src/api/chat/ChatClientDirect.js b/frontend/src/api/chat/ChatClientDirect.js new file mode 100644 index 00000000..d3930af2 --- /dev/null +++ b/frontend/src/api/chat/ChatClientDirect.js @@ -0,0 +1,343 @@ +import axios from 'axios' +import {inflate} from 'pako' + +import {getUuid4Hex} from '@/utils' +import * as avatar from './avatar' + +const HEADER_SIZE = 16 + +// const WS_BODY_PROTOCOL_VERSION_NORMAL = 0 +// const WS_BODY_PROTOCOL_VERSION_INT = 1 // 用于心跳包 +const WS_BODY_PROTOCOL_VERSION_DEFLATE = 2 + +// const OP_HANDSHAKE = 0 +// const OP_HANDSHAKE_REPLY = 1 +const OP_HEARTBEAT = 2 +const OP_HEARTBEAT_REPLY = 3 +// const OP_SEND_MSG = 4 +const OP_SEND_MSG_REPLY = 5 +// const OP_DISCONNECT_REPLY = 6 +const OP_AUTH = 7 +const OP_AUTH_REPLY = 8 +// const OP_RAW = 9 +// const OP_PROTO_READY = 10 +// const OP_PROTO_FINISH = 11 +// const OP_CHANGE_ROOM = 12 +// const OP_CHANGE_ROOM_REPLY = 13 +// const OP_REGISTER = 14 +// const OP_REGISTER_REPLY = 15 +// const OP_UNREGISTER = 16 +// const OP_UNREGISTER_REPLY = 17 +// B站业务自定义OP +// const MinBusinessOp = 1000 +// const MaxBusinessOp = 10000 + +let textEncoder = new TextEncoder() +let textDecoder = new TextDecoder() + +export default class ChatClientDirect { + constructor (roomId) { + // 调用initRoom后初始化，如果失败，使用这里的默认值 + this.roomId = roomId + this.roomOwnerUid = 0 + this.hostServerList = [ + {host: "broadcastlv.chat.bilibili.com", port: 2243, wss_port: 443, ws_port: 2244} + ] + + this.onAddText = null + this.onAddGift = null + this.onAddMember = null + this.onAddSuperChat = null + this.onDelSuperChat = null + this.onUpdateTranslation = null + + this.websocket = null + this.retryCount = 0 + this.isDestroying = false + this.heartbeatTimerId = null + } + + async start () { + await this.initRoom() + this.wsConnect() + } + + stop () { + this.isDestroying = true + if (this.websocket) { + this.websocket.close() + } + } + + async initRoom () { + let res + try { + res = (await axios.get('/api/room_info', {params: { + roomId: this.roomId + }})).data + } catch { + return + } + this.roomId = res.roomId + this.roomOwnerUid = res.ownerUid + if (res.hostServerList.length !== 0) { + this.hostServerList = res.hostServerList + } + } + + makePacket (data, operation) { + let body = textEncoder.encode(JSON.stringify(data)) + let header = new ArrayBuffer(HEADER_SIZE) + let headerView = new DataView(header) + headerView.setUint32(0, HEADER_SIZE + body.byteLength) // pack_len + headerView.setUint16(4, HEADER_SIZE) // raw_header_size + headerView.setUint16(6, 1) // ver + headerView.setUint32(8, operation) // operation + headerView.setUint32(12, 1) // seq_id + return new Blob([header, body]) + } + + sendAuth () { + let authParams = { + uid: 0, + roomid: this.roomId, + protover: 2, + platform: 'web', + clientver: '1.14.3', + type: 2 + } + this.websocket.send(this.makePacket(authParams, OP_AUTH)) + } + + wsConnect () { + if (this.isDestroying) { + return + } + let hostServer = this.hostServerList[this.retryCount % this.hostServerList.length] + const url = `wss://${hostServer.host}:${hostServer.wss_port}/sub` + this.websocket = new WebSocket(url) + this.websocket.binaryType = 'arraybuffer' + this.websocket.onopen = this.onWsOpen.bind(this) + this.websocket.onclose = this.onWsClose.bind(this) + this.websocket.onmessage = this.onWsMessage.bind(this) + this.heartbeatTimerId = window.setInterval(this.sendHeartbeat.bind(this), 10 * 1000) + } + + sendHeartbeat () { + this.websocket.send(this.makePacket({}, OP_HEARTBEAT)) + } + + onWsOpen () { + this.sendAuth() + } + + onWsClose () { + this.websocket = null + if (this.heartbeatTimerId) { + window.clearInterval(this.heartbeatTimerId) + this.heartbeatTimerId = null + } + if (this.isDestroying) { + return + } + window.console.log(`掉线重连中${++this.retryCount}`) + window.setTimeout(this.wsConnect.bind(this), 1000) + } + + onWsMessage (event) { + this.retryCount = 0 + if (!(event.data instanceof ArrayBuffer)) { + window.console.warn('未知的websocket消息：', event.data) + return + } + let data = new Uint8Array(event.data) + this.handlerMessage(data) + } + + handlerMessage (data) { + let offset = 0 + while (offset < data.byteLength) { + let dataView = new DataView(data.buffer, offset) + let packLen = dataView.getUint32(0) + // let rawHeaderSize = dataView.getUint16(4) + let ver = dataView.getUint16(6) + let operation = dataView.getUint32(8) + // let seqId = dataView.getUint32(12) + + switch (operation) { + case OP_HEARTBEAT_REPLY: { + // 人气值没用 + break + } + case OP_SEND_MSG_REPLY: { + let body = new Uint8Array(data.buffer, offset + HEADER_SIZE, packLen - HEADER_SIZE) + if (ver == WS_BODY_PROTOCOL_VERSION_DEFLATE) { + body = inflate(body) + this.handlerMessage(body) + } else { + try { + body = JSON.parse(textDecoder.decode(body)) + this.handlerCommand(body) + } catch (e) { + window.console.warn('body:', body) + throw e + } + } + break + } + case OP_AUTH_REPLY: { + this.sendHeartbeat() + break + } + default: { + let body = new Uint8Array(data.buffer, offset + HEADER_SIZE, packLen - HEADER_SIZE) + window.console.warn('未知包类型：operation=', operation, body) + break + } + } + + offset += packLen + } + } + + handlerCommand (command) { + if (command instanceof Array) { + for (let oneCommand of command) { + this.handlerCommand(oneCommand) + } + return + } + + let cmd = command.cmd || '' + let pos = cmd.indexOf(':') + if (pos != -1) { + cmd = cmd.substr(0, pos) + } + let handler = COMMAND_HANDLERS[cmd] + if (handler) { + handler.call(this, command) + } + } + + async onReceiveDanmaku (command) { + if (!this.onAddText) { + return + } + let info = command.info + + let roomId, medalLevel + if (info[3]) { + roomId = info[3][3] + medalLevel = info[3][0] + } else { + roomId = medalLevel = 0 + } + + let uid = info[2][0] + let isAdmin = info[2][2] + let privilegeType = info[7] + let authorType + if (uid === this.roomOwnerUid) { + authorType = 3 + } else if (isAdmin) { + authorType = 2 + } else if (privilegeType !== 0) { + authorType = 1 + } else { + authorType = 0 + } + + let urank = info[2][5] + let data = { + avatarUrl: await avatar.getAvatarUrl(uid), + timestamp: info[0][4] / 1000, + authorName: info[2][1], + authorType: authorType, + content: info[1], + privilegeType: privilegeType, + isGiftDanmaku: !!info[0][9], + authorLevel: info[4][0], + isNewbie: urank < 10000, + isMobileVerified: !!info[2][6], + medalLevel: roomId === this.roomId ? medalLevel : 0, + id: getUuid4Hex(), + translation: '' + } + this.onAddText(data) + } + + onReceiveGift (command) { + if (!this.onAddGift) { + return + } + let data = command.data + if (data.coin_type !== 'gold') { // 丢人 + return + } + + data = { + id: getUuid4Hex(), + avatarUrl: avatar.processAvatarUrl(data.face), + timestamp: data.timestamp, + authorName: data.uname, + totalCoin: data.total_coin, + giftName: data.giftName, + num: data.num + } + this.onAddGift(data) + } + + async onBuyGuard (command) { + if (!this.onAddMember) { + return + } + + let data = command.data + data = { + id: getUuid4Hex(), + avatarUrl: await avatar.getAvatarUrl(data.uid), + timestamp: data.start_time, + authorName: data.username, + privilegeType: data.guard_level + } + this.onAddMember(data) + } + + onSuperChat (command) { + if (!this.onAddSuperChat) { + return + } + + let data = command.data + data = { + id: data.id.toString(), + avatarUrl: avatar.processAvatarUrl(data.user_info.face), + timestamp: data.start_time, + authorName: data.user_info.uname, + price: data.price, + content: data.message, + translation: '' + } + this.onAddSuperChat(data) + } + + onSuperChatDelete (command) { + if (!this.onDelSuperChat) { + return + } + + let ids = [] + for (let id of command.data.ids) { + ids.push(id.toString()) + } + this.onDelSuperChat({ids}) + } +} + +const COMMAND_HANDLERS = { + DANMU_MSG: ChatClientDirect.prototype.onReceiveDanmaku, + SEND_GIFT: ChatClientDirect.prototype.onReceiveGift, + GUARD_BUY: ChatClientDirect.prototype.onBuyGuard, + SUPER_CHAT_MESSAGE: ChatClientDirect.prototype.onSuperChat, + SUPER_CHAT_MESSAGE_DELETE: ChatClientDirect.prototype.onSuperChatDelete +} diff --git a/frontend/src/api/chat/ChatClientRelay.js b/frontend/src/api/chat/ChatClientRelay.js new file mode 100644 index 00000000..b16c7267 --- /dev/null +++ b/frontend/src/api/chat/ChatClientRelay.js @@ -0,0 +1,148 @@ +const COMMAND_HEARTBEAT = 0 +const COMMAND_JOIN_ROOM = 1 +const COMMAND_ADD_TEXT = 2 +const COMMAND_ADD_GIFT = 3 +const COMMAND_ADD_MEMBER = 4 +const COMMAND_ADD_SUPER_CHAT = 5 +const COMMAND_DEL_SUPER_CHAT = 6 +const COMMAND_UPDATE_TRANSLATION = 7 + +export default class ChatClientRelay { + constructor (roomId, autoTranslate) { + this.roomId = roomId + this.autoTranslate = autoTranslate + + this.onAddText = null + this.onAddGift = null + this.onAddMember = null + this.onAddSuperChat = null + this.onDelSuperChat = null + this.onUpdateTranslation = null + + this.websocket = null + this.retryCount = 0 + this.isDestroying = false + this.heartbeatTimerId = null + } + + start () { + this.wsConnect() + } + + stop () { + this.isDestroying = true + if (this.websocket) { + this.websocket.close() + } + } + + wsConnect () { + if (this.isDestroying) { + return + } + const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws' + // 开发时使用localhost:12450 + const host = process.env.NODE_ENV === 'development' ? 'localhost:12450' : window.location.host + const url = `${protocol}://${host}/api/chat` + this.websocket = new WebSocket(url) + this.websocket.onopen = this.onWsOpen.bind(this) + this.websocket.onclose = this.onWsClose.bind(this) + this.websocket.onmessage = this.onWsMessage.bind(this) + this.heartbeatTimerId = window.setInterval(this.sendHeartbeat.bind(this), 10 * 1000) + } + + sendHeartbeat () { + this.websocket.send(JSON.stringify({ + cmd: COMMAND_HEARTBEAT + })) + } + + onWsOpen () { + this.retryCount = 0 + this.websocket.send(JSON.stringify({ + cmd: COMMAND_JOIN_ROOM, + data: { + roomId: this.roomId, + config: { + autoTranslate: this.autoTranslate + } + } + })) + } + + onWsClose () { + this.websocket = null + if (this.heartbeatTimerId) { + window.clearInterval(this.heartbeatTimerId) + this.heartbeatTimerId = null + } + if (this.isDestroying) { + return + } + window.console.log(`掉线重连中${++this.retryCount}`) + window.setTimeout(this.wsConnect.bind(this), 1000) + } + + onWsMessage (event) { + let {cmd, data} = JSON.parse(event.data) + switch (cmd) { + case COMMAND_ADD_TEXT: { + if (!this.onAddText) { + break + } + data = { + avatarUrl: data[0], + timestamp: data[1], + authorName: data[2], + authorType: data[3], + content: data[4], + privilegeType: data[5], + isGiftDanmaku: !!data[6], + authorLevel: data[7], + isNewbie: !!data[8], + isMobileVerified: !!data[9], + medalLevel: data[10], + id: data[11], + translation: data[12] + } + this.onAddText(data) + break + } + case COMMAND_ADD_GIFT: { + if (this.onAddGift) { + this.onAddGift(data) + } + break + } + case COMMAND_ADD_MEMBER: { + if (this.onAddMember) { + this.onAddMember(data) + } + break + } + case COMMAND_ADD_SUPER_CHAT: { + if (this.onAddSuperChat) { + this.onAddSuperChat(data) + } + break + } + case COMMAND_DEL_SUPER_CHAT: { + if (this.onDelSuperChat) { + this.onDelSuperChat(data) + } + break + } + case COMMAND_UPDATE_TRANSLATION: { + if (!this.onUpdateTranslation) { + break + } + data = { + id: data[0], + translation: data[1] + } + this.onUpdateTranslation(data) + break + } + } + } +} diff --git a/frontend/src/api/chat/avatar.js b/frontend/src/api/chat/avatar.js new file mode 100644 index 00000000..2de484ad --- /dev/null +++ b/frontend/src/api/chat/avatar.js @@ -0,0 +1,28 @@ +import axios from 'axios' + +export const DEFAULT_AVATAR_URL = '//static.hdslb.com/images/member/noface.gif' + +export function processAvatarUrl (avatarUrl) { + // 去掉协议，兼容HTTP、HTTPS + let m = avatarUrl.match(/(?:https?:)?(.*)/) + if (m) { + avatarUrl = m[1] + } + // 缩小图片加快传输 + if (!avatarUrl.endsWith('noface.gif')) { + avatarUrl += '@48w_48h' + } + return avatarUrl +} + +export async function getAvatarUrl (uid) { + let res + try { + res = (await axios.get('/api/avatar_url', {params: { + uid: uid + }})).data + } catch { + return DEFAULT_AVATAR_URL + } + return res.avatarUrl +} diff --git a/frontend/src/api/config.js b/frontend/src/api/chatConfig.js similarity index 95% rename from frontend/src/api/config.js rename to frontend/src/api/chatConfig.js index a4a44a2b..05ad65aa 100644 --- a/frontend/src/api/config.js +++ b/frontend/src/api/chatConfig.js @@ -17,6 +17,7 @@ export const DEFAULT_CONFIG = { blockUsers: '', blockMedalLevel: 0, + relayMessagesByServer: false, autoTranslate: false } 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..f5c1368a 100644 --- a/frontend/src/components/ChatRenderer/ImgShadow.vue +++ b/frontend/src/components/ChatRenderer/ImgShadow.vue @@ -1,88 +1,37 @@ - - + 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..892a13bc 100644 --- a/frontend/src/components/ChatRenderer/PaidMessage.vue +++ b/frontend/src/components/ChatRenderer/PaidMessage.vue @@ -62,384 +62,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..93f45381 100644 --- a/frontend/src/components/ChatRenderer/Ticker.vue +++ b/frontend/src/components/ChatRenderer/Ticker.vue @@ -1,28 +1,24 @@ - - - - - + + diff --git a/frontend/src/components/ChatRenderer/index.vue b/frontend/src/components/ChatRenderer/index.vue index 34674336..29625805 100644 --- a/frontend/src/components/ChatRenderer/index.vue +++ b/frontend/src/components/ChatRenderer/index.vue @@ -2,9 +2,7 @@ - +
@@ -42,7 +40,7 @@ - - - - - - - - - - - - - + + + diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 7813c4cb..0deee603 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -31,7 +31,8 @@ export default { blockMedalLevel: 'Block medal level lower than', advanced: 'Advanced', - autoTranslate: 'Auto translate messages to Japanese', + relayMessagesByServer: 'Relay messages by server', + autoTranslate: 'Auto translate messages to Japanese (requires relay messages by server)', roomUrl: 'Room URL', copy: 'Copy', diff --git a/frontend/src/lang/ja.js b/frontend/src/lang/ja.js index fcadfb6c..e3198b83 100644 --- a/frontend/src/lang/ja.js +++ b/frontend/src/lang/ja.js @@ -31,7 +31,8 @@ export default { blockMedalLevel: 'ブロック勲章等級がx未満', advanced: 'アドバンスド', - autoTranslate: '自動翻訳コメントから日本語へ', + relayMessagesByServer: 'サーバを介してメッセージを転送する', + autoTranslate: 'コメントを日本語に翻訳する（サーバを介してメッセージを転送する必要）', roomUrl: 'ルームのURL', copy: 'コピー', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 819d87bb..39839961 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -31,7 +31,8 @@ export default { blockMedalLevel: '屏蔽当前直播间勋章等级低于', advanced: '高级', - autoTranslate: '自动翻译弹幕到日语', + relayMessagesByServer: '通过服务器转发消息', + autoTranslate: '自动翻译弹幕到日语（需要通过服务器转发消息）', roomUrl: '房间URL', copy: '复制', diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue index 153c22a9..65c4d7ae 100644 --- a/frontend/src/layout/index.vue +++ b/frontend/src/layout/index.vue @@ -9,7 +9,7 @@
- v1.4.5 + v1.5.0
@@ -53,7 +53,7 @@ export default {